• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization Please help insert group of social icons

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Old Jun-24-2011, 06:06 AM
#1
antonivano is offline antonivano OP
Big grins
Please help insert group of social icons
Hi!
Here is my smugmug site: www.iafoto.ru
I want to change my facebook icon on group of social networks icons from yandex.ru. Here is a code I'm inserting in to my custom footer:
Code:
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,odnoklassniki,moimir"></div>
Before my changes its looks so:



After I put a new code to my custom footer, the new icons has shifted to the left bottom corner:




So what I am doing wrong?

Thank you very much
Old Jul-08-2011, 05:38 AM
#2
antonivano is offline antonivano OP
Big grins
Smugers, please help! :)
Old Jul-08-2011, 05:52 AM
#3
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by antonivano View Post
Smugers, please help! :)
Can't help without seeing the code live. The script needs to run.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jul-11-2011, 11:24 AM
#4
antonivano is offline antonivano OP
Big grins
Quote:
Originally Posted by Allen View Post
Can't help without seeing the code live. The script needs to run.
Oh, excuse me please, I'm so used to the idea that there is no answers and because of it I missed your message. So, please tell me what you need in order to show you the code? I am a beginner here.
Old Jul-11-2011, 11:36 AM
#5
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by antonivano View Post
Oh, excuse me please, I'm so used to the idea that there is no answers and because of it I missed your message. So, please tell me what you need in order to show you the code? I am a beginner here.
I think that a div is bumping your new div to the next line. Might have to use
floats to get both on same line. Maybe display:inline; will work also but not
sure how to use it.

I see your screen shot with the code in. If we saw it in that condition we
might be able to solve moving it.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jul-11-2011, 12:03 PM
#6
antonivano is offline antonivano OP
Big grins
Quote:
Originally Posted by Allen View Post
I think that a div is bumping your new div to the next line. Might have to use
floats to get both on same line. Maybe display:inline; will work also but not
sure how to use it.

I see your screen shot with the code in. If we saw it in that condition we
might be able to solve moving it.
Ok. The code has been inserted.
Old Jul-11-2011, 12:19 PM
#7
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by antonivano View Post
Ok. The code has been inserted.
One thing I noticed is you have them in your footer and yet trying to get them on
your customHeaderWrapper line. Maybe adding the html there in the
header instead?
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jul-11-2011, 12:44 PM
#8
antonivano is offline antonivano OP
Big grins
Quote:
Originally Posted by Allen View Post
One thing I noticed is you have them in your footer and yet trying to get them on
your customHeaderWrapper line. Maybe adding the html there in the
header instead?
I dont know. I just try to insert the new icons in place of the old icon Facebook.


here is the code from old CustomFooterWrapper

HTML Code:
 </div>
<!-- end customContentWrapper -->
<div id="customFooterWrapper">
   <div id="customFooter">
       <div id="copyright">
           <span>&copy; </span>
           <script type="text/javascript">
               var date = new Date();
               document.write(date.getFullYear());
           </script>
           <span> Антон Иванов-Капелькин</span>
                       <span> | <a href="javascript:void(0);" onclick="this.style.display = 'none'; document.getElementById('siteCredits').style.display = 'inline';">Site Credits</a></span>
                       <span id="siteCredits">Photo hosting by <a title="Photo hosting" href="http://www.smugmugpro.com/">SmugMug Pro</a> | Customization by <a href="http://www.fastlinemedia.com" target="_blank" title="SmugMug Customization and Templates"> FastLine Media</a></span>
                       
       </div>
         <div id="socialIcons">
                       <a class="facebookLink" href="http://www.facebook.com/ivanovkapelkin" target="_blank"></a>
               </div>
       
       <div class="spacer"></div>
   </div>
   <!-- end customFooter -->
</div>
<!-- end customFooterWrapper -->
Old Jul-11-2011, 01:14 PM
#9
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by antonivano View Post
I dont know. I just try to insert the new icons in place of the old icon Facebook.


here is the code from old CustomFooterWrapper
...
Another idea.
Then perhaps putting the header stuff, nav etc., that you have showing in
the footer area all in the actual footer box?
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jul-11-2011, 01:29 PM
#10
antonivano is offline antonivano OP
Big grins
Quote:
Originally Posted by Allen View Post
Another idea.
Then perhaps putting the header stuff, nav etc., that you have showing in
the footer area all in the actual footer box?
Probably not. Because the old icon Facebook show up normally, but its code has been inserted into CustomFooterWrapper.

Perhaps few lines from CSS block could tell you little bit more?

HTML Code:
/**************************************************************
* Custom Content Wrapper
**************************************************************/

#customContentWrapper {
	padding:0 0 85px 0;
}

/**************************************************************
* Custom Footer
**************************************************************/

#customFooterWrapper {
	position: fixed;
	bottom:0;
	left: 0;
	width: 100%;
	height: 20px;
	background: #000000;
	z-index: 110;
}
#customFooter {
	width:100%;
	min-width:950px;
}

/**************************************************************
* Social Icons
**************************************************************/

