Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 19, 2013 at 5:59 pm #163700
    Gstar72

    Hi Guys

    I am trying to place the social media icon code / links within a text box on a page on my site.

    I have the following code, but the icons are displaying vertically and the • character sits ontop of the icon, can you guide me please?:

    <ul class=”noLightbox social_bookmarks icon_count_4″><li class=”social_bookmarks_linkedin social_icon_1″><li class=”social_bookmarks_twitter social_icon_2″><li class=”social_bookmarks_gplus social_icon_3″><li class=”social_bookmarks_mail social_icon_4″>(Email address hidden if logged out) “>✉

    Thankyou so much

    Gary

    September 20, 2013 at 12:34 am #163809
    Yigit

    Hey Gstar72!

    Can you post the link to your website?

    Regards,
    Yigit

    September 20, 2013 at 1:19 am #163831
    Gstar72

    Hey Yigit,

    The social icons are below the blue text on the left of the page, under Overview:

    http://www.naturaloutlook.com/about/

    I can’t get the social icons to left align (I guess the css is linked to the top social icons that are set up to right align.

    Also, there are periods / dots on top of the social icon – I guess due to the ui ‘list function’….

    I would like to get these to left align – by each other, rather than gaps between each icon. I tried putting them in a div wrapper – container, it didn;t work – tried a table, no good – must be my coding..

    Thankyou

    Gary

    September 20, 2013 at 1:58 am #163850
    Josue

    Hello Gary!

    Try this CSS code:

    .avia_textblock .social_bookmarks li{
float: left !important;
list-style: none;
margin-left: 0;
}

    Regards,
    Josue

    • This reply was modified 11 years, 2 months ago by Josue.
    September 20, 2013 at 2:47 am #163865
    Gstar72

    Hi Josue,

    Thanks for replying.

    No luck with the CSS above, I will keep playing with it, but any more ideas, appreciated.

    I already have the following in my Quick CSS for the header social bookmarks, could there be a conflict – hence the code not working?:

    #top .social_bookmarks li {
    float: right;
    }
    .sub_menu {
    left: 0;
    }

    Thankyou.

    Gary

    September 20, 2013 at 2:52 am #163866
    Josue

    Hey!

    Applying the code i provided, here’s what i get:

    Is that what you want? i might have misunderstood.

    Regards,
    Josue

    September 20, 2013 at 2:57 am #163869
    Gstar72

    That’s exactly right Josue, very odd, let me try again…

    September 20, 2013 at 3:02 am #163871
    Josue

    Remember that i edited my message, the final code should be:

    .avia_textblock .social_bookmarks li{
float: left !important;
list-style: none;
margin-left: 0;
}

    To be 100% sure it’s being applied, copy and paste it to the css/custom.css file.

    Regards,
    Josue

    September 20, 2013 at 3:04 am #163873
    Gstar72

    Apologies Josue, you were right, it did work – I just added it to Quick CSS – I forgot to delete cache, I am a moron!.

    Thankyou for your help and patience, oh boy!.

    Gary

    September 20, 2013 at 3:05 am #163874
    Josue

    No worries, glad we could help :)

    Regards,

    Josue

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Social Media Code’ is closed to new replies.