WordPress.org

Ready to get started?Download WordPress

Forums

Header in 'Codium' theme. (32 posts)

  1. tombarnfield
    Member
    Posted 3 years ago #

    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.]

  2. Alx Block
    Member
    Posted 3 years ago #

    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

  3. tombarnfield
    Member
    Posted 3 years ago #

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

  4. Alx Block
    Member
    Posted 3 years ago #

    Beautiful! I'm happy to help.

    It looks great.

    -Alx

  5. Alx Block
    Member
    Posted 3 years ago #

    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

  6. henri
    Member
    Posted 3 years ago #

    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!

  7. foreclosurefraudnews
    Member
    Posted 3 years ago #

    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.

  8. martinlompa
    Member
    Posted 3 years ago #

    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!

  9. henri
    Member
    Posted 3 years ago #

    Look inside functions.php you will find the solution!

  10. martinlompa
    Member
    Posted 3 years ago #

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

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

  11. martinlompa
    Member
    Posted 3 years ago #

    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;

  12. martinlompa
    Member
    Posted 3 years ago #

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

  13. Alx Block
    Member
    Posted 3 years ago #

    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;
    }
  14. henri
    Member
    Posted 3 years ago #

    Nice shot Elixr ;)

  15. martinlompa
    Member
    Posted 3 years ago #

    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*

  16. henri
    Member
    Posted 3 years ago #

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

  17. martinlompa
    Member
    Posted 3 years ago #

    sorry guys...I'm learning! this is what I see in functions.php:

    // gets included in the site header
    function header_style() {
        if (get_header_image() != ''){
        ?><style type="text/css">
            div#header {
                background: url(<?php header_image(); ?>); height :120px; -moz-border-radius-topleft:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;
            }
            <?php if ( 'blank' == get_header_textcolor() ) { ?>
    		h1.blogtitle,.description { display: none; }
    		<?php } else { ?>
    		h1.blogtitle a,.description { color:#<?php header_textcolor() ?>; }
        	<?php
    		} ?>
    		</style><?php
    		}
    	}
  18. henri
    Member
    Posted 3 years ago #

    Do you look inside your header option in your wordpress back office?

  19. henri
    Member
    Posted 3 years ago #

    In style.css try to change the height of

    /* header */
    div#header{margin:7px 0 0 0; padding:1em 1em 1em 1em; height:8em; background:transparent}
  20. martinlompa
    Member
    Posted 3 years ago #

    I checked in these files, there is no "repeat" in this file:
    Codium Extend: Header (header.php)

    and in the header (where you upload the image and change settings) there is no repeat function/option either.

    Codium Extend: Theme Functions (functions.php)
    also no "repeat" in this code.

    Codium Extend: Stylesheet (style.css) has this code for "header" (but also no "repeat")

    /* header */
    div#header{margin:7px 0 0 0; padding:1em 1em 1em 1em; height:8em; background:transparent}
    div#headertop{margin:0 0 0 0; background-color:transparent}
    #logo{margin:-3.5em 0 0 -1em; padding:0.3em 0.7em;}
    * html #logo{margin:-2.5em 0 0 -1em; padding:0.3em 0.7em;}
    #logo a{background-color:transparent}

    :-/

  21. henri
    Member
    Posted 3 years ago #

    Change this height:8em; to height:7em; to try

  22. martinlompa
    Member
    Posted 3 years ago #

    In style.css try to change the height of

    /* header */
    div#header{margin:7px 0 0 0; padding:1em 1em 1em 1em; height:8em; background:transparent}

    what must I change? I don't understand?

    I tried this:

    /* header */
    div#header{margin:0px 0 0 0; padding:1em 1em 1em 1em; height:2em; background:transparent}

    .....no effect...

  23. martinlompa
    Member
    Posted 3 years ago #

    height:7em

    same...

  24. martinlompa
    Member
    Posted 3 years ago #

    please email me? I will send you a login if you don't mind?
    this theme is too beautiful for me to give up on...

  25. henri
    Member
    Posted 3 years ago #

    Martin a quicker hack change your image and use this one http://imageshack.us/f/31/diletto.png/ 140px in height

  26. martinlompa
    Member
    Posted 3 years ago #

    Henri... How do I do that? I could FTP it, but it is another file name and it is a png and not a GIF as my existing one is a GIF.

    I tried uploading it using the backoffice header tool in WP, but that wants to cut/crop it down to size! :-(

    So I can ftp the file, but where in the code do I change "header31.gif" to "diletto.png" ?

    I searched functions, header and style.css for "header31.gif"....nothing.

  27. henri
    Member
    Posted 3 years ago #

    Change this in functions.php

    // This theme allows users to set a custom header image
    	define('HEADER_TEXTCOLOR', '444');
    	define('HEADER_IMAGE_WIDTH', 980); // use width and height appropriate for your theme
    	define('HEADER_IMAGE_HEIGHT', 140);
    
    // gets included in the site header
    function header_style() {
        if (get_header_image() != ''){
        ?><style type="text/css">
            div#header {
                background: url(<?php header_image(); ?>); height :120px; -moz-border-radius-topleft:6px;border-top-left-radius:6px;-moz-border-radius-topright:6px;border-top-right-radius:6px;
            }

    And upload the new image

  28. martinlompa
    Member
    Posted 3 years ago #

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

    :-)

    that is too beautiful for words.

    FINALLY I can go sleep!! thank you henri!! and Thank you Elixr also!!
    My word..what a challenge. So happy we got it right. :-)

    I learnt so much today.

  29. henri
    Member
    Posted 3 years ago #

    tombarnfield please mark this post as resolve!

  30. Kelly Thais Seinas
    Member
    Posted 3 years ago #

    Preciso muito de ajuda, não compreendo perfeitamente todas esses códicos , mas a minha necessidade de arrumar meu site é tanta que eu consigo aprender, já li muitos fóruns e aprendi um pouco já, mas estou com problemas com o meu cabeçalho, pois criei meu blog inicialmente pelo Word Press. com(http://benditaideia.wordpress.com) e fiz hospedagem para poder ter as ferramentas de google analytics e outros,já que não tenho experiencia como web designer, porém fui mau instruida pela empresa de hospedagem e tive que transferir o meu conteudo para http://www.benditaonline.com.br e tudo esta desconfigurado no meu tema wordpress.org , não existe as mesmas opções no painel admin que existia no wordpress.com para eu configurar o tema, principalmente a imagem do cabeçalho, a versão instalada hoje do tema Koi Themify é diferente da versão anterior Koi Nick La...o que eu faço????? Tem uma tela que diz header.php e outros com muitos códigos , me ajudem com urgencia estou preocupada , pois esse é meu trabalho e estou na fase de divulgação dele, e ele esta feio demais.
    Obrigada

Topic Closed

This topic has been closed to new replies.

About this Topic