Community Forums › Forums › Archived Forums › Design Tips and Tricks › Formatting Social Icon Area in the *Old* Minimum Style
Tagged: minimum pro
- This topic has 1 reply, 2 voices, and was last updated 10 years, 3 months ago by nutsandbolts.
-
AuthorPosts
-
December 2, 2013 at 7:17 pm #76731kzollParticipant
Hi all,
So I created a lovely set of custom social icon buttons to feature my freelance writing work around the web, in addition to my social media profiles, as styled on the OLD Minimum theme. And then I realized that Minimum had updated to Pro, so I downloaded and went to go restyle... and now my custom social icons (grey circles with Disney logo, blog logo, etc) are gone.
I've moved my icons.png and icons2.png files to where they need to be in the Minimum Pro images folder and copy/pasted the Home Featured link classes into my CSS, as below, but it's still not showing up. I've poked around in the Minimum and Minimum Pro functions.php files, but I don't see any major differences or function I should be copying over from Minimum.
What am I missing in my CSS to help call these awesome little grey circles w/my custom icons? Help much appreciated!
~Keiko
http://keikozoll.com/* Home Featured ------------------------------------------------------------ */ #home-featured { overflow: hidden; padding: 60px 0; width: 100%; } #home-featured a.icon-facebook, #home-featured a.icon-facebook:hover, #home-featured a.icon-google, #home-featured a.icon-google:hover, #home-featured a.icon-pinterest, #home-featured a.icon-pinterest:hover, #home-featured a.icon-twitter, #home-featured a.icon-twitter:hover { -moz-border-radius: 50%; -webkit-border-radius: 50px; background: #ddd url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons.png); border-radius: 50%; display: block; height: 140px; margin: 0 auto 30px; padding: 0; text-indent: -9999px; width: 140px; } #home-featured a.icon-facebook:hover { background: #3b5998 url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons.png); } #home-featured a.icon-google:hover { background: #dd4b39 url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons.png); } #home-featured a.icon-pinterest:hover { background: #c8232c url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons.png); } #home-featured a.icon-twitter:hover { background: #00acee url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons.png); } #home-featured a.icon-facebook, #home-featured a.icon-facebook:hover { background-position: 0 0; } #home-featured a.icon-google, #home-featured a.icon-google:hover { background-position: -138px 0; } #home-featured a.icon-pinterest, #home-featured a.icon-pinterest:hover { background-position: 0 -138px; } #home-featured a.icon-twitter, #home-featured a.icon-twitter:hover { background-position: -138px -138px; } .home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4 { float: left; margin: 0; overflow: hidden; text-align: center; width: 25%; } /* Home Featured CUSTOM ------------------------------------------------------------ */ #home-featured { overflow: hidden; padding: 60px 0; width: 100%; } #home-featured a.icon-tiv, #home-featured a.icon-tiv, #home-featured a.icon-disney, #home-featured a.icon-disney:hover, #home-featured a.icon-answers, #home-featured a.icon-answers:hover, #home-featured a.icon-teamzoll, #home-featured a.icon-teamzoll:hover { -moz-border-radius: 50%; -webkit-border-radius: 50px; background: #ddd url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons2.png); border-radius: 50%; display: block; height: 140px; margin: 0 auto 30px; padding: 0; text-indent: -9999px; width: 140px; } #home-featured a.icon-tiv:hover { background: #ec3056 url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons2.png); } #home-featured a.icon-disney:hover { background: #a3cd39 url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons2.png); } #home-featured a.icon-answers:hover { background: #00309e url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons2.png); } #home-featured a.icon-teamzoll:hover { background: #ff9000 url(http://keikozoll.com/wp-content/themes/minimum-pro/images/icons2.png); } #home-featured a.icon-tiv, #home-featured a.icon-tiv:hover { background-position: 0 0; } #home-featured a.icon-disney, #home-featured a.icon-disney:hover { background-position: -138px 0; } #home-featured a.icon-answers, #home-featured a.icon-answers:hover { background-position: 0 -138px; } #home-featured a.icon-teamzoll, #home-featured a.icon-teamzoll:hover { background-position: -138px -138px; } .home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4 { float: left; margin: 0; overflow: hidden; text-align: center; width: 25%; }
December 2, 2013 at 8:07 pm #76739nutsandboltsMemberI'm not seeing the home-featured div class in your text widgets... Try this:
<div id="home-featured"> <a class="icon-tiv" href="http://theinfertilityvoice.com"></a></div>
Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+ -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.