Setup Tutorials for Celestial Lite

Welcome to the Setup Tutorials for Celestial 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.

How to add read more tag

We have attached some screenshots with explanation, we hope it will help you to use the “Read more” tag. ——————————————————————————————————————————————————-Firstly please write some text in page/post and we have given example of post here: In screenshots you can see the text below the image which helps you to keep the Read more tag. In screenshots-1 you can see the result after you put the read more tag in content and how it will display in the page. In screenshots-2 you can see the result after you click in the read more tag and how it will show the content/text.

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 

Adding a Photo or Slider to your Pages

December 23, 2013 |
|

Similar to adding a photo or slider to your front page tutorial, this one simply goes to a different sidebar position of “Page Banner“. For Photos: Prepare your photo before you upload it to your Media Library with a recommended 1920 x 225 size for those with large monitors. For Sliders: You just need your shortcode available Note: Make sure you have the “Advanced Text Wdget” plugin installed because this is a very flexible widget that lets you disable the title output plus you can select where you want your widget to show in your site. In this case, we will be saying “Pages”. Upload your photo to the Media Library and copy the url path to the full size image Go to Appearance >> Widgets Drag an “Advanced Text Widget” into the “Page Banner” position Create your title and then in the text area field, paste this code into…    read more 

Change space and colour when using sliders or image banners

December 23, 2013 |
|

There are a couple settings made available to you when you use a slider or Photographic banner in your Front Page, Pages, or Posts: Background colour Padding – top and bottom space that shows the background colour For example, the screenshot shows a page banner being used but it has top and bottom blue bars showing which are actually the banner showcase background colour and padding. Default padding is set to 7 pixels but you can change this to your own preference. Changing the Background Colour Go to Appearance >> Themes >> click on the Customize text link Click on the “Colours” tab in the right window preview pane, navigate to the page the banner image is located Find the Banner Background colour setting in the left column and click on it to select your colour. As you scroll around to choose your colour, you will see the preview window…    read more 

Change your page background colour or image

December 23, 2013 |
|

Although when your pages have a lot of content, they will stretch the browser downward, but for shorter pages, you can have a page background of a: solid colour Photograph repeating image or a combination solid colour with a transparent image WordPress has another feature for Backgrounds which Celestial is taking advantage of. The main setting for your background is found on the Appearance menu in your dashboard admin area, but the WordPress Customizer also loads your background option. By default, Celestial has a black page colour background, but you can change this. Go to Appearance >> Background Choose your colour from the colour selector (this screenshot shows the one in WordPress 3.5) Then click “Save Changes“ Adding a Photo Adding a Photo is simply done by clicking on the “Choose File” or the “Choose Image” button if your image is in the Media Library. You can then choose if…    read more