Setup Tutorials for Luminescence Lite

Welcome to the Setup Tutorials for Luminescence Lite. These are the standard guidelines to help you install, configure, and customize your newly downloaded theme. If you have any requests for additional tutorials relating to this theme, please contact me and I will review your suggestions. These tutorials are also based on the assumption you have a basic understanding of how WordPress works.

Choose either Content or Excerpts for your blog

This is a new feature that was add to Luminescence Lite, and gives you the choice of either Content or Excerpt for your blog posts.  The Content will load your post content to the point of where you add your own “Continue Reading” link The Excerpt takes a consistent number of words from the first part of your post, or you can do a custom excerpt from the post editor By default, this theme gives you the excerpt method, but you can go into your theme options and change this. Change Your Post Method Go to Appearance >> Customize  Click on the Basic Settings tab in the customizer Choose either Content or Excerpt If you use excerpt, select the number of words to show in your excerpt from your post Click Save & Publish  

Image Styles

This is what the image will look like when you insert it into a post or page. Of course with the exception of blog posts which have a nice glow effect that gets added automatically around them, you get have that capability which will be demonstrated below. Adding a glow is simply by adding the class image-glow to the <img> tag and get a result like the second image you see below: How to Add a Glow After you insert your image into your post or page, switch to the “Text” tab of your editor and look for the image source code. You should see a class already added to the <img> tag, but we need to add one more. For example, this is how the second image code looks like from the demo site: <img class=”size-full wp-image-130 image-glow” alt=”image with a glow” src=”path-to-image.jpg” width=”250″ height=”250″ /> I added the…    read more 

Create a Drop Cap in a paragraph

A drop cap is generally used at the start of a first paragraph and the first letter of the first word. It usually takes up 2-3 lines in size and will often be stylish in one way or another. Luminescence offers a drop cap for you using a font called “Merienda” that is included in this theme from Google Fonts. An example of what it looks like can be seen here on the live demo site: Drop Cap Basically it will look like this: How to Create a Drop Cap Switch to your editor’s “Text” tab and copy & paste this code right after the opening <p> tag in your paragraph…just in front of your first word: <span class=”dropcap”>T</span>his is your paragraph text… You control the colour of your drop cap, for example to make it black, you can add an inline style like this: <span class=”dropcap” style=”color: #000;”>T</span>his is…    read more 

Create an Information Box

An information box can be used for any message you want to convey to your site visitor. An example of what they look like can be seen here on the live demo site: Information Box Basically it will look like this: How to Create a Box Switch to your editor’s “Text” tab and copy & paste this code: <div class=”info-box” style=”background-color: #b88c4d; color:#fff;”>Add your content here.</div> You control the colour with the inline styles that you see. You can change the background and the colour of the text to your own personal preference to allow greater flexibility.  

Setup your social networking icons

With Luminescence Lite, you get the following social networking icons: Twitter Facebook Google+ Linkedin Pinterest Flickr Youtube Vimeo How to Enable Your Icons Go to your home Dashboard page and click on the big “Customize Your Site” button Click on the “Social Networking” tab Add full urls to each of the social networks you want to use. For example, Twitter would have Click Save & Publish View your website (refresh if you need to) Hiding the Social Bar If you decide you don’t want to use your social networking icons, or just a temporary change to disable them, you can disable the social bar from being seen on the front-end of your site.  Go to your home Dashboard page and click on the big “Customize Your Site” button Click on the “Social Networking” tab Put a check in the box next to “Hide Social Bar“ Click “Save & Publish“…    read more 

Create a WordPress Gallery

The default gallery shortcode that is part of WordPress is extremely limited and getting a good looking gallery in conjunction of working with WordPress thumbnails is a nightmare because there was not enough thought that went into this available feature. However, with Luminescence, I did a little extra customization for those who want to use the default WordPress gallery in their website by stripping out the built-in styles they use and opted in for my own. It’s not perfect but it still looks good without the need of a plugin. Prepare Your Photos As I will keep saying this on all tutorials relating to images, prepare your images by cropping, sizing, and optimizing your photos before uploading. I also recommend making your images the same dimensions if you can so you keep a consistent layout and size with each image, but this of course is not required. Before we begin,…    read more 

Use the WordPress Header feature for page banners

Part of WordPress includes a “Header” feature that lets you upload and crop photos that you can use in a header of your page. Before in the past the header would have the site title and description on top of it and you were able to change the background of it. Well things have changed and advanced to a point that you can use the header in many ways, whereas for Luminescence, you get to use it as a type of showcase banner for your pages. You can see an example use of this header here: Header Image How to Find the WP Header Feature First, there will be two methods you can work with the WP Header feature: The first is clicking on the “Header” link in the left panel in your dashboard under “Appearance“. When you are in your dashboard, this is going to be the fastest way…    read more 

Changing colours for Luminescence Lite

One of the best features of Luminescence Lite (all 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. Note: If there is something you want to change that is not available from the theme options, you will then need to customize the style.css then. 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 &…    read more 

Choose your layout

You get two (2) layout styles with your theme. For instance, you can have a left or right column (sidebars) layout. I’ve provided a couple screenshots below: Left Sidebar and the Right Sidebar Layout   Set Your Layout Go to Appearance >> Themes >> click on the “Customize” text link on this theme Click on the Basic Settings tab Choose your layout: Click Save Options    

Setup your logo or website title

With Luminescence Lite, you get the option of having: Default logo Your own logo Logo with Title and Tagline Text Title and tagline only Right now the default logo looks like this: Setup Your Own Logo Create your logo in your favourite image program like Photoshop, Illustrator, or other, and save it as a jpg, png, or gif format Go to Appearance >> Themes >> click on Customize Click on the Site Title & Tagline tab on the left side Select the option you want, for example, if you want your logo with the site title and tagline: Click on the Your Logo dropdown and then browse, then choose your logo you created to upload. After a few moments, your new logo will be uploaded and the preview will show it. I did an example: Click Save & Publish at the top then “Close“  Setup Your Site Title and Description …    read more