Home › Forums › Franz Josef › Support
How to add a outline/contour font in slider?
-
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
Mod
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.
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.
Mod
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.)
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]
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 🙂
Viewing 6 posts - 1 through 6 (of 6 total)
- You must be logged in to reply to this topic.