Users running a non-download version of Vanilla (pulled from github), on branch release/2019.016 or master from the last 2 weeks should upgrade to release/2019.017 or latest master for security reasons. Downloaded official open sources releases are not affected.
Please upgrade here. These earlier versions are no longer being updated and have security issues.

trying to add a banner above the header.

I want this page ( http://fora.oddbunch.org/ ) to look like this ( http://www.oddbunch.org/ ) I tried to add a div around it and mess with the css but that broke the whole website.

Tagged:

Comments

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    You need to first add the html for the navbar2 to the default.master.tpl or php whatever it is above the original header or for the theme you are using So add the html below before the #Head tag in the theme. And the css inside the theme's design folder inside the custom.css file of the theme. If you are using the default theme, make a new theme or use a custom them but do not edit the default.

      #nav-bar2 {
    background: #000;
    width: 100%;
    padding: 5px 0;
    min-height: 28px;
    position: relative;
    }
    @media screen and (max-width: 1104px)
    media-queries.css:7
    .pagewidth, .full_width .themify_builder_row .row_inner {
    max-width: 94%;
    }
    .social-widget {
    float: right;
    }
    .social-widget .widget {
    display: inline-block;
    zoom: 1;
    margin: 0 2px 0 0;
    padding: 0;
    }
    .widget .social-links {
    padding: 0;
    line-height: 1em;
    }
    .widget ul {
    margin: 0;
    padding: 0;
    }
    .social-widget ul {
    margin: 6px 0 0 !important;
    padding: 0;
    display: inline;
    }
    .social-links.horizontal li, .social-links.vertical li {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 0;
    list-style: none;
    zoom: 1;
    border: none !important;
    clear: none;
    line-height: 100%;
    }
    .widget .social-links a, .widget .social-links a:hover {
    text-decoration: none;
    }
    .social-widget a {
    color: #fff;
    font-size: 1.25em;
    text-decoration: none;
    }
    .social-links .icon-medium i {
    font-size: 20px;
    padding: 4px;
    width: 20px;
    height: 20px;
    }
    .social-links li i {
    line-height: 1em;
    padding: 6px;
    width: 20px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
    border-radius: 100%;
    display: inline-block;
    }
    .social-widget .rss {
    display: inline-block;
    padding: 4px;
    }
    .social-widget .rss a {
    color: #fff !important;
    font-size: 1.25em;
    line-height: 1em;
    text-decoration: none;
    }
    
      <div id="nav-bar2">
                    <div class="pagewidth clearfix">
    
                        <div class="social-widget">
                            <div id="themify-social-links-6" class="widget themify-social-links"><ul class="social-links horizontal">
                                    <li class="social-link-item twitter font-icon icon-medium">
                                        <a href="https://twitter.com/OddBunchOrg" title="Twitter" target="_blank"><i class="fa fa-twitter"></i>  </a>
                                    </li>
                                    <!-- /themify-link-item -->
                                    <li class="social-link-item facebook font-icon icon-medium">
                                        <a href="https://www.facebook.com/oddbunchorg" title="Facebook" target="_blank"><i class="fa fa-facebook"></i>  </a>
                                    </li>
                                    <!-- /themify-link-item -->
                                    <li class="social-link-item google font-icon icon-medium">
                                        <a href="https://plus.google.com/u/0/b/102073317628334180298/+OddbunchOrg/posts" title="Google+" target="_blank"><i class="fa fa-google-plus"></i>  </a>
                                    </li>
                                    <!-- /themify-link-item -->
                                    <li class="social-link-item youtube font-icon icon-medium">
                                        <a href="https://www.youtube.com/channel/UCi3i6o_hoHPq5J-Cy61spbg" title="YouTube" target="_blank"><i class="fa fa-youtube"></i>  </a>
                                    </li>
                                    <!-- /themify-link-item --></ul></div>
                                                    <div class="rss">
                                    <a href="http://oddbunch.org/feed/" class="hs-rss-link">
                                        <i class="fa fa-icon icon-rss"></i>
                                    </a>
                                </div>
                                            </div>
                        <!-- /.social-widget -->
    
                                            <div id="searchform-wrap">
                                <div id="search-icon" class="mobile-button"></div>
                                <form method="get" id="searchform" action="http://oddbunch.org/">
            <i class="fa fa-search icon-search"></i>
            <input type="text" name="s" id="s" placeholder="Search">
    
        </form>                 </div>
                            <!-- /#searchform-wrap -->
    
                    </div>
                </div>
    
    darkmdbeenerhgtonightDavidShine
  • Thanks the black line is there but the links are not. I think I might be able to work the rest out. lol hopefully.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    That is because you also need to add the js files or css files that run those links from the other site , like font-awesome.css. Add the link to the head section of the forum master. You can clone it all but you need to make sure you are calling all the necessary files too.

    http://oddbunch.org/wp-content/themes/magazine/themify/fontawesome/css/font-awesome.min.css

    darkmdbeenerhgtonightDavidShine
  • what do you mean clone it all?

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yes, clone it all means copy the entire thing that runs that section including the files it needs to work.

  • thats what I thought. hm... must have missed something then
    btw thanks for all your help

    vrijvlinder
  • edited April 2015

    I fixed it by add this instead <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

    hgtonightvrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yes that is how you add file links to the head of a document . Glad it worked for you.

    DavidShine
Sign In or Register to comment.