Styled Themes Blog

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 

Create a Custom WordPress Gallery

December 23, 2013 |
|

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 

Introduction to WordPress Post Formats

December 23, 2013 |
|

WordPress offers several default post formats, as quoted from their website: aside – Typically styled without a title. Similar to a Facebook note update. gallery – A gallery of images. Post will likely contain a gallery shortcode and will have image attachments. link – A link to another site. Themes may wish to use the first <a href=””> tag in the post content as the external link for that post. An alternative approach could be if the post consists only of a URL, then that will be the URL and the title (post_title) will be the name attached to the anchor for it. image – A single image. The first <img /> tag in the post could be considered the image. Alternatively, if the post consists only of a URL, that will be the image URL and the title of the post (post_title) will be the title attribute for the…    read more 

How to use In-line Columns

December 23, 2013 |
|

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 

Set your logo or website title

December 23, 2013 |
|

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 

Using Drop Caps in your content

December 23, 2013 |
|

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>  

How to create the 4 Front Page Widgets like the demo

December 23, 2013 |
|

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 

Managing Fonts in Celestial Lite

December 23, 2013 |
|

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