WordPress.org

Ready to get started?Download WordPress

Forums

Floating Social Bar
Adjusting the CSS (3 posts)

  1. Paal Joachim Romdahl
    Member
    Posted 6 months ago #

    Hey

    I am having difficulty adjusting the CSS. They will just not be picked up. With Inspect Element in Chrome and can easily remove the top and border border and the background color. But when I add the code to my CSS Stylesheet I see no change to the CSS of the floating bar which does not float. Even when checking Firefox there is no change to the CSS.

    I am hoping for an update to the plugin.
    What about adding the simple CSS directly into the settings page?

    http://wordpress.org/plugins/floating-social-bar/

  2. DaveBurns
    Member
    Posted 6 months ago #

    Paal - In your stylesheet, did you add "!important" to the style rule? You need to do this because the current rule is embedded in the HTML and loaded *after* your stylesheet. Adding the !important makes your rule take precedence. So instead of

    border: none;

    Use:

    border: none !important;

    Hope this helps,
    db

  3. Paal Joachim Romdahl
    Member
    Posted 6 months ago #

    Thanks for the reminder Dave! I am glad I checked it again now. For whatever reason the important rule was not working the last time. Perhaps cache issues or whatever, but now it works fine.

    Sharing with others.
    Adjusting the CSS. In Chrome/Firefox right click what you want to look closer at and select Inspect element (called something else in Firefox).

    The code for the bar is after I have modified it adding the !important rule letting the browser know that this code will be used. I decided on just changing the existing border to 0px but I could have done a border: none !important; as Dave mentioned.
    I also changed background to none and added the !important rule as well.

    #fsb-social-bar {
    width: 100%;
    border-bottom: 0px solid #dbdbdb !important;
    border-top: 0px solid #dbdbdb !important;
    padding: 10px 0;
    margin: 0px 0 20px 0;
    float: left;
    background: none !important;
    position: relative;
    clear: both;
    }

    The code I added to the style.css file. Appearance -> Editor -> found my style.css and pasted it in. I also added a comment letting my know it is the floating bar code.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags