Forums

how to change the colour of the header? (18 posts)

  1. digitalartempire
    Member
    Posted 2 years ago #

    Hi , i have the Titan them by jestro and would like toknow how to change the colour of the header - which code line do I change -

    it must be a simple line with a hex value? right?

    also how to back up before hand

    thanks so much this will really help

    b

  2. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    it would be easier to help with a link to your site.

    it could be a hex value in your style.css file. Depending on theme, it could also be an actual graphic/image used as the background

  3. digitalartempire
    Member
    Posted 2 years ago #

    sorry Rvoodoo I though it was in my sig - here it is http://digitalartempire.com/

    im talking about the 2 brown bars at the very top

    please explain in great detail as I dont know any CSS but am willing to learn this -

    if you could help me find teh right css line in the css file that would be wicked great

  4. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    well....it is controlled in your themes master.css file. First off, there are some instructions at the top of that file to not adjust the css in there....as it will break when you upgrade. So you have to decide if you want to take the simple route, adjust the css in master.css and have to redo it if you upgrade the theme. Or you can follow the theme authors advice about child themes. That's all up to you.

    As for your original question.....there are 3 sections in your header you can adjust....

    I believe they are as follows...

    #header {
      width: 100%;
    	border-bottom: 1px solid #EDE7E0;
      background: #443B31 url(../images/nav-background.gif) repeat-x bottom left;
    	}

    this controls the large section, the background behind your sites title and description. The hex is the brown I believe, there is also a gif image overlayed with transparency that you may have to recreate. (it looks like that creates the slight gradient in you navigation area.

    the next bit of css is this:

    #follow {
      background: #2F2922;
      padding: 5px 0;
    }

    That one is the very top brown bar, where your follow icons are located. You can simply tweak that hex value

    Finally you have the nav section. Like I said, I believe the gif image in your #header area controls the gradient, but the hex values throughout the nav section control the colouring of the tabs on hover, etc

    something you may want to consider, is using firefox browser with the firebug addon, I see a lot of folks on here recommend it.... it really aids you in tweaking css...

    http://getfirebug.com/

  5. digitalartempire
    Member
    Posted 2 years ago #

    dude thanks so much - I can see how I can do this now ill get back you you when I have done the changes -

    dont know about child pages - ill probably make the changes as they are minor and then redo them if and when i upgrade .

    b

  6. digitalartempire
    Member
    Posted 2 years ago #

    @RVoodoo

    hi mate -

    a quick question where di d you get teh ccss code from- I mean how do i edit teh css code - in other thems its in teh css template folder but with this one it says- How do I edit teh style sheet iff I cant find the css folder - ?

    "
    /* Import Stylesheets
    -----------------------------------------------------------*/
    @import url("stylesheets/master.css");

    /* Required WordPress Classes, don't remove these.
    -----------------------------------------------------------*/
    .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    .alignleft { float: left; }
    .alignright { float: right; }

    /* Make all custom CSS changes in a Child Theme. See this tutorial for instructions:
    ----> http://themes.jestro.com/vigilance/easy-upgrading-wordpress-child-themes/ <----
    Any custom changes you make here will not be overidden when you upgrade the theme.
    -----------------------------------------------------------*/

  7. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    in your theme, there is a folder called css, within that is master.css

    http://digitalartempire.com/wp-content/themes/titan/css/master.css

    is the url

    again, if you edit the master.css directly, and then update your theme, you will lose any changes. So you may want to look into that tutorial

    http://thethemefoundry.com/blog/easy-upgrading-wordpress-child-themes/

    which shows you how to implement a child theme....that way if you update the theme, your changes aren't lost

    with your css being tucked away in a folder, you won't be able to edit it directly through the editor in your admin area I believe. You'll have to use ftp, or if you're lucky and your host has some sort of file editing app online, that'll work too

  8. digitalartempire
    Member
    Posted 2 years ago #

    I still would like to know how to edit the css (without a child theme)

    how do I access the main style sheet
    "
    /* Import Stylesheets
    -----------------------------------------------------------*/
    @import url("stylesheets/master.css");

    the link
    http://digitalartempire.com/wp-content/themes/titan/css/master.css
    leads to a 404 page am I missing something
    I havent done thhis before so opls explain everything

    thanks ben

  9. henkholland
    Member
    Posted 2 years ago #

    The link is:
    http://digitalartempire.com/wp-content/themes/titan/stylesheets/master.css

    The easiest way is to get an ftp program ( I use Win-SCP)
    First make a backup copy of the file to your local computer.
    Next right click on the file on the server and open it for editing.

    Color codes can be found here:
    http://www.colorschemer.com/online.html

    And Firebug is the way to point out which section you need to edit. You can even edit in Firefox/Firebug but not save so it's safe to dry-run.

    But Rvoodoo, has a strong point against this. Believe me, I have a plugin with its own css dashboard which is a pain, so I do direct editing. But after every upgrade I am lost.

    That tutorial on child themes is really dead easy and let's you keep your editing after an upgrade.
    If you don't trust yourself with that, than don't go "my route" !!

  10. digitalartempire
    Member
    Posted 2 years ago #

    thanks henkholland I finally found my style sheet after months of leaving my header this brown colour http://digitalartempire.com/

    anyway I'm going to chage my theme this summer, I just wanted to increase the width change, the header image and maybe the background colour .... so i won't use a child theme tx for the heads up though..

    If I copy and paste the file then thats hould back it up , right ? i have the my sql databas backed up already .

    also how do I save the changes ? do I just hit file > save in the master.css

    cheers
    B

  11. henkholland
    Member
    Posted 2 years ago #

    Yes hit save when you are working from the Dashboard/Appearance/Editor

    Copy/pasting in Notepad (not Word) and saving it is a way to backup that theme file.

  12. digitalartempire
    Member
    Posted 2 years ago #

    im sorry i don't follow ,

    when I edit the style found here

    http://archernoble.com/wp-content/themes/titan/stylesheets/master.css

    then press save that will save my changes ? if not then how do I put this master style sheet in the editor - and save it ?

    the appearance editor is only for pages and posts / the style sheet editor doesnt have the master stylesheet in it.

    thanks again mate

  13. henkholland
    Member
    Posted 2 years ago #

    Ah, then there are two possibilities:

    1. Maybe you can set the colors in the options/settings of your theme
    2. As said: get an ftp program like Filezilla, make a connection and edit the master.css file on the server.

    And what is with archernoble.com? I thought you were working on digitalempire?

  14. digitalartempire
    Member
    Posted 2 years ago #

    Im using a spare domain to test out changes on the same theme .

    there are no options -

    ill get an ftp and try to edit it on the server , ive used file zilla before so ill get that, once ive got it setup could you let me know where to find the master css file and how to save the edit ?

    cheers for replying quickly : )

  15. henkholland
    Member
    Posted 2 years ago #

    usually in a Ftp program you see your local files on the left and the server files on the right of the slit-screen.
    Your master.css is here wp-content/themes/titan/stylesheets/master.css

  16. digitalartempire
    Member
    Posted 2 years ago #

    thanks henkholland ur a life saver

    - ive got that ftp sorted and am going to change the header - I found a gd video that shows how )

    could you briefly explain how to chnage the width - once i'e found teh master css - for the correct domian in teh ftp - what cods do I look for and change - -

    if you look at my current layout the left is filled with a date - I need to probably remove the date / date code , what do you advise ?
    http://digitalartempire.com/

    cheers B

  17. henkholland
    Member
    Posted 2 years ago #

    Ok, first copy that master.css to the left )to your workstation as a backup in case stuff goes wrong).

    Next find this in master.css in the righthand side:

    #header  {
    -moz-background-clip:border;
    -moz-background-origin:padding;
    -moz-background-size:auto auto;
    background-attachment:scroll;
    background-color:#443B31;

    Change that color to what you like and save.

    Find color codes here:
    http://www.colorschemer.com/online.html

    Example: #FF0000

  18. Tim Pryde
    Member
    Posted 1 year ago #

    Hi, this conversation has been really useful! I was having exactly the same problems but have now got my website a bit better organised with a child theme on titan.

    I still have one problem that i can't work out however. after changing the colour of the header and removing the transparancy jpeg on it, i am have this http://www.timpryde.com/blog which i like as the link buttons are clear.

    however when on a linked page in the blog (eg: http://timpryde.com/blog/category/current-project/) the buttons loose their colour.

    I cannot work out why. Any help?

Topic Closed

This topic has been closed to new replies.

About this Topic