#customFooter #socialIcons {
	position: absolute; 
	right: 10px;
	top:-32px;
}
#customFooter #socialIcons a {
	background: url('http://www.smugmug.com/photos/1266588149_v6XKT7s-O.png');
	_background: none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.smugmug.com/photos/1266588149_v6XKT7s-O.png');
	display:block;
	width:16px;
	height:16px;
	float:right;
	margin: 0 0 0 10px;
	-webkit-transition:all 0.3s ease-in;
	-moz-transition:all 0.3s ease-in;
	transition:all 0.3s ease-in;
}
#customFooter #socialIcons a:hover {
	-webkit-transform:rotate(-5deg) scale(1.4);
	-moz-transform:rotate(-5deg) scale(1.4);
	transform:rotate(-5deg) scale(1.4);
}
#customFooter #socialIcons .twitterLink {
	background-position: -16px 0;
}

/**************************************************************
* Copyright
**************************************************************/

#customFooter #copyright {
	font-size:9px;
	color:#4d4d4d;
	padding:4px 15px 0 0;
	position: absolute;
	top:0;
	right: 0;
	text-align: right;
}
#customFooter #copyright a {
	color:#4d4d4d;
}

/**************************************************************
* SmugMug Footer - Branding included in site credits.
**************************************************************/

#footer_wrapper,
#cobrand_footer {
	display: none !important;	
}

/**************************************************************
Old Jul-11-2011, 01:49 PM
#11
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by antonivano View Post
Probably not. Because the old icon Facebook show up normally, but its code has been inserted into CustomFooterWrapper.

Perhaps few lines from CSS block could tell you little bit more?

HTML Code:
/**************************************************************
* Custom Content Wrapper
**************************************************************/

#customContentWrapper {
    padding:0 0 85px 0;
}

/**************************************************************
* Custom Footer
**************************************************************/

#customFooterWrapper {
    position: fixed;
    bottom:0;
    left: 0;
    width: 100%;
    height: 20px;
    background: #000000;
    z-index: 110;
}
#customFooter {
    width:100%;
    min-width:950px;
}

/**************************************************************
* Social Icons
**************************************************************/

#customFooter #socialIcons {
    position: absolute; 
    right: 10px;
    top:-32px;
}
#customFooter #socialIcons a {
    background: url('http://www.smugmug.com/photos/1266588149_v6XKT7s-O.png');
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingmethod=image,src='http://www.smugmug.com/photos/1266588149_v6XKT7s-O.png');
    display:block;
    width:16px;
    height:16px;
    float:right;
    margin: 0 0 0 10px;
    -webkit-transition:all 0.3s ease-in;
    -moz-transition:all 0.3s ease-in;
    transition:all 0.3s ease-in;
}
#customFooter #socialIcons a:hover {
    -webkit-transform:rotate(-5deg) scale(1.4);
    -moz-transform:rotate(-5deg) scale(1.4);
    transform:rotate(-5deg) scale(1.4);
}
#customFooter #socialIcons .twitterLink {
    background-position: -16px 0;
}

/**************************************************************
* Copyright
**************************************************************/

#customFooter #copyright {
    font-size:9px;
    color:#4d4d4d;
    padding:4px 15px 0 0;
    position: absolute;
    top:0;
    right: 0;
    text-align: right;
}
#customFooter #copyright a {
    color:#4d4d4d;
}

/**************************************************************
* SmugMug Footer - Branding included in site credits.
**************************************************************/

#footer_wrapper,
#cobrand_footer {
    display: none !important;    
}

/**************************************************************
I can see you CSS, no need to post.

What I'm saying is your header/customheader is at the bottom of every
page on your site. Why isn't all this put in your footer?
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jul-11-2011, 01:58 PM
#12
antonivano is offline antonivano OP
Big grins
Quote:
Originally Posted by Allen View Post
I can see you CSS, no need to post.

What I'm saying is your header/customheader is at the bottom of every
page on your site. Why isn't all this put in your footer?
Well I am ready to try but just don't know what and where should I put.
Put this code:
HTML Code:
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,odnoklassniki,moimir"></div> 
to the actual footer in Easy Customizer? Right?
Old Jul-11-2011, 02:15 PM
#13
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by antonivano View Post
Well I am ready to try but just don't know what and where should I put.
Put this code:
HTML Code:
<script type="text/javascript" src="//yandex.st/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none" data-yashareQuickServices="vkontakte,facebook,odnoklassniki,moimir"></div> 
to the actual footer in Easy Customizer? Right?
You have nothing defined in Easy Customizer, all your customizations are
currently on the advanced customization page.

Before doing any changes click the "email" button at the bottom of the
advanced customization page to get a backup of all your customization.
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Jul-12-2011, 01:43 AM
#14
antonivano is offline antonivano OP
Big grins
Quote:
Originally Posted by Allen View Post
You have nothing defined in Easy Customizer, all your customizations are
currently on the advanced customization page.

Before doing any changes click the "email" button at the bottom of the
advanced customization page to get a backup of all your customization.
Thank you very much Allen. I tried to move the code there, but unfortunately it did not help
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
Aligning social media icons MAHAROGERS Legacy SmugMug Customization 1 Aug-10-2012 11:13 AM
Help adding Social Icons to header DetectiveZito Legacy SmugMug Customization 0 Jun-23-2011 08:42 AM
Be MORE Social - Get to the BE SOCIAL Screen in one click? oceanthrsty Legacy SmugMug Customization 2 Jan-25-2011 09:05 PM
Social networking link icons on my pages Markjay Legacy SmugMug Customization 12 Jun-28-2009 01:26 PM
You want answers? We need questions! (or ask Ron Reznick) Harryb Wildlife 61 Jan-15-2007 12:02 PM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump