Tag Archives: CSS

How To Use Separate Themes On Different Pages In WordPress?

You can assign a separate theme on home, posts, search, archive and other pages of your WordPress site.

In this lesson, you will learn how easily you can get control over the look and feel of your website by assigning different themes to different areas of your website.

Simply navigate to your admin area dashboard to find and install Multiple Themes plugin. After activation visit your admin area Dashboard -> Appearance -> Manage Themes page to assign different themes over different sections of your website.

The plugin will enable you to choose

  1. A Theme for All Posts
  2. A Theme for All Pages
  3. A Theme for Site Home
  4. A Theme for an Individual Post
  5. A Theme for an Individual Page
  6. A Theme for Selective Archive Page
  7. A Theme for Selective Search Pages, Terms, and more

The plugin enables you to choose a different theme for everything and override the active WordPress theme on your website.

Updating WordPress Theme Options

Now the question arises how you would be able to change the theme options for any theme you want? Well that is possible, you will find the complete process in this lesson.

The plugin doesn’t changes the active WordPress theme on your website. Instead, it works by dynamically overriding the settings on the pages and sections selected by you.

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

New Metabox For Inserting Custom CSS In WordPress Posts & Pages

Custom CSS for Pages and Posts is the new WordPress plugin you can use for inserting custom CSS in your WordPress site posts and pages. The plugin enables a custom CSS metabox on post, page, custom post type edit screens.

Continue reading New Metabox For Inserting Custom CSS In WordPress Posts & Pages

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 easily enable your website visitors to listen to any text present on your WordPress site. They can listen to your blog posts, pages, footer content, or any manually selected text on your website.

GSpeech is a WordPress plugin that uses Google to provide you the good-quality automatic text-to-speech service enabling your visitors to listen to any text on your website.

Main features of the plugin:

  • Allows you to listen to any text from the site!
  • Listen to the selected text. The speaker will appear when You select a part of the text!
  • Autoplay Feature. See Demo
  • Feature to set greeting audio for your users!
  • Feature to set different greetings for logged-in users.
  • Speaking menus. Users can listen to menus when they hover them!
  • Ability to set custom events.
  • More than 50 languages are supported by Google!
    • Unlimited text-to-speech!
  • Place the speaker wherever you want!
  • Ability to set the custom style and language for each TTS block!
  • 40 speaker types!
  • Customizable TTS block styles!
  • Customizable tooltip styles (12 beautiful styles)!
  • Live preview in the administration panel!

Install and activate the GSpeech plugin on your WordPress site. After activation visit your admin area Dashboard -> GSpeech admin page and select your language. You can choose a custom style and set other options from the same admin page. Now, click the ‘Save Options’ button and that’s all.

Now visit the front end of your website, select any text (which you want to listen to) and it pops up a Speaker Icon. Click that speaker icon and listen to the selected text.

For displaying the speaker after the text, use this basic format: {gspeech}Text to speech{/gspeech}

You can also specify custom styles and language for each text-to-speech block on your website: {gspeech style=2 language=en}Custom text to speech{/gspeech}

When using all parameters with GSpeech, the structure will be: {gspeech style=2 language=en autoplay=1 speechtimeout=0 registered=0 selector=anyselector event=anyevent hidespeaker=1}welcome{/gspeech}

In order to use the plugin, you must have the PHP Curl library enabled on your web-hosting. If you are hosting your website at Sangkrit.net, simply contact the support to get help.

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 ?