Category Archives: CSS Style

divi-wordpress-theme

CSS: Issue: Fix double animation of Divi slider

Divi is one of the popular theme from Elegant Themes. I come across this issue earlier this day that Slider text was displaying on page load and then animate again when full page is loaded. Use following snippet to fix it.

TeleTech

CSS: Full Page (Screen) Background Image Slideshow: Made Easy

Full screen background image that span all over the browser window is getting much more popular now. It definitely catches visitor’s eye and boost the overall design of the website. It looks much more colourful and attractive. Few examples of some awesome looking websites are TeleTech, Vivo Group, Chicago L-Shirts and Fleming Steele. This snippet is not specific to WordPress except that it require jQuery and uses WordPress conventions. Please note that it does not require any jQuery plugin.

breadcrumb

Shortcode: Easily Add Breadcrumb

Links are one of the vital parts of a web layout and if you have a lot of them you got to add a navigation and breadcrumb system. So that at any particular article visitor know where he is in the site’s navigation layout and how he can find similar articles. This shortcode will automatically generate breadcrumb for all the posts, pages, categories and tags.

menu

CSS: Cross Browser WordPress Horizontal CSS Menu

Cascading Style Sheets (CSS) is becoming so powerful that we no longer need to use javascript for the mouse hovering events, nor we need to use images to make our web beautiful. With the new CSS3, There are number of properties that adds very cool look to our websites. Some of those are transitions, gradients, shadows and rounded corners. Although, none of these are supported in older versions of Internet Explorer but they do die gracefully.

body class

CSS: Add custom css class in body tag

Add following code to “functions.php” Snippet

highlight current menu

CSS: Highlight Current Page in Menu

Add following snippet to “style.css” Snippet Result

Preview: Author Box

CSS: Display Author Info Box

Add following snippet to an appropriate place in “single.php” Snippet To make it look good, lets add some css (put it in “style.css”) Result