INTRODUCTIONTheme Customization
Theme uses native WordPress Customizer for General theme options. In order to access WordPress Customizer please select ‘Appearance > Customize’ in wp-admin console.
On the left side of the screen you will see the menu with various options and on the right side you will see website preview. Any settings you change in the Customizer will affect entire website, which means all posts and pages, so we are referring to them as global customization settings.
Each change you make will automatically update website preview (page will be refreshed). When you are satisfied with the result click ‘Save & Publish’ and do not forget to make final preview outside customization frame and logged out of WordPress to see how the site would look like to your visitors.
The important feature of NewStar is that any global setting can be overridden on any single post or page using setting keys which you will find in preformatted text below setting names on the following sections.
Preformatted text present possible values of setting keys. You will learn more about this overriding soon. Now, let’s explore customization settings.
SECTION 01General Settings - WordPress Customizer
On General settings panel you will find the following options:
Logo
Attachment ID or URL
Here you should select main website logo. It is displayed on pages next to the menu, on preloader screen and on sticky header.
Alternate Sticky Header Logo
Attachment ID or URL
Here you should select website alternative logo.
This is usually light version of logo (which is supposed to be used on dark backgrounds). The logic is this:
- If you do not have Alternative logo defined, main logo will be used in all cases
- If you have Alternative logo defined, it will be used on top of the page when Content Below Menu and Sticky Header options are activated. This set up will also change the color of menu and widgets to light.
Primary Accent Color
Hexadecimal color code or color picker
Accent color is used as a color for links, icons, etc. If you define it, the accent color will influence the general color scheme of the site.
Secondary Accent Color
Hexadecimal color code or color picker
Another color which influences general color scheme of the site is alternate color. Alternate color can be assigned as a color for buttons, icons, etc. If you define it, all elements with assigned alternate color will be affected.
Page Background
Attachment ID or URL
Page background image is a static image which serves as a site background if defined.
Deafult Headline Supertitle Outside of H Tag
True / False
Select if supertitle in default headline will be in H tag or not.
Template skin
Dark / Light
This is another option which influences general color scheme of the site. NewStar features two general skin styles – light and dark. The light skin has white colored background and dark colored main font and other ui elements. On the other hand, dark skin has dark colored background and light colored fonts.
Sidebar
No Sidebar / Left / Right
This option enables you to define if the sidebar will be visible globally or not.
By customizing this option, user can globally enable (place it on the right or left side) or disable sidebar. Sidebar content can be edited under Appearance > Widgets (from main WordPress menu).
You can choose one of three predefined sidebar layouts:
- No Sidebar – No sidebar is displayed
- Left – Sidebar is displayed on the left side of main content
- Right – Sidebar is displayed on the right side of main content.
Page Width
Default / Boxed
This option enables you to define if the page width will be full width (default) or boxed.
Use Dash in Template Headlines
True / False
This option enables you to define if separator will be used below the widget titles or not. By changing this option, users can globally enable or disable the separator in widgets. Please check this option if you want to use separator in widgets.
Disable Preloader
True / False
This option enables you to define if the preloading animation will be displayed globally throughout the site or not. By changing this option, users can globally enable or disable the preloader animation.
Preloader Text
Any text
This option enables you to define the text on preloading screen. The preloader needs to be enabled in order to see the effect of this option.
Full Height Banner Left
HTML code for image and link
Full Height Banner Right
HTML code for image and link
NewStar theme includes option for adding banners on the right and left side of the page. In order to add required images, in this field should be entered defined html div which contains image and link.
Custom JS
Custom JS code
This option enables you to define global Custom JS code. Enter any JS code you want here and it will be embedded in the <head> element of all pages throughout the site.
This is where you should paste your custom site wise JavaScript, such as Google Analytics script.
Reset Theme Settings
This is not really a setting, so no override. Reset button will just reset all global settings to default values.
SECTION 02Site Identity
Under “Site Identity” panel in Customizer, you can set Site Title, Tagline and Site Icon. When working with site icon, please pay attention to recommended Icon size.
You’ll see the changes in the preview panel to the right. When you’re done, click Save and Publish.
SECTION 03Header and Footer
On Header and Footer settings panel you will find the following options:
Logo Height (in px)
In pixels
Adding the required px number logo will decrease/increase.
Menu Type
Horizontal Left / Horizontal Centered / Horizontal Right / Horizontal Left Below Logo / Horizontal Right Below logo / Horizontal Center Below Logo / Vertical Left / Vertical Right
NewStar theme features numerous header layouts giving you a great degree of freedom when it comes to customization of your site. The menu type options include:
1. Horizontal Left menu:
2. Horizontal Centered menu:
3. Horizontal Right menu:
4. Horizontal Left Below Logo:
5. Horizontal Right Below Logo:
6. Horizontal Center Below Logo
7. Vertical Left:
8. Vertical Right:
Header Style
Transparent Light / Transparent Dark / Accent + Dark / Accent + Light / Light + Accent / Light + Dark
1. Transparent Light:
2. Transparent Dark:
3. Accent + Dark:
4. Accent + Light:
5. Light + Accent:
6. Light + Dark:
Boxed Menu
True / False
Boxed menu means that the header content (including menu) will be fitted into the page wrap of 1336px.
If the menu is boxed it will be fitted into this width. If it is not boxed, that means that it will be streached across entire viewport.
Show Content Below Menu
True / False
This setting provides another header layout option. If the content flows below menu, the menu will be over the top section of the page.
If this option is set to false, the menu will be above the top section.
Check if you want to show content below menu.
Use Sticky Header
True / False
Sticky header will stay at the top even when you scroll down the page. Make sure to check this option if you want the sticky menu active.
Hide Menu on Load
True / False
NewStar theme allows you to hide (collapse) the menu. This means that the menu is going to be initially collapsed. The user can always expand it by clicking on the menu icon.
Use Dark Skin in Footer
True / False
This option allows you to define the overall color scheme of the footer area.
Available options are:
1. Light – this will set the main footer color scheme to light:
2. Dark – this will set the main footer color scheme to dark:
Default page headline
Hide / Show / Show fullscreen
This option allows you to define whether the pages will display default headline or not.
Available options are:
1. Hide
Here’s an example of post without default headline on this link.
2. Show
Here’s an example of post with standard default headline on this link.
3. Show Fullscreen
Here’s an example of post with full screen default headline on this link.
Header Ticker Page Slug
Page slug
NewStar has a unique way of enabling you to create custom ticker pages. You can create a static page, add content to it and set desired global settings’ overrides. Then you can use it as a template for ticker.
The field Header Ticker page slug should contain the slug of your page which serves as a template. Once you add the slug to this field, ticker will display on top of all pages with the settings and shortcodes of the referenced page.
Page Headline Size
Default / Extra Large / Huge / Extra Huge
Here you can set the size of the title for default page headline.
Page Headline Alignment
Center / Left / Right
Here you can set title to align differently, to the left, right, or in the center of default headline.
- Center:
2. Left:
3. Right:
Custom Footer Text
Any text
Any text entered here will be shown in footer, e.g. copyright notice – Magazine, 2018 © All Rights Reserved
Footer Page
NewStar has a unique way of enabling you to create custom footer pages. You can create a static page, add content to it and set desired global settings overrides. Then you can use it as a template for all pages.
Select your footer page from the dropdown, and footer on all pages will inherit settings and shortcodes of the referenced page.
SECTION 04Typography
On Typography settings panel you will find the following options:
Body Font
No Change / Any Google font
Body text font. Using this setting you can set the main font family that’ll be applied throughout the website. NewStar uses Google webfonts.
Post Article Font
No Change / Any Google font
Article text font. Using this setting you can set the main font family that’ll be applied to articles. NewStar uses Google webfonts.
Heading Font
No Change / Any Google font
Heading text font. Using this setting you can set the font family for Main Headings.
Heading Supertitle Font
No Change / Any Google font
Heading Supertitle text font. Using this setting you can set the font family for supertitles in Main Headings.
Heading Subtitle Font
No Change / Any Google font
Heading Subtitle text font. Using this setting you can set the font family for subtitles in Main Headings.
Menu Font
No Change / Any Google font
Using this setting you can set the font family for menus.
Button Shape
Hard Rounded / Soft Rounded / Square
1. Hard Rounded:
2. Soft Rounded:
3. Square:
Heading Weight
Bolder / Bold / Normal / Lighter / Light
Using this setting you can set the font weight for heading element.
SECTION 05Blog
On Blog settings panel you will find the following options:
Archive Layout
Standard / Columns / Grid / Simple
NewStar offers four layouts for blog archive pages – standard, columns, grid, and simple. Please take a look at the following examples of these layouts:
This setting lets you choose default layout for all Blog archive pages.
Date Format
Default / Time ago
This setting allows you to set the date format of the single posts (chosen date format in Settings > General panel – m/d/Y, d/m/Y etc. or time ago e.g. 13 minute ago).
Show Author Name
True / False
This option enables you to set whether to display author name under post title or not.
Show Post Date
True / False
This option enables you to set whether to display post date under post title or not.
Show Author Avatar in List
True / False
Share on Facebook
True / False
Share on Twitter
True / False
Share on LinkedIn
True / False
Share on VK
True / False
Sharing options for single posts. If checked, the share icons will be present in posts.
Use Dash in Headlines
True / False
NewStar offers two types of headlines on blog archive pages and individual post pages.
Check to use dash separator in headlines.
Single Post Settings – Page Slug
Page slug
NewStar has a unique way of enabling you to create custom templates for single post pages. You can create a static page, add content to it and set desired global settings overrides. Then you can use it as a template for single post pages.
The field Page slug should contain the slug of your page which serves as a template for blog posts. Once you add the slug to this field, all blog posts will inherit settings and shortcodes of the referenced page.
So, in order to change template elements on blog posts, please locate the page with the slug entered in Page Slug field and edit it.
Single Post Layout
Standard / Columns
NewStar offers two layouts for single blog post pages – standard and columns. Standard layout features post content in one column while columns layout introduces two columns – one for featured image / grid gallery / video, and one for the content itself.
Here is the example of standard layout:
Here is the example of columns layout:
Grid Gallery Columns
2 / 3 / 4 / 5 / 6
Here you can define the number of columns for grid gallery on single posts. On this example, three columns were set.
You can set the post grid gallery format by choosing Gallery as Post format, add the images to the post in the settings panel and check the Grid Gallery setting.
Grid Gallery Gap
No gap / Small / Normal / Large
You can define gap between grid gallery items in pixels using this setting. In the example above the gap is 10px. If you choose 0, the images will be “glued” to each other without any gap in between.
Average Reading Speed (Words per Minute)
Any number
This setting allows you to add reading speed to single posts.
Show Post Rating In Single Post
True / False
Show Post Reading Time In Single Post
True / False
Show Post View Count In Single Post
True / False
Show Post Comments Number In Single Post
True / False
Show Poster In Single Post
True / False
Show Related Posts In Single Post
True / False
Show Post Excerpt In Single Post
True / False
Show Author Info In Single Post
True / False
Display options for single posts.
Enlarge First Letter In Posts
No / Yes (3m)
If this field is enabled, the first letter of article will be enlarged.
SECTION 06Shop
These settings are used with WooCommerce plugin.
Share on Facebook
True / False
Share on Twitter
True / False
Share on LinkedIn
True / False
Share on VK
True / False
Sharing options for single products. If checked, the share icons will be present in products.
Use Dash in Headlines
True / False
NewStar offers two types of headlines on blog archive pages and individual post pages. Header with the dash and header without it.
Check to use dash separator in headlines.
Settings Page Slug
Page slug
NewStar has a unique way of enabling you to create custom templates for individual product pages. You can create a static page, add content to it and set desired global settings overrides. Then you can use it as a template for individual product pages.
The field Setting page slug should contain the slug of your page which serves as a template for WooCommerce products. Once you add the slug to this field, all shop items will inherit settings and shortcodes of the referenced page.
So, in order to change template elements on individual product pages, please locate the page with the slug entered in Settings Page Slug field and edit it.
SECTION 07Mega Menu
In order to create mega menu, as the ones from our demo, please follow the steps listed below.
1. Mega menu is created as a static page. First thing you need to do is create a page, using Bold Builder.
2. After you have the page, go to Appearance >Menus, and in Screen Options enable CSS Classes field.
3. Then, to the page that you want the menu to go to, add the following two classes.
btMenuWideDropdown show-page-slug
The word ‘slug’ should be replaced with a slug of the page that you previously created, and will use as mega menu.
SECTION 08Translation
In order to translate the theme, please follow the next steps.
Theme’s .pot file is located in /wp-content/themes/newstar/languages folder.
Please use PoEdit – https://poedit.net/ to translate the .pot file and create respective .po and .mo files.
Please name .po and .mo files e.g. nl_NL.po and nl_NL.mo (nl_NL is the language code for dutch). For other languages’ codes, please refer to the following link: Internationalization.
In order to place .po and .mo files properly and not have them deleted when you update the theme, upload them to \wp-content\languages\themes folder. If you don’t have languages folder in your wp-content directory, please proceed and create one. Then create themes folder, and paste the files in it.
Also make sure to translate the theme’s plugin, located in \wp-content\plugins\newstar\languages folder.
The steps are the same as for the theme, except the files should be named bt_plugin-nl_NL.po and bt_plugin-nl_NL.mo (with appropriate language code).
For plugin’s .po and .mo files, you should place them in \wp-content\languages\plugins folder.
You can set the site language of your WordPress installation on Settings > General. WordPress will automatically use the right language files if they exist.
SECTION 09Child Theme
If you want to use NewStar Child Theme, please follow these steps:
- First of all, make sure that parent theme folder is named: newstar. Otherwise rename the folder.
- You should be able to find the folder newstar-child in the package you have downloaded from ThemeForest.
- Please copy this folder to /wp-content/themes folder on your server.
- Go to Appearance > Themes in your wp-admin console and activate child theme. Please have in mind that all required plugins need to be activated.
For more info, refer to the article Child Theme.
SECTION 10One Page Site
In order to create one page site, please follow the instructions below:
The best way to start is to install demo content. If you want to install one page demo please refer to the article: Installing Demo Content. You will be able to see how all elements on the single page are set.
1. First of all, navigate to the Bold Page Builder and edit desired section. Insert in required Custom Tab Element ID attribute:
2. Then in Appearance > Menus add a new Custom Link and as a URL insert custom ID atribute with #.
For example: #about
SECTION 11Update Theme
In order to update the theme, please follow the instructions below:
First thing is to download newest theme version from ThemeForest Download section. Since you already have the theme installed, you can download just ‘Installable WordPress file only’.
The best way to update theme is through FTP. We suggest that you use Filezilla to access your server. Here is the article that explains how Filezilla works.
You need to extract theme file from the zipped folder you downloaded, and upload it to /wp-content/themes folder on your server. You will be prompted to overwrite the existing files. Select ‘Yes’, and the theme will update.
*The example is the zip file from Medicare theme but the process is the same for all themes.
If you made any changes in the source code you’ll need to reapply them to the new version of the theme or they will be lost.
Keep your eyes on potential required plugin update messages at wp-admin dashboard once you replace the files. You should update all required plugins if the updated theme suggests so.
All settings in Customize panel and your content will be preserved.
Note: Once new theme version is online, user who purchased the theme, should get email note from the Envato (ThemeForest).
