Documentation

A complete setup guide and step by step approach for you to install and setup your new theme.

 

This is a complete step wise documentation for sweetblog theme users, we have covered everything in this documentation. We highly recommend reading this documentation completely before installation. Most of the questions are addressed in this documentation, in cause if you have any specific question, problem, noticed bug or any recommendation please feel free to contact us through all the sources provided, we would be more than happy to help you. We respond within 24 hours. 

 

Theme Demo: http://sb-themes.com/demo/sweetblog

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Installation

Theme Installation

The theme can be uploaded in two ways:

 

WordPress upload:

 

1 — Navigate to Appearance > Add New Themes > Upload. Go to browse, and select the sweetblog.zip contained within the wordpress folder inside the file you downloaded. Click on Install Now and the theme will be uploaded and installed.

 

2 — Click on Activate 

 

Do not upload the whole zip file you downloaded. You only need the sweetblog.zip file enclosed in the zip-file.

 

upload theme

 

FTP upload:

 

1 — Using your FTP program, upload the non-zipped “sweetblog” folder into the /wp-content/themes/ folder on your server.

Do not upload the entire folder you downloaded as this includes dummy data, documentation, screenshots and widgets etc.

If you have done this correctly then you should end up with the following structure:

/wp-content/themes/sweetblog

 

2 — Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate the theme.

Demo Data installation

Once you install the theme successfully, the next step is to install the demo data. We have made it easy for you with demo data to understand the theme layout and make a quick website just like theme demo. After demo data installation your website will look exactly like the theme demo.

NOTE: WordPress importer plugin is need for demo data import

Please follow the instructions listed below to install the demo data.

 

1 — Navigate to Tools > Import > WordPress importer

2 — Once you click on WordPress importer a pop up will open

3 — Click on install now button to install WordPress importer

4 — Now click on  Activate Plugin & Run Importer 

 

demo-install

 

5 — The next step is to choose the demo file. Find complete-demo-content.xml file inside dummy folder and click on Upload file and import button

 

Upload dummy

 

6 — Assign posts to an existing user Or create a new user if you want. Make sure to check the Download and import file attachments

 

assing-author

 

7 — Click on Submit . That’s all

 

You can install only posts or pages demo data. To install demo posts or pages separately, just choose the desired file (only-posts.xml or only-pages.xml)  available in the dummy folder.

General Settings

Front Page

1 — Go to pages > Add New and create a page. Apply a template on page,  choose the layout templates from right side drop down list of page templates. See the screenshot below.

 

homepage

 

2 — Go to Settings > Reading and change the default WordPress option “Your latest posts” to “A static page (select below)” . Now choose your home page layout from drop-down list and click on Save button.

 

front-page

Theme Panel

All of our themes comes with a powerful theme panel. So there a lot of things which you can easily customize form theme panel. Each theme panel settings section is briefly explained below.

 

1 — Login to your WordPress Dashboard 

 

2 — Go to Theme Panel form left side menu

theme panel

 

 

 

General

SBE

 

Layout:

Wide:     By default the layout is set to wide, which is 100% of browser/screen.

Boxed:   If you want to change the layout to boxed then the body Max-width will be 1300px  of browser/screen.

 

Logo:  

To change the default logo with your own, just click on upload button , and upload your own logo image. You can copy/paste the URL in the URL tab if your logo image is hosted elsewhere. The recommended dimension for logo image is (300 X 100) .

 

Use only image as logo: 

This checkbox is used to easily switch image logo and text logo, if you decide to use only the text logo, just unchecked the checkbox. Your logo image path will still be saved, so you can switch it again any time.

 

Logo Text: 

It is the text used for logo.

 

Custom Favicon: 

Favicon is your identity in browser tabs. To upload your custom favicon just click on upload button and upload your own favicon.  Recommend size for Favicon is (16X16) with ico extension.

Posts & Pages

SBG

 

Home Page Sticky posts:

