Dropcap color « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Broadscope

Dropcap color

7 posts from 3 voices

Started 1 year ago by thoddi
Latest reply from thoddi
This topic is closed
This topic is resolved

Tags:

thoddi
Member

Hi, I'd love to able to create three different colored, round shaped dropcaps. IS it possible to have something like;

[dropcap1]RED color[/dropcap1]
[dropcap2]GREEN color[/dropcap2]
[dropcap3]BLUE color[/dropcap3]

Posted 1 year ago #
Devin
Moderator
Hi thoddi,

Sure! The easiest way to do this would be to overwrite the current other dropcap styles.

Add the following style to your custom.css or Quick CSS and then modify to fit your needs:
```
.dropcap1 {
}
.dropcap2 {
}
.dropcap3 {
}
```
Posted 1 year ago #
thoddi
Member

Thanks. I notice that the shortcodes.css for this theme hasn't got any code about dropcaps but I found that the code for dropcaps is in the light-skin.css for this theme. So what I have done now is to add this code under here into the custom.css... But dropcap 1 looks a bit odd:-)

Could you please have a look and shed a little light on what I might do to fix it?
http://artmusicmoments.com/beta/

.dropcap2, .dropcap3{
background-image: url("../images/skin1/reverse-dropcap.png");
}

.dropcap3{
color:#fff;
background-color: #000;

}

.dropcap1{
background-image: url("../images/skin1/reverse-dropcap.png");

}

.dropcap1{
color:#fff;
background-color: #703b90;

}

.dropcap1, .dropcap2, .dropcap3, .pagination a, .pagination a:hover{
color:#fff;
}

Posted 1 year ago #
Dude
Dude
Hey!

Try to add following css code to css/custom.css:
```
.dropcap1 {
    font-size: 24px;
    text-align: center;
    width: 38px;
}
```
Best regards,
Peter
Posted 1 year ago #
thoddi
Member

Brilliant. I also removed the pagination as I just want to have the colored circles reflecting the logo symbols.

If you have a look now, you'll see a tiny line under dropcap 1... Any chance to get rid of that? If I reduce the width to 37px or less, the circle will be cut on the right side... If I go up to 40px there will be a similar line outside the circle on the right side.

http://artmusicmoments.com/beta/

Posted 1 year ago #
Devin
Moderator

Hey thoddi,

Add a height attribute to the dropcap with:
height: 38px;

so that it limits how tall the element is.

Posted 1 year ago #
thoddi
Member

Great. Works perfectly:-)

Thanks!

Posted 1 year ago #