Forum Support

Shape 5
May 11, 2021, 03:38:18 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News: Shape 5 Forum
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: move facebook twitter +1  (Read 351 times)
wilson camacho
Jr. Member
**
Offline Offline

Posts: 102



« on: September 19, 2012, 12:23:42 PM »

how can i move facebook twitter =1 and rss icons to the the top. basically i want to move it  to the right side above the blue bar


thank you
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #1 on: September 19, 2012, 03:36:31 PM »

Adjust the values in bold until you get the desired position on your template

Template.CSS - Line 681

#s5_social_wrap_inner {
    margin-left: 975px;
    margin-top: -310px;
    padding-top: 30px;
    position: absolute;
    width: 32px;
    z-index: 1;
}
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
wilson camacho
Jr. Member
**
Offline Offline

Posts: 102



« Reply #2 on: September 21, 2012, 07:21:35 AM »

I already moved the social networking on the top . but i would like to put the icon on horizontal position

my url http://www.sandungatv.org/index.php

basically i want the social network icon look like this page http://www.globalmambo.com/

another question can the social network icons appear on all the pages? because the icons are only on the home page
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #3 on: September 21, 2012, 09:04:03 PM »

Hey,

1) Hopefully this makes sense but the reason your social icons are not appearing on every page is because in Hexicon_Gamer they are coded into the "s5_bottom_area_wrap_1" This means that to get it up to the "header" area which you wanted that you have to make an extreme change to the margins. This sometimes causes issues with different page sizes. In this case you have:
   
    margin-left: 975px;
    margin-top: -640px;

If you want your social icons at the top at all times without adjusting the margins that extreme you would have to move them to the "Header" area of the index.php as seen in a template called "Construction" Then you would have to re-adjust the CSS to remove the extreme margins.

[/URL]



2)To make your social icons appear horizontally please make the following adjustments or additions in BOLD to the Template.CSS

Template.CSS - Line 644

#s5_facebook {
    background: url("../images/facebook.png") no-repeat scroll left top transparent;
    cursor: pointer;
    float: left;
    height: 32px;
    margin-bottom: 8px;
    width: 32px;
}

Template.CSS - Line 632


#s5_google {
    background: url("../images/google.png") no-repeat scroll left top transparent;
    cursor: pointer;
    float: left;
    height: 32px;
    margin-bottom: 8px;
    width: 32px;
}

Template.CSS - Line 668

#s5_twitter {
    background: url("../images/twitter.png") no-repeat scroll left top transparent;
    cursor: pointer;
    float: left;
    height: 32px;
    margin-bottom: 8px;
    width: 32px;
}

Template.CSS - Line 656

#s5_rss {
    background: url("../images/rss.png") no-repeat scroll left top transparent;
    cursor: pointer;
    float: left;
    height: 32px;
    margin-bottom: 8px;
    width: 32px;
}

Template.CSS - Line 680

#s5_social_wrap_inner {
    margin-left: 975px;
    margin-top: -640px;
    padding-top: 30px;
    position: absolute;
    width: 130px;           
    z-index: 1;
}
« Last Edit: September 21, 2012, 09:42:25 PM by Michael Nicoll » Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
wilson camacho
Jr. Member
**
Offline Offline

Posts: 102



« Reply #4 on: September 24, 2012, 06:25:21 AM »

i would  like to put it back. but i lost the original code. can you tell me the code please ?
Logged
mikenicoll
Global Moderator
*****
Offline Offline

Posts: 20162



WWW
« Reply #5 on: September 24, 2012, 09:56:36 PM »

You can simply download a fresh copy of the template from Shape5 and copy the lines of code that you have modified with the original ones and adjust them to your liking.
Logged

Mike Nicoll
------------
Shape 5 Team

- Need a great host for your website? We highly recommend siteground.com!


- Put your trust in the hands of our extremely qualified staff to get your job done right!


- Firebug is the most powerful web development and debugging tool, and it will save you a lot of time, frustration and forum questions:
Install Firebug
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2013, Simple Machines
Joomla Bridge by JoomlaHacks.com
Valid XHTML 1.0! Valid CSS!
Looking for the largest variety in template designs? Look no more. Never buy 1 theme again. Signups start at just $89 for access to all of our themes.
Send Us An Email
Please send us your questions and we will email you back as soon as we can. Product support questions should be posted in our support forums under the Help menu. Our staff will assist you from there.