Sela theme social media icons

  • Unknown's avatar
    donnawanderlust · Member ·

    Hello, i currently have my social media icons in the footer, but i wondered if there is anyway they can be moved to the main sidebar at the top of my page? I have created all the visual widgets but i thnk this looks abit messy and would prefer a cleaner look. Can we get the icons seperately and create a image widget? Thanks Donna https://hauteculturefashion.wordpress.com/

    The blog I need help with is: (visible only to logged in users)

  • staff-happychia · Staff ·

    Have you checked the information in the Add Social Media Buttons to Your Sidebar or Footer support document?

    You can add a Text Widget to your sidebar using HTML, add the icons to the Text Widget, and link them to your social media services.

  • Unknown's avatar
    donnawanderlust · Member ·

    I would love to do that, but i want the same icons, i cannot see them in my media library, do you know if it is possible?

  • staff-happychia · Staff ·

    The icons in the footer are not images. They are special font called Genericons, to which the theme applies some CSS, so the result is what we see in the footer.

    Could you copy the html in the https://cloudup.com/cTARWj8bJur to a text widget and see how they turn up. Make sure there are no spaces or line breaks when you copy.

    (I was going to sat it is not possible but found this way in the last moment. Hopefully this does the job.)

  • Unknown's avatar
    donnawanderlust · Member ·

    WOW! it worked, awesome, thanks so much. This support forum thingy is like a digital version of hogwarts!

  • staff-happychia · Staff ·

    Sweet!

    If you have time, trim the html a bit by removing from each li tag

    id="menu-item-37"
    bit

    and

    menu-item-37
    from
    class="menu-item menu-item-type-custom menu-item-object-custom menu-item-37"

    Leaving them won’t hurt but removing the unneeded html is always good.

    I did not test this so if the result of trimming is not the same, you can always reset to original html from https://cloudup.com/cTARWj8bJur

    Happy blogging :-)

  • Unknown's avatar
    donnawanderlust · Member ·

    I have another question, i want to add the a bloglovin genericon to the sidebar, i was thinking about using the heart icon, and linking it to my bloglovin account, but i dont know how to do it, can you tell me?

  • staff-happychia · Staff ·

    Sure, we can do it.

    Could you add one more icon to the footer menu pointing to your bloglovin account? The icon does not matter at this stage because we are going to override it using CSS to the heart icon.

    Just add a link to the footer menu and let me know.

  • Unknown's avatar
    donnawanderlust · Member ·

    Hi

    Hmmm, i dont understand.

    “Just add a link to the footer menu and let me know.”

    What link and how? Sorry i basically no nothing about anything, i need more detailed instructions.

  • staff-happychia · Staff ·

    Do you recall how did you get the existing icons in place in your footer?

    If you go to Dashboard > Appearance > Menus > Select Social Menu in the Select a menu to edit: drop down.

    You will see the menu items for the existing icons there. Add one more item to this menu for blogloving profile using the steps in the Social Links Menu support document.

  • Unknown's avatar
    donnawanderlust · Member ·

    Ok, yes, great done it but it has added a weird looking icon?

  • staff-happychia · Staff ·

    Add this custom CSS:

    li#menu-item-183 a:before {
    content: "f461";
}

    and add the following line at the end of the html in your existing text widget. (Remember? You copied it from https://cloudup.com/cTARWj8bJur )

    <li id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-183"><a title="Bloglovin" href="http://www.bloglovin.com/blogs/haute-culture-13515049"><span class="screen-reader-text">Bloglovin</span></a></li>

    Add the above line before the ending </div> tags.

    See the result :-)

  • Unknown's avatar
    donnawanderlust · Member ·

    i really don’t understand :( which bit do i add? its over 3 lines? is it meant to look like that?

    Add this custom CSS:

    li#menu-item-183 a:before {
    content: “f461”;
    }

    and where exactly do i add it?

    i just did this

    <li id=”menu-item-183″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-183″><span class=”screen-reader-text”>Bloglovin</span></li#menu-item-183 a:before {
    content: “f461”;
    }>

    which did not work, 2 dots appeared in the side bar like this

    :

    ? Im sorry.

  • Unknown's avatar
    donnawanderlust · Member ·

    i really don’t understand :( which bit do i add? its over 3 lines? is it meant to look like that?

    Add this custom CSS:

    li#menu-item-183 a:before {
    content: “f461”;
    }

    and where exactly do i add it?

    i just did this

    <li id=”menu-item-183″ class=”menu-item menu-item-type-custom menu-item-object-custom menu-item-183″><span class=”screen-reader-text”>Bloglovin</span></li#menu-item-183 a:before {
    content: “f461”;
    }>

    which did not work, 2 dots appeared in the side bar like this

    :

    ? Im sorry.

  • staff-happychia · Staff ·

    Add this custom CSS in CSS Editor

    li#menu-item-183 a:before {
    content: "f461";
}

    This html should be added to the text widget (in Dashboard > Appearance > Widgets screen) titled FOLLOW ME HERE that has all your social media icons on your sidebar.

    <li id="menu-item-183" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-183"><a title="Bloglovin" href="http://www.bloglovin.com/blogs/haute-culture-13515049"><span class="screen-reader-text">Bloglovin</span></a></li>

    There are already some
<li> tags in the text widget for the current social media icons. So you have to add the above html at the end of the existing li tags before <strong>ul </strong>and <strong>div</strong> tags.</li>

    [I had to add code tags around the last paragraph as the angle brackets were breaking the page – Kathryn]

  • Unknown's avatar
    marielencdmx · Member ·

    How about adding those social media links to the main menu? Is it possible?

    (Sorry for highjacking this thread).

  • ryancowles · Staff ·

    @donnawanderlust: I had a look at your site, but I don’t see the Bloglovin’ icon in your sidebar. Were you able to try chaitanyamsv’s suggestion?

    @latinaencph: Could you please let us know which site you’d like some help with? Then I’d be happy to take a look!

  • Unknown's avatar
    donnawanderlust · Member ·

    Hello there, sorry i have been sick and not on the computure. I dont have a premium account so cant do the CSS Editor thing. The 2nd bit of code has been added in the text box and it has not worked. I just see a single black dot.

    Im not sure what to do.

  • staff-happychia · Staff ·

    It is not added at the correct place which is why it it showing as a black dot.

    Add the li tag before the closing ul tag in the text widget. Currently you added the li tag at the end after the closing ul and div tags.

    Then in the CSS Editor, add this CSS at the end:

    li#menu-item-183 a:before {
    content: "f461";
}
  • Unknown's avatar
    donnawanderlust · Member ·

    I am sorry, but i just don’t understand. Can you just send me one piece of code, where everything is in the right place and i just copy and paste 1 thing into the text widget? I said in the previous message the CSS editor is only available to people that have a premium account. I don’t have one of those.

1 2 3
  • The topic ‘Sela theme social media icons’ is closed to new replies.