[For 1.8] Square theme

[eNvy]

Hey envy awesome theme. How would I without messing the layout of the site add social links above the menu. My site is  http://ytgaming.com I am trying to create a gaming and youtube community as it something I do every day. Just for fun.

I would like to add a Facebook, twitter and YouTube social link bar with icons for each and if they hover over the youtube it will say subscribe to YTGaming channel, or if it is Facebook when the user hovers over it will say like our facebook page

HTML

ACP > Templates & Styles > Templates > Square > Header Templates > open header template

Inside search this:

<div id="header">
		<div class="wrapper">
          	<div class="logo"><div class="logo2"><i class="fa fa-cube fa-fw"></i></div> {$lang->xstyled_logo}</div>
          	<div class="menu">
              	<ul>
                  	<li><a href="{$mybb->settings['bburl']}/index.php"><i class="fa fa-comments fa-2x"></i><br />{$lang->xstyled_index}</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa-search fa-2x"></i><br />{$lang->xstyled_search}</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users fa-2x"></i><br />{$lang->xstyled_members}</a></li>
                  	<li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar-o fa-2x"></i><br />{$lang->xstyled_calendar}</a></li>
                	<li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-question-circle fa-2x"></i><br />{$lang->xstyled_help}</a></li>
              	</ul>
          	</div>
		</div>
	</div>

Modify like this:

<div id="header">
    <div class="wrapper">
        <div class="logo"><div class="logo2"><i class="fa fa-cube fa-fw"></i></div> <a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a></div>
        <div class="menu">
            <ul>
                <li><a href="{$mybb->settings['bburl']}/index.php"><i class="fa fa-comments fa-2x"></i><br />{$lang->xstyled_index}</a></li>
                <li><a href="{$mybb->settings['bburl']}/search.php"><i class="fa fa-search fa-2x"></i><br />{$lang->xstyled_search}</a></li>
                <li><a href="{$mybb->settings['bburl']}/memberlist.php"><i class="fa fa-users fa-2x"></i><br />{$lang->xstyled_members}</a></li>
                <li><a href="{$mybb->settings['bburl']}/calendar.php"><i class="fa fa-calendar-o fa-2x"></i><br />{$lang->xstyled_calendar}</a></li>
                <li><a href="{$mybb->settings['bburl']}/misc.php?action=help"><i class="fa fa-question-circle fa-2x"></i><br />{$lang->xstyled_help}</a></li>
           </ul>
        </div>
        <div class="social">
            <ul>
                <li><a href="#" title="{$lang->xstyled_facebook}"><i class="fa fa-facebook-square fa-fw"></i></a></li>
                <li><a href="#" title="{$lang->xstyled_twitter}"><i class="fa fa-twitter-square fa-fw"></i></a></li>
                <li><a href="#" title="{$lang->xstyled_youtube}"><i class="fa fa-youtube-play fa-fw"></i></a></li>
            </ul>
        </div>
    </div>
</div>

Replace the "#" in each <li> tag with the URL of your facebook/twitter/youtube. Also, I modified the logo section, so you don't need to put a custom code there, simply go to ACP > Templates & Styles > Styles > Square and click options > edit theme.

Search "Board Logo" and then put the path of your custom logo there, the theme will be loading your logo automatically.

CSS

ACP > Templates & Styles > Styles > Square > open Square.css

At the end of the file, paste this:

.social {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	float: right;
	text-align: right;
	margin: 17px 0 0 0;
	padding: 0;
}

.social ul {
	margin: 0;
	padding: 0;
}

.social ul li {
	list-style: none;
	display: inline;
	padding: 0;
	margin: 0;
}

.social ul li a:link, .social ul li a:visited {
	color: #FFFFFF;
	opacity: 0.5;
	font-size: 20px;
	transition: all 0.5s ease;
}

.social ul li a:hover, .social ul li a:active {
	opacity: 1;
	transition: all 0.5s ease;
}

Now go to your forum root > inc > languages > english > open vars_envy.lang.php

At the end of the file, put this:

$l['xstyled_facebook'] = "Like our Facebook page!";
$l['xstyled_twitter'] = "Follow us on Twitter!";
$l['xstyled_youtube'] = "Subscribe to YTGaming channel!";

Remember, the file needs to end with the "?>" symbol, if you want to change the text go ahead, but only change the "like, follow, subscribe" thing, not the variable itself. Also, be careful with the symbols in that file, if you delete one the plugin itself will fail.