Graphene theme: how do i change the default colors of "page list" header tabs

GeGeO,

If you use Firefox, install the Firebug plug-in and use that to find out which element you need to change exactly.

I use Graphene too, and with the exception of not being able to adjust my comments avatar, I like it. https://www.jackpinewebdesign.com

If I remember correctly, the black bar is a graphic. Change the graphic colors by editing it in a graphic program like Photoshop.

That firebug add in will tell you what element it is and what document it is located in. You will need access to the remote directories and to be able to pull them down for the editing of images. The CSS you can edit right in the admin panel.

Good Luck!
K.

Hey Kippy–
How did you disable the comments on your pages? I am also using Graphene. Thanks!

Hi Ashlee,

Go to the Admin panel, select Pages, select the page you wish to disable comments on,Select Edit, untoggle Allow Comments.

Hope this helps.
K.

Dear Kippy,

In response to your email. I first like to thank you for recommending Firefox and Firebug for this matter. I downloaded both for the first time. However, I was unsuccessful in making the changes to my template for the following reasons:

– Firebug was a great tool to detect the elements that needed to be changed and actually I managed to changed them temporarily using firebug, but I did not know how to transfer those changes to the original template. I went to WordPress dashboard template CSS style sheet for Graphene and tried to overwrite the codes with the ones showed in the firebug panel, but this did not make the changes on my website. Perhaps, because the elements where shown several times in the CSS Style sheet and I was suppose to overwrite them everywhere in the stylesheet. I am not sure. I saw your website and it looks beautiful. ?? I saw how you managed to customize all your colors and even change the color of the original black bar! I am not sure what I’m doing wrong or not doing. If you could be more specific in your guidance. I would appreciate it.

Hi GegeO,
The images are actually what changes the black bar I believe.

I pulled this image into my local directory, and opened it in Photoshop and changed the colors there. Then I overwrote the existing image file in the same format, and then uploaded to the same directory.

You can find your master images in the remote directory:
wp-content/themes/graphene/images/

You will need an image editing program to change the image, and one with png write capabilities to avoid having to reassign the image format in the CSS. If you overwrite the existing image file in the same format (png), it will change it everywhere it appears in your site. If however you save it as a jpeg, you will have to locate the CSS rule and change it there as well.

Another trick too, is to hold your cursor over a blank area of the bar, right click and select “view background image” This will show you the image you are targeting.

You can then right click on that if your htaccess is not prohibiting all of this, and save it to your pc. The trick will be to note the url of the directory it is located in. You will then need to overwrite that same image in the same remote location.

Good luck and I hope this helps.
K.

I have same problems with you ashlee…
I tried to do what you have shared kippy and it solved the problem.. Thank you so much..why are you guys so good at this stuffs. I hope I can cope just like with you guys ??
THanks thanks

Hi SherrieJames,

I actually learned how to customize a WordPress site thru the WordPress Tutorials on Lynda.com.

I also bought a book from Smashing Magazine called Smashing WordPress Themes, but do not recommend this for beginners. There are a lot of sources out there for working with WordPress. Being a visual learner myself, show me I get it, make me read it, I will muddle thru it… so Lynda.com was a great resource for me.

I am currently just getting ready to graduate from college in Multi-media/Web Design so while I am still a noob, I get the basics. Stick with it. If you like this kind of thing, take a few courses at a local college or even try befriending someone who will mentor you in a face to face environment… you would be amazed at what you can pick up.

I will say this, while I like the CMS aspect of WordPress, customizing a site template was no cake walk. My goal is to eventually write my own template. Learn CSS too. Its a huge piece of WP.

K.

Dear Kippy,

Thank you very much for replying again. I just want to update you. I finally manage to tweek small things like background colors and fonts with the help of Firebug that gave me indicated the codes to change on the CSS Style. About the black bar, thank you for explaining in detail how I am suppose to change it. I attempted it but realized in the process that, in effect, the black image was in PNG format! ?? I don’t have Photoshop right now, so I still have not changed it yet. It is a relieve though, that at least I know how to technically solve the problem. Thank you Kippy.

Gege

Dear GegeO,
You are welcome and glad you were able to conquer it or at least understand how to get to where you want it to be.
K.

Hi,

I am having a similar difficulty with changing the menu colour scheme using graphene. I have spent a lot of time trying to work it out with css and also editing the .png file. All I can manage to do is make crude adjustments.

What I would like to do is something similar to GegeO’s menu bar as it will suit the existing design of my site. The main thing that i would like to do is change the colour of the back ground behind the text on the navigation bar and also the grey below this.

My url is https://www.crazydaylight.com/

Any help would be greatly appreciated.

Also GegeO, How did you get your page to not display the name of the page i.e. “home” in the body section?

Many thanks to everyone who posted here.

As a result of reading all these comments I’ve worked out how to customise the colour of any element and I’m very happy.

The way I’ve changed the colour of that pesky “black bar” doesn’t involve using a graphics package to create or modify the background image used. Instead, I modified the CSS so it’s purely a background colour rather than an image as background. Here are the steps below in case it’s useful to someone else.

1. Use Firefox ??
2. Install the Firebup plug-in from https://getfirebug.com/wiki/index.php/Main_Page
3. Right-click on whichever element you want to change and select “Inspect Element”.
4. Check what is highlighted in the left pane of the Firebug display.
   eg. Right-clicking on the black bar where the menu is and inpecting it gives the following highlighted in black

   <ul id="header-menu" class="menu clearfix default-menu">

   This means I need to edit the colour of the header-menu.

5. Look in the right pane of the Firebug display. Scroll down until you find the same element.
   eg.

   #header-menu {
       background: url("images/sprite_h.png") repeat-x scroll left -3px #101010;
   }

6. Now click to highlight the background options “url etc”.
   Delete url("images/sprite_h.png"). This gets rid of the background image and uses a background colour of #101010 instead.
7. Change the background colour to something else and see how it looks.
   Hovering over the HTML colour pops up a preview window of the colour also. Changes are reflected in this page view, but aren’t ACTUALLY changed on your site yet.
8. Once you’re happy with the colour, copy the HTML that you’ve been editing in the right hand pane.
   If you’ve been editing an element with lots of options you only need the beginning, end and the line(s) you’ve changed (the others won’t be affected).
9. Minimise the Firebug display so it doesn’t annoy you.
10. In the Admin pages for your site go to Appearance -> Graphene Options -> Display (ie. where you changed all of the easily accessible colours) and scroll to the bottom where it says “Custom CSS”.
11. Paste your copied HTML here.

eg.

#header-menu {
    background: none -3px #844B5D;
}

(You probably don’t need the `-3px’ but I’ve been too lazy to work out what it does.)

All other options for this element will stay the same.

In the right pane of the Firebug display you’ll now see your new options with the original options somewhere further down with a line through them.

ie.

#header-menu {
    background: none repeat scroll -3px 50% #844B5D;
}

and below it with a text strikethrough:

#header-menu {
    background: url("images/sprite_h.png") repeat-x scroll left -3px #101010;
}

Notice that a couple of options have been automatically added.

All elements including text colours can be changed in the same way without having to edit the CSS in a different editor. It also makes it easy to keep track of any changes you made because they’re listed separately from the rest of the CSS. It’s also really easy to undo them ??

I’m not an expert, this is my first WP site and first use of Firebug but it seems to work nicely.

Another quick example:
The top-bar and coloured edge underneath can be changed to white with a red line underneath by adding the following to the Custom CSS window:

#top-bar {
    background: none -196px #FFFFFF;
    border-bottom: 1px solid #FF0000;
}

I hope this helps others.