MyBB Community Forums
image in the header - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: 1.8 Support (https://community.mybb.com/forum-175.html)
+--- Forum: General Support (https://community.mybb.com/forum-176.html)
+--- Thread: image in the header (/thread-217516.html)

Pages: 1 2

image in the header - 8guawong - 2018-05-13

Hello I'm using the default theme and trying to add image into the header without success

Following is a picture of what i want to accomplish
   

keep the logo that is circle in green and change the background into something else

here is a mock up of what i want my header to look like
   

I've tried solution from 
https://community.mybb.com/thread-122557.html

nothing happend

tried this plugin:
http://doylecc.altervista.org/en/cfheader.html

actually changes the header into the image but did not retain the logo (what i circled in green)

Thanks for your help!

RE: image in the header - ziuma - 2018-05-13

what is your forum url, your forum use templates like mybb community?

try this https://community.mybb.com/thread-139795.html

or inspect element and find logo location like this https://mybb.com/assets/images/logo.png

RE: image in the header - 8guawong - 2018-05-13

(2018-05-13, 01:03 PM)ziuma Wrote: what is your forum url, your forum use templates like mybb community?

try this  https://community.mybb.com/thread-139795.html

or inspect element and find logo location like this https://mybb.com/assets/images/logo.png

hi my forum url is in signature or https://www.blackmarke7.org

but i don't think you understood what i meant

i want to keep the logo which i circled in green 


but i want to change the background which i circled in red 

thx for your help!

RE: image in the header - Livewire - 2018-05-13

Global.css
Find #logo

replace
background: #202020 url(images/colors/black_header.png) top left repeat-x;

with this
background: red;


RE: image in the header - 8guawong - 2018-05-13

(2018-05-13, 02:01 PM)Livewire Wrote: Global.css
Find #logo

replace
background: #202020 url(images/colors/black_header.png) top left repeat-x;

with this
background: red;


this is what my #logo looks like

#logo {
 background: #fff;
padding: 10px 0;
border-bottom: 1px solid #263c30;
}


RE: image in the header - Wires - 2018-05-13

Remove #logo from the colour_black.css stylesheet

Go to Global.css stylesheet, search for #Logo and replace with:

#logo {
background: url(link_to_header_background_image_you_wanted);
padding: 10px 0;
border-bottom: 1px solid #263c30;
}

Then you can put back the MyBB logo if you wish.

RE: image in the header - 8guawong - 2018-05-13

(2018-05-13, 05:04 PM)Wires Wrote: Remove #logo from the colour_black.css stylesheet

Go to Global.css stylesheet, search for #Logo and replace with:

#logo {
background: url(link_to_header_background_image_you_wanted);
padding: 10px 0;
border-bottom: 1px solid #263c30;
}

Then you can put back the MyBB logo if you wish.

thx it worked!
but now i need help with making the height of the header larger
would you happen to know how?
in case you are wondering why i'm asking you can check out my site  Toungue

RE: image in the header - Wires - 2018-05-13

You can try setting the div with same height of the background-image. 

#logo {
background: url(link_to_header_background_image_you_wanted);
padding: 10px 0;
border-bottom: 1px solid #263c30;
height: 0px;
}

Change 0px (in the height attribute) to the same height as the photo.

RE: image in the header - 8guawong - 2018-05-13

(2018-05-13, 05:27 PM)Wires Wrote: You can try setting the div with same height of the background-image. 

#logo {
background: url(link_to_header_background_image_you_wanted);
padding: 10px 0;
border-bottom: 1px solid #263c30;
height: 0px;
}

Change 0px (in the height attribute) to the same height as the photo.

thx that worked wonderfully 
and for the final touch 
would you happen to know how to move the logo and the link/text so its align to the bottom of the header?
i think you would know why i'm asking this if you see whats happening on my site  Toungue 

thx for your reply!

RE: image in the header - Wires - 2018-05-14

Try wrapping the logo and links in a new div and use margin-top: px;