closed resolved
hutzelm
Member
Hello,
I'm looking to place the hover-over social media icons throughout other locations on our site (specifically the About and the Contact page). We currently have other social media icons in place, but we'd like to use these instead to maintain a consistent design. Could you tell me how to place these icons in these places?
Thanks!
Devin
Moderator
Hey hutzelm,
If you mean you want to include the ones that are the top of the page inside of the visual editor, then the easiest way to do this would be to just copy the html that gets output by the theme and paste it into the html tab of the visual editor where you want them to appear. You may need to add an additional container class and some css to align it how you want but that would be the most direct way to duplicate them within the page.
In the source code of your page you're looking for something like:
<ul class="social_bookmarks icon_count_3"><li class="social_bookmarks_twitter"><a href="http://twitter.com/kriesi">Twitter</a></li><li class="social_bookmarks_dribbble"><a href="http://dribbble.com/kriesi">Dribbble</a></li><li class="social_bookmarks_rss"><a href="http://www.kriesi.at/themes/coherence/feed/">Rss</a></li></ul>
It'll be slightly different depending on what options you have chosen.
Regards,
Devin
hutzelm
Member
Hey Devin,
I gave it a shot, editing the source code where necessary, and wasn't able to find success. For starters, I checked the files in my editor and could not find the similar source code, so I made edits to the code in your message.
The buttons appeared on the page, but they were distorted and not in the position where I would like them to appear. (On one of the pages, the "hover over to change the color" function didn't even work).
Not being very familiar with CSS/HTML coding, I don't know how to add container classes or other CSS to properly align them. I simply edited and pasted the code into the page (under the Visual tab) where I would've liked them to go.
I've left the buttons on the pages so you can see what I mean:
http://hutzelmedia.com/about-us/
(I wanted the buttons below the text "Connect with Us" -- in the place of the buttons currently there)
http://hutzelmedia.com/contact/
(I wanted the buttons below the text "Engage with Hutzel Media via Facebook, Twitter, YouTube and Google+." -- in the place of the buttons currently there)
How would I go about setting up those container classes?
Thanks
Devin
Moderator
For starters, this is your block of social icons:
<ul class="noLightbox social_bookmarks icon_count_5"><li class="social_bookmarks_facebook"><a target="_blank" href="http://facebook.com/HutzelMedia">Facebook</a></li><li class="social_bookmarks_twitter"><a target="_blank" href="http://twitter.com/HutzelMedia">Twitter</a></li><li class="social_bookmarks_youtube"><a target="_blank" href="http://youtube.com/HutzelMedia">Youtube</a></li><li class="social_bookmarks_gplus"><a target="_blank" href="https://plus.google.com/b/114941004572632353077/114941004572632353077/posts">Gplus</a></li><li class="social_bookmarks_rss"><a target="_blank" href="http://feeds.feedburner.com/HutzelMediaGroup">Rss</a></li></ul>
So on the post you would put that into the HTML tab where you want the icons. Then add the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
#top .post-entry .social_bookmarks {
position: relative;
list-style-type: none;
margin-left: 0;
}
#top .post-entry .social_bookmarks li {
margin-left: 0px;
}Regards,
Devin
hutzelm
Member
Hello Devin,
The adjustments we made here worked before, but I've adjusted the layout of all my pages using the Template Builder. Now, the social icons on the Contact page are no longer in position (beneath the "Be Social" subheading). The code for the block of social icons and the custom/quick css have remained the same. So, what can I do to correct this?
Thanks,
Stephen
Devin
Moderator
Hi Stephen,
Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
#top.page-id-26 .social_bookmarks {
position: static;
margin-left: 0px;
}Regards,
Devin
This topic has been closed to new replies.
Please start by registering an account for this forum here
Create a new thread and tell me what problems you are encountering and what you want to know.
There is no step 3 :)
We try to answer all questions within a day, monday-friday.
