I was messing about today with some CSS and actually wrote a snippet of CSS for the shits and giggles.
It works in Firefox and Chrome browsers but not IE; so I’m presuming it’ll work in all KHTML and Webkit browsers.
head, head title, head script, body script {display:block;}
If you know any reason why this does actually work then mail me explaining so. It shouldn’t work but for some reason it does which is crazy.
I had written this code a few years ago for use on a website although not the icon sprite I’m including… I needed to use it recently so I’ve decided to upload it here too..
I know it’s not the most elegant solution, but it works well over all browsers and fallbacks (no CSS) gracefully as a list, finally if there isn’t an actual icon available for your social networking site, then it will default to the ‘share this’ icon.
CSS:
/* =================================================
* @package: Social Links
* @author: Adam Boutcher <adam@aboutcher.co.uk>
* @link: www.aboutcher.co.uk
* @copyright: 2013
* @internal: Default icon is "Share This"
* Icons are CC-Attrib3 - www.awicons.com
* ================================================= */
.social_links{margin:0;text-align:center;}.social_links .social_t{display:block;font-variant:small-caps;margin-bottom:5px;}
.social_links ul{display:inline-block;*display:inline;*zoom:1;list-style-type:none;margin:0 auto;padding:0;}
.social_links ul li{float:left;margin:0;padding:0;}.social_links .social_i{display:block;width:36px;height:36px;overflow:hidden;margin-right:5px;color:transparent;text-indent:-9999px;background:url('/images/icons/social_sprite.png') no-repeat;}
.social_links .social_i:hover{background-position:0 -36px;}.social_links ul>li:last-child .social_i{margin-right:0;}
.social_links .fb{background-position:-36px 0;}.social_links .fb:hover{background-position:-36px -36px;} /* Facebook */
.social_links .tw{background-position:-72px 0;}.social_links .tw:hover{background-position:-72px -36px;} /* Twitter */
.social_links .gp{background-position:-108px 0;}.social_links .gp:hover{background-position:-108px -36px;}/* Google+ */
.social_links .rs{background-position:-144px 0;}.social_links .rs:hover{background-position:-144px -36px;}/* RSS Feed */
.social_links .pt{background-position:-180px 0;}.social_links .pt:hover{background-position:-180px -36px;}/* Pintrest */
.social_links .li{background-position:-216px 0;}.social_links .li:hover{background-position:-216px -36px;}/* LinkedIn */
.social_links .yt{background-position:-252px 0;}.social_links .yt:hover{background-position:-252px -36px;}/* YouTube */
.social_links .em{background-position:-288px 0;}.social_links .em:hover{background-position:-288px -36px;}/* Email */
.social_links .ad{background-position:-324px 0;}.social_links .ad:hover{background-position:-324px -36px;}/* Add */
.social_links .rd{background-position:-360px 0;}.social_links .rd:hover{background-position:-360px -36px;}/* Reddit */
.social_links .su{background-position:-396px 0;}.social_links .su:hover{background-position:-396px -36px;}/* StumbleUpon */
.social_links .dl{background-position:-432px 0;}.social_links .dl:hover{background-position:-432px -36px;}/* Delicious */
.social_links .dg{background-position:-468px 0;}.social_links .dg:hover{background-position:-468px -36px;}/* Digg */
.social_links .gh{background-position:-504px 0;}.social_links .gh:hover{background-position:-504px -36px;}/* GitHub */
.social_links .cp{background-position:-540px 0;}.social_links .cp:hover{background-position:-540px -36px;}/* CodePen */
HTML:
Image Sprite:
Social Media Icon Sprite
You can see a demo of it on the footer of this site too; I will try to include other sprites if I can find the time to make them.
Edit (6th July 2013):
Added GitHub to the icon list and changed the code to be a class over an id so it can be used multiple times in the same page; also added CodePen icon.
While using ldir within a different project, I found a couple of bugs releated to how it retrieves its own URL/URI so I figured out a better way of retrieving this information and updated ldir available to everyone else.
I have decided to deprecate the $GET parameter when using the function as it should now detect $_GET variables automatically and utilise them although this maybe still be a little buggy but the ultimate aim is for it to figure out the $_GET variables itself.
In the time it took me to write a post for version 1.8.0 I improved some of the $_GET parameter code so I incemented the version number to 1.8.1 and you can grab the latest version of ldir on its page as always
Changelog:
Just because I spent about 2 hours looking for this info…
A rooted android device with busybox can easily release the DHCP allocated IP with the following commands
su dhcpcd -k wlan0 dhcpcd -n wlan0
turn wifi on and off and now you should have a new DHCP IP rather than a renewed IP.
I’ve stared using the very powerful yet minimalistic text editor Sublime Text 2, one of the great features is the ability to customise it to your personal needs.
Some of the code I write I license under the GPL v3 but because the code is only a small function, I don’t want to include the full GPL in the source so I use the minimal header. To ease my life and make it quicker to include this minimal header in my code I have written a small snippet for Sublime to insert the minimal GPL.
Just type
**GPL**
and press tab to comete the code. This will then move the cursor to the program and description part where you pop the name and a brief description. You’ll probably want to change the copyright name to your own in the snippet.
To install the snippet just download it, open Sublime click Preferences > Browse Packages and put it in the user folder in there, then restart Sublime.
It took me a while to find the forum post so I’m reposting the info here, sublime actually supports smarty semi-natively but its not turned on, so here’s how to turn it back on…