More than one theme color per website?

Tagged: color, custom body classs

This topic has 36 replies, 3 voices, and was last updated 10 years, 7 months ago by Eric.

Viewing 37 posts - 1 through 37 (of 37 total)

Author

Posts
July 1, 2013 at 2:39 pm #5629
Terence
Customer
Wes,

When you are refactoring Epik for HTML5/CSS3 in the next few days and weeks, is there any chance you can include this idea in the new version?

I would like to use several of the 8 alternative theme color pages on the same site. For example, I would like to use Dark Blue for the homepage, then maybe the Green for an eco project, and then maybe the default for the terms & conditions, privacy page etc ~ so I could tell them it was all there in black and white! 😉

Something like a color identifier instruction on a per-page basis, otherwise it uses the default.

Is that possible?

Terence.
July 1, 2013 at 3:18 pm #5639
Eric
Customer
There is a Genesis (Framework) feature that already allows you to do this called “Body Classes“. Here is how to set them up – http://my.studiopress.com/snippets/custom-body-class/

Here is a quick tutorial – http://wpsites.net/web-design/style-images-custom-body-class/

You’ll notice on the Epik demo that there are multiple pages with different colors (which is what you were looking to do), the way he did it was by adding body classes on those specific pages. Example – For the Dark Blue page, he added – epik-darkblue inside the field at the bottom labeled – Custom Body Class which references any part of the stylesheet that is coded with .epik-dark-blue

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 1, 2013 at 6:50 pm #5651
Terence
Customer
Thanks Eric,

Having read both articles I am pretty sure they require code diving capability above my pay grade.

I’ll take a look again later in the week when, hopefully, I am a little less stressed and can give it time to get my head round it, but I am not at all sure this will work for me.

Terence.
July 2, 2013 at 12:33 am #5660
Eric
Customer
Hopefully I didn’t make it sound confusing, but I believe this is much easier than you think. Don’t mind all of that code lol.

Do this as a test –

Add this code in your css –
```
.custom-bg {
    background: green;
}
```
Then add custom-bg on a test page inside the body class field at the bottom of the page editor. Then view the page and you’ll see that it shows up in the code and should reference the color (green). If it doesn’t immediately, then it’s probably because of the background color from the #wrap or the body….which can be overwritten.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 3, 2013 at 2:19 pm #5683
Terence
Customer
Eric, not sure if its me not explaining myself or you describing to me how to do something other than what I was trying to accomplish. Anyway, I tried that and, once I’d cleared my browser cache, it worked very well ~ except for the fact that it only changes the background color, and that’s not what I was trying to do.

What I want to do is two things really:

1) Create my own (single, primary) color schemes, i.e. the same as Wes has done, no different, only choosing a different colors, and

2) Use one color scheme on one page and another on another page.

What do you think? Possible?
July 3, 2013 at 2:39 pm #5685
Terence
Customer
I have just been doing some further reading here and it may help if I mention this.

What I am trying to do is create additional ‘Color Theme Styles’, and then sometimes select a different theme style for a specific page, instead of allowing the default color theme style to run throughout the site.

Does that make sense?
July 3, 2013 at 9:28 pm #5695
Eric
Customer
Yes I understand what you’re trying to do, that’s exactly what I’m referring to in my first comment. The Epik demo is only using 1 theme color (default), but Wes created pages that access other colors by adding in the body class at the bottom of the page editor. So that’s the way you would have to do it as well in order for it to work.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 4, 2013 at 4:24 am #5707
Terence
Customer
Yes, Eric, that’s my point exactly.

When I use the custom-bg code above, what I see here is a green background instead of gray, but the header and footer remain in the selected default color. However, if open one of the other color pages Eric created it changes both the header and footer to a new theme color, but doesn’t alter the background.

So that is the effect I am trying to achieve here but adding custom-bg to the page in question doesn’t achieve that.

Look here ~ http://qloudpress.com/privacy-policy/

Do you see what I mean?
July 4, 2013 at 4:35 am #5708
Terence
Customer
OK, I see what the problem is now… when you use an additional color ~ which is not in the list of color schemes ~ like the “green” example you gave me, then the custom background color comes into play. However, if you use one of the pre-defined colors like “epik-pink” for example, then the whole epik-pink color theme in the CSS is used, which is what I was trying to do of course.

So, in fact, all I have to do is choose from Epik Black, Epik Blue, Epik Dark Blue, Epik Gray, Epik Green, Epik Orange, Epik Pink or Epik Purple in the inside the body class field at the bottom of the page editor, and it works perfectly.

Many thanks, I guess I took the long way round getting there, but with your help I have accomplished what I set out to do Eric.
July 4, 2013 at 4:41 am #5709
Terence
Customer
Sorry, my mistake, that should have read ~ “put epik-black, epik-blue, epik-darkblue, epik-gray, epik-green, epik-orange, epik-pink or epik-purple in the inside the body class field at the bottom of the page editor, and it works perfectly”.
July 4, 2013 at 5:01 am #5710
Terence
Customer
I spoke too soon.

Only epik-gray, epik-green, epik-orange, epik-pink, epik-blue and epik-purple actually works.

When I put epik-black, epik-blue or epik-darkblue, in the inside the body class field at the bottom of the page editor, nothing changes and the page remains in the default theme color.

However, each of the theme colors works perfectly for if I select any one of the sample color pages Wes created.

Very odd.

While digging around I also found out there is a mismatch in the CSS and although I can select “Blue” or “Dark Blue” as Genesis color style, in the CSS it only shows
July 4, 2013 at 5:15 am #5711
Terence
Customer
Ignore that last sentence please. I pressed send by mistake and I can no longer edited as my edit capability has timed out.
July 4, 2013 at 5:21 am #5712
Terence
Customer
No, I was right, there is a small mistake in the CSS.

Version: 1.2, Template Version: 1.9 shows the following…

23 Theme Colors
– Epik Black
– Epik Blue
– Epik Dark Blue
– Epik Gray
– Epik Green
– Epik Orange
– Epik Pink
– Epik Purple

So its missing the Epik Red color theme in the header, although it is in the CSS below.
July 5, 2013 at 5:11 pm #5751
Terence
Customer
Hi Eric,

Any idea why only epik-gray, epik-green, epik-orange, epik-pink, epik-blue and epik-purple actually works?

Terence.
July 5, 2013 at 9:36 pm #5754
Eric
Customer
It works because its setup with the body classes….which is explained in the links I posted recently. So if you’re trying to duplicate one, just copy/paste and rename. The css file, as well as the functions file (you’ll see it)

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 6, 2013 at 6:14 am #5758
Terence
Customer
Eric, yes, thanks to those articles and your help I now understand how to add body classes, but I think you missed the point of my question. I was asking why some body classes Wes has set up work, and the others don’t? At least for me they don’t.
July 6, 2013 at 11:12 pm #5765
Eric
Customer
Which ones aren’t working for you?

I just tested on a local install and they all work fine for me. I’ve never seen anyone else here with that issue, so I’m not sure what it could be. I’d try double checking to make sure you’re adding the right code in correctly.

They are definitely working on the demo as you can see each of those pages under Theme Colors are created by simply adding the body class….and that was done while using the default theme color.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 7, 2013 at 5:23 am #5768
Terence
Customer
When I put epik-black, epik-blue or epik-darkblue, in the inside the body class field at the bottom of the page editor, nothing changes and the page remains in the default theme color. I’ll do some more checking and see if that’s still the case or if I can alter it in some way.
July 7, 2013 at 1:27 pm #5771
Eric
Customer
Here is a screenshot of the Black theme color being used while the default color is still active – http://imgur.com/PMGYYbi

That body class creates this page – http://demo.appfinite.com/epik/black/

