Skip to main content
Topic: CSS Template (Read 11898 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

CSS Template

Do you guys happen to have a template for the default themes other than the .css file itself?   One what would allow variable substitution or the like for easy color changes?   I mean offline variable substitution, not actual css variables.

Re: CSS Template

Reply #1

You mean something like storing CSS values in the database like vB?
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: CSS Template

Reply #2

No in this case I literally meant just a file that I could substitute into offline.  I guess there are systems for doing this, but I'd happily take a text file with #color1 #color2 etc. (or any other naming scheme) that I could use almost any scripting language to do an easy substitution.

Re: CSS Template

Reply #3

Ah. No such thing. Why not just use the hex codes to do the substitutions? Standard find/replace stuff.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: CSS Template

Reply #4

Quote from: Antechinus – Ah. No such thing. Why not just use the hex codes to do the substitutions? Standard find/replace stuff.
Ultimately that's what I'll do.  But it would be nice to see where they all are.  I just thought I'd ask if they were designing the themes that way and thus had a nice file where I could see it was #button1, #button1_highlight, etc.

Re: CSS Template

Reply #5

But the problem with doing that is what if someone wants to use different presentation? All your defaults become inapplicable, so it's going to be a PITA to make such a file to start with, and it'll be of limited use for theming anyway, AFAICT.

I'm not even sure how you think such a file would be made. You're going to have to look things up anyway before you know what they are, so how is that different to checking hex codes or classes?
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: CSS Template

Reply #6

Hey relax.  This isn't an attack.  I figured if the theme were built that way it would be a nice file to have.  Since it wasn't built that way I'm not asking anyone to make it. 

And sure people might want to do all sorts of things.  Others like me would just like to start with a quick simple color change to the theme like replacing the green with another color.  Of course it's not as simple as replacing one green.  There are lots of greens.

I ran this on the css file for light. 

http://hex.corvidworks.com/

It shows me there are several colors I would feel safe collapsing into a single color.  So i can simplify the number of colors I have to choose and swap out.

Re: CSS Template

Reply #7

I didn't think it was an attack. I was just wondering how you thought it would be more useful than other methods. I can't see it myself.

ETA: The problem with "feeling safe collapsing several colours" is that you can't really tell how it will look until you do it. Font weight, font size, surrounding content and umpteen other factors can change how a colour looks in different elements. That's why they aren't all the same green. Put bluntly, if they were it wouldn't look as good. The way it was done was to start with the same colours, and then see what needed tweaking to make it look better.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: CSS Template

Reply #8

Makes sense.  And if I was highly skilled at choosing just the right color that might be important, but I'm not.  And on my and most people's uncalibrated monitor I don't think I'll ever notice the difference between 38642e and 38642d.  Honestly zooming in on divs of those two colors and 3a642d there simply is no appreciable difference on my monitor.

And on my phone all the colors are different of course.  It's a SAMOLED display.  It's blue weighted.  That's because the blue has the shortest life.  So over time it will go from blue weighted to blue deficient.

So as an amateur making a site for a small group of people I feel perfectly ok simplifying the color scheme.

Re: CSS Template

Reply #9

Ok. Up to you. I can see the difference on my monitor (obviously).
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: CSS Template

Reply #10

And assuming you work with color, that's a good thing.  :)

Re: CSS Template

Reply #11

Hi Scripple,

I seem to recall you mentioned somewhere else eye site issues, is that correct? If so, you probably are keeping in mind the type of color and clarity.

I am not a themer or expert at all with CSS but I can muck around a bit in it. With the current _light theme you can easily use some flat colors but you should also consider removing the box-shadows if clarity is what you are after.

There is no simple fast way to make the changes but FireFox and Firebug go a long way to finding where you want to change the colors and what the colors are.

Re: CSS Template

Reply #12

Yeah I have issues which make certain fonts difficult to read at times.  Fortunately most of the shadows and such are on buttons which aren't that big of a deal as they're static content.  But I have noticed some on headers and such which you're right should probably go.  Honestly it would be nice if I knew more about best practices for all of this stuff, but then I've seen my share of pages that claimed to be the ultimate in readability that for me at least  were certainly not.

In the end the forum is a hobby for me and a relatively small group of friends.  So as long as we can all live with it things will be fine.  ;)

I'd like to have reasonable looking dark and light themes, for certain definitions of reasonable.

I've been poking around in firebug today and replacing colors and kind of realized I was never going to get all the colors replaced to my liking that way.  It will be much simpler for me to normalize them a bit, then replace them more algorithmically.  If the result is a that a few things look horrible than I'll do as Antechinus suggests and tweak some by hand, no doubt falling far short of the detail he'd put into it.

Re: CSS Template

Reply #13

I should have a go at a dark theme. I already had one roughed out way back in alpha days.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: CSS Template

Reply #14

I will help you with what I can. Do you use Notepad++?  If not, download it ( free ) and use it.

http://notepad-plus-plus.org/

Use its Find in Files feature and look for all the box-shadows.  There are a bunch.  :)  Surround them with comment tags like this:

/* box-shadow: 1px 1px 2px #e5e5e5; */

Get rid of the box-shadows and you will get a clearer picture of what you need to change, color wise. You will want to do that in the
index_light.css and the admin_light.css files.

Do you know how to create and install a theme? There are a few files you will need to alter to set the variant.

Because of my eyes I am working on a theme that has some muted colors, no shadows and enhanced colors in some areas. I have it installed as a stand alone ( no variant ) and as a variant working off of the default.