Sticky posts are only displayed on home page. You easily Enable/Disable Sticky posts on Home Page, check to enable uncheck to disable.

Important Note: At least one post must be sticky otherwise the loop will display all the posts in sticky posts area.

 

 

How to make a post Sticky?

When you want to make a post stick, just edit the post and under Publish > Visibility: section, click on edit and enable the checkbox Stick this post to the front page. See the screenshot below.

 

sticky post

 

Related Posts:

Related posts are displayed on single post page at the end of post content area and before comments section. Set the checkbox to Checked for enable and unchecked for disable. Enabled by default. 

 

 

Thumbnails

SBI

 

Regenerate Thumbnails: 

Regenerate the thumbnails at least once if you have installed the theme on existence website. Click on the link to regenerate thumbnails and wait until the process completion. Please do not refresh the page during thumbnails regeneration.

Typography

SBJ

Custom Fonts:

You can change fonts settings for various areas by entering the fonts details in the fields under Typography.

 

Enable Google Fonts:

By default the Google fonts is enabled. You can enter the fonts details in the fields to change the fonts.

 

Logo Google Font Link:

If you are using Text log and want to change the logo font just copy paste the font link in the field.

Example: <link href=’http://fonts.googleapis.com/css?family=Pacifico’ rel=’stylesheet’ type=’text/css’>

 

 Logo Google Font Family:

Default logo font family is “font-family: ‘Pacifico’, cursive;”  , you can copy paste new font family for logo in this textfield.

 

Headings Google Font Link: 

You can change the headings font from H1-H6 just copy paste the font link and textarea.

Example: <link href=’http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800′ rel=’stylesheet’ type=’text/css’>

 

Headings Google Font Family:

Default Heading font family  is “font-family: ‘Open Sans’, sans-serif;” , if you want to change just copy paste your Google Font Family following the example.

 

Body Google Font Link:

You can copy paste new font link for body in this textarea.

Example: <link href=’http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800′ rel=’stylesheet’ type=’text/css’> 

 

Body Google Font Family:

Default body font family is “font-family: ‘Open Sans’, sans-serif;” , you can copy paste new font family for body in this text field.

Color Settings

color settings

 

It is the most powerful feature which allows you to customize the entire look of your website with just a few clicks.  You can either use color picker to change the color or you can copy paste any color hexadecimal values to change any color. Once you change any color click on Save Options buttons to save your changes.

 

Primary color Scheme: 

Default primary color is #5b4141 . You can either use color picker to change the color or you can copy paste any color hexadecimal values to change any color. Primary color is the main color used in the theme main sections like header container, widget title background, footer container, 404 notice, search widget background etc.

primary color

 

Secondary color: 

Default secondary color is #fb9351. You can either use color picker to change the color or you can copy paste any color hexadecimal values to change any color. Secondary color is used in the secondary areas of the theme like top bar, buttons, footer links, tags cloud and footer copyrights section etc.

secondary color

Logo Text Color:

Default logo text color is #FFFFFF (white). You can change it according to your color scheme you choose in primary and secondary colors to match the logo text color with your color scheme.

 

Body Text Color:

Default body text color is #a8a836. You can change it according to your color scheme you choose in primary and secondary colors to match the body text color with your color scheme.

 

Body Regular Links Color:

