HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How do i add a custom-topbox?

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;
}

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

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

  • @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?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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.

  • @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

    scr.jpg 125.5K
    scr2.jpg 225.4K
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited December 2014

    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%;
    }
    
  • @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??

    scr3.jpg 146.9K
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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>

Sign In or Register to comment.