MyBB Community Forums

Pages: 1 2

Hi, please can someone tell me how to adjust things around in the header..?

I would like it displayed like:
LOGO - Site Name & Slogan - Social media buttons

Instead its displaying like this:
LOGO and Sitename
- Slogan

its not even showing the social media buttons..

My header html code is:

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div id="logo">
				<div class="wrapper">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                  <div class="textbox_upper"><center>CarFreaksUnite.com</center></div>
                  <div class="textbox_lower"><center>The No.1 Pit Stop For Car Fans!</center></div>
                  <div>
<span class="twitter"><a href="https://twitter.com/carfreaksunite" target="_blank" title="Follow us on Twitter"></a></span>
<span class="facebook"><a href="https://www.facebook.com/carfreaksunite" target="_blank" title="Like Us on Facebook"></a></span>
<span class="instagram"><a href="https://www.instagram.com/carfreaksunite" target="_blank" title="Follow Us on Instagram"></a></span>
<span class="ebay"><a href="http://www.ebay.co.uk/sch/carfreaksunite/m.html?_nkw=&_armrs=1&_from=&_ipg=" target="_blank" title="Browse Our Ebay Store"></a></span>
</div>
                  <ul class="menu top_links">
						{$menu_portal}
						{$menu_search}
						{$menu_memberlist}
						{$menu_calendar}
						<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
					</ul>
              </div>
			</div>
			<div id="panel">
				<div class="upper">
					<div class="wrapper">
						{$quicksearch}
						{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
		</div>
		<div id="content">
			<div class="wrapper">
				{$pm_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
				<navigation>
				<br />

My css stylesheet code, or the relevant bits are:

#header ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header .textbox_upper{
  	font-size: 300%;
    color: #000;
  	text-shadow: white 0.1em 0.1em 0.2em;
    font-weight: bold;
  	text-decoration: underline;
 	display: inline-block;
  	position: absolute;
}

#header .textbox_lower{
  	font-size: 150%;
  	color: #fff;
  	text-shadow: black 0.1em 0.1em 0.2em;
	font-weight: bold;
}

#header ul.menu li {
	margin: 0 7px;
	display: inline;
}

#header ul.menu li a {
	padding-left: 20px;
	background-image: url(images/headerlinks_sprite.png);
	background-repeat: no-repeat;
	display: inline-block;
}

.facebook a {
    background: url("/images/social/social_facebook.png") no-repeat;
    width: 16px;
    height: 16px;
    display: block;
     opacity: 0.9;
    float: right;
    padding-right: 0px;
     -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
       transition: all 250ms ease-in-out;
}

.facebook a:hover {
   opacity: 1;
}

.twitter a {
    background: url("/images/social/social_twitter.png") no-repeat;
    width: 16px;
    height: 16px;
    display: block;
     opacity: 0.9;
    float: right;
    padding-right: 0px;
     -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
       transition: all 250ms ease-in-out;
}

.twitter a:hover {
   opacity: 1;
}

.instagram a {
    background: url("/images/social/social_instagram.png") no-repeat;
    width: 16px;
    height: 16px;
    display: block;
     opacity: 0.9;
    float: right;
    padding-right: 0px;
     -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
       transition: all 250ms ease-in-out;
}

.instagram a:hover {
   opacity: 1;
}

.ebay a {
    background: url("/images/social/social_ebay.png") no-repeat;
    width: 16px;
    height: 16px;
    display: block;
     opacity: 0.9;
    float: right;
    padding-right: 0px;
     -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
       transition: all 250ms ease-in-out;
}

.ebay a:hover {
   opacity: 1;
}

Its doing my head in and I can't figure out how to solve it so any help would be MUCH appreciated!

Site links in my signature if you need it..

To start with the navigation.
Go to ACP>Templates>Your Template>Navigation Template>Nav_Sep_active

Remove <br />

Social
You have no img, and missing css class for those social.
You can make one css class for each social img, and in that class include the img, or make one social class for all socials, and include the img in the header.

(2014-10-11, 06:29 AM)BaggerHD Wrote: [ -> ]To start with the navigation.
Go to ACP>Templates>Your Template>Navigation Template>Nav_Sep_active

Remove <br />

Social
You have no img, and missing css class for those social.
You can make one css class for each social img, and in that class include the img, or make one social class for all socials, and include the img in the header.

OK, removed the </br>
This made no difference to anything as far as I can see...

As for the social, the images are all there in FTP:
public_html >> images >> social >> social_---.png

What else do i need to do to sort this out..?

Cheers Smile

About the <br /> in your browser, hold ctrl and press one time on F5 (browser will catch the side without looking at cache).

If you see at your code, you are starting with <span class="twitter"
The browser will then look at the css to find the class twitter, but you have not made any yet, and there fore nothing will work.

I don't know where you want this social icons, but just so you understand a little how it works.
In css add at the bottom of the page:

span.twitter {
color: #ccc;
display: block;
padding-right: 15px;
width: 32px;
height: 32px;
float: left;
background: url(images/social/social_twitter.png) no-repeat;
}

This css is just an example.
To get it right, you'll have to tell where you want them, or try changing this css to work for you

