Final Icons Display

How To Create Sprites and Use Icons with CSS

[lightgallery] Create a sprite with Instant Sprite: download the png sprite image and usage. [lgallery] [/lgallery] CSS codes: #return_top a,#youtube a, #bird a{position:fixed;bottom:1px;display:block;width:2.5rem;z-index:100001} #fixed_icons{background:linear-gradient(270deg,#ddd,#777 80%) no-repeat;padding:0 2%;position:fixed;width:100%;height:2.5rem;bottom:0;margin:0 auto;z-index:10001} #home_icon a{position:fixed;right:44px;bottom:1px;display:block;height:43px;width:44px;background:url(images/mysprite.png) -100px 0; no-repeat;z-index:100001} #return_top a{right:0;height:40px;background:url(images/mysprite.png) 0 0; no-repeat}#youtube a{right:90px;height:40px;background:url(images/mysprite.png) -50px 0; no-repeat} #bird a{right:135px;height:40px;background:url(images/mysprite.png) -156px 0; no-repeat} footer codes: <div id=”fixed_icons”> <div id=”return_top”><a href=”#masthead” title=”Go […]

create shortcode

Create Shortcodes for Color Buttons With Links

Bootstrap buttons are great, but for some reasons they don’t accept links. This is how I create color buttons with link using shortcodes. Create the color button in css. bblack,bblue,bgreen,bred, a {text-style:italic;font-size:17px;font-weight:500;color:#fff}bblack span,bblue span,bgreen span,bred span{padding:5px 13px;border-radius:5px}bblack span{background-color:#080808}bblue span{background-color:#1A447A}bred span{background-color:#930700}bgreen span{background-color:#004928} Shortcodes by create btn_shortcodes.php. <?php add_shortcode( ‘blue’, ‘title_s’ ); function title_s($atts, $content = null) […]


Magnific-Popup is a responsive lightbox. I modified the zoom-gallery.js to idoggallery.js using class=”idoggallery” for easy to remember. For image with no links use “igallery” and title only. Use  “title” and “mylink” on href to display caption and create a link… <div class=”idoggallery”> <p style=”text-align: center;”><a class=”preview” title=”macOS Sierra On Windows Laptops” href=”//” mylink=”//”><img class=”alignnone size-thumbnail […]

jQuery lightGallery

[lightgallery] Sometimes I want to embed a gallery inside a bootstrap collapsible paragraph, but Fotorama doesn’t work inside bootstrap collapsible shortcodes. I stumbled into this great jQuery lightGallery and I manage to get it to work inside the bootstrap collapsible shortcodes. To extensively use this lightGallery, you do need support from the owner. I just […]