Back To Document ListIf you are experienced with WordPress, or know how to install themes, you can skip this tutorial. However, if you are new or a beginner, this tutorial is for you.
Before you install your theme, you will need to unzip the theme package first because inside that is your theme file you install: lavish.zip
A common issue that can occur with users new to installing WordPress themes is a "Broken theme and/or stylesheets missing” error message being displayed when trying to upload or activate the theme. This error message does not mean that the theme you have purchased is broken, it simply means it has been uploaded incorrectly. Luckily, there is a very easy fix. Please follow the steps below to rectify this issue or watch the screencast.
Lavish offers several features, but some require plugins if you decide to use them and should be considered as optional. You will need to download and install these because they are not included in the download of this theme. We do this so that everyone can choose which plugins they want to install, but it also ensures the most recent version of each plugin is installed. You can find all the plugin list when installing the theme as a notice in the top area.
Plugins the Demo Site Uses
In Additional Lavish pro comes with Revolution Slider bundled, you can find the slider plugin file in the theme package folder.
If you are new to WordPress and don't have knowledge of how to install plugins then follow the following:- http://www.wpbeginner.com/beginners-guide/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners
Lavish uses the WordPress Customizer which is a feature WordPress offers you to make changes to your active theme. Every theme will load up within the customizer, but what will be different from theme-to-theme are the settings and options they offer. The customizer gives you a live preview window of your website, and within the left column, you will see a series of tabs, each labeled as to what they are for.
There are a few ways of getting to the customizer:
The two most common methods are from the dashboard home page and the menu under Appearance >> Customize
You will hear this often and this is something that WordPress recommends; but if you plan to make custom changes to your theme, whether mine or from someone else, the best way is to use a child theme. You can read more about child themes here:
The reason for using a child theme is because if updates are available for your theme, in this case the parent theme of Lavish, you won't lose any custom changes because they were done in the child theme. How this works is that the child theme inherits the styles and functionality of the main theme (the Parent theme), so any updates that happen, it will inherit those. However, if you made any custom changes to the theme, these exist in the child theme and not the parent theme, which is why when you update, you don't lose the changes.
Easy guideline for you:
When making core theme file changes with a child theme, this is done by copying the file from the parent theme and uploading it to your child theme, while maintaining the same file structure as the parent theme. So for example, if you wanted to modify the header.php file in the parent theme, you copy that file and upload it to your child theme to the exact same location as the parent theme.
Note:The child theme duplicates the same structure and layout as the parent theme.
Before you install the child theme, always make sure the parent theme is installed. It does not have to be activated, just installed, otherwise you will get an error.
To change the Featured Image Settings in the blog page. Go to Appereance-> Basic Settings -> Blog Settings -> Featured Images and choose any one options. You can choose wide featured image as well as small featured image on your blog pages.
Wide Featured Images
Wide Featured Images enables you to display full width featured images on the blog pages.
Small Featured Images
Small Featured Images enables you to display Small width featured images on the blog pages, the content will be aligned with the images on the left side.
In this theme you can hide the featured images on the Single Post View. To do so Go to Appereance->Basic Settings->Blog Settings->Featured Images-> Hide Full Post Featured Image.
To change the featured Images go to Appereance->Basic Settings-> Blog Settings->Featured Images
You can hide the Footer info, Footer Navigation and Edit Link in the Lavish Free Theme.
Hide the Edit Link from the Website
You can hide the Edit link that appears when you log in to the wp-admin. To Hide the Edit Link Go to Appereance -> Customize -> Basic Settings -> Blog Settings -> and check the Hide Edit Button.Hide the Footer Info
You can hide the footer info from the single post view of the blog. To Hide the footer info Go to Appereance -> Customize -> Basic Settings -> Blog Settings -> and check the Hide the Footer Info checkbox.Hide the Footer Navigation
You can hide the footer Navigation from the single post view of the blog. To Hide the footer Navigation. Go to Appereance ->Customize -> Basic Settings -> Blog Settings -> and check the Hide the Footer navigation checkbox.
With Lavish Pro, you get several logo and title options to choose from:
If you are using a logo with a text based title and tagline, you may need to adjust your margins for this container with the setting "Site Title Margins" located on the Site Title & Tagline tab. Default setting is:
0 0 0 0 (means 0 pixels on the left, top, right, and bottom)
When adjusting, make sure you put the value like this sample:
5px 12px 16px 5px
If you are using a logo with a text based title and tagline, you may need to adjust your paddings for this container with the setting "Site Title padding" located on the Site Title & Tagline tab. Default setting is:
0 0 0 0 (means 0 pixels on the left, top, right, and bottom)
When adjusting, make sure you put the value like this sample:
5px 12px 16px 5px
Flat Responsive offers you three page widths:
The most common change people make with WordPress now is moving the blog further into the site and create a custom page for the front of their site; also known as a static front page. We will show you how this is done which is what we did for the live demo site for Circumference. What you put on your custom front page will be up to you, but this tutorial will get you started with a foundation to build on.
Now you have a static front page and your blog is not further in your site. Plus, you now have a Home and Blog menu link on your main menu.
Lavish Pro uses font icons from FontAwesome which means you can have different sizes, just like a font. You can use icons almost anywhere, especially with the html snippets that Flat Responsive has like "icon boxes", "media boxes" etc.
In this tutorial, we will be showing managing the header options for the Lavish Pro theme as it comes with two header styles.
Header Styles 1:
This Style will enable to view the menu within the slider. The slider will start from top and menu will be in the top area of the slider overlapping it. The styles used in the demo is Header Styles 1.
Header Styles 2:
This Style will enable to view the menu as the default themes styles. The slider will start from the bottom of menu.
How to manage and change the Settings for Header Settings:-
Customize Title |
Description |
How to Change : |
| Change the Header Style | You can change the header styles for your websites as per your choice from the navigation panel. | Apperance-> Customize-> Header Settings-> Header Style |
In this tutorial we are going to show how social networkings icons work in Lavish Pro. Lavish pro includes several social networking icons that you can use with links to your profile. These are not sharing links, but more of allowing visitors to follow your profile page on Twitter, Facebook, and others.
Additionally, you can add a cart icon and email icon on the bar.
Each icon is activated once you add your url to each social network that you have. Also, when you fill in your urls into each one from the theme option settings, they won't appear right away in the preview window, you will see them on the front-end of your website after you click Save and Publish.
| Google+ | |||
| Flickr | Youtube | Vimeo | |
| Picassa | Stumbleupon | ||
| WordPress | Github | Dribble | RSS |
To apply your own color to the social icons you can customize the colors from the customize section
There's a couple of ways to display post summaries in a blog:
Using the content summary method is the most common because when you create your post, you select where you want to split your post with a "Read More" tag. This gives you a shortened version of your post on the front-end of your website with a Read More button or link.
You actually get a couple excerpt options where the first takes a certain number of words from the beginning of your post, while the other lets you create your own "custom excerpt" instead of using the content from your post.
It's also important to know that excerpts DO NOT inherit formatting such as bold, underline, italic, etc. They also strip out media such as images.
However, there are advantages to using excerpts, such as:
To give you more flexible layouts, you can use page columns (content columns) which uses the Bootstrap framework. Using Bootstrap 3, you get a 12 grid column layout which is also responsive. To read more documentation on the grid layout, check out the Bootstrap website here:
Circumference is built using Bootstrap and the overall width uses the grid system. Basically the width is made up of 12 grid columns and uses css classes to create varying widths of containers, for example, the logo container and the main navigation container uses this method where the logo is 5 grid columns wide and the nav is 7 grid columns wide.
In your original downloaded theme package is a folder called HTML Snippets. Inside that is a text file "Columns" which you can use to get you started and offers some instructions as well. You can create your own layout using the col-md-n (n will be the number of columns you want to use) for your columns. For example, if you want two columns in your page, both containers would use this class:
col-md-6
This is what your column layout would look like:
<div class="row">
<div class="col-md-6">Some content here</div>
<div class="col-md-6">Some content here</div>
</div>
By default, WordPress will show a widget on every page that the widget position exists on. In most cases when making a website, you don't want that widget to show on every single page, so the only way to manage where and what pages it should be on is to use a plugin. You have a few options available:
Please also note the "Blog", "Single", and "Category - Archive" sections do NOT have the following widget positions available:
WordPress has its own gallery shortcode that generates a gallery for your post or pages... Even adding on into a text widget is possible. Styling is usually provided from the default WP theme such as Twenty Thirteen, Twenty Fourteen, and others that may be available. Lavish Pro uses the default gallery styling as a foundation, but with a little enhancement of design to give you a little more for your gallery.
First thing you want to do is prepare your images that will be included in your gallery. We're one to always stress consistency with image sizes, but you do not have to have each photo the same size. We should also mention that with a previous tutorial, we mentioned about clearing your Media Settings (thumbnail sizes) and recommended you create your own sizes as you need them. If you do not have the capability to crop and size your photos, you can set your thumbnail media setting to be something you want WP to crop your photos as you upload them, even if your photos are different sizes.
Note: This tutorial will be based on each image being 800 x 355, so when the gallery is created, the thumbnails will be close to the 255 x 170 in size to the demo.
In this tutorial, we're going to show you how to use Google fonts in Lavish Pro theme.
Google Fonts is an interactive directory of free hosted API for web fonts. This directory has now more than 650 web fonts and it's increasing each day. You can find those fonts here : https://www.google.com/fonts
Note: Using many google fonts can slow down your website, so we recommend you to use up to 2 fonts for your site.
WordPress has it's own default image styling and layouts which are common with every WP theme. These are:
alignleftaligncenteralignrightalignnoneDepending on the theme, usually the common styling is a border around the image, but Lavish Pro extends the styling concept to give you a little more in addition to the basic alignments that you see listed above. With Lavish Pro, you get the additional styles inlcuded
Offset is probably the more complicated style bcause of how it gets created in your page or post because it will require some code adjustments. However, we helped you out with a predefined snippet of code that gets you started so all you need to do is change the values. The image is also square where CSS transforms it into a circle for both the image and the colour offset background that you see. You can also have different sizes for your images. To achieve this result, you have some code to copy and paste:
<div class="la-offsetbox"><img class="la-offset" alt="custom-image" src="path-to-your-image.jpg" width="300" height="300" /></div>
With the circle style, CSS will automatically transform your image into a circle and apply a grey border around it as you see the screenshot below. You can have any size of image for this, plus you can align your image using the default WP alignment options. To use this style, add the following class to your image tag like this:
<img class="la-circle" ...
Thumbnail styling of images is probably the most common next to an image without styling. This one applies a background colour with an outer border around your image. You can also align your image using the default WP alignment styles. To use this style, add the following class to your image tag like this:
<img class="la-thumbnail" ...
By default, this is setup where your image is black & white until you hover over the image which then becomes coloured (see the screenshot below). You can modify the CSS if you prefer by reversing it so that the image starts off as coloured and then on hover becomes black & white. When hovering, the transition has a slight animation effect as it changes. To use this style, add the following class to your image tag like this:
<img class="la-bw" ...
In addition to this page, you can obtain image styling code from the HTML Snippets folder in your original pure-simple-package download.
Flat Responsive includes 19+ widget positions, with most page templates capable of displaying any position. To see a live demo of each widget position, you can check out the demo website for Lavish Pro Theme:
To know the layout postition of the widget please visit the widget layout page of the Lavish Pro theme.
This should be considered as optional, but we will explain and show you why we like to remove our WordPress media settings which are preset when you first install WordPress. If you go to:
Settings >> Media >> Media Settings
...you will see the following media sizes and other settings:
Now we will show you what it does by uploading 17 photos to our Media Library...
As you can see, WordPress will automatically generate thumbnails based on the settings (sizes) whether you want them or not. In fact, our media library went from 17 photos to a whopping 56! Why would you want to remove the settings? Because your hosting package has a certain amount of diskspace given to you, so if you upload a lot of images on a regular basis, that diskspace is going to get filled up fast and you will be billed by your hosting company for additional space requirements. Plus, if you keep regular backups of your site (as you SHOULD be doing), it means your backup files will continuously get bigger and bigger over time.
With the same 17 photos we uploaded, but removing each thumbnail size settings, this is what our media library now looks like:
If you notice in the first screenshot above, the Cropping and Organizing under Uploading Files are checked. We would also recommend unchecking both. For cropping, we prefer to do our own cropping for more control over what parts of the image are to be cropped.
For the Uploading and organization of your photos, we really cannot stand how WP organizes photos and other media. If you have a lot of uploads over a span of a year and you realize you need to find one to edit, good luck! Very hard to find with the 10's if not 100's of sub folders it creates. We prefer to have them go directly into the uploads folder -- all together.
Recommendation is to make each media size setting as 0 (zero) and uncheck both of the checkboxes. When you need an image for something, crop the image yourself, optimize it, size it, and then upload it.
If you would like to have one thumbnail size generated for a particular use and to maintain an easy way of having the same size for every photo you upload, you can change any of the settings to include the thumbnail size you want. So if you want a particular thumbnail size (that gets automatically cropped as well) for your blog featured images, you can decide on the size you want.