Tag Archives: CSS

Enable Custom Styling And Interaction For WordPress Posts

In this lesson we will show you how you can allow custom CSS styling for each post, page and other custom post types. Many times website owners need some extra styling on per post basis but default TinyMCE editor doesn’t allows you to do so.  Continue reading Enable Custom Styling And Interaction For WordPress Posts

How To Hide Sidebars On Small Screen Devices In Twenty Fourteen WordPress Theme?

By default, most WordPress themes slides sidebars to bottom on small screen devices like on mobile phones and tablets. But you must have observed various websites automatically remove the sidebars if it’s viewed on a small screen and keep it visible everywhere else.

Continue reading How To Hide Sidebars On Small Screen Devices In Twenty Fourteen WordPress Theme?

Instantly Generating Colorful CSS Gradient Backgrounds

Gradientcreator.com is an easy, fast and elegant gradient background creation tool that works on cloud. All you need to do is visit its home page and you will know what you have to do. On homepage it provides you a button which generates random Gradient with CSS each and evrytime it is clicked. Also you can give a retouch to randomly generated backgrounds or in just a few click you can create your own beautiful gradient and copy its CSS to use it in your website or anywhere else.

Continue reading Instantly Generating Colorful CSS Gradient Backgrounds

How To Add Custom CSS Classes To Individual WordPress Widgets?

By default most WordPress themes uses same style for all sidebar and other widget areas. This tutorial is on how you can make selected widgets on your website look differently in some custom style given by you.

First of all install and activate the WordPress plugin called Widget CSS Classes. This is a well known WP plugin that allows you to add custom classes and ids plus first, last, even, odd, and numbered classes to your widgets. Not only this much but it also adds some additional classes to help you style your widgets more easily:

  • widget-first: added to the first widget in a sidebar
  • widget-last: added to the last widget in a sidebar
  • widget-odd: added to odd numbered widgets in a sidebar
  • widget-even: added to even numbered widgets in a sidebar
  • widget-#: added to every widget, such as widget-1, widget-2

After activation visit your admin area Dashboard -> Appearance -> Widgets page and you will see a new CSS class field is added under each widget. Now all you have to do is write custom CSS and add its class to individual widgets.

Screenshot showing basic widget after the plugin is activated:

Screenshot showing widget with ID field and Dropdown option enabled:

Widget Options & Features:

There are some more options this widgets provides you (Settings -> Widget CSS Classes) like you can enable Widget Number Classes, First/Last Classes, Even/Odd Classes, Show Additional Field for ID, Class Field Type Text Dropdown Hide etc. Also you can define Classes for Dropdown from the options page.

Features:

  • Adds a text field to a widget for defining a class
  • You can specify multiple classes by putting a space between them
  • Optionally adds a dropdown menu with predefined classes instead of a text field
  • Optionally adds a text field to add an id to a widget
  • Adds first and last classes to the first and last widget instances in a sidebar
  • Adds even/odd classes to widgets
  • Adds number classes to widgets
  • Fully translatable
  • Multi-site compatible
  • Compatible with Widget Logic and Widget Context plugins
  • Has filters and hooks for customizing output including class names

New Easy Way Of Overriding Text Selection Color In WordPress

You can change text color of your WordPress site to whatever you like, few months back we discussed how you can change text selection color by editing style.css or by adding the css to Jetpack’s Edit CSS editor etc. But now you can do this more easy, without digging inside your theme files etc. Now you can do this with an easy to use WordPress plugin.

Continue reading New Easy Way Of Overriding Text Selection Color In WordPress

How To Activate Separate Themes In Different Frontent Areas Of WordPress ?

You can use a separate theme in your site Home Page, Individual Posts & Pages, Post & Page Archives and other non-admin areas of your WordPress based website. Earlier we discussed about a WordPress plugin that allows you to assign a custom theme to individual posts and pages.

Continue reading How To Activate Separate Themes In Different Frontent Areas Of WordPress ?

How To Display Icons With Widget Titles In WordPress ?

Rather than displaying simple text widget title you can easily add related icons to it. You can enhance your website with 530+ icons specially designed for Twitter Bootstrap simply by using Widget Icon plugin.   Continue reading How To Display Icons With Widget Titles In WordPress ?

How To Enable Post Listening Feature In WordPress ?

You can very easily enable your website visitors to listen to any text present in your WordPress site. They can listen to your blog posts, pages, footer content or any manually selected text from your site.

Continue reading How To Enable Post Listening Feature In WordPress ?

Powerful & Complete Web Authoring System With WYSIWYG Editor And Previewer

If you are looking for a powerful HTML editor and previewer which you can use for  good WYSIWYG HTML and CSS editing then Kompozer is the best free option for you. It is widely popular as a complete web authoring platform which includes web file management and easy WYSIWYG web page editing features which you might have seen in FrontPage, Adobe DreamWeaver and other programs.

Continue reading Powerful & Complete Web Authoring System With WYSIWYG Editor And Previewer

Easily Combine & Compress All JavaScript & CSS Files To Make Your WordPress Site Faster

Most popular way of making your website pages more responsive is simply minimizing the number of files to be downloaded as your webpage is loaded. This tutorial is on a simple yet powerful WordPress plugin called AssetsMinify, the plugin compress all JavaScript and CSS files to make your website more responsive and faster than before.

Continue reading Easily Combine & Compress All JavaScript & CSS Files To Make Your WordPress Site Faster

Easiest Way To Insert Smilies In WordPress And Make Them Load More Quickly In Web-Browsers

Speedy Smilies is a quick and easy way of inserting emoticons in WordPress and load them faster in web-browser of yourwebsite visitors.. Additionally to speed benefits, Speedy Smilies also allows your blog authors to quickly and easily change the appearance of emoticons using sets of smileys.

Continue reading Easiest Way To Insert Smilies In WordPress And Make Them Load More Quickly In Web-Browsers

Quickly Get JQuery Effects On Default WordPress Menus And Sub Menus In Just A Click

Here’s an easiest and fastest way of adding JQuery effect in your default WordPress menus in just a click. Menu Effect is a free WordPress plugin that lets you add JQuery effects on your default WordPress menus (including both drop down main and sub menu) without changing or editing any code.

Continue reading Quickly Get JQuery Effects On Default WordPress Menus And Sub Menus In Just A Click

Save WordPress Dashboard Space By Adding All Admin Links In Horizontal Drop Down Bar

You can easily remove Dashboard’s left sidebar links and add them on the top after the WP admin bar. This not only saves your dashboard space but also makes admin area navigation more easy for you.

Continue reading Save WordPress Dashboard Space By Adding All Admin Links In Horizontal Drop Down Bar

How To Add Custom CSS to WordPress Admin Bar Without Disturbing Core Or Using Hack ?

You can customize WordPress admin bar. You can change its color, size and other style  by adding some custom CSS. Generally this is done by adding a function to your theme’s function.php file. Second method includes editing siteroot-> wp-includes->css-> admin-bar.css file but I would not recommend you changing the core css files. As far I know there are no plugins available that allows you add custom color to wp admin bar.  Here I am discussing another method which easily customizes your wp admin bar without disturbing anything on your site.

Continue reading How To Add Custom CSS to WordPress Admin Bar Without Disturbing Core Or Using Hack ?