How do i add a custom-topbox?

xBUTTERNUGEGTZx

Hi, I am trying to get this green banner accross the top of my vanilla forums like this site http://forum.leafy.ga/
But when i use the css code and put it in the custom.css nothing happens

.custom-topbox{
background-color: #37d200;
background-image: url("http://forum.leafy.ga/lc_images/topbox-bg1.png");
background-size: 100% auto;
height: 30%;
width: 100%;
position: relative;
margin-top: 62px;
margin-bottom: 2%;
z-index: 1000;
}

vrijvlinder

Is that your theme ? Please post a link to your forum with your theme.

xBUTTERNUGEGTZx

@vrijvlinder said:
Is that your theme ? Please post a link to your forum with your theme.

Thats not my theme i cant put a link to it because i'm running it on my localhost. Do you know why the css is not working?

vrijvlinder

No sorry. I am good but not that good...

You need to at the very least, state what theme you are using. Some themes have different class names for elements and you can't simply copy paste codes from one to the other.

Post a screen shot of what you have already and mark what you want to do. But it helps more if you can use a web inspector to look at the code.

xBUTTERNUGEGTZx

@vrijvlinder said:
No sorry. I am good but not that good...

You need to at the very least, state what theme you are using. Some themes have different class names for elements and you can't simply copy paste codes from one to the other.

Post a screen shot of what you have already and mark what you want to do. But it helps more if you can use a web inspector to look at the code.

this is my theme so far it's bootstrap with the sandstone theme

I am trying to get my theme as close as possible to this theme

vrijvlinder

Ok to do that you need to add a div inside the default.master.tpl

you could try adding this before the closing < /nav > tag and remove the link from where it is at. This will move the logo to the new div.

<div class="top-banner"><a class="navbar-brand" href="{link path="home"}">{logo}</a></div>

Then add a css rule for it in theme's custom.css

.top-banner{
background:lime;
height:100px;
width:100%;
}

xBUTTERNUGEGTZx

@vrijvlinder said:
Ok to do that you need to add a div inside the default.master.tpl

you could try adding this before the closing < /nav > tag and remove the link from where it is at. This will move the logo to the new div.

<div class="top-banner"><a class="navbar-brand" href="{link path="home"}">{logo}</a></div>

Then add a css rule for it in theme's custom.css

.top-banner{
background:lime;
height:100px;
width:100%;
}

Is there a way i can get rid of the double logo??

vrijvlinder

Yes read my comment again. Look in the default.master.tpl find this line it is almost at the top and remove it

<a class="navbar-brand" href="{link path="home"}">{logo}</a>