[Anonymous]

Anonymous

#10456

Hi!

At first – sorry for my english.

Normally font in slider is just white, so it’s unreadable when on baskground is some bright picture.

My question is: how can I add some line around font in slider (without changing font in posts or upper/side panel)?

My site is: http://www.hajduk.info

[Kenneth John Odle]

Kenneth John Odle

#46180

You can add a text shadow to the .carousel .slide-title class, I believe:

.carousel .slide-title {

text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;

}

Will add a 2px white (#fff) shadow on all four sides to the slide title, with no fuzziness.

You need to use multiple text-shadow values to target all sides.

[Anonymous]

Anonymous

#46181

Kenneth – I’m very grateful for your help but I have one more ask for you.

Can you explain me how to do it step by step? Seriously, I’m noob in that stuff so I don’t wanna destroy all site by making something wrong.

[Kenneth John Odle]

Kenneth John Odle

#46182

You can copy and paste the above code in Franz Josef’s custom css option. It should work, once you save your options and refresh the page.

There is a good introduction to the text-shadow property here:

https://css-tricks.com/almanac/properties/t/text-shadow/

w3schools has a not-quite-as-good introduction, along with a sandbox you can experiment with here:

http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

You can also play around with a generator here:

http://css3gen.com/text-shadow/

(If you like what you come up with there, you can copy/paste the code from there quite easily, as well. There are a lot of other CSS3 things to play with there as well.)

[Anonymous]

Anonymous

#46183

Thank you Kenneth! You rock! Now it works 🙂

Do you also know which part od that style.css file should I change if I want to add shadow to text just below post title in slider (quote from the beginning of the post)?

Ex.

ARM HOLDINGS <– already have text-shadow

ARM Holdings, one of the UK’s biggest technology companies, is set to announce… <– already without text-shadow

[Read more button]

[Anonymous]

Anonymous

#46184

Ok, got it.

Quote:

.carousel .slide-title {

text-transform: uppercase;

font: bold 100px Montserrat, “Open Sans”, sans-serif;

font-size: 100px;

font-size: 5.2vw;

text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;

}

.carousel .excerpt {

font: 300 32px/54px ‘Open Sans’, sans-serif;

font-size: 32px;

font-size: 1.67vw;

line-height: 2.9vw;

text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;

}

That code set 1px black shadow on all four sides to the slide title and quote, with no fuzziness.

The topic is resolved 🙂