WordPress › Support » Header in 'Codium' theme.

tombarnfield
Member
Posted 2 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.]

Elixr
Member
Posted 2 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

tombarnfield
Member
Posted 2 years ago #

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

Elixr
Member
Posted 2 years ago #

Beautiful! I'm happy to help.

It looks great.

-Alx

Elixr
Member
Posted 2 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

henri
Member
Posted 2 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!

foreclosurefraudnews
Member
Posted 2 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.

martinlompa
Member
Posted 1 year 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!

henri
Member
Posted 1 year ago #

Look inside functions.php you will find the solution!

martinlompa
Member
Posted 1 year ago #

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

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

martinlompa
Member
Posted 1 year 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;

martinlompa
Member
Posted 1 year ago #

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

Elixr
Member
Posted 1 year 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;
}

henri
Member
Posted 1 year ago #

Nice shot Elixr ;)

martinlompa
Member
Posted 1 year 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*

henri
Member
Posted 1 year ago #

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

martinlompa
Member
Posted 1 year 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
		}
	}

henri
Member
Posted 1 year ago #

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

henri
Member
Posted 1 year 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}

martinlompa
Member
Posted 1 year 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}

:-/

henri
Member
Posted 1 year ago #

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

martinlompa
Member
Posted 1 year 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...

martinlompa
Member
Posted 1 year ago #

height:7em

same...

martinlompa
Member
Posted 1 year 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...

henri
Member
Posted 1 year ago #

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

martinlompa
Member
Posted 1 year 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.

henri
Member
Posted 1 year 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

martinlompa
Member
Posted 1 year 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.

henri
Member
Posted 1 year ago #

tombarnfield please mark this post as resolve!

Kelly Thais Seinas
Member
Posted 1 year 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

WordPress.org

Forums

Header in 'Codium' theme. (32 posts)

Topic Closed

About this Topic

Tags

Code is Poetry