Styled Themes Blog

Use the WordPress Header for Images

December 24, 2013 |
|

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 Encounters, you get to use it as a type of showcase banner for your pages…normally used for the “Front Page” only. 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 of accessing the setup of your…    read more 

Setup your main menu and other menus

December 24, 2013 |
|

Encounters Lite comes with one (1) menu, although the pro version comes with three (3) predefined menus for you, but with Encounters Lite, you can create more as you need them. Before you create your menus, you will have what is called a “fallback” menu which means when you install WordPress, you will get a basic menu of pages showing like this: Again, I will assume you know the basics of WordPress, but I will go through the setup for this theme. Setup Your Primary Menu Go to Appearance >> Menus In the “Menu Name” field, type in what you want to name your menu, for example, Primary Menu and then click the “Create Menu” button Then in the left side, you should now see a box that is labeled as “Theme Locations“. In the Primary Menu setting, select the menu you just made and then click “Save“ Now you…    read more 

Setup your own logo or website title with description

December 24, 2013 |
|

With Encounters Lite, 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 

Install Plugins so we can do what the Demo Site does

December 24, 2013 |
|

In most cases, themes from developers are often filled with a ton of plugins that are coded directly into the theme. Although great and convenient, there is a major caveat of doing this…several actually: The theme gets bloated with code Your theme might have plugins you will never use or want to use The plugins and scripts coded in the theme may not play nice with other third party plugins The plugins and scripts may not be compatible with upcoming versions of WordPress The more scripts and code, the more chances bugs and other problems will show up Benefits of Keeping Plugins out of Themes The user can choose what they want to use You get a much lighter theme (less code) More stable theme Much easier to update plugins than if they were coded into the theme Updates are left to the developers of the plugins If you change…    read more 

Before you start uploading images, set your media sizes

December 24, 2013 |
|

The most annoying thing with WordPress is that they have a set group of dimensions for images already in place when you install WordPress. What happens when you upload a photo, you will get several thumbnail sizes created automatically – whether you want them or not. This is a major problem for many because eventually your host server will get filled with unused images which take up a lot of server disk space. You don’t see all your thumbnails except just one in the Media Library of your site’s admin. But, if you were to go to your “uploads” folder through your FTP, you will get a shock of your life when you see how many images are there. So…before we continue on with setting up Encounters Lite, we will change the default settings of WordPress so that this does not happen to us, although changing these settings is optional….    read more 

Introduction to the theme Customizer for Encounters Lite

December 24, 2013 |
|

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 & Tagline – Set your logo options Basic Settings – Miscellaneous settings Social Networking – Set up your social networking icons Colours – change the colours for almost everything in your theme Header Image – for your header showcase area Background Image – for your overall page background Navigation – For selecting menus Static Front Page – choosing your front page and blog locations Find the Customizer You have two places you can access the Customizer. Option One is…    read more 

Using a Child Theme to make modifications

December 24, 2013 |
|

If you plan to customize your theme by making changes to any of the core theme files, even the style.css file, 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…    read more 

Installing Encounters 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_encounters.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 encounters-lite.zip file to your desktop Open your FTP program Find the unzipped folder “encounters-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 Encounters Lite

December 24, 2013 |
|

Welcome to the Encounters 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 Encounters Lite Encounters 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 the…    read more 

Change the Submenu background

December 24, 2013 |
|

Because Preference uses CSS 3 gradient backgrounds for the submenus (and a couple other in-page elements), using the theme customizer for this is not really possible, so we have to use an online tool for this. You can still achieve a customized look and style for your submenus, but we have to do a little extra work here. By default, the theme’s styling for the submenus (and menus) are found in the theme’s /css/ folder. However, to access these styles, you will need an FTP program to open them because WordPress doesn’t show these in the admin’s own theme editor (not sure why they made this inaccessible). The file is found here: /wp-content/themes/preference/css/menu.css The class for the gradient is found around line 60 and looks like this: .mainmenu ul li:hover > ul { /* second level half rounded */ The actual styling is handled by this batch of code: background-color:…    read more