Default body regular links or a { color is #8C8C7B . You can change it according to your color scheme you choose in primary and secondary colors to match the body regular links color with your color scheme.

 

 

Body Regular Links Color Hover:

Default body regular links hover Or a:hover { color is #000000. You can change it according to your color scheme you choose in primary and secondary colors to match the body regular links hover color with your color scheme.

 

Main Headings Color (H2,H3…):

Default Main headings color H2,H3,H4,H5 and H6  is #2A2A26.  You can change it according to your color scheme you choose in primary and secondary colors to match the headings color with your color scheme.

 

Sidebar Headings Color OR sidebar widgets title color: 

Default sidebar headings color is #FFFFFF (white). You can set a different color for sidebar headings than the above main headings color.

 

Post Title Link Color: 

Default post title link Or the_titile color is #8C8C7B. You can set a different color for post title links and you can change it according to your color scheme.

 

Post Title Link Color Hover:

Default post title link  hover color is #000000 (black).   You can set a different color for post title links hover and you can change it according to your color scheme.

 

Navigation Link Color:

Default navigation links color is #8C8C7B .  Use color picker to change it according to your color scheme you choose in primary and secondary colors to match the navigation links color with your color scheme.

 

Navigation Link Color Hover:

Default navigation links hover color is #000000.  Use color picker to change it according to your color scheme you choose in primary and secondary colors to match the navigation links hover color with your color scheme.

 

Contact

SBC

 

Contact E-Mail:

Enter your contact email address in the text field. It is the email address used in default contact form on Contact page template. The messages send from contact page will be forwarded to the email address provided here.

 

Contact Map: 

Copy and paste your map embed code in the textarea to display a map on contact page. You can get your map embed code from Google maps  .

Social

SBH

 

Social Profile Links: 

Copy and paste your social profile URL’s in the URL’s fields . Leave the URL fields blank if you do not want to display the icon of any social network in the top bar. Click on Save Options button.

Only for twitter: Do not paste complete profile URL, just enter your twitter username.

Meta

SBF

 

Meta settings are only used for SEO (Search engine optimization) purpose. By default the checkbox is unchecked. Do not enable the meta if you are using any SEO plugin. If you are not using any other SEO plugin enable the meta settings to make your website SEO optimized.

Meta Description:

Write a brief but short description about your website to tell the search engines what your website is about.

A meta description is an HTML and XHTML element that describes your website to search engines. The meta description plays a significant role in SEO rankings.

 

Meta Keywords:

Write the maximum 10 keywords. Your keywords are the key words and phrases in your web content that make it possible for people to find your site via search engines. A website that is well optimized for search engines “speaks the same language” as its potential visitor base with keywords for SEO that help connect searchers to your site.

Advance Settings

SBA

Disable Comments on Pages:

You can disable comments on all pages with one click! it the checkbox is checked the comments section will not be displayed on pages. You can disable comments on specific pages from page editor.

 

Disable Sticky Menu:

Enable/Disable sticky menu with one click! If sticky menu is enabled the main menu will appear static on front end on scrolling. By default the sticky menu is enabled.

 

Custom CSS:

Paste your custom CSS code in this section without <style></style> tags. The custom CSS will load before main CSS file. Do not edit the main CSS.

 

Stat Code:

You can use google analytics or other stats code in this area it will appear in the source.

Widgets

Sb Framework Comes with three beautiful widgets Sb themes Author WidgetSb themes Recent Comments and Sb themes Recent Posts. 

Sb themes Author Widget

Controls

author widget

Provide Full URL’s of your social profiles. Example: https://www.facebook.com/my-profile


 

Author Widget:

 

author-profile

Sb themes Recent Posts

Controls:

recent posts

 


 

Recent Posts Widget: 

recent-posts

Sb themes Recent Comments

Controls:

sb recent comments

Avatar size is the profile image size. Recommend is 40. Do not write px just enter the value.

 


Recent Comments:

recent comments

FAQ

How to make a post Sticky?

When you want to make a post stick, just edit the post and under Publish > Visibility: section, click on edit and enable the checkbox Stick this post to the front page. See the screenshot below.

 

sticky post

 

How to add remove header banner? 

The header banner is controlled through widgets area. To add header banner just drag and drop a text widget into Header Banner sidebar, and past your code inside text widget.  You can also copy the widget banner code from dummy folder.

header banner

 

Where is the demo data file? 

Find complete-demo-content.xml file inside dummy folder. You can install only posts or pages demo data. To install demo posts or pages separately, just choose the desired file (only-posts.xml or only-pages.xml)  available in the dummy folder.

We will add more FAQ’s based on customers questions soon. 

If you have any question, please feel free to contact us anytime. We respond within 24 hours.