CSS Template

Topic: CSS Template (Read 12004 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

Re: CSS Template

Reply #15 – March 23, 2014, 10:23:39 pm

I have not looked into how to create a theme (or variant) yet. I was simply using the custom.css option to progressively override more and more of the default _light theme.

As for editors I'm on linux not windows, but I have plenty of tools to search and edit text so that's not a problem.

Should I eliminate text shadows as well?

Re: CSS Template

Reply #16 – March 23, 2014, 10:26:12 pm

Yes, get rid of all shadows. It makes a huge difference for any of us that have vision issues. Shadows force our eyes to try to focus on something that we do not need to focus on. My theory is that I do not buy a book with text that is blurry or has shadows so I do not
want my forums to look the same.

Also, there is a good deal of gradiants in use, I have left those as I do not find them to be to bad. But if it has the words shadow in it, I would comment it out. I think there is something like 45 box-shadow in the index_light.css and 11 in the admin_light.css.

edit: I should add that you will want to look at all the files in the _light folder. There should be three .css files that you will want to edit and make any needed changes in.

Re: CSS Template

Reply #17 – March 23, 2014, 10:40:25 pm

Just be aware that some of the box-shadows aren't actually shadows. They're quite often used as a solid colour to provide an extra border or whatever. This gives extra versatility that you can't get with just a standard CSS border.

For instance, if you define a standard border, then add a solid colour of defined width as a normal (outside) box-shadow, and another as an inset box-shadow, you can get a triple border if you want to. Although these are technically box-shadows they can be done with no blur radius so they display as solid lines. It's a very handy CSS trick to have in your toolkit.

Re: CSS Template

Reply #18 – March 23, 2014, 10:52:25 pm

Yes I'm noticing that a lot of the box shadow effects are very subtle. But I have a local copy set up with them all removed and a copy with the original css.

Re: CSS Template

Reply #19 – March 23, 2014, 10:57:54 pm

Here's a (hopefully) simple question for you two if you don't mind. On a dark theme with a basic intent of white text on black background for the editor and main post text, my guess would be that accepted practice would not be to actually use #FFFFFF on #000000. Is that correct? And if so what would be a typical choice of off-white and off-black (inventing term?) for that?

Re: CSS Template

Reply #20 – March 23, 2014, 11:01:13 pm

Usually it'd be better to use something like #444 for the background, with text set to something probably not quite white (#eeeeee or whatever). There's a handy tool here if you want to check acceptable contrast levels: http://blackwidows.co.uk/resources/color-contrast-analyser.php

Speaking of dark themes, I had a hunt through my old posts here and found a screenshot of the one I was playing with ages ago. No idea if I still have the code, but could resurrect it easily enough.

http://www.elkarte.net/community/index.php?topic=328.msg2768#msg2768

Re: CSS Template

Reply #21 – March 23, 2014, 11:21:25 pm

Quote from: Antechinus – March 23, 2014, 10:40:25 pmJust be aware that some of the box-shadows aren't actually shadows. They're quite often used as a solid colour to provide an extra border or whatever. This gives extra versatility that you can't get with just a standard CSS border.

For instance, if you define a standard border, then add a solid colour of defined width as a normal (outside) box-shadow, and another as an inset box-shadow, you can get a triple border if you want to. Although these are technically box-shadows they can be done with no blur radius so they display as solid lines. It's a very handy CSS trick to have in your toolkit.

Thanks for that bit of knowledge. I had seen the 'inset' used but had not looked to see how it was being used. I will go back and look at those box-shadows with the 'inset' and play with them.

My theme is using pastel colors, mostly, so I am trying to balance crispness with the pastel. I have a pretty good eye for color ( I think I do anyway

) but still I am looking for a nice balance. What do you know about Kearning.js? Is it worthwhile? It is on my list of things to look into.

http://kerningjs.com/

Again, thanks for the 'inset' tip.

Re: CSS Template

Reply #22 – March 24, 2014, 12:04:31 am

I chose (before the test) #1f1f1f background with #cccccc as the foreground. The check site you linked to says Color Brightness: 173 and Color Difference: 519 which is says is ok by W3C standards.

For reference #444444 and #eeeeee scores Color Brightness: 170 and Color Difference: 510 so fairly similar according to that test.

I have been doing a fairly uninspired conversion of the default light theme to a dark theme with orange replacing the green and the light swapped to dark. I struggle with choosing shades of orange and gray for the button accents. I was just making the active button orange and the inactive buttons a darker gray which looked fine for me but choosing even darker accents on the dark gray buttons just made them disappear.

So that's when I started hoping there was a global replaceable set for like button accent that I could quickly try to swap everything out.

Re: CSS Template

Reply #23 – March 24, 2014, 12:49:10 am

The commenting in the CSS should make them fairly easy to find. The buttons and menus have their own sections. If there's any that stump you, I probably know the classes for them.

With the contrast, I usually aim for something around the 450 mark. IOW, halfway between W3 and Hewlett-Packard recommendations, since some people would find W3's recommendation hard to read too due to too much contrast (see the discussion about dyslexia, etc). Doing one stylesheet to suit everyone gets tricky. In reality the best you can hope for is that most people will find it usable and think it looks ok.

Re: CSS Template

Reply #24 – March 24, 2014, 12:52:48 am

Quote from: AaronB – March 23, 2014, 11:21:25 pmWhat do you know about Kearning.js? Is it worthwhile? It is on my list of things to look into.

http://kerningjs.com/

My 2c is that when you get to the stage of relying on javascript to do something as basic as displaying text, things are getting silly.

Re: CSS Template

Reply #25 – March 24, 2014, 01:14:23 am

It's not so much finding the classes. As you said the css is fairly readable. It's more a problem of picking colors. Thus my desire for an algorithmic replacement. Like rotate the color wheel or something. I fear that may not actually produce spectacular results though.

Re: CSS Template

Reply #26 – March 24, 2014, 01:18:45 am

Oh, I forgot to say if you have the code for your dark theme and can find it easily I would appreciate it as a reference. Since I plan to replace the green though it seems unfair to ask you to actually spend the time to recreate it.

Re: CSS Template

Reply #27 – March 24, 2014, 01:20:01 am

Oh I see that you mean. Sort of like an automatic palette generator. TBH I tend to ignore that sort of site. They're good for getting basic ideas, but attempting to stick with one generated palette in something as complex as a gui often doesn't work too well. I always end up looking at some part of it and thinking "Hey if I tweaked that bit like this....".

Quote from: scripple – March 24, 2014, 01:18:45 amOh, I forgot to say if you have the code for your dark theme and can find it easily I would appreciate it as a reference. Since I plan to replace the green though it seems unfair to ask you to actually spend the time to recreate it.

I'll take a look and see what I've got stashed, but it was a long time ago.

Re: CSS Template

Reply #28 – March 24, 2014, 01:38:04 am

Oh Aaron could you tell me what files need to be changed to create a new variant instead of modifying and existing one?

Re: CSS Template

Reply #29 – March 24, 2014, 01:51:59 am

Quote from: Antechinus – March 24, 2014, 01:20:01 amOh I see that you mean. Sort of like an automatic palette generator.

Yes. Or an algorithmic replacement for the green shades with another color. Which is where I was coming from when I started this. Good discussion though.

Quote TBH I tend to ignore that sort of site. They're good for getting basic ideas, but attempting to stick with one generated palette in something as complex as a gui often doesn't work too well. I always end up looking at some part of it and thinking "Hey if I tweaked that bit like this....".

I'm hoping to avoid obsessing over such things. GUIs to me are one of those things you can spend forever tweaking. And in the end no matter what you do someone will quickly tell you why they hate it.