Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

No OpenID Button for Gopi theme? (Help from any CSS Professional needed)

edited August 2017 in Vanilla 2.0 - 2.8

/* SocialIcon */ .Icon:before, .Options .SpFlyoutHandle:before{display:inline-block;font-family:"vanillicon";font-variant:normal;font-weight:normal;font-style:normal;min-width:1em;text-align:center;text-decoration:inherit;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased; -webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none; user-select: none;}.SocialIcon-Facebook .Icon:before, .ReactFacebook:before{content:"\f143"}.SocialIcon-Google .Icon:before,.ReactGooglePlus:before{content:"\f151"}.SocialIcon-Twitter .Icon:before,.ReactTwitter:before{content:"\f1ae"}.SocialIcon-Google,.SocialIcon-Facebook,.SocialIcon-Twitter{-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:2px;color:#363636;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:14px;height:32px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;line-height:24px;padding-left:8px;padding-right:8px;position:relative;vertical-align:top;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;padding-left:10px;padding-right:10px;white-space:nowrap}a.SocialIcon-Google{background:#DD4B39;border-color:#DD4B39;color:#fff}a.SocialIcon-Facebook{background:#2D4373;border-color:#2D4373;color:#fff}.SocialIcon-Twitter{background:#1da1f2;border-color:#1da1f2;color:#fff}a.SocialIcon-Google:hover{background:#fff;border-color:#DD4B39;color:#DD4B39}a.SocialIcon-Facebook:hover{background:#fff;border-color:#2D4373;color:#2D4373}.SocialIcon-Twitter:hover{background:#fff;border-color:#1da1f2;color:#1da1f2}.Options .SpFlyoutHandle:before {content: "\f12d";font-size: 14px;color:#7a7a7a;}
https://github.com/T7Team/Gopi/blob/master/design/style.css
Line 3096,3097 of style.css
I think this code is the culprit for the missing OpenID Button. My forum shows up like this. Can any css professional help me? And how do I do this again if I add more login options? Thank you very much.

Comments

  • Note:
    Issue posted here
    https://github.com/T7Team/Gopi/issues/7

    People who solved this problem please do pull request too.
    I have posted the code in order to solve this officially (i.e. same color, etc as default vanilla and make sure it matches with the other three) and not by myself. Thank you.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    If the css looks like that , I would beautify it first to make it readable...

  • edited August 2017

    /* SocialIcon */
    .Icon:before,.Options .SpFlyoutHandle:before {
    display:inline-block;
    font-family:vanillicon;
    font-variant:normal;
    font-weight:400;
    font-style:normal;
    min-width:1em;
    text-align:center;
    text-decoration:inherit;
    text-transform:none;
    line-height:1;
    -webkit-font-smoothing:antialiased;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    }

    .SocialIcon-Facebook .Icon:before,.ReactFacebook:before {
    content:"\f143";
    }

    .SocialIcon-Google .Icon:before,.ReactGooglePlus:before {
    content:"\f151";
    }

    .SocialIcon-Twitter .Icon:before,.ReactTwitter:before {
    content:"\f1ae";
    }

    .SocialIcon-Google,.SocialIcon-Facebook,.SocialIcon-Twitter {
    -moz-appearance:none;
    -webkit-appearance:none;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    background-color:#fff;
    border:1px solid #dbdbdb;
    border-radius:2px;
    color:#363636;
    display:0;
    display:0;
    display:inline-flex;
    font-size:14px;
    height:32px;
    -webkit-box-pack:start;
    -ms-flex-pack:start;
    justify-content:flex-start;
    line-height:24px;
    padding-left:8px;
    padding-right:8px;
    position:relative;
    vertical-align:top;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    cursor:pointer;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    padding-left:10px;
    padding-right:10px;
    white-space:nowrap;
    }

    a.SocialIcon-Google {
    background:#DD4B39;
    border-color:#DD4B39;
    color:#fff;
    }

    a.SocialIcon-Facebook {
    background:#2D4373;
    border-color:#2D4373;
    color:#fff;
    }

    .SocialIcon-Twitter {
    background:#1da1f2;
    border-color:#1da1f2;
    color:#fff;
    }

    a.SocialIcon-Google:hover {
    background:#fff;
    border-color:#DD4B39;
    color:#DD4B39;
    }

    a.SocialIcon-Facebook:hover {
    background:#fff;
    border-color:#2D4373;
    color:#2D4373;
    }

    .SocialIcon-Twitter:hover {
    background:#fff;
    border-color:#1da1f2;
    color:#1da1f2;
    }

    .Options .SpFlyoutHandle:before {
    content:"\f12d";
    font-size:14px;
    color:#7a7a7a;
    }

    Completed Code Beautifying. @vrijvlinder
    https://pastebin.com/8PMVEAQP
    Also here.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited August 2017

    To add more buttons it will take more than css. I mean you can have the button show by using css, but the plugin for Open ID needs to also be enabled. Maybe that is what you need to do first.

    If you do have the Open Id plugin enabled, the icon would show. Please give me a link and I will try to help you.

  • edited August 2017

    @vrijvlinder surely yes i have openid addon enabled. if you see the picture above i only see the link (text) to openid login and not a button.
    btw my site is https://bboard.cf
    Well I dont know css but i'm sure there is no customized icon setup for openid in that code for sure.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited August 2017

    Ok , you need to add to the css the Open ID class

    .SocialIcon-Google, .SocialIcon-Facebook, .SocialIcon-Twitter, .SocialIcon-OpenID {
        -moz-appearance: none;
        -webkit-appearance: none;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #fff;
        border: 1px solid #dbdbdb;
        border-radius: 2px;
        color: #363636;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        font-size: 14px;
        height: 32px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        line-height: 24px;
        padding-left: 8px;
        padding-right: 8px;
        position: relative;
        vertical-align: top;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap;
    }
    

    then add this code too

    a.SocialIcon-OpenID {
        background: #555;
        border-color: #555;
        color: #ffffff;
    }
    
    a.SocialIcon-OpenID:hover {
            background: #555;
            border-color: #555;
            color: #ffa94d;
        }
    
    .SocialIcon-OpenID .Icon:before,.ReactOpenID:before {
    content:'/f19b';
    }
    
  • edited August 2017

    Thank you very much!
    So I have to replace line 33 to 67 (in pastebin) with the first one and append the blocks of the second code to the original code?
    @vrijvlinder
    Your themes are awesome imo too. I'm going to try using betterbitter some time after if I use vanilla for some other site :). Just using Gobi over bootstrap now because it loads smoothly and I heard kasperisager was not doing any vanilla related things now.

    PS Vanilla with Gobi is the best looking free forum software that can be installed in shared hosts (discourse flarum nodebb... are not for shared hosts cause its not php + mysql :( )

  • edited August 2017

    @vrijvlinder Hmm please take a look at https://bboard.cf
    I see a half filled star in place of the openid logo with a grey color and every other query of content:"\f000" in the above code in the before something class is different from fontawesome unicode other than the one you added. How should I change the unicode hexes for openid or import the newest fontawesome font in place of the original unknown font?
    I have searched corresponding unicode hexes with google plus/facebook/twitter logo but I cannot even find what font the developer used.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Go to the font awesome website to find the icon. You can change the CSS colors as you wish.

  • edited August 2017

    Solution:
    In your gopi theme open design/style.css
    change line 3097 (in gopi github Aug 11 2017, or search just search for the line under /* SocialIcon */) to this:
    .Icon:before,.Options .SpFlyoutHandle:before{display:inline-block;font-family:"vanillicon";font-variant:normal;font-weight:400;font-style:normal;min-width:1em;text-align:center;text-decoration:inherit;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SocialIcon-Facebook .Icon:before,.ReactFacebook:before{content:"\f143"}.SocialIcon-Google .Icon:before,.ReactGooglePlus:before{content:"\f151"}.SocialIcon-Twitter .Icon:before,.ReactTwitter:before{content:"\f1ae"}.SocialIcon-OpenID .Icon:before,.ReactOpenID:before{content:"\f19b";font-family: FontAwesome;}.SocialIcon-Google,.SocialIcon-Facebook,.SocialIcon-Twitter,.SocialIcon-OpenID{-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:2px;color:#363636;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:14px;height:32px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;line-height:24px;padding-left:8px;padding-right:8px;position:relative;vertical-align:top;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;padding-left:10px;padding-right:10px;white-space:nowrap}a.SocialIcon-Google{background:#DD4B39;border-color:#DD4B39;color:#fff}a.SocialIcon-Facebook{background:#2D4373;border-color:#2D4373;color:#fff}.SocialIcon-Twitter{background:#1da1f2;border-color:#1da1f2;color:#fff}a.SocialIcon-OpenID{background:#F7931E;border-color:#F7931E;color:#fff}a.SocialIcon-Google:hover{background:#fff;border-color:#DD4B39;color:#DD4B39}a.SocialIcon-Facebook:hover{background:#fff;border-color:#2D4373;color:#2D4373}.SocialIcon-Twitter:hover{background:#fff;border-color:#1da1f2;color:#1da1f2}a.SocialIcon-OpenID:hover{background:#fff;border-color:#F7931E;color:#F7931E}.Options .SpFlyoutHandle:before{content:"\f12d";font-size:14px;color:#7a7a7a}
    Here is the beautified code of the social icon line for anyone to read: https://pastebin.com/XR09wCwZ
    I have changed the colors and fixed the icon.
    and then add this between and in views/default.master.tpl
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    You can make more login icons in the same way.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    .Icon:before,
    .Options .SpFlyoutHandle:before {
        display: inline-block;
        font-family: "vanillicon";
        font-variant: normal;
        font-weight: 400;
        font-style: normal;
        min-width: 1em;
        text-align: center;
        text-decoration: inherit;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none
    }
    .SocialIcon-Facebook .Icon:before,
    .ReactFacebook:before {
        content: "\f143"
    }
    .SocialIcon-Google .Icon:before,
    .ReactGooglePlus:before {
        content: "\f151"
    }
    .SocialIcon-Twitter .Icon:before,
    .ReactTwitter:before {
        content: "\f1ae"
    }
    .SocialIcon-OpenID .Icon:before,
    .ReactOpenID:before {
        content: "\f19b";
        font-family: FontAwesome
    }
    .SocialIcon-Google,
    .SocialIcon-Facebook,
    .SocialIcon-Twitter,
    .SocialIcon-OpenID {
        -moz-appearance: none;
        -webkit-appearance: none;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        background-color: #fff;
        border: 1px solid #dbdbdb;
        border-radius: 2px;
        color: #363636;
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        font-size: 14px;
        height: 32px;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        line-height: 24px;
        padding-left: 8px;
        padding-right: 8px;
        position: relative;
        vertical-align: top;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        padding-left: 10px;
        padding-right: 10px;
        white-space: nowrap
    }
    a.SocialIcon-Google {
        background: #DD4B39;
        border-color: #DD4B39;
        color: #fff
    }
    a.SocialIcon-Facebook {
        background: #2D4373;
        border-color: #2D4373;
        color: #fff
    }
    .SocialIcon-Twitter {
        background: #1da1f2;
        border-color: #1da1f2;
        color: #fff
    }
    a.SocialIcon-OpenID {
        background: #F7931E;
        border-color: #F7931E;
        color: #fff
    }
    a.SocialIcon-Google:hover {
        background: #fff;
        border-color: #DD4B39;
        color: #DD4B39
    }
    a.SocialIcon-Facebook:hover {
        background: #fff;
        border-color: #2D4373;
        color: #2D4373
    }
    .SocialIcon-Twitter:hover {
        background: #fff;
        border-color: #1da1f2;
        color: #1da1f2
    }
    a.SocialIcon-OpenID:hover {
        background: #fff;
        border-color: #F7931E;
        color: #F7931E
    }
    .Options .SpFlyoutHandle:before {
        content: "\f12d";
        font-size: 14px;
        color: #7a7a7a
    }
    
  • edited August 2017

    .Icon:before,.Options .SpFlyoutHandle:before{display:inline-block;font-family:"vanillicon";font-variant:normal;font-weight:400;font-style:normal;min-width:1em;text-align:center;text-decoration:inherit;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.SocialIcon-Facebook .Icon:before,.ReactFacebook:before{content:"\f09a";font-family:FontAwesome}.SocialIcon-Google .Icon:before,.ReactGooglePlus:before{content:"\f0d5";font-family:FontAwesome}.SocialIcon-Twitter .Icon:before,.ReactTwitter:before{content:"\f099";font-family:FontAwesome}.SocialIcon-OpenID .Icon:before,.ReactOpenID:before{content:"\f19b";font-family:FontAwesome}.SocialIcon-Google,.SocialIcon-Facebook,.SocialIcon-Twitter,.SocialIcon-OpenID{-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#fff;border:1px solid #dbdbdb;border-radius:2px;color:#363636;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;font-size:14px;height:32px;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;line-height:24px;padding-left:8px;padding-right:8px;position:relative;vertical-align:top;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;padding-left:10px;padding-right:10px;white-space:nowrap}a.SocialIcon-Google{background:#DD4B39;border-color:#DD4B39;color:#fff}a.SocialIcon-Facebook{background:#2D4373;border-color:#2D4373;color:#fff}.SocialIcon-Twitter{background:#1da1f2;border-color:#1da1f2;color:#fff}a.SocialIcon-OpenID{background:#F7931E;border-color:#F7931E;color:#fff}a.SocialIcon-Google:hover{background:#fff;border-color:#DD4B39;color:#DD4B39}a.SocialIcon-Facebook:hover{background:#fff;border-color:#2D4373;color:#2D4373}.SocialIcon-Twitter:hover{background:#fff;border-color:#1da1f2;color:#1da1f2}a.SocialIcon-OpenID:hover{background:#fff;border-color:#F7931E;color:#F7931E}.Options .SpFlyoutHandle:before{content:"\f12d";font-size:14px;color:#7a7a7a}

    https://pastebin.com/iSdZDzB7

    Beautified code

    Changed others completely to FontAwesome too.
    Easy update with changing the cdn link.
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

    As always add between the head section in views/default.master.tpl and update the 4.7.0 and the link (keys) as new versions come out.

  • edited August 2017

    .Icon:before,.Options .SpFlyoutHandle:before { display:inline-block; font-family:"vanillicon"; font-variant:normal; font-weight:400; font-style:normal; min-width:1em; text-align:center; text-decoration:inherit; text-transform:none; line-height:1; -webkit-font-smoothing:antialiased; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none } .SocialIcon-Facebook .Icon:before,.ReactFacebook:before { content:"\f09a"; font-family: FontAwesome; } .SocialIcon-Google .Icon:before,.ReactGooglePlus:before { content:"\f0d5"; font-family: FontAwesome; } .SocialIcon-Twitter .Icon:before,.ReactTwitter:before { content:"\f099"; font-family: FontAwesome; } .SocialIcon-OpenID .Icon:before,.ReactOpenID:before { content:"\f19b"; font-family: FontAwesome; } .SocialIcon-Google,.SocialIcon-Facebook,.SocialIcon-Twitter,.SocialIcon-OpenID { -moz-appearance:none; -webkit-appearance:none; -webkit-box-align:center; -ms-flex-align:center; align-items:center; background-color:#fff; border:1px solid #dbdbdb; border-radius:2px; color:#363636; display:-webkit-inline-box; display:-ms-inline-flexbox; display:inline-flex; font-size:14px; height:32px; -webkit-box-pack:start; -ms-flex-pack:start; justify-content:flex-start; line-height:24px; padding-left:8px; padding-right:8px; position:relative; vertical-align:top; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; cursor:pointer; -webkit-box-pack:center; -ms-flex-pack:center; padding-left:10px; padding-right:10px; white-space:nowrap } a.SocialIcon-Google { background:#DD4B39; border-color:#DD4B39; color:#fff } a.SocialIcon-Facebook { background:#2D4373; border-color:#2D4373; color:#fff } .SocialIcon-Twitter { background:#1da1f2; border-color:#1da1f2; color:#fff } a.SocialIcon-OpenID { background:#F7931E; border-color:#F7931E; color:#fff } a.SocialIcon-Google:hover { background:#fff; border-color:#DD4B39; color:#DD4B39 } a.SocialIcon-Facebook:hover { background:#fff; border-color:#2D4373; color:#2D4373 } .SocialIcon-Twitter:hover { background:#fff; border-color:#1da1f2; color:#1da1f2 } a.SocialIcon-OpenID:hover { background:#fff; border-color:#F7931E; color:#F7931E } .Options .SpFlyoutHandle:before { content:"\f12d"; font-size:14px; color:#7a7a7a }
    ugh how do i do this as vrijvlinder did

  • edited August 2017

    I found one more problem related to social.
    @vrijvlinder

    The icons for social share does not show under the posts like this picture.
    The problematic page:
    https://bboard.cf/discussion/2/welcome-to-bboard-cf-please-read-this-page-before-using-this-website
    Anyone know where the code for this part is located in?

  • R_JR_J Ex-Fanboy Munich Admin

    If I inspect the first of this icons, I can see that it has the following class: "Sprite ReactSprite ReactFacebook". If I search in the Vanilla sources, I find it on several places: https://github.com/vanilla/vanilla/search?utf8=✓&q=reactfacebook&type=

    You can use the CSSEdit plugin and try if adding that ReactFacebook class helps. If not, add all other class rules (ReactSprite and Sprite) and it should work then...

  • Reverting to the original font of facebook google and twitter solved it. Do not change them to fontawesome.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Vanilla here does not use font awesome, they use an image. It's the best most secure way to control your style. I dislike using third party things ... your own images are always guaranteed.

Sign In or Register to comment.