You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 04-09-2013 18:20:21

thejaff
Contributors
From: Millers Falls, MA
Registered: 30-04-2013
Posts: 19
Website

Changing the background color of the Header Navigation Icons.

I am starting to get the hang of things, though one thing is still eluding me. While most things are starting to become intuitive as for I want to make a change, I know intuitively to check the file X.php in the config directory, etc. That speaks to me to be good design. I couldn't be happier with this package.

Anyway, my question is about one of those ideas that I CAN'T find intuitively and the search has seemed to provide no help. In the header, the icons for the groups, on this page those would be: HOME DOWNLOAD and SUPPORT.  There in the template a green color for the active group, and a brownish color for ones that are not active but are being hovered over. For some reason I cannot figure out how and where to change this. Some help in that regard would be appreciated. Thanks!  I haven't been this excited about web design in a long time.

Offline

#2 04-09-2013 23:24:49

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Changing the background color of the Header Navigation Icons.

Actually, you'll have to edit the main theme.

First, duplicate (copy/paste) the folder "theme_default" in the theme folder and rename it to what you want (ex: "theme_me") Then in layout.php, set your theme to the name that you gave it "theme_me".

Most of the color things are in the file themes/theme_me/theme.css

But I agree, it's a nightmare to check every line to see what it changes. But there's an easy method:

(CSS compressing should be off in the file general.php to make this work)
In Google Chrome, right click on the element of which you want to change the color (or another CSS property)

The Chrome Element Inspector will come up now. In the left side of that screen, you'll see the HTML structure of the page. On the right side (small column), you'll see the CSS property's of the element. Now, we sure the "Computed Style" thing is open. (if it isn't, click on that title). Now you'll see every CSS property that has been set to that element. Now we can click on the small arrow left to the property "background-color" and details about where the property is set come up. For example, you'll see "theme.css:23" which means it's on the 23th line of theme.css

So now go to the 23th line in theme.css and you have found the place where you can change the color smile The line that chrome reports isn't exactly the right line, it's the line where the CSS properties for that element start, but then you just have to look a few lines further.

I hope this is clear and I know I should make a video or image tutorial about this as it's very handy and important.

If you have any questions, feel free to ask.

Offline

#3 05-09-2013 17:28:29

thejaff
Contributors
From: Millers Falls, MA
Registered: 30-04-2013
Posts: 19
Website

Re: Changing the background color of the Header Navigation Icons.

No, actually that makes perfect sense to me, thank you! That is so much easier. I have been thrilled with how easy things have been to find and figure out, but that one color change took me literally all day to find. I accomplished nothing else. I have so little time to work on this stuff, that I just can't have days like that. But your way TOTALLY changes that. I'll only need it when intuition fails me, and so far, the template is laid out so wall, that it isn't a problem most of the time.

I'm almost to the point of being able to show off some progress. Not bad considering I didn't know where to start less than a week ago. Thank you again. That is a technique that I see serving me thousands of times in the next year...

Offline

#4 06-09-2013 15:36:04

thejaff
Contributors
From: Millers Falls, MA
Registered: 30-04-2013
Posts: 19
Website

Re: Changing the background color of the Header Navigation Icons.

I should just never open my mouth.. or fingers in this case I guess. Yesterday I check out your technique and was able to find that main color property in no time at all. I thought it would work that simply for everything, but the very next property I was looking for, in this case, the exact same type of thing, but the color that appears when the nav items are hovered over, rather than selected. I am wondering if it is simply an instance of the background showing through, or something, and so there is no element defined specifically for this.. I just can't seem to figure that one out. I am sorry to ask such a tedious little thing, but really I am learning a lot. Its just these tiny specifics I am struggling with.

Offline

#5 06-09-2013 18:51:01

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Changing the background color of the Header Navigation Icons.

The color when hovering is indeed somewhat more difficult to find. You can search in the file for   :hover  but that'll take a long time.

I use this trick (maybe there's a better way but for me, it works flawlessly)

Do the same thing as you'd do normally: so right click the element -> inspect element -> check in the DOM tree if the element you needed is selected. But now you'll probably notice that in the right column no :hover class is shown. That's because the element isn't hovered anymore! And hovering the element afterwards doesn't work neither. But here's the trick: resize the chrome dev tools part until it's right under the element that you want to inspect. Now right click the element and click "inspect element" and the element should stay hovered as long as you keep your mouse in the dev tools part of the window. To make it more clear, a screenshot: http://snag.gy/qbPxp.jpg

Offline

#6 10-09-2013 16:19:42

thejaff
Contributors
From: Millers Falls, MA
Registered: 30-04-2013
Posts: 19
Website

Re: Changing the background color of the Header Navigation Icons.

Thank you so much, your right, that is a flawless little trick. Amazingly useful!

Offline

#7 29-11-2013 18:27:00

steebchen
Contributors
From: Germany
Registered: 03-05-2013
Posts: 121

Re: Changing the background color of the Header Navigation Icons.

Hi,
Is there a general setting for changing the sub nav buttons (under the nav icons)?

Last edited by steebchen (29-11-2013 20:39:28)

Offline

#8 11-12-2013 21:58:43

Thomas
Administrator
Registered: 10-03-2013
Posts: 897

Re: Changing the background color of the Header Navigation Icons.

I don't know which buttons you are talking about? The sub nav buttons color can be changed when setting them up in the subnav files.

Offline

#9 11-12-2013 22:07:12

steebchen
Contributors
From: Germany
Registered: 03-05-2013
Posts: 121

Re: Changing the background color of the Header Navigation Icons.

Oh yeah, I forgot to say that I didn't see the setting, was 13 days ago^^

Offline

Board footer

Powered by FluxBB