Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #17543

    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!

    #95853

    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

    #95854

    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

    #95855

    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

    #95856

    That did the trick!

    Thanks for the help Devin!

    #95857

    Glad we could help :)

    Regards,

    Devin

    #95858

    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

    #95859

    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

    #95860

    That lined it up.

    Thanks Devin,

    Stephen

    #95861

    Glad we could help :)

    Regards,

    Devin

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Placing the Hover-Over Social Media Icons In Other Places On Site’ is closed to new replies.