If you want them on the right side just like in the attachment you placed, you'll have to change the span class to ul class, and make the links inside a li. Also you'll have to move it to just under the wrapper.

(2014-10-11, 07:36 AM)BaggerHD Wrote: [ -> ]About the <br /> in your browser, hold ctrl and press one time on F5 (browser will catch the side without looking at cache).

If you see at your code, you are starting with <span class="twitter"
The browser will then look at the css to find the class twitter, but you have not made any yet, and there fore nothing will work.

I don't know where you want this social icons, but just so you understand a little how it works.
In css add at the bottom of the page:
span.twitter {
color: #ccc;
display: block;
padding-right: 15px;
width: 32px;
height: 32px;
float: left;
background: url(images/social/social_twitter.png) no-repeat;
}
This css is just an example.
To get it right, you'll have to tell where you want them, or try changing this css to work for you

If you want them on the right side just like in the attachment you placed, you'll have to change the span class to ul class, and make the links inside a li. Also you'll have to move it to just under the wrapper.

OK, still dont see any difference from removing</br>
what was it supposed to do? (yes i have held ctrl and pressed f5)

and the code you provided, its done something... but i have no idea how to get it to where i want it..

P.S.
I placed the code in global.css, is this correct?

global.css is correct.

Try this,

ul.social {
float: right;
padding-right: 25px;
margin: 0 auto;
list-style: none;
}

span.twitter {
background: url(images/social/social_twitter.png) no-repeat;
width: 24px;
height: 24px;
display: block;
}

add this to global.css.

copy span.twitter and past again in css, change then the name to span.facebook and do the same width the rest.

In header:
under wrapper

<ul class="social">
<li><span class="twitter"><a href="https://twitter.com/carfreaksunite" target="_blank" title="Follow us on Twitter"></a></span></li></ul>

Do the same with facebook and so on, inside this ul class, just under twitter. Add <li>and same as the twitter, but then the code from facebook</li>

Resize social icons (images) to 24px X 24px, and reupload the images

One tip: Resize your background image, it's now 4mb,,,,and THAT is way to big

(2014-10-11, 08:57 AM)BaggerHD Wrote: [ -> ]global.css is correct.

Try this,
ul.social {
float: right;
padding-right: 25px;
margin: 0 auto;
list-style: none;
}
span.twitter {
background: url(images/social/social_twitter.png) no-repeat;
width: 24px;
height: 24px;
display: block;
}
add this to global.css.

copy span.twitter and past again in css, change then the name to span.facebook and do the same width the rest.

In header:
under wrapper
<ul class="social">
<li><span class="twitter"><a href="https://twitter.com/carfreaksunite" target="_blank" title="Follow us on Twitter"></a></span></li></ul>
Do the same with facebook and so on, inside this ul class, just under twitter. Add <li>and same as the twitter, but then the code from facebook</li>

Resize social icons (images) to 24px X 24px, and reupload the images

One tip: Resize your background image, it's now 4mb,,,,and THAT is way to big

Still no luck...
Nothing has changed...

I will put my full css and header files below, maybe theres something messed up with them..?

Header:

<div id="container">
		<a name="top" id="top"></a>
		<div id="header">
			<div id="logo">
				<div class="wrapper">
					<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
                  <div class="textbox_upper"><center>CarFreaksUnite.com</center></div>
                  <div class="textbox_lower"><center>The No.1 Pit Stop For Car Fans!</center></div>
                  <div>
</div>
                  <ul class="menu top_links">
						{$menu_portal}
						{$menu_search}
						{$menu_memberlist}
						{$menu_calendar}
						<li><a href="{$mybb->settings['bburl']}/misc.php?action=help" class="help">{$lang->toplinks_help}</a></li>
					</ul>
              </div>
			</div>
			<div id="panel">
				<div class="upper">
					<div class="wrapper">
						{$quicksearch}
						{$welcomeblock}
					<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
				<!-- </div> in header_welcomeblock_member and header_welcomeblock_guest -->
			</div>
		 </div>
		<div id="content">
		<div class="wrapper">
				<ul class="social">
<li><span class="twitter"><a href="https://twitter.com/carfreaksunite" target="_blank" title="Follow us on Twitter"></a></span></li></ul> 
          <ul class="social">
<li><span class="facebook"><a href="https://facebook.com/carfreaksunite" target="_blank" title="Like us on Facebook"></a></span></li></ul> 
          <ul class="social">
<li><span class="instagram"><a href="https://instagram.com/carfreaksunite" target="_blank" title="Follow us on Instagram"></a></span></li></ul> 
          <ul class="social">
<li><span class="ebay"><a href="http://ebay.co.uk/sch/carfreaksunite/m.html?_nkw=&_armrs=1&_from=&_ipg=" target="_blank" title="Browse our Ebay Store!"></a></span></li></ul> 
          		{$pm_notice}
				{$bannedwarning}
				{$bbclosedwarning}
				{$unreadreports}
				{$pending_joinrequests}
				{$awaitingusers}
           <div id = "adsense_header">
            <div align="center">
             <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header/Footer Ads - MyBB -->
<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-6234176000152717"
     data-ad-slot="4058057384"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
           </div>
          </div>
				<navigation>
				<br />

CSS:

body {
	padding-top: 50px;
  	padding-bottom: 50px;
  	background: #fff;
	background-image: url("/images/20130512_180856.jpg");
	background-attachment: fixed;
	background-size: cover;
	line-height: 1.4;
	margin: 0 auto;
  	position: relative;
  	overflow-y: scroll;
	
	color: #333;
	width: 76%;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

a:link {
	color: #0072BC;
	text-decoration: none;
}

a:visited {
	color: #0072BC;
	text-decoration: none;
}

a:hover,
a:active {
	color: #0072BC;
	text-decoration: underline;
}

#container {
	opacity: .9;
	border: 8px solid #000;
	border-radius: 10px;
	text-align: left;
	line-height: 1.4;
	margin: 0 auto;
	position: relative;
	min-width: 990px;
	
	width: 76%;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.wrapper {
	width: 85%;
	min-width: 970px;
	max-width: 1500px;
	margin: auto auto;
}

#logo {
	background: #fff;
	padding: 10px 0;
	border-bottom: 1px solid #263c30;
}

#content {
	background: #fff;
  	width: auto !important;
	padding: 20px 10px;
	overflow: hidden;
}

#header ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#header .textbox_upper{
  	font-size: 300%;
    color: #000;
  	text-shadow: white 0.1em 0.1em 0.2em;
    font-weight: bold;
  	text-decoration: underline;
 	display: inline-block;
  	position: absolute;
}

#header .textbox_lower{
  	font-size: 150%;
  	color: #fff;
  	text-shadow: black 0.1em 0.1em 0.2em;
	font-weight: bold;
}

#header ul.menu li {
	margin: 0 7px;
	display: inline;
}

#header ul.menu li a {
	padding-left: 20px;
	background-image: url(images/headerlinks_sprite.png);
	background-repeat: no-repeat;
	display: inline-block;
}

#logo ul.top_links {
	font-weight: bold;
	text-align: right;
	margin: -10px 5px 0 0;
}

#logo ul.top_links a.search {
	background-position: 0 0;
}

#logo ul.top_links a.memberlist {
	background-position: 0 -20px;
}

#logo ul.top_links a.calendar {
	background-position: 0 -40px;
}

#logo ul.top_links a.help {
	background-position: 0 -60px;
}

#logo ul.top_links a.portal {
	background-position: 0 -180px;
}

#panel .upper a.logout {
	font-weight: bold;
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
	background: url(images/headerlinks_sprite.png) 0 -100px no-repeat;
	padding-left: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .upper a.register {
	background: url(images/headerlinks_sprite.png) right -80px no-repeat;
	padding-right: 20px;
	margin-left: 10px;
	font-weight: bold;
}

#panel .lower ul.panel_links {
	float: left;
}

#panel .lower ul.panel_links a.usercp {
	background-position: 0 -120px;
}

#panel .lower ul.panel_links a.modcp {
	background-position: 0 -140px;
}

#panel .lower ul.panel_links a.admincp {
	background-position: 0 -160px;
}

#panel .lower ul.user_links {
	float: right;
}

#panel .lower ul.user_links li a {
	padding: 0;
	background-image: none;
}

#panel .upper {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 7px;
	clear: both;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
	color: #fff;
}

#panel .lower {
	background: #efefef;
	color: #999;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 5px;
}

#panel .lower a:link,
#panel .lower a:visited,
#panel .lower a:hover,
#panel .lower a:active {
	color: #666;
}

#search {
	border: 0;
	padding: 0;
	margin: 0;
	float: right;
	vertical-align: middle;
}

#search input.button,
#search input.textbox {
	border-color: #000;
}

#search input.button {
	background: #0066a2 url(images/thead.png) top left repeat-x;
	color: #fff;
}

#search input {
	margin: -3px 0;
}

#quick_login .remember_me input {
	vertical-align: middle;
	margin: -3px 0 0 5px;
}

#footer {
	clear: both;
}

#footer ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

#footer ul.menu li {
	margin: 0 5px;
	display: inline;
}

#footer .upper {
	background: #efefef;
	border-top: 1px solid #bbb;
	border-bottom: 0px solid #bbb;
	padding: 6px;
	overflow: hidden;
	
	font-size: 12px;
}

#footer a:link,
#footer a:visited,
#footer a:hover,
#footer a:active {
	color: #777;
}

#footer .upper .language {
	float: right;
	margin: -1px;
	margin-left: 15px;
}

#footer .upper .language select {
	border-color: #ccc;
}

#footer .upper .theme {
	float: right;
	margin: -1px;
	margin-left: 15px;
}

#footer .upper .theme select {
	border-color: #ccc;
}

#footer .upper ul.bottom_links {
	float: left;
	margin: 4px 0 0 0;
}

#footer .lower {
	Background-color: #efefef;
	padding: 6px 6px 12px 6px;
	overflow: hidden;
	
	color: #666;
	font-size: 11px;
}

#footer .lower a:link,
#footer .lower a:visited {
	color: #444;
	font-weight: bold;
}

#footer .lower a:hover,
#footer .lower a:active {
	color: #333;
	text-decoration: underline;
	font-weight: bold;
}

#footer .lower #current_time {
	float: right;
	color: #888;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 20px;
	font-size: 11px;
}

.scaleimages img {
	max-width: 100%;
}

.forum_status {
	height: 30px;
	width: 30px;
	background: url(images/forum_icon_sprite.png) no-repeat 0 0;
	display: inline-block;
}

.forum_on {
	background-position: 0 0;
}

.forum_off {
	background-position: 0 -30px;
}

.forum_offlock {
	background-position: 0 -60px;
}

.forum_offlink {
	background-position: 0 -90px;
}

.subforumicon {
	height: 10px;
	width: 10px;
	display: inline-block;
	margin: 0 5px;
	background: url(images/mini_status_sprite.png) no-repeat 0 0;
}

.subforum_minion {
	background-position: 0 0;
}

.subforum_minioff {
	background-position: 0 -10px;
}

.subforum_miniofflock {
	background-position: 0 -20px;
}

.subforum_miniofflink {
	background-position: 0 -30px;
}

table {
	border-spacing 0px: ;
	color: #333;
	font-size: 13px;
}

.tborder {
	background: #fff;
	width: 100%;
	margin: auto auto;
	border: 4px solid #000;
	padding: 0px;
}

.tfixed {
	table-layout: fixed;
	word-wrap: break-word;
}

.thead {
	background: #0066a2 url(images/thead.png) top left repeat-x;
	color: #ffffff;
	border-bottom: 1px solid #f000;
	padding: 8px;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover,
.thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
	padding: 6px;
	font-size: 12px;
}

.tcat a:link {
	color: #fff;
}

.tcat a:visited {
	color: #fff;
}

.tcat a:hover,
.tcat a:active {
	color: #fff;
}

.trow1 {
	background: #f5f5f5;
	border: 1px solid;
  	border-color: #000;
}

.trow2 {
	background: #efefef;
	border: 1px solid;
	border-color:#000;
}

.trow_shaded {
	background: #ffdde0;
	border: 1px solid;
	border-color: #000;
}

.no_bottom_border {
	border-bottom: 0;
}

.post.unapproved_post {
	background: #ffdde0;
}

.post.unapproved_post .post_author {
	border-bottom-color: #000;
}

.post.classic.unapproved_post .post_author {
	border-color: #000;
}

.post.unapproved_post .post_controls {
	border-top-color: #000;
}

.trow_deleted,
.post.deleted_post {
	background: #E8DEFF;
}

.trow_selected,
tr.trow_selected td {
	background: #FFFBD9;
	color: #333;
  	border-right-color: #000;
	border-bottom-color: #000;
}

.trow_selected a:link,
.trow_selected a:visited,
.trow_selected a:hover,
.trow_selected a:active {
	color: #333;
}

.trow_sep {
	background: #ddd;
	color: #333;
	border: 1px solid #000;
	padding: 6px;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #ddd;
	border: 1px solid #000;
	padding: 6px;
	
	color: #666;
}

.tfoot a:link {
	color: #444;
	text-decoration: none;
}

.tfoot a:visited {
	color: #444;
	text-decoration: none;
}

.tfoot a:hover,
.tfoot a:active {
	color: #444;
	text-decoration: underline;
}

.thead input.textbox,
.thead select {
	border: 0px solid #263c30;
}

.bottommenu {
	background: #efefef;
	color: #333;
	border: 0px solid #4874a3;
	padding: 10px;
}

.navigation {
	color: #333;
	font-size: 12px;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover,
.navigation a:active {
	text-decoration: underline;
}

.navigation .active {
	color: #333;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

fieldset {
	padding: 12px;
	border: 4px solid #000;
	margin: 0;
}

fieldset.trow1,
fieldset.trow2 {
	border-color: #bbb;
}

fieldset.align_right {
	text-align: right;
}

input.textbox {
	background: #ffffff;
	color: #333;
	border: 1px solid #ccc;
	padding: 3px;
	outline: 0;
	font-size: 13px;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

textarea {
	background: #ffffff;
	color: #333;
	border: 1px solid #ccc;
	padding: 2px;
	line-height: 1.4;
	outline: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

select {
	background: #ffffff;
	padding: 3px;
	border: 1px solid #ccc;
	outline: 0;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

button,
input.button {
	padding: 3px 8px;
	cursor: pointer;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
	font-size: 13px;
	background: #eee url(images/buttons_bg.png) repeat-x;
	border: 1px solid #bbb;
	color: #333;
	outline: 0;
}

button:hover,
input.button:hover {
	border-color: #aaa;
}

form {
	margin: 0;
	padding: 0;
}

form input.error {
	border: 1px solid #f30;
	color: #f30;
	background: #ffffff;
	padding: 3px;
	outline: 0;
	font-size: 13px;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

form input.valid {
	border: 1px solid #0c0;
	background: #ffffff;
	padding: 3px;
	outline: 0;
	font-size: 13px;
	font-family: Tahoma, Verdana, Arial, Sans-Serif;
}

form label.error {
	color: #f30;
	margin: 5px;
	padding: 0px;
	display: block;
	font-weight: bold;
	font-size: 11px;
}

form #message {
    width: 500px;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #ccc;
}

.post .editor_control_bar {
	background: #f5f5f5;
}

.popup_menu {
	background: #fff;
	border: 1px solid #ccc;
}

.popup_menu .popup_item {
	background: #efefef;
	color: #333;
}

.popup_menu .popup_item:hover {
	background: #0072BC;
	color: #fff;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.repbox {
	font-size:16px;
	font-weight: bold;
	padding:5px 7px 5px 7px;
}

._neutral {
	background-color:#FAFAFA;
	color: #999999;
	border:1px solid #CCCCCC;
}

._minus {
	background-color: #FDD2D1;
	color: #CB0200;
	border:1px solid #980201;
}

._plus {
	background-color:#E8FCDC;
	color: #008800;
	border:1px solid #008800;
}

img {
	border: none;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

.clear {
	clear: both;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.hiddenrow {
	display: none;
}

.selectall {
	background: #FFFBD9;
	border-bottom: 1px solid #F7E86A;
	color: #333;
	text-align: center;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

.tcat_menu > .expcolimage {
	margin-top: 0;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 10px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	padding-bottom: 3px;
	margin: 0 0 10px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
	font-size: 12px;
	color: #666;
}

blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 10px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	padding-bottom: 3px;
	margin: 0 0 10px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.smilie {
	vertical-align: middle;
}

.smilie_pointer {
	cursor: pointer;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 4px;
	white-space: nowrap;
	text-decoration: none;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding-top: 3px;
	padding-bottom: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	margin-bottom: 15px;
	font-size: 11px;
	word-wrap: break-word;
}

.red_alert a:link,
.red_alert a:visited,
.red_alert a:hover,
.red_alert  a:active {
	color: #A5161A;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #333;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url(images/error.png) no-repeat 0;
}

div.error ul {
	margin-left: 24px;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination,
.tcat .pagination {
	padding-top: 0;
}

.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current,
.pagination a {
	padding: 3px 6px;
	margin-bottom: 3px;
}

.pagination a {
	background: #f5f5f5;
	border: 1px solid #ccc;
}

.pagination .pagination_current {
	background: none;
	color: #333;
	border: none;
	font-weight: bold;
}

.pagination a:hover {
	background: #0072BC;
	color: #fff;
	border-color: #263c30;
	text-decoration: none;
}

.pagination .go_page img {
	margin-bottom: -4px;
}

.drop_go_page {
	background: #f5f5f5;
	padding: 4px;
}

.pagination_breadcrumb {
	background-color: #efefef;
	border: 1px solid #fff;
	outline: 1px solid #ccc;
	padding: 5px;
	margin-top: 5px;
	font-weight: normal;
}

.pagination_breadcrumb_link {
	vertical-align: middle;
	cursor: pointer;
}

.thread_legend,
.thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend,
.forum_legend dt,
.forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
	margin-top: 7px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

#posts_container {
	padding: 0;
}

.ignored_post {
	border-top: 3px solid #333;
	padding: 15px;
}

.ignored_post .show_ignored_post {
	margin-top: -15px;
}

.ignored_post .show_ignored_post a.button span {
	background-position: 0 -400px;
}

.post {
	overflow: hidden;
}

.post.classic {
	padding-top: 15px;
}

.post .post_author {
	border-bottom: 1px solid #ccc;
	border-top: 2px solid #ccc;
	background: #f5f5f5;
	padding: 5px;
	overflow: hidden;
}

.post.classic .post_author {
	border: 1px solid #ddd;
	float: left;
	width: 15%;
	margin: 0 1% 15px 0;
	border-left: 0;
	padding: 5px 1%;
}

.post .post_author .buddy_status {
	vertical-align: middle;
	margin-top: -4px;
}

.post .post_author div.author_avatar {
	float: left;
	margin-right: 3px;
}

.post.classic .post_author div.author_avatar {
	float: none;
	text-align: center;
	margin-bottom: 8px;
}

.post .post_author div.author_avatar img {
	padding: 5px;
	border: 1px solid #ddd;
	background: #fff;
}

.post .post_author div.author_information {
	float: left;
	padding: 6px 8px;
}

.post.classic .post_author div.author_information {
	float: none;
	padding: 0;
	text-align: center;
}

.post .post_author div.author_statistics {
	float: right;
	font-size: 11px;
	padding: 3px 10px 3px 5px;
	color: #666;
	line-height: 1.3;
}

.post.classic .post_author div.author_statistics {
	border-top: 1px dotted #ccc;
	margin: 6px 0 0 0;
	padding: 6px 6px 3px 6px;
	float: none;
}

.post .post_head {
	font-size: 11px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 4px;
}

.post .post_head span.post_date {
	color: #666;
}

.post .post_head span.edited_post {
	font-size: 10px;
	color: #999;
}

.post .post_head span.edited_post a {
	color: #666;
}

.post_body {
	font-size: 14px;
	padding: 12px 0;
}

.post.classic .post_content {
	float: left;
	width: 79%;
	padding: 0 1% 5px 1%;
}

.post_content {
	padding: 9px 10px 5px 10px;
}

.post_content .signature {
	margin-top: 5px;
	border-top: 1px dotted #ddd;
	padding: 10px 0 4px 0;
}

.post .post_meta {
	margin: 4px 0;
	font-size: 11px;
	color: #999;
}

.post .post_meta a:link,
.post .post_meta a:visited {
	color: #777;
}

.post .post_meta a:hover,
.post .post_meta a:active {
	color: #777;
}

.post_controls {
	clear: both;
	background: #f5f5f5;
	border-bottom: 1px solid #ccc;
	padding: 5px;
	overflow: hidden;
}

.postbit_buttons > a:link,
.postbit_buttons > a:hover,
.postbit_buttons > a:visited,
.postbit_buttons > a:active {
	display: inline-block;
	padding: 2px 5px;
	margin: 2px;
	font-size: 11px;
	background: #eee url(images/buttons_bg.png) repeat-x;
	border: 1px solid #ccc;
	color: #555;
}

.postbit_buttons > a:hover {
	border-color: #bbb;
}

.postbit_buttons a span {
	padding-left: 20px;
	display: inline-block;
	height: 16px;
	background-image: url(images/buttons_sprite.png);
	background-repeat: no-repeat;
}

.postbit_buttons a.postbit_find span {
	background-position: 0 0;
}

.postbit_buttons a.postbit_reputation_add span {
	background-position: 0 -20px;
}

.postbit_buttons a.postbit_email span {
	background-position: 0 -40px;
}

.postbit_buttons a.postbit_website span {
	background-position: 0 -60px;
}

.postbit_buttons a.postbit_pm span {
	background-position: 0 -80px;
}

.postbit_buttons a.postbit_quote span {
	background-position: 0 -100px;
}

.postbit_buttons a.postbit_multiquote span {
	background-position: 0 -120px;
}

.postbit_buttons a.postbit_multiquote_on span {
	background-position: 0 -140px;
}

.postbit_buttons a.postbit_edit span {
	background-position: 0 -160px;
}

.postbit_buttons a.postbit_qdelete span {
	background-position: 0 -180px;
}

.postbit_buttons a.postbit_qrestore span {
	background-position: 0 -200px;
}

.postbit_buttons a.postbit_report span {
	background-position: 0 -220px;
}

.postbit_buttons a.postbit_warn span {
	background-position: 0 -240px;
}

.postbit_buttons a.postbit_purgespammer span {
	background-position: 0 -540px;
}

.postbit_buttons a.postbit_reply_pm span {
	background-position: 0 -260px;
}

.postbit_buttons a.postbit_reply_all span {
	background-position: 0 -280px;
}

.postbit_buttons a.postbit_forward_pm span {
	background-position: 0 -300px;
}

.postbit_buttons a.postbit_delete_pm span {
	background-position: 0 -320px;
}

a.button:link,
a.button:hover,
a.button:visited,
a.button:active {
	background: #0f0f0f url(images/tcat.png) repeat-x;
	color: #fff;
	display: inline-block;
	padding: 4px 8px;
	margin: 2px 2px 6px 2px;
	border: 1px solid #000;
	font-size: 14px;
}

a.button.small_button {
	font-size: 13px;
	margin: 0;
	padding: 3px 6px;
}

a.button span {
	padding-left: 20px;
	display: inline-block;
	background-image: url(images/buttons_sprite.png);
	background-repeat: no-repeat;
}

a.button.new_thread_button span {
	background-position: 0 -340px;
}

a.button.new_reply_button span {
	background-position: 0 -360px;
}

a.button.closed_button span {
	background-position: 0 -380px;
}

a.button.rate_user_button span {
	background-position: 0 -400px;
}

a.button.add_buddy_button span {
	background-position: 0 -440px;
}

a.button.remove_buddy_button span {
	background-position: 0 -480px;
}

a.button.add_ignore_button span {
	background-position: 0 -460px;
}

a.button.remove_ignore_button span {
	background-position: 0 -500px;
}

a.button.report_user_button span {
	background-position: 0 -520px;
}

.quick_jump {
	background: url(images/jump.png) no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	margin-top: -3px;
	border: none;
}

.pollbar {
	background: url(images/pollbar.png) top left repeat-x;
	border: 1px solid #3f3f3f;
	height: 10px;
}

.pollbar .percent {
	display: none;
}

.posticons_label {
	white-space: nowrap;
}

/** jGrowl Start **/

/** Special IE6 Style Positioning **/
.ie6 {
	position: absolute;
}

.ie6.top-right {
	right: auto;
	bottom: auto;
	left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.top-left {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-right {
	left: expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.bottom-left {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
}

.ie6.center {
	left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
	top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
	width: 100%;
}

/** jGrowl Styling **/
.jGrowl {
	z-index: 9999;
	color: #fff;
	font-size: 12px;
	position: fixed;
}

.jGrowl.top-left {
	left: 0px;
	top: 0px;
}

.jGrowl.top-right {
	right: 0px;
	top: 0px;
}

.jGrowl.bottom-left {
	left: 0px;
	bottom:	0px;
}

.jGrowl.bottom-right {
	right: 0px;
	bottom: 0px;
}

.jGrowl.center {
	top: 0px;
	width: 50%;
	left: 25%;
}

/** Cross Browser Styling **/

.center .jGrowl-notification,
.center .jGrowl-closer {
	margin-left: auto;
	margin-right: auto;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
	background-color: #000;
	opacity: .85;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
	zoom: 1;
	width: 235px;
	padding: 10px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size: 1em;
	text-align: left;
	display: none;
	border-radius: 5px;
}

.jGrowl .jGrowl-notification {
	min-height: 40px;
}

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
	margin: 10px;
}

.jGrowl .jGrowl-notification .jGrowl-header {
	font-weight: bold;
	font-size: .85em;
}

.jGrowl .jGrowl-notification .jGrowl-close {
	z-index: 99;
	float: right;
	font-weight: bold;
	font-size: 1em;
	cursor: pointer;
}

.jGrowl .jGrowl-closer {
	padding-top: 4px;
	padding-bottom: 4px;
	cursor: pointer;
	font-size: .9em;
	font-weight: bold;
	text-align: center;
}

/** Hide jGrowl when printing **/
@media print {
	.jGrowl {
		display: none;
}


}

/** jGrowl End **/

/** Modal Start **/

.modal {
	display: none;
	width: 400px;
	text-align: left;
	background: #fff;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
}

.modal a.close-modal {
	position: absolute;
	top: -12.5px;
	right: -12.5px;
	display: block;
	width: 30px;
	height: 30px;
	text-indent: -9999px;
	background: url(images/close.png) no-repeat 0 0;
}

.modal-spinner {
	display: none;
	width: 64px;
	height: 64px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-right: -32px;
	margin-top: -32px;
	background: url(images/spinner_big.gif) no-repeat center center;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	-o-border-radius: 8px;
	-ms-border-radius: 8px;
	border-radius: 8px;
}

/** Modal End **/

/** Impromptu Start **/

/*! jQuery-Impromptu - v5.2.4 - 2014-05-26
* http://trentrichardson.com/Impromptu
* Copyright (c) 2014 Trent Richardson; Licensed MIT */

.jqifade {
	position: absolute;
	background-color: #777777;
}

div.jqi {
	width: 400px;
	max-width:90%;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	background-color: #ffffff;
	font-size: 11px;
	text-align: left;
	border: solid 1px #eeeeee;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	padding: 7px;
}

div.jqi .jqiclose {
	position: absolute;
	top: 4px; right: -2px;
	width: 18px;
	cursor: default;
	color: #bbbbbb;
	font-weight: bold;
}

div.jqi .jqistate {
	background-color: #fff;
}

div.jqi .jqititle {
	padding: 5px 10px;
	font-size: 16px;
	line-height: 20px;
	border-bottom: solid 1px #eeeeee;
}

div.jqi .jqimessage {
	padding: 10px;
	line-height: 20px;
	color: #444444;
}

div.jqi .jqibuttons {
	text-align: right;
	margin: 0 -7px -7px -7px;
	border-top: solid 1px #e4e4e4;
	background-color: #f4f4f4;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
}

div.jqi .jqibuttons button {
	margin: 0;
	padding: 15px 20px;
	background-color: transparent;
	font-weight: normal;
	border: none;
	border-left: solid 1px #e4e4e4;
	color: #777;
	font-weight: bold;
	font-size: 12px;
}

div.jqi .jqibuttons button.jqidefaultbutton {
	color: #489afe;
}

div.jqi .jqibuttons button:hover,
div.jqi .jqibuttons button:focus {
	color: #287ade;
	outline: none;
}

.jqiwarning .jqi .jqibuttons {
	background-color: #b95656;
}

/* sub states */

div.jqi .jqiparentstate::after {
	background-color: #777;
	opacity: 0.6;
	filter: alpha(opacity=60);
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
}

div.jqi .jqisubstate {
	position: absolute;
	top: 0;
	left: 20%;
	width: 60%;
	padding: 7px;
	border: solid 1px #eeeeee;
	border-top: none;
	border-radius: 0 0 6px 6px;
	-moz-border-radius: 0 0 6px 6px;
	-webkit-border-radius: 0 0 6px 6px;
}

div.jqi .jqisubstate .jqibuttons button {
	padding: 10px 18px;
}

/* arrows for tooltips/tours */

.jqi .jqiarrow {
	position: absolute;
	height: 0; width: 0;
	line-height: 0;
	font-size: 0;
	border: solid 10px transparent;
}

.jqi .jqiarrowtl {
	left: 10px;
	top: -20px;
	border-bottom-color: #ffffff;
}

.jqi .jqiarrowtc {
	left: 50%;
	top: -20px;
	border-bottom-color: #ffffff;
	margin-left: -10px;
}

.jqi .jqiarrowtr {
	right: 10px;
	top: -20px;
	border-bottom-color: #ffffff;
}

.jqi .jqiarrowbl {
	left: 10px;
	bottom: -20px;
	border-top-color: #ffffff;
}

.jqi .jqiarrowbc {
	left: 50%;
	bottom: -20px;
	border-top-color: #ffffff;
	margin-left: -10px;
}

.jqi .jqiarrowbr {
	right: 10px;
	bottom: -20px;
	border-top-color: #ffffff;
}

.jqi .jqiarrowlt {
	left: -20px;
	top: 10px;
	border-right-color: #ffffff;
}

.jqi .jqiarrowlm {
	left: -20px;
	top: 50%;
	border-right-color: #ffffff;
	margin-top: -10px;
}

.jqi .jqiarrowlb {
	left: -20px;
	bottom: 10px;
	border-right-color: #ffffff;
}

.jqi .jqiarrowrt {
	right: -20px;
	top: 10px;
	border-left-color: #ffffff;
}

.jqi .jqiarrowrm {
	right: -20px;
	top: 50%;
	border-left-color: #ffffff;
	margin-top: -10px;
}

.jqi .jqiarrowrb {
	right: -20px;
	bottom: 10px;
	border-left-color: #ffffff;
}

ul.social {
float: right;
padding-right: 25px;
margin: 0 auto;
list-style: none;
}

span.twitter {
background: url(images/social/social_twitter.png) no-repeat;
width: 24px;
height: 24px;
display: block;
}

span.facebook {
background: url(images/social/social_twitter.png) no-repeat;
width: 24px;
height: 24px;
display: block;
}

span.instagram {
background: url(images/social/social_twitter.png) no-repeat;
width: 24px;
height: 24px;
display: block;
}

span.ebay {
background: url(images/social/social_twitter.png) no-repeat;
width: 24px;
height: 24px;
display: block;
}
/** Impromptu End */

At the top of your header, find
<div id="logo">
<div class="wrapper">
and set the ul and li in there (under wrapper)(remember to remove where it now stand)

And include all li inside one ul

<ul class=""social">
<li>bla bla bla</li>
<li>bla bla bla</li>
</ul>
And on facebook in css, change img path to point to the right image, the same with the rest, now all points to twitter image

Something like this

<ul class="social">
<li><span class="twitter"><a href="https://twitter.com/carfreaksunite" target="_blank" title="Follow us on Twitter"></a></span></li>
<li><span class="facebook"><a href="https://facebook.com/carfreaksunite" target="_blank" title="Like us on Facebook"></a></span></li>
<li><span class="instagram"><a href="https://instagram.com/carfreaksunite" target="_blank" title="Follow us on Instagram"></a></span></li>
<li><span class="ebay"><a href="http://ebay.co.uk/sch/carfreaksunite/m.html?_nkw=&amp;_armrs=1&amp;_from=&amp;_ipg=" target="_blank" title="Browse our Ebay Store!"></a></span></li>
</ul>

inn ul social add
padding-top: 20px;
And change margin to:
margin: auto auto;

Then it looks like this
[attachment=32741]

Replace you're background image with this one.
Still to big (200k) but at least smaller then 4 mb

[attachment=32742]

(2014-10-11, 09:52 AM)BaggerHD Wrote: [ -> ]At the top of your header, find
<div id="logo">
<div class="wrapper">
and set the ul and li in there (under wrapper)(remember to remove where it now stand)

And include all li inside one ul

<ul class=""social">
<li>bla bla bla</li>
<li>bla bla bla</li>
</ul>
And on facebook in css, change img path to point to the right image, the same with the rest, now all points to twitter image

Something like this
<ul class="social">
<li><span class="twitter"><a href="https://twitter.com/carfreaksunite" target="_blank" title="Follow us on Twitter"></a></span></li>
<li><span class="facebook"><a href="https://facebook.com/carfreaksunite" target="_blank" title="Like us on Facebook"></a></span></li>
<li><span class="instagram"><a href="https://instagram.com/carfreaksunite" target="_blank" title="Follow us on Instagram"></a></span></li>
<li><span class="ebay"><a href="http://ebay.co.uk/sch/carfreaksunite/m.html?_nkw=&amp;_armrs=1&amp;_from=&amp;_ipg=" target="_blank" title="Browse our Ebay Store!"></a></span></li>
</ul>
inn ul social add
padding-top: 20px;
And change margin to:
margin: auto auto;

Then it looks like this

Replace you're background image with this one.
Still to big (200k) but at least smaller then 4 mb

Thank you so much!!

social icons are now in place Smile

now just to try and figure out these damn text boxes lol Toungue

and the bg image (200k) comes up all blurry when I apply it so going to have to stick with original (4mb) one unfortunately..

About the social icons, I did just saw that I did forget to put an a in the css, so plz change that on every social in your css. Like this

span.facebook a {

do the same with the rest too, others you'll not have any click able icons.

Sorry for that mistake.

Don't know what you mean with text boxes,,, but sounds like a new thread he he

Pages: 1 2

Brazz

BaggerHD

Brazz

BaggerHD

Brazz

BaggerHD

Brazz

BaggerHD

Brazz

BaggerHD