Setup Tutorials for Flat Responsive

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

Create a custom gallery with the Widgetkit plugin

You have another option when creating galleries in your web pages and posts by using a custom gallery that is included as a snippet, but you can do the same, also using the Widgetkit plugin. The Widgetkit plugin offers some gallery functions such as Spotlight which is a hover effect over the thumbnail, but it also offers a lightbox window to view your gallery as a slideshow.  This tutorial is a bit involving and will require you to work with some code, but most of the work we have done for you so that all you have to do is copy and paste code, then edit some parts of it. Here are a few things to make note of: This custom gallery will use the same styling (CSS) as the WordPress gallery does You can have up to 9 columns for your gallery This is a little more hands on…    read more 

Make a WordPress Gallery

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. Flat Responsive uses the default gallery styling as a foundation, but with a little enhancement of design to give you a little more for your gallery. Preparing Your Photos 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…    read more 

Setup the Recent Posts Plus widget with thumbnails

By default you get a basic recent posts widget that simply displays text only which usually is the post title that is linked and perhaps the date. The Recent Posts plugin gives you a very flexible widget to display your latest posts with several optional settings that includes enabling or disabling elements, adding thumbnails, control your excerpts, and more. We would recommend you check out the developer’s documentation for this plugin.  Go to Plugins >> Add New Search for “Recent Posts Plus” to install and activate The Demo Site Settings Settings for this plugin can be used as an option which will match those of the live demo site for Circumference. First, you will need to drag a Recent Posts Plus widget into the location you want; in this case, the Right Sidebar. Now you can set your options as follows: Title your widget Choose the number of posts you…    read more 

Hide Page Titles

Many people actually like to hide their page titles for many reasons and apparently is quite common. So what we will do is give you a quick tutorial on how you can do this on a per page basis or globally. Hide Titles Globally Go to Appearance >> Customize >> Basic Settings -> Page Settings Check the box next to Hide Page Titles Click Save and Publish Hide Titles Individually To hide the title from a page or post, you need to have either of these open in your editor because in the lower right column, you should see an option to disable (hide) the title for that particular page or post. The only caveat when hiding a post title is that it hides it only on the full post view (single post). However, most common use would be for pages and not posts. Hide Page Titles Globally Hide Page…    read more 

How to style your widgets with the styles Lavish Pro offers

Lavish Pro offers you several widget styles that you can have when using the optional plugin called Widget CSS Classes. Widget styles you get are: Default Border Solid Dot Dot Line Image Menu To give you an introduction to how the above styles look, you can check out the live demo site here: Widget Styles When planning out your web pages that will include widgets, you will want to take note that some widgets may not look good with a particular style, but with another, simply amazing. This also will be dependent on third party widgets you install into your website as well.  List Based Widgets You also get to use list styles on your widgets; widgets that are list type: list-dash list-checkmark list-square list-circle list-curve-arrow list-solid-arrow list-short-arrow You can find the HTML Snippets folder in your original theme package download where the above styles and other classes can be…    read more 

How to Show Widgets on Selected Pages Only

WordPress does not make this easy when you want to publish a widget to just one (or a few) pages because there is no built-in function for that kind of capability, so you have to use plugins. To show widgets on selected we recommend you to install the Jetpack Widget Visibility. To know how to install the jetpack and its components view our tutorial about it. How To Install JetPack And Its Components After you install the jetpack widget visibility go to the widget panel and select the widget that you want to show on selected pages. You widget panel will look like the side first image. Click on the Visibility tab as pointed no 1 in image.  After you click on it your widget will show like the right hand side widget box of the image. You can hide/show widgets as no 2 options provide you the features. On…    read more 

Widget Positions

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 Flat Responsive: To know the layout postition of the widget please visit the widget layout page of the flat responsive theme. http://demo.styledthemes.com/demos/flat-responsive/widget-layout/

Choose your page widths

Flat Responsive offers you three page widths: Full Width Boxed Medium Boxed Small Here is a screenshot of each size, where as the page gets smaller in width, more of the background is seen. Plus, on the boxed views, your page has an outer glow: 1. Full Width: 2. Box Medium 3. Box Small Make Your Selection Go to Appearance >> Customize >> Basic Settings -> Site Layout. Select your page width Click Save and Publish

How to Display Social Networking icons

In this tutorial we are going to show how social networkings icons work in Flat Responsive. Flat Responsive 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. Enable Your Social Icons Go to Appearance >> Customize >> Social Networking -> Social Networking Links Fill in the full URL for each of the social networks you belong to….    read more 

How to Set up Your Logo

With Flat responsive, you get several logo and title options to choose from: Default Logo – Allows you to use the default logo with your own site title and tagline Your Logo – Allows you to use an image for your logo and title as one Logo with Title and Tagline – Allows you to use your own logo and have it positioned like the default logo layout with your site title and tagline Text Title – No logo, just a site title and tagline option NOTE: Please keep your logo to a reasonable size because there is only so much room to put one in when your site menu is using the Primary Menu location (positioned to the right of the logo container). You get more flexibility if your site title and logo are one image, but for a logo with a text based title and tagline (like the…    read more