Support » Themes and Templates » Header in 'Codium' theme.

  • tombarnfield

    (@tombarnfield)


    Hello!! I’m looking for some help with the ‘Codium’ theme a have which is a revamp of the ‘Sandbox’ theme. I know someone else using the them with a large header but after research just don’t know how to do it myself. My blog is http://www.tomoliverbeats.com

    The image I wish to use is here: http://s4.postimage.org/8cidlg8a9/HEADER_copy.png (979x413px).

    Here is a copy of my stylesheet (style.css) for my chosen theme. If anyone could help it *reaaaaally* appreciate it.

    /[CSS moderated as per the Forum Rules. Please just post a link to your site.]

Viewing 15 replies - 1 through 15 (of 31 total)
  • Alx Block

    (@cronkled)


    Hi tombarnfield,

    What you should look for is the div#header area of your CSS. You can add the image in there, as well at make the height of the header area bigger to accommodate the larger image.

    I would do it like this:

    div#header {
        background-image: url("http://s4.postimage.org/izc6qvgh5/HEADER_copy.png") ;
        height: 38em;
        margin: 0px 0 0;
        padding: 1em;
    }

    The only thing that happens with this is that you still have the blog title showing up over the image. You can change that by adding a property to h1.blogtitle area.

    I would do it like this:

    h1.blogtitle{ display:none;}

    I hope that helps!

    -Alx

    tombarnfield

    (@tombarnfield)


    All I can say is, you’re an absolute star. Thank you so much!!!

    Alx Block

    (@cronkled)


    Beautiful! I’m happy to help.

    It looks great.

    -Alx

    Alx Block

    (@cronkled)


    You know, I did notice another little tweak that you could do if you wanted to.

    The corners of the navigation bar are rounded, but since that image is right up against it, it looks a little bit off. You can get rid of the rounded corners by deleting a little bit off of the #access property.

    It would look like this when you’re done:

    #access {
        background: none repeat scroll 0 0 #F1F2F4;
        display: block;
        float: left;
        margin: 0 auto;
        text-transform: uppercase;
        width: 980px;
    }

    Then everything will be nice and flush.

    -Alx

    Next version of codium will support custom header image and will remove the round corners if you use an image in the header stay tuned!

    I tried adding this code but nothing happened.

    div#header {
        background-image: url("http://s4.postimage.org/izc6qvgh5/HEADER_copy.png") ;
        height: 38em;
        margin: 0px 0 0;
        padding: 1em;
    }

    I would like the header to appear right about the content.

    Dear Henri or Elixr
    I am using Codium Extend 1.0.9 Theme and I love it!

    Please help me add a header image which is less than 250px…in fact it would be nice as 120px height, the width is not a problem for me.

    but if i make the image less, the theme forces me to stretch the image height.
    🙁

    how can I solve this and remove the restriction on height and width? Thank you so very much!

    Look inside functions.php you will find the solution!

    thank you! I just found it…but now the header is multiplying itself?
    what did I do wrong?

    http://news.diletto.co.za/

    I just changed this line from 230px and radii from 6px to 0 px….it improved but it’s still not right…

    background: url(<?php header_image(); ?>); height :120px; -moz-border-radius-topleft:6px;border-top-left-radius:0px;-moz-border-radius-topright:0px;border-top-right-radius:0px;

    Hi Henri – sorry, do you think you could please assist me a little further?
    Thank you i will appreciate that so much.

    Hi Martinlompa,

    You’re so close!

    Just take a look for the div#header area in your style sheet and replace repeat with no-repeat and it will “fix the glitch”

    In the end, it will look like this:

    div#header {
        background: url("http://news.diletto.co.za/wp-content/uploads/2011/06/header31.gif") no-repeat scroll 0 0 transparent;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        height: 120px;
    }

    Nice shot Elixr 😉

    thank you so much Elixr, you guys rock!!

    ..but I cannot find this!! 🙁

    I’m looking (WP Appearance editor) in the stylesheet.php and header.php….there’s no such code?

    🙁 which file must I edit? i could use ftp and notepad++.

    *pulls out hair*

    Look inside the functions.php on the top of the file

Viewing 15 replies - 1 through 15 (of 31 total)
  • The topic ‘Header in 'Codium' theme.’ is closed to new replies.