Setup Tutorials for Celestial Lite

Most people know you can use the standard WordPress gallery shortcode to make a gallery in a post or page, but the styling of it is at best, basic. Celestial takes advantage of the Cleaner Gallery plugin by Justin Tadlock, in combination with the WordPress shortcode…and a little bit of Celestial styling. Part 1 – Get the Cleaner Gallery plugin Go to Plugins >> Add New Search for “Cleaner Gallery“, click install, then activate Go to Appearance >> Cleaner Gallery For the following settings we will set them as: Display: Thumbnail Images should link to: Full Uncheck the Load Cleaner Gallery Stylesheet Select an image script to use with your galleries: Lightbox Click “Update Settings“ Part 2 – Create Your Galleries Create a post or page for your gallery (or open an existing post or page you want your gallery in) Switch the editor to the HTML (Text) view and…    read more 

In-line columns allow you to create more layouts than the theme has built-in. They are simple HTML snippets that are like a small mini-template of code that you copy & paste into your content editor (HTML text view) and then replace the sample content with your own. They are also dynamic which means they will resize based on the browser width.  The Demo Website shows how various in-line columns are used, but it really depends on how you plan to use them. They are a little more hands on with code than simply typing into a post or page editor, but they do have their advantages.  Here is an example 2-column in-line set: To get this in your page, the HTML snippet would be this:   <div class=”row-fluid”><div class=”span6″> <h3><strong>One</strong> Half</h3><p>Add your own content here.</p> </div><div class=”span6″> <h3><strong>One</strong> Half</h3><p>Add your own content here.</p> </div></div> The demo site will offer the…    read more 

With Celestial, you get the option of having: Default logo Your own logo Site Title and Site Description (set in h1 and h2 tags respectively) 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 “Your Logo” option, at which point the preview window will now show the default logo gone 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 Click Save & Publish at the top then “Close“  Setup Your Site Title and Description  Go to Appearance >>…    read more 

Drop caps are usually used as a decorative element at the beginning of a page or paragraph, but can sometimes be used as a form of a unordered or ordered list style. For Celestial, the drop cap styles are: The code for using drop caps is: <div class=”dropcap dropcap-grey”>1</div> For Green:  <div class=”dropcap dropcap-green”>1</div> For Blue: <div class=”dropcap dropcap-blue”>1</div> For Yellow: <div class=”dropcap dropcap-yellow”>1</div> For Red: <div class=”dropcap dropcap-red”>1</div> Using Drop Caps with In-Line Columns You can use drop caps creatively like the screenshot above. The code to get the columns with the drop caps looks like this: <div class=”row-fluid”><div class=”span4″><div class=”dropcap dropcap-grey”>1</div><h3 class=”dropcap-indent”><strong>Span</strong> 4</h3><p class=”dropcap-indent”>Your content would go here.</p></div><div class=”span4″><div class=”dropcap dropcap-green”>2</div><h3 class=”dropcap-indent”><strong>Span</strong> 4</h3><p class=”dropcap-indent”>Your content would go here.</p></div><div class=”span4″><div class=”dropcap dropcap-blue”>3</div><h3 class=”dropcap-indent”><strong>Span</strong> 4</h3><p class=”dropcap-indent”>Your content would go here.</p></div></div>  

Setting up your front page like the live demo site is what this tutorial is about and will apply to both the free version of Celestial as well the Pro version. This tutorial will be written with the assumption you have not setup a “Static Front Page” yet. Step 1 – Create Two Pages for Home and Blog Go to Pages >> Add New Title your first page as “Home” or anything you want, and then assign the page template: Front Page Widgets Only Click “Publish” Make another page called “Blog” or whatever you want, but nothing else needs to be entered Click “Publish” Step 2 – Setup the Static Front Page for WordPress Go to Settings >> Reading >> Then on the Front Page Display section, select the Static Front Page settings by choosing the pages for each of the Front Page and Posts Page (the blog) Click Save…    read more 

This is a big topic but working with fonts in any theme can be a daunting task for many because people will only see certain fonts in a web page that exist in their own computer…or if the fonts are directly embedded into the web site (page) they are viewing. Celestial Lite (and the Pro version) uses a couple custom fonts but currently these are not embedded, but linked to an external source of Google Fonts. The demo site for Celestial also uses a plugin called WP Google Fonts which can be used for any custom fonts you want to use. WP Google Fonts How you manage your fonts will be up to you but please be aware you should have some HTML and CSS skills to make any modifications because depending on what you want to change, whether headings, titles, slider text, or even menus, the theme’s stylesheet is…    read more 

Celestial comes with two layout styles for your blog which change with one option setting. Whatever layout you choose will be set globally also for your category, archive, and tag layout pages…basically anything related to the blog. This is what the small blog image layout looks like: This is what the wide blog image layout looks like: Choosing Your Image Size and  the Left or Right Sidebar Column Layout You also get to select whether you want the left sidebar column or the right sidebar column by selecting this option from the Customizer’s Basic Settings tab. Go to Appearance >> Themes >> click on the “Customize” text link on the active theme Click on the “Basic Settings” tab in the left column Choose if you want the Small Blog Image or leave unchecked for the wide image Choose if you want the left sidebar column, or leave unchecked for the…    read more 

With Celestial, 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: Celestial 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 Title…    read more 

If you plan to customize your theme, a Child Theme is highly recommended if you’re doing ANY changes to your Theme design. A child theme will function and look just like the Celestial Lite theme before you make any changes, but allows you to modify almost everything while protecting the official Celestial Lite theme you installed. This means if you update the original theme, any changes you made in the child theme will not be affected. When to Use a Child Theme? When you need to make a colour change 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 states, a Child Theme is a Theme that inherits the functionality of the Celestial Lite Theme also know as the…    read more