Black outline around all characters - JA Simpli

Everything to do with Joomla! 3.x templates and templating.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Plientje
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Fri Dec 08, 2017 11:11 am

Black outline around all characters - JA Simpli

Postby Plientje » Sat Jan 06, 2018 8:10 pm

For better readabillity I'd like to have all characters (text, menu items) to automatically get a black outline, without changing the font color. I found this old post: https://css-tricks.com/adding-stroke-to-web-text/

How to get his to work ? Where do I add the css code ? What else to do ? Is this even still valid, being a 2010 post ? Is there a better option ? I could not really find a whole lot on the subject.

I tried adding it to custom.css already, to no avail.

Website: cascadeyoga.eu

User avatar
effrit
Joomla! Guru
Joomla! Guru
Posts: 522
Joined: Sun Nov 12, 2017 2:21 pm
Location: middle of Russia
Contact:

Re: Black outline around all characters - JA Simpli

Postby effrit » Sat Jan 06, 2018 8:26 pm

Code: Select all

body{
    text-shadow: 1px 1px 0 #000, 0px 0px 0 #000, -1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000 !important;
}

User avatar
sozzled
Joomla! Virtuoso
Joomla! Virtuoso
Posts: 4851
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Black outline around all characters - JA Simpli

Postby sozzled » Sat Jan 06, 2018 8:42 pm

Plientje wrote:For better readability I'd like to have all characters (text, menu items) to automatically get a black outline, without changing the font color.
For better readability I would suggest removing the patterned background image but that's just my humble opinion.

Yes, you could use a combination of -webkit-text-stroke-color and -webkit-text-stroke-width styling in your CSS. Be careful what you ask for, though. 8)

Where do I add the CSS code? If you want use CSS to modify the characteristics of your menu items and other text, you would add those rules to the file ../templates/ja_simpli/css/custom.css. That is the answer to this question (and any other question involving changing the CSS for this specific template).

Where do I get this to work? If you want to use the technique explained in the article you found (dated in 2010) and apply this only to the menu you would have to add the following few lines of code to the end of your custom.css file, like this:

Code: Select all

ul.nav li a {
    -webkit-text-stroke-color: #000;
    -webkit-text-stroke-width: 0.1px;
}

If you want to extend this to include all the text on your site, you would use this code instead:

Code: Select all

body {
    -webkit-text-stroke-color: #000;
    -webkit-text-stroke-width: 0.1px;
}

I agree with @effrit that using text-shadow is better. The !important qualifier is unnecessary; !important should be avoided if possible.

For what it's worth, there's your answer but, to return to my first observation, I would remove the hard-on-the-eyes red/black background image. It gives me a headache.
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

Plientje
Joomla! Apprentice
Joomla! Apprentice
Posts: 14
Joined: Fri Dec 08, 2017 11:11 am

Re: Black outline around all characters - JA Simpli

Postby Plientje » Sun Jan 07, 2018 7:45 am

Somehow effrit's code did work, but left ugly openings to the outline and it was pretty thick. Could it be the ", 1px 1px 0 #000" at the end is obsolete ? That shadow is applied to start with and removing it made no difference at all to the result. Anyway, not quite satisfied with the result I tried some other code I found...

body{
color: #fff;
text-shadow: 1px 0 0 #000, 0 -1px 0 #000, 0 1px 0 #000, -1px 0 0 #000;
}

This gave me a better result. Smoother, less openings in the outline and way not as thick.

A big thanks to effrit and sozzled (wow, what an extensive answer) for putting me in the right direction. I took the advice and stayed away from webkit ("Be careful what you ask for, though. 8)"), cause I have no idea, lol. The headache inducing background stays however (at least for now) ;) My job is to optimize readability without sacrificing the background. Still, I might put some semi transparent background color on pages with a lot of text (after I figured out how).


Return to “Templates for Joomla! 3.x”

Who is online

Users browsing this forum: farang_1991 and 3 guests