Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

This is the code to change the color of each social media icon. The icons are in their original color, go . Go to the Aurora website to see the hover status.Image Removed

...

Blog Lovin’
Code Block
languagecss
titleBlog Lovin’
collapsetrue
.simple-social-icons ul li.ssi-bloglovin a {
background-color:#24BEF2!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-bloglovin a:hover {
background-color:#0da6d9!important;
color:white!important;
border:0 black solid!important
}
Code Block
Dribbble
css
Code Block
languagecsstitleDribbble
.simple-social-icons ul li.ssi-dribbble a {
 background-color:#ea4c89!important;
 color:white!important;
 border:0 black solid!important
 }

.simple-social-icons ul li.ssi-dribbble a:hover {
 background-color:#e73277!important;
 color:white!important;
 border:0 black solid!important
 }
Code Block
language
title
Email

...

Code Block
languagecss
titleEmail
.simple-social-icons ul li.ssi-email a {
background-color:#999999!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-email a:hover {
background-color:#808080!important;
color:white!important;
border:0 black solid!important
}

Facebook

Code Block
languagecsstitleFacebook
.simple-social-icons ul li.ssi-facebook a {
background-color:#3b5998!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-facebook a:hover {
background-color:#324b81!important;
color:white!important;
border:0 black solid!important
}
Flickr
Code Block
languagecss
titleFlickr
.simple-social-icons ul li.ssi-flickr a {
background-color:#ff0084!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-flickr a:hover {
background-color:#cc0069!important;
color:white!important;
border:0 black solid!important
}
Github
Code Block
title
languagecssGithub
.simple-social-icons ul li.ssi-github a {
background-color:black!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-github a:hover {
background-color:#404040!important;
color:white!important;
border:0 black solid!important
}

Google Plus

title
Code Block
languagecsstitleGoogle Plus
.simple-social-icons ul li.ssi-gplus a {
background-color:#dd4b39!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-gplus a:hover {
background-color:#c43421!important;
color:white!important;
border:0 black solid!important
}
Code Block
languagecss
Instagram

...

Code Block
languagecss
titleInstagram
.simple-social-icons ul li.ssi-instagram a {
background-color:#517fa4!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-instagram a:hover {
background-color:#436989!important;
color:white!important;
border:0 black solid!important
}

LinkedIn

Code Block
title
languagecssLinkedIn
.simple-social-icons ul li.ssi-linkedin a {
background-color:#007bb6!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-linkedin a:hover {
background-color:#006999!important;
color:white!important;
border:0 black solid!important
}

Pinterest

Code Block
languagecsstitlePinterest
.simple-social-icons ul li.ssi-pinterest a {
background-color:#cb2027!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-pinterest a:hover {
background-color:#b01c21!important;
color:white!important;
border:0 black solid!important
}
RSS
Code Block
languagecsstitleRSS
.simple-social-icons ul li.ssi-rss a {
background-color:#ff6600!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-rss a:hover {
background-color:#cc5200!important;
color:white!important;
border:0 black solid!important
}

StumbleUpon

Code Block
title
languagecssStumbleUpon
.simple-social-icons ul li.ssi-stumbleupon a {
background-color:#EB4823!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-stumbleupon a:hover {
background-color:#d23614!important;
color:white!important;
border:0 black solid!important
}
Tumblr
Code Block
languagecss
titleTumblr
.simple-social-icons ul li.ssi-tumblr a {
background-color:#32506d!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-tumblr a:hover {
background-color:#284157!important;
color:white!important;
border:0 black solid!important
}
Twitter
Code Block
title
languagecssTwitter
.simple-social-icons ul li.ssi-twitter a {
background-color:#00aced!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-twitter a:hover {
background-color:#0096cc!important;
color:white!important;
border:0 black solid!important
}
Vimeo
Code Block
languagecss
titleVimeo
.simple-social-icons ul li.ssi-vimeo a {
background-color:#aad450!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-vimeo a:hover {
background-color:#9ccd32!important;
color:white!important;
border:0 black solid!important
}
Youtube
Code Block
languagecsstitleYoutube
.simple-social-icons ul li.ssi-youtube a {
background-color:#bb0000!important;
color:white!important;
border:0 black solid!important
}

.simple-social-icons ul li.ssi-youtube a:hover {
background-color:#990000!important;
color:white!important;
border:0 black solid!important
}
Filter by label (Content by label)
showLabelsfalse
max

...

10
spacesIKB
showSpacefalse

...

typepage
cqllabel in ( "css" , "web" , "development" , "media" , "wordpress" , "social" , "aurora" ) and type = "page" and space = "IKB"
labelsweb development aurora wordpress social media css
Page Properties
hiddentrue


Related issues