Return to Support

CSS code

Home Forums Graphene WordPress theme Support CSS code

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #6035
    Frym1
    Member

    Thanks.

    My website http://www.integratedselfprotection.com/dev

    Do you know of a piece of CSS that I may use, that when opening the post from continue reading, I can insert a piece of static text that reads “Like this? Share with Friends” just above social icons.

    Thanks for your help

    #33133
    Josh
    Member

    Nothing that I’m aware of…

    What are you using for the social icons? Are you using a plugin… or the graphene options?

    #33134
    Frym1
    Member

    Josh I am using a plugin called Social Sharing toolkit, really cool plugin, which has an area for CSS, however unsure of the CSS code that would put this text next to Plugin.

    #33135

    CSS is for styling information. It doesn’t insert text.

    However, you could do that as a graphic, and add it before that using the before pseudo class.

    #33136
    Frym1
    Member

    A quick over view of how this could be done would be appreciated.

    If not, do you know of any informative reading?

    #33137
    Josh
    Member

    Well… you would upload your image with the text to your media library. Then, copy the link.

    Then, in your Custom CSS… you would insert something like this:

    .mr_social_sharing_wrapper:before {
    content: url(INSERT_YOUR_IMAGE_PATH_HERE);
    }

    Then, you’ll probably have to style it to move it down… because that particular div has a top margin of 100px… so your image is probably going to first appear too high. You can “knock” it down using a negative margin.

    #33138
    Syahir Hakim
    Keymaster

    If the plugin has an action or filter hook for the social icons, you can use that hook instead. Have you tried asking the plugin’s support about it?

    #33139
    Frym1
    Member

    Thanks Guys.

    Josh I have used your approach and look great.

    Trying to move the words below the icons and have amended your css as follows, changing bottom for before, however no luck. Any ideas.

    Thanks

    .mr_social_sharing_wrapper:bottom {

    content: url(INSERT_YOUR_IMAGE_PATH_HERE);

    }

    #33140
    Josh
    Member

    Lmao… making your own css pseudo-classes 😉

    There are only a select few pseudo-classes currently available in CSS…. “bottom” not being one of them 🙂

    If you’re interested… here is a link explaining pseudo-classes:

    http://www.w3schools.com/css/css_pseudo_classes.asp

    Now… to try and fix the issue… try using this code instead of the code above:

    .mr_social_sharing_wrapper:before {
    content: url(INSERT_YOUR_IMAGE_PATH_HERE);
    margin-right: 460px;
    }

    This will basically add a huge margin to the right of the image… forcing the icons to the line below. What do you think?

    #33141
    Josh
    Member

    Hmmm… just re-read your post and noticed you wanted the text image BELOW the icons?

    #33142
    Frym1
    Member

    All done.

    Glad I made you laugh. Thanks for all your help mate 🙂 Website looking great, with a massive thanks to you 🙂

    #33143
    Josh
    Member

    Looks great. Yeah, I didn’t mean it personally… thanks for being cool 🙂

    Anytime!!

    #33144
    Frym1
    Member

    Thanks for all your hard work and supporting this forum.

    Wouldn’t have been able to build my own company website without it.

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

You must be logged in to reply to this topic.