The screenshot was taken from the Epik demo backend.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 7, 2013 at 2:02 pm #5773
Terence
Customer
I am sure it it works there, Eric, but my problem is that it doesn’t work here.

Check out the HTML/CSS of this page and you’ll see what I mean ~ http://qloudpress.com/privacy-policy/ ~ both the default epik-darkblue and the alternative epik-black body classes are visible, but the theme color remains unchanged.

Some work and some don’t for some reason.
July 7, 2013 at 10:47 pm #5774
Eric
Customer
Maybe it’s because you’re using a different theme color (not the default) and trying to use another theme color. If you switch it to the default theme, see if that page works. If so, then I guess its giving priority to whatever the default theme color is. So that means both theme colors show up in your code, but its choosing the first color as the one to show….just a guess though, I’m honestly not sure.

If the above assumption is correct, you could try adding !important to all of the parts of your code that you need to override….like the #head-wrap, footer, etc.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 7, 2013 at 10:49 pm #5775
Eric
Customer
That has to be it. Your code shows this in the body/class – “epik-darkblue epik-black” which means it will use epik-darkblue first since thats the theme color you chose in your theme settings. The page that you added the “epik-black” in the body class shows up, but it shows up last after everything else. So just do the suggestion in my previous comment.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 8, 2013 at 5:15 am #5781
Terence
Customer
OK Eric, now we’re getting somewhere. When I have Genesis select the “Default” color style, and then add any of the other colors as a custom body class, all of them work. My problem is now, I don’t want to use the default color style, so editing Wes’s CSS and adding !important doesn’t seem logical to me when, if I am not using the the default color style, some colors are affected and some are not. I am thinking, as this is a logic error in the CSS, is using “!important” correct fix? Wouldn’t it be better to find a way of changing any one of the color themes to the “Default”?
July 8, 2013 at 11:25 pm #5789
Eric
Customer
You may have misunderstood…. I’m saying you can keep it as it is using the theme color you’re using. You’ll need to add the !important to the parts of “epik-black” that you want to be displayed so whenever you’re using that page, it will know to use the epik-black rather than the epik-blue. There aren’t that many parts that you’d have to edit….just the main parts of epik-black (which you can see in its section) I tested this earlier and it worked fine.

Make sense?

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 9, 2013 at 5:05 am #5795
Terence
Customer
Well, actually, no. I will try it, but it doesn’t make sense to me. Why do you think one theme color, as opposed to another, would need to have !important added?

Each theme color isn’t set up differently in the CSS is it?

However, if I do what you suggest, they will be.

It seems to me there’s a logic error somewhere, and I am damned if I can see it.
July 9, 2013 at 11:23 pm #5805
Eric
Customer
I suggested that because you’re using epk-black as the default…..but you want epik-blue to show up on a certain page…correct? If so, it will only show epik-black since it has priority (as mentioned earlier). So to fix it for this particular page, if you add !important to the .epik-blue #head-wrap (for example) that will let the css know that it needs to show the .epik-blue #head-wrap instead of the black (default) #head-wrap…but this will only happen on that particular page since you have the epik-blue body class added to it. It won’t affect other pages since black is your default theme.

We have to do it this way because that’s just the way Genesis (the framework itself, not the child theme) is setup.

That’s about the best way I can explain it, so I hope I’m not making it even more confusing.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 10, 2013 at 6:02 am #5813
Terence
Customer
No Eric, you’re not making it more confusing, but you are answering a different question ~ one that I am not asking.

I understand perfectly well why using !important makes CSS behave differently.

What I am trying to understand is what makes, for example, a combination of [default] epik-darkblue work together with [custom body class] epik-pink, without the addition of !important, but not [default] epik-darkblue together with a combination of [custom body class] epik-black, only with !important?

That’s what I am trying to figure out.
July 10, 2013 at 1:11 pm #5815
Eric
Customer
I’m honestly not sure, I can’t seem to replicate any of the issues you’re having.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 10, 2013 at 1:38 pm #5817
kronos
Customer
@Terence he already answered it in this comment – https://appfinite.com/topic/more-than-one-theme-color-per-website/page/2/#post-5805 I think you’re misunderstanding what he’s trying to explain.

You’ll have to be a bit more clear if you’re asking for something different, but the answer to your question is in @Eric’s comments.

I’m posting because I was wondering how to do the exact same thing you’re doing and got the solution from above.
July 10, 2013 at 7:06 pm #5819
Terence
Customer
Why should one theme color require !important to be effective, when used as a custom body class, when another doesn’t?

Some combinations work together without the addition of !important, but others only with !important.

I don’t know how I can explain it any clearer than that.
July 10, 2013 at 9:41 pm #5823
kronos
Customer
Let’s try this, can you create a sample page that is showing the issue you’re taking about? I think it would be easier to just look at your code to see if anything sticks out, because everything is working ok on my end as well.

What you’re describing as happening shouldn’t happen in the way it does, and doesn’t happen for me. It all works consistently. If there’s something in your code throwing things off (which I don’t know why there would be) then you may just have to add the “!important” code to the parts of your site that need it (theme colors).

There’s only a few places in those theme color sections that you would need to do it so it’s not really a big deal if you have to do it.
July 11, 2013 at 4:40 am #5829
Terence
Customer
Sure, here are a couple of pages I produced earlier.

Default color style “Green”, custom body class “epik-pink” http://qloudpress.com/terms-of-service/

Default color style “Green”, custom body class “epik-black” http://qloudpress.com/privacy-policy/

I can see the result. I know how to fix it. I just can’t figure out why some color combinations work and others don’t, without editing the CSS.
July 15, 2013 at 7:19 am #5863
Terence
Customer
Hmmm, seems to have gone a little quiet around here lately.

Spare a thought for the poor website which now has bright pink terms of service.

Can’t stay that way much longer.

Are you still trying to figure it out or just don’t like conundrums?… 😉
July 15, 2013 at 9:26 pm #5870
Eric
Customer
I’m not sure if @kronos knew what was going on or not….but I haven’t been able to get the same issue as you. My guess is its something to do with the framework, not sure.

The only thing I can recommend is what I mentioned earlier and it would immediately solve the issue.

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
July 19, 2013 at 7:04 pm #5937
Terence
Customer
I think before I touch the CSS I am going to wait for A) Genesis 2.0 to be released, B) WP 3.6 to be released, and C) the HTML5 version of Epik to be released. When I have those and see how nicely they play together, or not, I will have within a fairly short period of time, I hope, a fairly stable platform where I can resolve this issue once and for all.

Thanks for trying to help me so far.
September 25, 2013 at 6:54 pm #7621
Terence
Customer
Well, I waited for version 2.0, no change, then for version 2.01 to come out, but it doesn’t make any difference.

If I have “epik-darkblue” set up as my default color scheme, for example, and then I select for a specific page a custom body class of “epik-black”, in the raw page HTML I can see the line ~

<body class="page page-id-1172 page-template-default logged-in mp6 custom-header header-image full-width-content epik-darkblue epik-black" itemscope="itemscope" itemtype="http://schema.org/WebPage">

Both are color schemes are called but only the “epik-darkblue” shows.

However, if I leave the default set at “epik-darkblue” and then change the same page’s custom body class to “epik-pink”, the page then becomes pink.

So the custom body class “epik-black” doesn’t work in combination with “epik-darkblue” in the standard CSS setup, but the combination with the custom body class “epik-pink” works, for some reason.

This is with the standard CSS supplied as the HTML5 version of Epik.

Any ideas? I have been trying for ages to get my terms and conditions pages to be in black.
September 25, 2013 at 10:40 pm #7638
Eric
Customer
I’m out of ideas. @Kronos do you know what it could be?

I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com
Author

Posts

Viewing 37 posts - 1 through 37 (of 37 total)

The topic ‘More than one theme color per website?’ is closed to new replies.