Styled Themes Blog

Introduction to the theme Customizer for Preference Lite

December 24, 2013 |
|

With Preference Lite, you get several options that are built-into the theme to give you the ability to personalize your website by using the available customization features that come with this theme. Normally theme sites code in third party option panels, but I decided to keep to the official WordPress methods by taking full advantage of their built-in customizer (new to WordPress 3.4). To see what the customizer looks like, you can check out the screenshots below: Preference Customization Options As you can see in the above screenshot, you get option tabs, each with a series of settings that let you customize your new theme in “real time”…which means as you make a change, you can see the result dynamically in the right side window. The benefit of this is that you can see what something looks like before making it official and live to the public. Available Options Site…    read more 

Modify your theme using a CHILD THEME

December 24, 2013 |
|

If you plan to customize your theme, WordPress and Styled Themes recommends you use the Child Theme method instead of directly modifying the actual theme files. If you update a theme and you made modifications, guess what will happen? Your modifications will be totally lost and you will have to do it all over again. However, if you make your modifications using a Child Theme, then your changes will not be affected whenever you update the original theme (often called the Parent Theme). When to Use a Child Theme? When you need to make a colour change to any element that is not part of the customizer or theme option settings When you want to change a font When you want to change part of the layout When you want to add something of your own ….basically any changes you want to make to the official theme you downloaded As WordPress…    read more 

Installing Preference Lite

December 24, 2013 |
|

There are at least two popular methods of installing a theme into WordPress: Using the built-in Installer Manually uploading the theme Using the Installer If you downloaded this theme, you will need to log into your site’s admin area (dashboard as WordPress calls it). Go to Appearance >> Themes When on the themes page, clickon the “Install Themes” tab Click on the text link “Upload“, browse for the st_preference.zip and then click “Install Now“ Once uploaded and it’s installed, click “Activate” and then you’re done! Manual Install For most people, you won’t be using this method but is available as an alternative. Unzip the preference-lite.zip file to your desktop Open your FTP program Find the unzipped folder “preference-lite” and make sure the theme files are inside that and not a double folder named the same. If there is, then upload the folder that has the theme files showing in it….    read more 

Introduction to Preference Lite

December 24, 2013 |
|

  Welcome to the Preference Lite introduction…as you go through these setup tutorials, I will be assuming you already know the basics of how WordPress functions and that hopefully, although not required, that you have at least some basic knowledge of CSS and HTML. If you don’t, you really should have these skills because at some point whether you are using my themes or others, you may need to make some form of modification adjustment to a page element or style. About Preference Lite Preference Lite is a theme that was designed to cover a wide range of types of business websites from blogs to full sized sites. To give you an idea, here are some ideal uses: Personal or simple business blogging Information based websites Professionals such as lawyers, accountants, consultants, etc. E-Commerce Corporate intranets Hospitality industry Design and Illustrative fields I am sure there are more but overall…    read more 

Styling You lists for Celestial Lite

December 23, 2013 |
|

Celestial Lite offers list styles (bullet lists) to give you more than a simple dot. To see the Celestial Lite list styles in action, you can check out the live demo for this theme here: List Styles How to Style the Ordered Lists All you will need to do is apply a class to your <ol> when making lists, with the exception to the “Default” style which will just be a numbered list. <ol> This is the default list, no class needed. <ol class=”decimal-leading-zero”> This will give you a numbered list starting with zero (0) until it reached 10 or more. <ol class=”upper-alpha”> This will give you a list with Alphabetical letters in uppercase. <ol class=”lower-alpha”> This will give you a list with Alphabetical letters in lowercase. How to Style the Unordered Lists This is also done by adding a class to your <ul> when making lists, with the exception…    read more 

Setup your social networking icons

December 23, 2013 |
|

For anyone wanting to use the built-in social networking icon group, you have the options of: Twitter Facebook Google+ Pinterest LinkedIn By default when you install and activate Celestial, all social options are active, but you can disable any that are not needed, including all. However, when all are active, they look like this: When you manage your settings, your option fields will look like this one that is set by default after installation and activation of Celestial: Go to Appearance >> Themes >> click on the Customize text link Click on the Social Networking tab in the left column Begin selecting which social networks you want enabled or disabled and add in your links for each one Click Save & Publish and then Close  

Change the colours of Celestial Lite

December 23, 2013 |
|

One of the best features of Celestial (and my themes) is that you can modify the colours of almost every element within your page(s) with a colour selector that is already part of WordPress. I simply added more colour selector fields based on what elements you can change to suit your own preferences. Go to Appearance >> Themes >> click on the Customize text link Click on the Colors tab in the left column For each item, click on the select field which opens the colour selector and move the circles around until you find the colour you want You should be able to see the colour changes take effect in the preview window to the right When happy, click on Save & Publish and then Close Move on to the next colour item  

Disable the Front Page demo Banner after activation

December 23, 2013 |
|

When you first install Celestial, the free version, you will find that you get a sample showcase banner showing on the front page. This is just used for display purposes, but you can disable it if you want to start using the WordPress custom header feature. Currently this sample banner is setup so that once you drag a widget into this Front Page Showcase sidebar position to use your own image, the sample one will automatically disappear. However, if you want to use the WordPress custom Header option, this works slightly different and means you have one extra step to perform… Go to Appearance >> Themes >> click on the “Customize” link next to the thumbnail of Celestial When the customizer opens, go to the left column and click on the Header Image tab and “Uncheck” the box next to “Showcase Demo Banner“ Click “Save & Publish“ Now your demo…    read more 

Using the WordPress Header photo feature

December 23, 2013 |
|

WordPress comes with a “Header” feature built-in, although the theme used needs to have this activated, Celestial has this available to you. Generally this allowes you to upload and crop your own header photo or graphic. You can even have this rotate more than one photo. Although not totally flexible where you have this load in a page, this one is set for the Front Page only in Celestial. When using the WP Header option, your front page would look like this: You get a nice big image showing up with a curved graphic overlay which is designed for the front page only. I recommend you opt in for images that are at least 1920 pixels wide to ensure those with big monitors will get a great looking photo that has good quality sharpness. You will get an automatic setting for the height also set to 340px but you can…    read more 

Adding a Photo or Slider to your Front Page

December 23, 2013 |
|

Adding a photo or a Slider will be very similar to each other because you will be using a widget for this. When using or needing a widget to display a header image or anything that you do not want the title to show, I recommend installing the “Advanced Text Widget” for this theme. Getting the Advanced Text Widget Go to Plugins >> Add New Search for “Advanced Text Widget” and then click Install, and then activate it. Adding Your Photo or Slider For sliders, you will want to make sure that the slider is “Responsive” for best results, although not required. You will also want to make sure that the slider comes with Shortcode so that you can add this to the widget. Photos are easy enough because you simply upload and use some easy HTML code to get the photo to show. For a Photograph, make sure you…    read more