trying to add a banner above the header.

darkmdbeener

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.

vrijvlinder

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>

darkmdbeener

Thanks the black line is there but the links are not. I think I might be able to work the rest out. lol hopefully.

vrijvlinder

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

darkmdbeener

what do you mean clone it all?

vrijvlinder

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

darkmdbeener

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

darkmdbeener

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

vrijvlinder

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