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

[Deleted User] · August 2017

/* 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.

[Deleted User] · August 2017

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.

vrijvlinder · August 2017

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

[Deleted User] · 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.

vrijvlinder · 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.

[Deleted User] · 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.

vrijvlinder · 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';
}

[Deleted User] · 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 )

[Deleted User] · 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.

vrijvlinder · August 2017

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

[Deleted User] · 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.

vrijvlinder · 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: "\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
}

[Deleted User] · 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.

[Deleted User] · 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

[Deleted User] · 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_J · August 2017

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...

[Deleted User] · August 2017

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

vrijvlinder · August 2017

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.

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

Comments