Contents

1. How to install Bold Timeline plugin?

2. Installing Demo Data

3. How to import premade templates

4. How to increase size of the logo?

5. How to increase the size of the logo?

6. How to edit Footer area on the theme?

7. How to make a page load with accordion items closed by default

8. How to make a page load with accordion items closed by default

9. How to increase the size of the logo?

10. How to remove the 'Next' button?

11. How to leave a review?

12. Where is my Purchase Code?

13. How to add custom icons using child theme?

14. How to create One page?

15. How to add custom Font to your theme

16. How to edit 404 page?

17. How to hide hover image effect?

18. How to add Custom Font to your theme

19. How to add new Font icons?

20. Is there some way I can see all the icons of Craft Portfolio theme?

21. Installing Demo Content

22. Is there some way I can see all the icons of Celebration theme?

23. Installing Plugins

24. How to make a page load with accordion items closed by default

25. How to edit widgets?

26. How to edit Booking Form?

27. Header title is displaying site name

28. How to update installed theme? Will it change data?

29. How to change the header and edit other Single Post settings?

30. How to increase the size of the logo?

31. How to add custom icon font to the theme

32. Is there some way I can see all the icons of Organic Food theme?

33. Contact form visible by default

34. I want to add custom CSS statements to style my calculator. Where should I add them?

35. How to set initial value for Text item?

36. How to set initial value for Switch item to True?

37. How to translate plugin?

38. How to choose Home page version?

39. How to set the initial value for Select item?

40. How to prevent selection of weekends in date picker?

41. SVG Image format

42. How to have a Split Screen page

43. How to install Hero Posts plugin

44. How to place more than one marker on the map?

45. How to update a plugin?

46. How to install Cost Calculator plugin?

47. How to change the Excerpt text and Header background image?

48. How to ask for a refund?

49. How to edit clients email?

50. Cost Calculator purchase code

51. How to create One page?

52. How to add additional fields to contact form part of Cost Calculator?

53. Missing style sheet error when installing the theme

54. Is there some way I can see all the icons of Finance theme?

55. Importing Demo

56. I can’t upload plugin. It’s saying it is invalid. What went wrong?

57. How to redirect users to another page after the "Next" button?

58. Installing Demo Content

59. How to change the e-mail address from Wordpress?

60. How to change the settings only on one page?

61. Is there some way I can see all the icons of the theme?

62. How to increase the size of the logo?

63. Installing Demo Content

64. Theme update - Ad Astra to Ajani

65. Frontend Editor

66. How to translate theme?

67. How to make a page load with accordion items closed by default

68. How to change H tag in page headline?

69. How to enter Purchase Code?

70. How to set initial value for Slider item?

71. How to add custom Icon Font to Bold Timeline

72. How to change the header and edit other Single Shop Product page settings?

73. Is there some way I can see all the icons of Hotel California theme?

74. Is there some way I can see all the icons of the theme?

75. How to add new icon?

76. I can’t upload plugin. It’s saying it is invalid. What went wrong?

77. I want to change the position of section's background image on mobile resolutions so users do not see the center part of the image. How can I do that?

78. How to change logo?

79. How to change the header and edit other Single Post settings?

80. How to increase the size of the logo?

81. How do I remove the bar with Total and leave contact form?

82. How to increase the size of the logo?

83. Installing OpenGraphiq plugin

84. Is there some way I can see all the icons of Estato theme?

85. How to make a page load with accordion items closed by default

86. How to enter Purchase Code?

87. I am getting "The Link You Followed Has Expired” Error in WordPress when trying to upload the plugin.

88. Sticky Header scroll

89. How to edit Footer area on Kids Club theme?

90. How to change H tag in page headline?

91. Importing Demo

92. How to change the settings only on one page?

93. New YIHT 2.2.0 version broke my site - Problem is solved!

94. How to change H tag in page headline?

95. How to change the Excerpt text?

96. I want to use a child theme. How can I do that?

97. Google Map API Key

98. Installing Demo Content

99. Missing Google API key - Google Map

100. How to edit Footer area?

101. How to disable Overlay Grid Lines?

102. How to translate plugin?

103. How to edit Footer area?

104. How to increase the size of the logo?

105. How to make a page load with accordion items closed by default

106. Is there some way I can see all the icons of the theme?

107. How to make a page load with accordion items closed by default

108. How to change the header and edit other Single pages of Portfolio items settings?

109. Issues with Grid layout

110. How to add custom icons?

111. How to edit Footer area?

112. Is there some way I can see all the icons of Shopscape theme?

113. I have purchased your theme. Now what?

114. How to make a page load with accordion items closed by default

115. How to create One page

116. Embed code I have placed using text element is being cut off. It does not have the proper height. How can I resolve this?

117. Will I loose content when updating the plugin?

118. How to create mega menu?

119. "404 Page not found" error on inner pages

120. Is there some way I can see all the icons of Medicare theme?

121. My articles are not visible on homepage

122. How to make a page load with accordion items closed by default

123. Installing Demo Content

124. How to edit Footer area?

125. Cost Calculator & Bold Timeline - purchase code

126. How to set Event week view?

127. How to add custom icon font

128. How to update a plugin?

129. RTL Support

130. How can I change total format’s display?

131. How to install Hero Products plugin

132. Can I redirect users to another page after submitting message?

133. AI Feature

134. How do I get 1.000 format for the total value?

135. How to add new Font icons?

1. How to install Bold Timeline plugin?

There are two methods of installing a plugin onto your WordPress site. You can use the WordPress Admin panel to upload and install the plugin, or you can use FTP software instead.

WordPress Plugin Installation

To install the plugin directly from the WordPress admin panel, please first log-in to your wp-admin console.

  1. Navigate to Plugins > Add New,
  2. Click Upload Plugin,
  3. Click Choose File.
  4. If you want to upload in admin panel, you need to extract plugin folder (bold-timeline folder), from downloaded bold-timeline.zip file and pack it again as zip and then upload that zip.
  5. Click Install Now and the installation will begin.
  6. Once the installation is complete, go to Plugins screen and look for the newly uploaded Bold Timeline in the list.
  7. Click Activate to activate it.

http://documentation.bold-themes.com/bold-timeline/wp-content/uploads/sites/53/2019/11/activate-plugin-1.jpg


FTP Installation

To install the plugin using FTP software, log in to the server where your WordPress website is hosted.
First extract bold-timeline folder from downloaded bold-timeline.zip file.

Now connect to your server via FTP and navigate to the wp-content/plugins folder in your WordPress directory online. Upload bold-timeline folder to the plugins’ folder on your remote server.

Once the plugin is uploaded, you need to activate it. Go to ‘Plugins > Installed Plugins’, find Bold Timeline and click ‘Activate’ button.

2. Installing Demo Data

Before importing our demo content, please make sure that you have installed and activated all our required plugins (and WooCommerce if you intend to use it).

The best practice is to start with fresh WordPress installation without previous content. If you have already added a new content, please make sure to do the backup in order to save that content. After the backup, delete all content and you can start with the next steps:  

The procedure is as follows:

  1. Login to the wp-admin panel
  2. Go to Tools > BT Import


3.  The first step of import process is to, once again, check your server settings. On this screen you will see if you have enough memory and script timeout, and if your PHP version is up to date.

Additionally, you will get a notification if you have previously installed our demo content.

Once you adjust all the settings, click ‘Start the import process’ button.


4.  On the next panel you will see available demos. The number of homepages for each demo is noted, and you can click on the button ‘Visit demo’, and see how each demo looks like.


Click on the demo you want to install, and then click on ‘Continue and import this demo’ button at the bottom of the screen.


5.  The following step is to select images’ download method.

Here is how each option works:

  1. First option, ‘Download images to your server and create all thumbnails‘, is the best option and the one we recommend.

However, for this option all server requirements need to be met. Additionally, make sure that curl library is available and enabled.

     2. Second option, ‘Download images to your server but do not create thumbnails‘, will still download images  to your server, but will not create necessary thumbnails (to speed up the import process).

If you are going to use this method, install and activate ‘Regenerate Thumbnails’ plugin, and once the demo import is finished, regenerate thumbnails for all images.

     3. Last option, ‘Use images hosted on our servers‘, will import demo the fastest, but the images will remain      on our server.

What this means is that you need to keep BT WordPress Importer plugin active until you replace our images with yours. If you deactivate the plugin, the images will not be visible.

Once you finish with demo import and setting the homepage, you will be able to download the images from our server (refer to the additional step below).


Once you select images’ import method, click on the ‘Start the import’ button.

Depending on your server environment, and previously selected import method, the demo import process might take some time. Please be patient and don’t exit the import panel, otherwise you will stop the import.

When the import is finished, you will see the following screen. Click on ‘Select homepage’ button.


6.   The last step is to select the homepage. Please note that some demos have multiple homepages, and some only one.

If demo has multiple homepages, you can click on ‘Visit homepage’ button and see how each individual page looks like. Once you select desired homepage, click on it, and then on ‘Set this homepage’ button.


Once the homepage is selected, its settings (accent colors, fonts, footer, etc.) will be set in Customize panel and applied to inner pages.

Additional step:

If you selected ‘Use images hosted on our servers‘ option, you will now see ‘Download external files‘ tab on your screen.

When you click on it, you will see how many images are left on our server, and you’ll be able to download them to your server.

Note that you don’t have to download all of them at once. You can start the process, download first few images, and then stop. When you go to download tab again, you can start the process again, and it will download only images that are left on our server.


If you installed WooCommerce plugin, go to WooCommerce >Settings panel and set its pages (Shop, Cart, etc.)

If you are getting 404 error on inner pages, go to Settings >Permalinks panel and click ‘Save changes’ button to flush the permalink structure.

That’s it, the demo is imported! :) 



Please note that screenshot examples are from our 'Avantage' theme, but the steps are the same for all of them.

3. How to import premade templates

1. Go to ‘Tools > Import > WordPress’ and install WordPress Importer plugin if it is not already
installed.


https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/img2.jpg


2.  When it is installed, choose xml file from demo folder from plugin package and click ‘Upload file and import’.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/img3.jpg


3. On the following screen make sure that ‘Download and import file attachments’ is checked. Click ‘Submit’ button and wait until import is finished.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/img4.jpg


4. Once demo import is done, you should see imported templates in OpenGraphiq panel.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/img5.png

4. How to increase size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

.btLogoArea .logo img {
    height: 100px
}
.btMenuHorizontal .topBarInLogoArea {
    margin-top: 25px;
}

Please adjust the numbers according to your needs. The first number (100px) represents the height of the logo and the second (25px) represents the top margin between the logo and viewport's top

5. How to increase the size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

img.btMainLogo {
    height: 50px;
}
.menuHolder .menuPort {
    margin-top: 15px;
}

Please adjust the numbers according to your needs. The first number (50px) represents the height of the logo and the second (15px) represents the top margin between the header widget elements and content.

6. How to edit Footer area on the theme?

On Appearance > Customize > Header and Footer panel there is a Footer Page Slug. 


This field should contain the slug of the page which serves as a template for footer area.  All pages inherit settings, elements and shortcodes of the page referenced via this field.

In order to change elements in footer, please locate the page (on all pages list) with the slug entered in Footer Page Slug field and edit it.




For more info and detailed instructions please refer to our Online Theme Documentation.



7. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapse by default, please edit hotelcalifornia/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

8. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapse by default, please edit showcase/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

9. How to increase the size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

.btLogoArea .logo img {
 height: 56px;
}

Please adjust the numbers according to your needs.

10. How to remove the 'Next' button?

From Cost Calculator Version 1.2.1, 'Next' button can be removed in Cost Calculator settings.

In order to hide ‘Next’ button, deselect the ‘Enable Contact Form’ field.




11. How to leave a review?

If you are satisfied with our support or you like our product, please consider supporting us by giving us a rating at the downloads section of your ThemeForest profile (just below the download button) - http://themeforest.net/downloads

When leaving a review, we encourage you to:

You can find more information on reviews in official Envato article.

Thanks a lot in advance! :)

12. Where is my Purchase Code?

If you are having some troubles finding your Purchase Code, please have a look at the following article: Envato Market Help - Where Is My Purchase Code?

13. How to add custom icons using child theme?

Please refer to the instruction below on how to add custom icons to your site using child theme:

1. Create and activate child theme on your site. 

You can find detailed instructions on how to create and activate child theme in the theme documentation.

2. Create icon folder (e.g. MyIcon) with required items:

Make sure that your icon folder contains .ttf and .woff files, as well as CSS file with icons' names and glyph codes. If it doesn't have these files, you could use IcoMoon to generate the files.

3. Create PHP file for your icons:

The PHP file should be named as the icons (for example, MyIcon). As an example of how the PHP file should look, you can use one of the existing fonts and copy their files' content, and replace it with your glyph codes.

Or, you can use the following example, and just replace the glyph codes (numbers: f100, f101, f102 etc.) with the ones from your icon set. 

<?php
$set = strtolower( basename(__FILE__, '.php') );
$$set = array(     'icon-01 (myicon set)' => $set . '_f100',     'icon-02 (myicon set)' => $set . '_f101',     'icon-03 (myicon set)' => $set . '_f102',     'icon-04 (myicon set)' => $set . '_f103',     'icon-05 (myicon set)' => $set . '_f104'
);

The glyph codes are defined in style.css file (located in downloaded file from e.g. IcoMoon). Here is the example:

.icon-01:before {  content: "\f100";
}
.icon-02:before {  content: "\f101";
}
.icon-03:before {  content: "\f102";
}
.icon-04:before {  content: "\f103";
}
.icon-05:before {  content: "\f104";
}

4. Upload icon folder:

Once you have the files, please go to \wp-content\themes\your-child-theme-name\fonts folder (if there is none, create fonts folder in your child theme), on your server, and create a new folder, in the fonts folder. Name it as you named your icons (MyIcon). The new fonts folder should contain .ttf and .woff files, and php file.

5. Copy and edit theme files - Step 01:

Copy admin-style.php file, from your main theme's root folder to your child theme's root folder \wp-content\themes\your-child-theme-name, remove the following line of code, which is located at the end:

', array() );

and replace it with the following code.

@font-face{font-family:"MyIcon"; src:url("' . get_stylesheet_directory_uri() . '/fonts/MyIcon/MyIcon.woff' . '") format("woff") , url("' . get_stylesheet_directory_uri() . '/fonts/MyIcon/MyIcon.ttf' . '") format("truetype");}
*[data-ico-myicon]:before { font-family: MyIcon; content:attr(data-ico-myicon); }
.bt_bb_icon_preview.bt_bb_icon_preview_myicon { font-family: MyIcon;  }', array() );

Replace every occurrence of 'MyIcon' / 'myicon' with the name of your icons (if you didn't name them MyIcon).

5. Copy and edit theme files - Step 02:

Copy icons.php file, from your main theme's root folder to your child theme's root folder \wp-content\themes\your-theme-name folder, remove the following line of code, which is located at the end:

', array() );

and replace it with the following code.

@font-face {font-family: "MyIcon"; src:url("' . get_stylesheet_directory_uri() . '/fonts/MyIcon/MyIcon.woff' . '") format("woff") , url("' . get_stylesheet_directory_uri() . '/fonts/MyIcon/MyIcon.ttf' . '") format("truetype"); }
*[data-ico-myicon]:before { font-family: MyIcon; content: attr(data-ico-myicon); }', array() );

Replace every occurrence of 'MyIcon' / 'myicon' with the name of your icons (if you didn't name them MyIcon).

14. How to create One page?

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.

Please have a look at the following steps, in order to set up one pager:

1. Insert Custom ID Attribute for the desired section element. 

2. Then in Appearance > Menus add a new custom link and as a URL insert custom ID attribute with #.


For more info and detailed instructions please refer to our Online Theme Documentation.


15. How to add custom Font to your theme

In order to add custom font to your theme, you need to upload your custom font to the custom-fonts folder on your web server.

Go to \wp-content\themes\your_theme_name\ on your web server and create folder custom-fonts if it does not already exist.

Then create the folder named after your font and upload font ttf and/or woff and/or woff2 files to the folder.

Example - your folder structure should be like this for Great Sejagad font :

|- your_theme_folder
       |- custom-fonts
              |- Great Sejagad
                        |- GreatSejagad.ttf
                        |- GreatSejagad.woff2

Once you do this, The font will be visible in all select boxes throughout wp-admin just as default Google Fonts and you will be able to select it just as any other

16. How to edit 404 page?

The 404 error page can be customized by editing 404.php file in /wp-content/themes/your-theme/ folder.

There you can edit text, button (on some themes), or images.

In order to replace the background image on error page, please follow these steps:

1. First upload your image to /wp-content/themes/your-theme/gfx folder.

2. Edit the following part of the code:

<section class="bt-error-page gutter" style="background-image: url(<?php echo esc_url_raw( get_parent_theme_file_uri( 'gfx/plug.png' ) ) ;?>)"></section>

by changing the existing name of the image to that of your image.


Please note that the code might look a bit different than the example above, depending on which theme you are using.


Additionally, making larger changes to the structure of the page (code) falls under 'customization per request', so we can't assist with that type of edits.

17. How to hide hover image effect?

In order to hide the hover effect on images, please add the Extra Class Name(s)  "btSimpleHover" to the required element (Row, Grid gallery or Image etc.):

and then add the following css statements to the Custom CSS field in Customize > General Settings:

.btSimpleHover .captionPane {
    display: none;
}


18. How to add Custom Font to your theme

In order to add custom font to your theme, you need to upload your custom font to the custom-fonts folder on your web server.

Go to \wp-content\themes\your_theme_name\assets\custom-fonts on your web server and create the folder named after your font and upload font ttf and/or woff and/or woff2 files to the folder.

Example - your folder structure should be like this for Great Sejagad font :

|- your_theme_folder
       |- custom-fonts
              |- Great Sejagad
                        |- GreatSejagad.ttf
                        |- GreatSejagad.woff2

Once you do this, The font will be visible in all select boxes throughout wp-admin just as default Google Fonts and you will be able to select it just as any other

19. How to add new Font icons?

In order to add new Font icons, you should customize the theme. Please do the following steps:

1. First of all you need to import your font file. 

2. Please take a look at the top of style.css file and you will find @font-face declaration. You need to import your own font files in the same manner as FontAwesome and the rest and declare the font-family as 'myFont' or something similar.

3. Then you need to search for all 'data-ico-fa' in the style.crush.css file and create respective statements for your font. For example when you locate

*[data-ico-fa]:before {
    font-family: FontAwesome;
    content: attr(data-ico-fa);
    }

you need to create 

 *[data-ico-mf]:before {
    font-family: myFont;
    content: attr(data-ico-mf);
    }

etc.

4. Then, you need to create new file in Medicare plugin folder called bt_mf_icons.php. As an example of how the PHP file should look, you can use one of the existing fonts (bt_fa_icons.php) and copy their files' content, and replace it with your glyph codes.

Or, you can use the following example, and just replace the glyph codes (numbers: f100, f101, f102 etc.) with the ones from your icon set. 

function bt_mf_icons(){
 $arr = array(
     '  ' => 'no_icon', 
     'icon-01' => 'mf_' . '_f100',
     'icon-02' => 'mf_' . '_f101',
     'icon-03' => 'mf_' . '_f102',
     'icon-04' => 'mf_' . '_f103',
     'icon-05' => 'mf_' . '_f104',
);

The glyph codes are defined in style.css file of your font. Here is the example:

<?php
$set = strtolower( basename(__FILE__, '.php') );
$$set = array(
    'icon-01:before {
  content: "\f100";
}
    'icon-02:before {
  content: "\f101";
}
    'icon-03:before {
  content: "\f102";
}
    'icon-04:before {
  content: "\f103";
}
    'icon-05:before {
  content: "\f104";
}---->

5. Finally, you need to edit medicare.php in your plugin's folder, search for bt_fa_icons() and add respective statements for bt_mf_icons() as well. For example to change all occurrences of 

$icon_arr = array_merge( bt_fa_icons(), bt_s7_icons(), bt_custom_icons() );

to

$icon_arr = array_merge( bt_fa_icons(), bt_mf_icons(), bt_s7_icons(), bt_custom_icons() );

Also, you need to edit bt_custom_icons.php in your plugin's folder, scroll to the bottom and add respective statements for bt_mf_icons() as well. You need to change

$arr = array( 'Font Awesome' => bt_fa_icons(), 'S7' => bt_s7_icons(), 'Custom' => $arr );

to

$arr = array( 'Font Awesome' => bt_fa_icons(), 'S7' => bt_s7_icons(), 'Custom' => $arr,  'My Custom Icons' => bt_custom_icons()  );

20. Is there some way I can see all the icons of Craft Portfolio theme?

We use four different sets of icons in Craft theme: Font AwesomeStroke 7Essential set and Design set.

Please refer to these links for preview of each icon set.




21. Installing Demo Content

The best way to start is to install demo content. If you want to install demo content please do the following:

First, delete all sample content (posts and pages) which is automatically created when
WordPress is installed. If you have already added a new content, please make sure to do the backup in order to save the content. After the backup, delete all content and you can start with the next steps:  

1. Start with fresh WordPress installation and make sure that theme and required plugins are installed. Since some demos contain WooCommerce data, please install WooCommerce plugin. Once you finish with the installation, you can remove WooCommerce plugin if you do not need it.


 


2. Go to ‘Tools > BT Import’ and select demo which you want to install.


 


3. Wait until you get message that import is finished. If you see red colored error message, just repeat the import until you get the message that import is finished. Import is incremental process and will finish eventually.

4. If you have imported demo with WooCommerce content, go to WooCommerce > Settings > Products > Display and select Shop as Shop Page; open Checkout tab and select Cart as Cart Page and Checkout as Checkout Page; open Accounts tab and select My Account as My Account Page.


Check our video tutorial how to install theme and import demo content.


Don't forget to subscribe to our YouTube channel!



For more info and detailed instructions please refer to our Online Theme Documentation.

22. Is there some way I can see all the icons of Celebration theme?

We use three different sets of icons in Celebration theme: Font AwesomeStroke 7 and  Custom Icons

Please refer to these links for preview of each icon set

23. Installing Plugins

Upon installing and activating theme, in Appearance > Themes panel, you will first be redirected to the page to select if you want to use demo with Bold Builder page editor, or with Elementor page editor.

Select the demo you want to use and click on ‘Choose Page Builder‘ button.



Note: If you clicked on the wrong page builder demo, and you want to return to the page to select the other one, you need to edit page’s url and add this to the link – /wp-admin/admin.php?page=page-builder-selection. The whole url would look something like this – http://my-site.com/wp-admin/admin.php?page=page-builder-selection.
But note that this only works if you haven’t started plugins’ installation process. Once you click on the next page to install and activate plugins, you won’t be able to return to the page to select between two demos. If you want to change page editor, you’ll need to completely delete the theme and plugins, and reinstall everything.


You will then be redirected to the ‘Install Required Plugins‘ page. Select all plugins, choose ‘Install‘ and click ‘Apply‘ button.


Once the installation is complete the following screen will appear. Click ‘Return to Required Plugins Installer‘ button at the bottom of the screen.


On the following screen, once again, select all plugins, choose ‘Activate‘ and click ‘Apply‘ button.


Last step is to install and activate WooCommerce plugin.

Please note that WooCommerce is not a required plugin, and you don’t need to install it if you won’t be using shop on your site.

If you are going to have a shop on your site, go to Plugins > Add New Plugin panel on your dashboard, search for WooCommerce, and then click to install and activate it.



*Please note that the above screenshots are for demo with Bold Builder plugin, but the installation steps are the same for Elementor demo (except you won’t see Bold Builder on your plugins list, and instead you’ll have Elementor).


Once all the plugins are installed, and activated, proceed to install demo content - https://boldthemes.ticksy.com/article/20036/.

24. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapsed by default, please edit medicare/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

25. How to edit widgets?

In Appearance > Widgets panel you can see the list of available widgets and widget areas.

Here’s how they work - each theme has default widget areas, such as Footer widgets, Header Left widget, Header Right widgets, etc.

Some themes have custom widget areas made for each homepage in order to have different widgets on them.

 The purpose of custom widget areas is to override the default widget areas on certain pages.

 Custom widget areas are added in Appearance > Sidebars panel, by selecting which default area they will replace and on what page(s) they will display.

Once you select your homepage, go to Appearance > Widgets and check if that homepage has its own custom widget area.

If it does, you have two options – first is to move widgets from this custom widget area to a corresponding default area.

Other solution would be to simply assign that custom widget area to display on all pages by selecting them in Appearance > Sidebars panel.


*Example is from Renata theme, but the steps are the same for all of our themes.



26. How to edit Booking Form?

Third Party plugin Contact Form 7 is used for Booking Form in Hotel California theme.

Once you edit labels (Arrival Date, departure date, Adults etc.) according to your needs, please have a look at the following codes, as an example of Message Body:

From: [Name]
Message Body:
Arrival date: [ArrivalDate]
Departure Date: [DepartureDate]
Room: [Room]
Adults: [Adults]
Children: [Children]
Name: [Name]
Email: [Email]

For more info, please refer to the article: Setting up mail.


27. Header title is displaying site name

Once you add titles with Yoast SEO plugin, header will display that title and site name, instead of the page title.

In order to show only title, without site name, you could change page title template to display only the title. In Yoast > Titles & Metas > Pages Title template, you could add title template as:

%%title%%


Other option would be to switch to  All in One SEO Pack plugin, that does not affect header title.

28. How to update installed theme? Will it change data?

Once the new theme version is available, user who purchased the theme should get email note from the Envato (ThemeForest).



There are three ways to update the theme:

1) FTP Update

Download newest theme version from ThemeForest Download section. Since you already have the theme installed, you can download just 'Installable WordPress file only'.

In case you want to use this method, 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.

2) Update theme via ZIP file upload

This method is available since WP version 5.5. Please follow these steps: 

3) Envato Market plugin

Enable automatic theme update with the Envato Market Plugin. Once you install and activate this plugin, every time a new theme version becomes available, you will be able to update it with just one click.

 You will need to go to the WordPress Updates page and navigate to the Themes section. The new version will be included in the section just like the themes from the WordPress repository.

* Whichever of these three methods you use for theme update, you will have to update theme plugin (and possibly some other required plugins) as well.

For plugin updates, you will get notification on your dashboard when new version is available.

Please note...

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.

To prevent this, you can use child theme.

All settings in Customize panel and your content will be preserved.



For more info and detailed instructions please refer to our Online Theme Documentation.

29. How to change the header and edit other Single Post settings?

All single posts inherit the settings from their template page. In order to edit excerpt text and header background image, please locate this page on All Pages list, and proceed to follow instructions from our article.


In order for this page to work as a template page for single posts, make sure to add its slug to Settings Page Slug field in Appearance >Customize >Blog panel.

                                                          





For more info and detailed instructions please refer to our Online Theme Documentation.

30. How to increase the size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

.menuHolder .logo img {
    height: 100px;
}

body.btMenuHorizontal.btStickyHeaderActive .mainHeader .menuHolder {
    padding: 20px 0;
}

Please adjust the numbers according to your needs. The first number (100px) represents the height of the logo and the second (20px) represents the top and bottom margins between the viewport's top and the content.

31. How to add custom icon font to the theme

Hi,

This requires customization of several theme files. 

First of all you need to import your font file. Please take a look at the top of style.cargo.css file and you will find @font-face declaration. You need to import your own font files in the same manner as FontAwesome and the rest and declare the font-family as, for example 'myFont'.

Then you need to search for all 'data-ico-fa' in the style.cargo.css file and create respective statements for your font. For example when you locate

.btIco .btIcoHolder[data-ico-fa]:before{font-family:FontAwesome;content:attr(data-ico-fa)}

you need to create 

.btIco .btIcoHolder[data-ico-mf]:before{font-family:myFont;content:attr(data-ico-mf)}

Please make sure to find all occurrences of data-ico-fa and create respective data-ico-mf statements.

Then, you need to create new file in cargo plugin folder called bt_mf_icons.php by copying the file bt_fa_icons.php and changing it by mapping your glyph codes:

function bt_mf_icons() {
 $arr = array(
 '  ' => 'no_icon', 
 'myname1 (mf)' => 'mf_' . 'xxxx',
 'myname2 (mf)' => 'mf_' . 'xxxx',
etc...

Finally, you need to edit cargo.php in your plugin's folder: 

search for bt_fa_icons.php and add equivalent statements for bt_mf_icons.php:

if ( ! function_exists( 'bt_mf_icons' ) ) {
 require_once( 'bt_mf_icons.php' );
 }

then search for bt_fa_icons() and add respective statements for bt_mf_icons() as well - change all occurrences of 

$icon_arr = array_merge( bt_fa_icons(), bt_s7_icons(), bt_custom_icons() );

to

$icon_arr = array_merge( bt_fa_icons(), bt_mf_icons(), bt_s7_icons(), bt_custom_icons() );

32. Is there some way I can see all the icons of Organic Food theme?

We use three different sets of icons in Finance theme: Font AwesomeStroke 7,  Essential setProductivity setProductivity and development setDesign setBusiness set and Gastronomy set.

Please refer to these links for preview of each icon set.

33. Contact form visible by default

Since plugin version 2.1.9, it is possible to display contact form below total bar by selecting 'Contact Form Initially Visible (Remove Next Button)' field in Cost Calculator settings panel, Contact form tab.



34. I want to add custom CSS statements to style my calculator. Where should I add them?

Custom CSS code should be added to your theme's Custom / Additional CSS field.


If you use WP Bakery Page Builder (former Visual Composer) you should click on Page Settings button in the upper right corner of WP Bakery Page Builder's interface on relevant Page Edit Form:



Alternatively, you can use third party plugin, e.g. Simple Custom CSS.

35. How to set initial value for Text item?

From Cost Calculator Version 1.2.1, initial value can be set in Cost Calculator Item Settings.

In order to set initial value for Text item, you need to add the starting value you want to 'Initial value' field.



Have a look how it looks at the frontend:



36. How to set initial value for Switch item to True?

From Cost Calculator Version 1.2.1, initial value can be set in Cost Calculator Item Settings.

In order to set initial value for Switch item, you need to add 'On' value to 'Initial value' field.

For example, if 'On' value is 1, you should add number 1 to the field.


37. How to translate plugin?

Translation using PoEdit

The procedure is standard – you can find the .pot file in the plugin’s languages folder. 

Please use PoEdit - https://poedit.net/ to translate the .pot file and create respective .po and .mo fies.

You should upload .po and .mo files created using PoEdit back to plugin's languages folder. 

Please name .po and .mo files e.g. bt-cost-calculator-nl_NL.po and bt-cost-calculator-nl_NL.mo (nl_NL is the language code for dutch) and place them in /wp-content/plugins/bt_cost_calculator/languages/

For other languages code, please refer to the following link: Internationalization.

You can set the site language of your WordPress installation on Settings > General. WordPress will automatically use the right language files if they exist. 

Translation using Loco Translate

Install Loco Translate plugin - https://wordpress.org/plugins/loco-translate/ on Plugins panel of your wp-admin console

Once you have the plugin installed and activated, please do the following:

1. Go to Loco Translate > Plugins.

2. Click on Cost Calculator.

3. Click on Advanced tab and set Text Domain and File Prefix to “bt-cost-calculator”. By default they are probably “bt_cost_calculator”.

4. Set Template file to languages/bt-cost-calculator.pot and Save Config. Go to Overview Tab.

5. Click New Language and choose the language you have set in WordPress > General Settings.

6. Set Choose location to Author (plugins/bt_cost_calculator/languages/bt_cost_calculator-xx_XX.po).

7. Click Start translating.

8. Translate the strings you need - you do not have to translate the entire set.

9. Once you save the translation, the changes should be visible on Front End if you have done everything as described.


38. How to choose Home page version?

When you decide which Homepage version you are going to use, then please follow the next steps:

  1. Set your chosen Homepage version as Front page in Settings > Reading Settings panel.

     2.  In the chosen Homepage editor locate the Override Global Settings – at the bottom of page editor:



3. All the settings (logo, alternate logo, colors, menu type, typography etc.) should be set the same in Customization panel.

Have a look at the following example - copying accent color (note: example is on the Craft Beer theme, but it works the same on all themes):



Once you are done with setting main settings in Customization panel (logo, accent and alternate colors, menu layout etc.) then make sure to edit Primary Menu according to your needs (remove unnecessary Homepages etc.).


For more info and detailed instructions please refer to our Online Theme Documentation.

39. How to set the initial value for Select item?

From Cost Calculator Version 1.2.1, initial value can be set in Cost Calculator Item Settings.

In order to set initial value for Select item, you need to add the index of the item you want to display as initial, in 'Initial select list index' field.

For example, if you have three items in Select field, and you want the second one to be initial, you would add number 2 to the field.



40. How to prevent selection of weekends in date picker?

We can provide no weekend function into the date picker option. Please follow next steps:

1. Use next Custom CSS and add them to Customizer > Additional CSS field:

.ui-datepicker-week-end {
    display: none !important;
}

2. Also, make sure to add next JS into Custom JS field in Customizer > General Settings:

const picker = document.getElementById('date');
picker.addEventListener('input', function(e){
  var day = new Date(this.value).getUTCDay();
  if([6,0].includes(day)){
    e.preventDefault();
    this.value = '';
    alert('Weekends not allowed');
  }
});

3. Than edit line 444 in bt_cost_calculator.php file, located in \wp-content\plugins\bt_cost_calculator folder on your site :

$output .= '<div class="btQuoteItem' . $m_date . '"><input type="text" class="btContactDate btContactField" placeholder="' . $date_text . '"></div>';

replace with next line:

$output .= '<div class="btQuoteItem' . $m_date . '"><input type="text" class="btContactDate btContactField" id="date" placeholder="' . $date_text . '"></div>';

41. SVG Image format

Our themes currently do not support SVG image format. We also don't recommend using any of the plugins for SVG, such as SVG SupportSafe SVG, and others. 

These plugins have not been tested with the themes, are not fully supported, and can cause themes' functionalities, such as Customize panel, to break.

42. How to have a Split Screen page

In order to have split screen page, please do the following steps:

1. First, create a new page and then switch to the classic editor. 

2. Please find the code at the following link: Split Screen. Paste the attached code into the Text tab.

3. At the bottom of the page set Animations property to Half Page.


You will not get images, so you would need to add your own images as section backgrounds. In order to have the same effect as on the demo, you need to style your images like this:


43. How to install Hero Posts plugin

There are two methods of installing a plugin onto your WordPress site. You can use the WordPress Admin panel to upload and install the plugin, or you can use FTP software instead.

WordPress Plugin Installation

To install the plugin directly from the WordPress admin panel, please first log-in to your wp-admin console.

  1. Navigate to Plugins > Add New,
  2. Click Upload Plugin,
  3. Click Choose File.
  4. If you want to upload in admin panel, you need to extract plugin folder (hero-posts folder), from downloaded hero-posts.zip file and pack it again as zip and then upload that zip.
  5. Click Install Now and the installation will begin.
  6. Once the installation is complete, go to Plugins screen and look for the newly uploaded Hero Posts in the list.
  7. Click Activate to activate it.

https://documentation.bold-themes.com/hero-posts/wp-content/uploads/sites/80/2023/03/install-plugin.png

FTP Installation

To install the plugin using FTP software, log in to the server where your WordPress website is hosted.
First extract hero-posts folder from downloaded hero-posts.zip file.

Now connect to your server via FTP and navigate to the wp-content/plugins folder in your WordPress directory online. Upload hero-posts folder to the plugins’ folder on your remote server.

Once the plugin is uploaded, you need to activate it. Go to ‘Plugins > Installed Plugins’, find Hero Posts and click ‘Activate’ button.

44. How to place more than one marker on the map?

Currently Cargo's map element does not support multiple markers. You need to customize Cargo's plugin a bit to achieve this. Please edit bt_gmap.js in your Cargo plugin's folder (usually /wp-content/plugins/cargo/) and find the following statements:

var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon
});

In order to add another marker please add the following just below the referenced statements:

var myLatLng = new google.maps.LatLng( 41.7144678, -75.015827 );
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: icon
});

where 41.7144678 and -75.015827 are latitude and longitude. Please adjust them according to your needs.

For additional markers just repeat the procedure above.

45. How to update a plugin?

There are two ways to update Cost Calculator plugin - through wp-admin or through FTP.

Since plugin version 2.2.4 it is possible to update plugin through your dashboard, in Updates panel. In order to be able to do this, you will need to register your purchase code.

You can register your purchase code in Cost Calculator >Product License panel, on your dashboard.


Other option to update Cost Calculator to the latest version is to download the plugin folder from the download section of your CodeCanyon profile and update through FTP. We suggest that you use Filezilla to access your server. Here is the article that explains how Filezilla works.

Extract bt_cost_calculator file from the folder you downloaded, and upload it to /wp-content/plugins/ folder of your WordPress installation. You will be prompted to overwrite the existing files. Select 'Yes', and the plugin will update.

If you have made some changes in the plugin's code, you will need to reapply the changes in the new version.

Cost Calculators that were made before update will be preserved.

46. How to install Cost Calculator plugin?

There are two methods of installing a plugin onto your WordPress site. You can use the WordPress Admin panel to upload and install the plugin, or you can use FTP software instead.


WordPress Plugin Installation

To install the plugin directly from the WordPress admin panel, please first log-in to your wp-admin console.

  1. Navigate to Plugins > Add New,
  2. Click Upload Plugin,
  3. Click Choose File.
  4. If you want to upload in admin panel, you need to extract plugin folder (bt_cost_calculator folder), from downloaded bt_cost_calculator.zip file and pack it again as zip and then upload that zip.
  5. Click Install Now and the installation will begin.
  6. Once the installation is complete, go to Plugins screen and look for the newly uploaded Cost Calculator in the list.
  7. Click Activate to activate it.


http://documentation.bold-themes.com/cost-calculator/wp-content/uploads/sites/9/2016/11/activate_plugin.jpg


FTP Installation

To install the plugin using FTP software, log in to the server where your WordPress website is hosted.
First extract bt_cost_calculator folder from downloaded bt_cost_calculator.zip file.

Now connect to your server via FTP and navigate to the wp-content/plugins folder in your WordPress directory online. Upload bt_cost_calculator folder to the plugins’ folder on your remote server.

Once the plugin is uploaded, you need to activate it. Go to ‘Plugins > Installed Plugins’, find Cost Calculator and click ‘Activate’ button.

47. How to change the Excerpt text and Header background image?


In order to edit / remove excerpt text, navigate to the Page editor, and in Screen Options (at the top of the dashboard) enable Excerpt field.

http://documentation.bold-themes.com/celeste/wp-content/uploads/sites/30/2018/07/Screenshot_26.jpg


After that, scroll to the bottom of the page editor where you’ll find Excerpt text.

http://documentation.bold-themes.com/celeste/wp-content/uploads/sites/30/2018/07/Screenshot_7.jpg


The Header background image represents featured image added to the page. In order to replace existing image with your own, click on the image, and when redirected, select image from Media Library.

In order to entirely remove the image, click on ‘Remove featured image’ button.

http://documentation.bold-themes.com/celeste/wp-content/uploads/sites/30/2018/07/Screenshot_25.jpg


In order to remove entire Header from pages, make sure to check ‘Hide Default Headline’ field in Appearance >Customize >General Settings panel, or in Override Global Settings at the bottom of the page editor:


Should you want to edit header on Single Post, Single Product or Single Portfolio then first locate page which settings are inherited. For more info refer to the articles:

See in action this feature in the following video tutorial. And make sure to subscribe to our YouTube channel!



For more info and detailed instructions please refer to our Online Theme Documentation.

48. How to ask for a refund?

If you've decided that our theme / plugin doesn't work for you, we do offer a full refund.

In order to ask for a refund, please submit a request for a refund on the following link: http://themeforest.net/refund_requests/new.

Here's how the refund process works:

1. The refund request is sent to us via email, and we decide if we are going to approve it or not.

2. Once the refund is approved, it can take between 3 to 5 days for Envato to transfer money back to your account.

3. If the refund is not approved, you can always raise a dispute

You can find additional guidelines on the refund in the official Envato article.

49. How to edit clients email?

In order to change the clients email, then you should locate the bt_cost_calculator.php file and find function bt_cc_callback() in the code. The email formatting starts from the line:

$message_to_admin = ...

50. Cost Calculator purchase code

Please note that our premium plugin, Cost Calculator, comes bundled with the theme and therefor doesn't have separate purchase code.

Although newer versions of the plugin have product license panel for entering purchase code, this will only work when it's purchased separately, not when it comes bundled with the theme.

Note that you are not required to purchase the plugin separately if you are using one of our themes, and you shouldn't enter theme's purchase code.

The only purpose of the product license is to allow people to update plugin through wp-admin panel, but since you got it together with the theme you will get the necessary updates with new theme versions.

You can find more information on bundled plugins on the following link.

51. How to create One page?

In order to create one page site, please follow the instructions below:

1. First, navigate to the Bold Builder edit panel and edit desired section. Add any ID (we recommend it to contain only letters, and not any additional signs) to the section in Custom Tab, Element ID field:


2. Then in Appearance > Menus add a new Custom Link and as a URL insert custom ID atribute with #.

For example: #about


For more info and detailed instructions please refer to our Online Theme Documentation.

52. How to add additional fields to contact form part of Cost Calculator?

If you like to add additional fields to contact form part of Cost Calculator, please do the following:

1. Open bt_cost_calculator.php file in the code editor.

2. Locate the following piece of code:

$output .= '<div class="btQuoteItem' . $m_message . ' btQuoteItemFullWidth"><textarea class="btContactMessage btContactField" placeholder="' . __( 'Message', 'bt-cost-calculator' ) . '"></textarea></div>';

and add above it the following:

$output .= '<div class="btQuoteItem"><input type="text" class="myText btContactField" placeholder="' . __( 'myText', 'bt-cost-calculator' ) . '"></div>';

This will create the new field in the form with the placeholder text myText. Change it according to your needs (edit placeholder="' . __( 'myText', 'bt_plugin' ) statement)

3. Locate the following piece of code in cc.main.js file:

'message' : c.find( '.btContactMessage' ).val()

and add above it the following:

'mytext' : c.find( '.myText' ).val(),

it will ensure that the value of the newly created field gets propagated to backend upon form submission

4. Locate the following piece of code in bt_cost_calculator.php file:

$message = $_POST['message'];

and add above it the following:

$mytext = $_POST['mytext'];

5. Locate the following piece of code in bt_cost_calculator.php file:

if ( $message != '' ) $message_to_admin .= '<div style="padding:.5em;"><b>' . __( 'Message', 'bt-cost-calculator' ) . '</b>: ' . stripslashes( $message ) . '</div>' . "\r\n";

and add above it the following:

if ( $mytext != '' ) $message_to_admin .= '<div style="padding:.5em;"><b>' . __( 'MyText', 'bt-cost-calculator' ) . '</b>: ' . $mytext . '</div>' . "\r\n";

It will include the value of your field into the email body.

53. Missing style sheet error when installing the theme

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.

You have 2 options for downloading your theme:


Please use Installable WordPress file only archive in the process of Theme installation:

  1. Log in to your WordPress admin area.
  2. Browse to Appearance > Themes.
  3. Click on ‘Add New’.
  4. Click ‘Upload Theme’.
  5. Browse and select the theme zip file to upload, then click 'Install Now' button.


Check our video tutorial how to install theme and import demo content.

Don't forget to subscribe to our YouTube channel!


For more info and detailed instructions please refer to our Online Theme Documentation.

54. Is there some way I can see all the icons of Finance theme?

We use three different sets of icons in Finance theme: Font AwesomeStroke 7,  Essential setProductivity setProductivity and development setDesign set and Business set.

Please refer to these links for preview of each icon set.

55. Importing Demo

The best way to start is to install demo content. If you want to install demo content please do the following:

Go to ‘Tools > Import > WordPress’ and install WordPress Importer plugin if it is not already installed.

When it is installed, choose xml file from demo_data folder and click ‘Upload file and import’. On the following screen make sure that ‘Download and import file attachments’ is checked. Click ‘Submit’ button and wait until import is finished.

You should see imported demo timelines in Bold Timeline panel.



56. I can’t upload plugin. It’s saying it is invalid. What went wrong?

Please unpack plugin folder and upload to your wp-content/plugins using FTP. The archive contains not only plugin but also the other files. 

If you want to upload in admin panel, you need to unpack plugin folder (bold-timeline) and pack it again as zip and then upload that zip.

57. How to redirect users to another page after the "Next" button?

Please find the following lines in cc.main.js file:

c.find( '.btContactNext' ).click(function() {
                    $( 'html, body' ).delay( 1000 ).animate({
                        scrollTop: ( $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' ).offset().top - 30 )
                    }, 400 );
                    
                    var contact_group = $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' );
                    
                    $( this ).closest( '.btQuoteBooking' ).find( '.btTotalQuoteContactGroup' ).addClass( 'btActive' );
                    $( this ).closest( '.btQuoteBooking' ).find( '.btQuoteBookingForm' ).removeClass( 'btActive' );
                });

and replace them with:

c.find( '.btContactNext' ).click(function() {
                    window.location = 'http://www.google.com';
                });

Please edit the url according to your needs.

58. Installing Demo Content

The best way to start is to install demo content. If you want to install demo content please do the following:

First, delete all sample content (posts and pages) which is automatically created when WordPress is installed. If you have already added a new content, please make sure to do the backup in order to save the content. After the backup, delete all content and you can start with the next steps:  

1. Start with fresh WordPress installation and delete all sample content (like posts and pages) which is automatically created when WordPress is installed.

2. Go to ‘Tools > Import > WordPress’ and install WordPress Importer plugin if it is not already installed.

3. When it is installed, choose xml file from demo_data folder and click ‘Upload file and import’. On the following screen make sure that ‘Download and import file attachments’ is checked. Click ‘Submit’ button and wait until import is finished.

If import appears broken, please delete any imported menus from Appearance > Menus and repeat the import. Do the same again if necessary (e.g. 5-10 times) until import is completed.

Additionally, because import process depends on server setup, you may ask your hosting provider for help.

59. How to change the e-mail address from Wordpress?

In order to change the sender name, if the visitor and admin are receiving an e-mail from "Wordpress", we suggest you to avoid code customization and to install a third party plugin which will allow this. For example this one: WP Simple Mail Sender.


60. How to change the settings only on one page?

Here is how the Setting generally works:

The settings in the Appearance > Customize panel are global, meaning that they influence every page on the site by default.


On the other hand, you have an option to override these settings on per page basis. If you take a look at the bottom of the page edit form, you will notice 'Override Global Setting' part in Settings Section - here you can override global settings for every page.


So, for example, if you need to change the logo then the value should be either absolute URL of the image or image ID from Media Library. The same is with Sidebar (left, right or no sidebar) or Boxed menu (true or false) etc.


If you are using our Elementor demo, some options are a little different. Please refer to our documentation to learn how to override main colors in Elementor demo - https://documentation.bold-themes.com/kylo/creating-pages-and-posts/#override-elementor.

61. Is there some way I can see all the icons of the theme?

We use three different sets of icons in the theme: Font AwesomeStroke 7 and Custom Icons.

Please refer to these links for preview of each icon set.

62. How to increase the size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

.btLogoArea .logo span a img {
    max-width: 200px;
}

Please adjust the numbers according to your needs.

63. Installing Demo Content

The best way to start is to install demo content. If you want to install demo content please do the following:

First, delete all sample content (posts and pages) which is automatically created when
WordPress is installed. If you have already added a new content, please make sure to do the backup in order to save the content. After the backup, delete all content and you can start with the next steps:  

1. Start with fresh WordPress installation and make sure that theme and required plugins are installed. Since some demos contain WooCommerce data, please install WooCommerce plugin. Once you finish with the installation, you can remove WooCommerce plugin if you do not need it.


 


2. Go to ‘Tools > BT Import’ and select demo which you want to install. 

*Make sure that you select demo in correct language – there are three RTL demos in Arabic, and the rest are LTR in English.

 


3. Wait until you get message that import is finished. If you see red colored error message, just repeat the import until you get the message that import is finished. Import is incremental process and will finish eventually.

4. If you have imported demo with WooCommerce content, go to WooCommerce > Settings > Products > Display and select Shop as Shop Page; open Checkout tab and select Cart as Cart Page and Checkout as Checkout Page; open Accounts tab and select My Account as My Account Page.


Check our video tutorial how to install theme and import demo content.


Don't forget to subscribe to our YouTube channel!



For more info and detailed instructions please refer to our Online Theme Documentation.

64. Theme update - Ad Astra to Ajani

Once you receive an email that new theme version is available, you will notice that its name has changed.

The Ad Astra theme is now named Ajani, but note that no changes were made in the theme code and you will be able to update it easily.

In this case there are two ways to update the theme.

1) FTP Update

Download newest theme version from ThemeForest Download section. Since you already have the theme installed, you can download just 'Installable WordPress file only'.

In case you want to use this method, 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.

*PLEASE NOTE - you will not be asked to overwrite the existing files because they are named differently. You just need to upload the new theme folder.

*The example is the zip file from Medicare theme but the process is the same for all themes.

2) Update theme via ZIP file upload

This method is available since WP version 5.5. Please follow these steps: 



Once the new theme is uploaded, go to Appearance >Themes panel, deactivate old Ad Astra version, and activate new Ajani theme version.

Then, go to Plugins panel on your dashboard. First, deactivate old Ad Astra plugin, and then install and activate new Ajani plugin (note that you need to do it in this order to prevent site from crashing).

Once the new Ajani theme and plugin are activated, you can proceed to delete old Ad Astra theme and plugin.

Note that this is a one time thing, all updates after that will have the theme name Ajani, so you will be able to use standard procedure for theme update.



And lastly, if you are using a child theme, you will need to change every occurrence of 'ad-astra' name with 'ajani' in child theme's functions.php file.

65. Frontend Editor

Since Bold Builder version 4.0.0 it is possible to edit elements using frontend editor.

Starting with version 4.9.1 it is also possible to add and move elements through frontend editor.

You can find explanation on how frontend editor works in Bold Builder documentation on this link - https://documentation.bold-themes.com/bold-builder/frontend-editor/.


*Please note that this is documentation for Bold Builder plugin, and not for the specific theme you are using, so some options (screenshots) might differ, but the process of editing is the same either way.

66. How to translate theme?

In order to translate the theme, please follow the next steps:

Theme's .pot file is located in /wp-content/themes/your-theme-name/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. potname-nl_NL.po and potname-nl_NL.mo (nl_NL is the language code for dutch and potname is the name of the .pot file you have started from - it corresponds to text domain of the theme). 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.

Alternatively, you can upload the .po and .mo files to your theme's /wp-content/themes/your-theme-name/languages folder. In that case name them only using the language code (for example nl_NL.mo and nl_NL.po)

Also make sure to translate the theme's plugin .pot file, located in \wp-content\plugins\your-theme-name\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. 

67. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapsed by default, please edit fitness-club/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){ $( this ).find( '.tabAccordionTitle' ).first().click(); });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

68. How to change H tag in page headline?

Title in page headline is, by default, set to use h1 tag.


In order to change the tag, you will need to customize part of the theme's code, so some familiarity with PHP is necessary.

First, install and activate the child theme. Then, to child theme's functions.php file add the following code:


/**
 * Header headline output
 */
if ( ! function_exists( 'boldthemes_header_headline' ) ) {
    function boldthemes_header_headline( $arg = array() ) {
        $extra_class = 'btPageHeadline';
        
        $dash  = '';
        $use_dash = boldthemes_get_option( 'sidebar_use_dash' );
        if ( is_singular( 'post' ) ) {
            $use_dash = boldthemes_get_option( 'blog_use_dash' );
        } else if ( is_singular( 'product' ) ) {
            $use_dash = boldthemes_get_option( 'shop_use_dash' );
        }  else if ( is_singular( 'portfolio' ) ) {
            $use_dash = boldthemes_get_option( 'pf_use_dash' );
        } 
        if ( $use_dash ) $dash  = apply_filters( 'boldthemes_header_headline_dash', 'top' );
        if ( is_front_page() ) {
            $title = get_bloginfo( 'description' );
        } else if ( is_singular() ) {
            $title = get_the_title();
        } else {
            $title = wp_title( '', false );
        }
        
        if ( BoldThemesFramework::$page_for_header_id != '' ) {
            $feat_image = wp_get_attachment_url( get_post_thumbnail_id( BoldThemesFramework::$page_for_header_id ) );
            
            $excerpt = boldthemes_get_the_excerpt( BoldThemesFramework::$page_for_header_id );
            if ( ! $feat_image ) {
                if ( is_singular() && ! is_singular( 'product' ) ) {
                    $feat_image = wp_get_attachment_url( get_post_thumbnail_id() );
                } else {
                    $feat_image = false;
                }
            }
        } else {
            if ( is_singular() ) {
                $feat_image = wp_get_attachment_url( get_post_thumbnail_id() );
            } else {
                $feat_image = false;
            }
            $excerpt = boldthemes_get_the_excerpt( get_the_ID() );
        }
        
        $parallax = isset( $arg['parallax'] ) ? $arg['parallax'] : apply_filters( 'boldthemes_header_headline_parallax', '0.8' );
        $parallax_class = 'bt_bb_parallax';
        if ( wp_is_mobile() ) {
            $parallax = 0;
            $parallax_class = '';
        }
        
        $supertitle = '';
        $subtitle = $excerpt;
        
        $breadcrumbs = isset( $arg['breadcrumbs'] ) ? $arg['breadcrumbs'] : true;
        
        if ( $breadcrumbs ) {
            $heading_args = boldthemes_breadcrumbs( false, $title, $subtitle );
            $supertitle = $heading_args['supertitle'];
            $title = $heading_args['title'];
            $subtitle = $heading_args['subtitle'];
        }
        
        if ( $title != '' || $supertitle != '' || $subtitle != '' ) {
            $extra_class .= $feat_image ? ' bt_bb_background_image ' . apply_filters( 'boldthemes_header_headline_gradient', 'bt_bb_background_overlay_dark_solid' ) . ' ' . $parallax_class . ' btDarkSkin ' : ' ';
            echo '<section class="bt_bb_section gutter bt_bb_vertical_align_top ' . esc_attr( $extra_class ) . '" style="background-image:url(' . esc_url_raw( $feat_image ) . ')" data-parallax="' . esc_attr( $parallax ) . '" data-parallax-offset="0">';
                echo '<div class="bt_bb_port port">';
                    echo '<div class="bt_bb_cell">';
                        echo '<div class="bt_bb_cell_inner">';
                            echo '<div class="bt_bb_row">';
                                echo '<div class="bt_bb_column">';
                                    echo '<div class="bt_bb_column_content">';
                                        echo boldthemes_get_heading_html( 
                                            array(
                                                'superheadline' => $supertitle,
                                                'headline' => $title,
                                                'subheadline' => $subtitle,
                                                'html_tag' => "h1",
                                                'size' => apply_filters( 'boldthemes_header_headline_size', 'large' ),
                                                'dash' => $dash,
                                                'el_style' => '',
                                                'el_class' => ''
                                            )
                                        );
                                        echo '</div><!-- /rowItemContent -->' ;
                                    echo '</div><!-- /rowItem -->';
                            echo '</div><!-- /boldRow -->';
                        echo '</div><!-- boldCellInner -->';    
                    echo '</div><!-- boldCell -->';            
                echo '</div><!-- port -->';
            echo '</section>';
        }
        
    }
}


Once you add the code, change the H tag defined in this part of the code:

'html_tag' => "h1",

69. How to enter Purchase Code?

Since Bold Timeline version 1.0.3, once you install and activate plugin (or just update plugin to that version if you had it previously), a new option, Product License, will appear in Bold Timeline panel.

Once you enter Bold Timeline's purchase code you will be able to receive notifications about new plugin versions, and update it through your dashboard, in Updates panel.

Please note that you are not required to enter purchase code in order for the plugin to work. Registration with purchase code is only used to receive plugin updates through wp-admin panel.

70. How to set initial value for Slider item?

From Cost Calculator Version 1.2.1, initial value can be set in Cost Calculator Item Settings.

In order to set initial value for Slider item, you need to add the value between min and max values, in 'Initial value' field.

For example, if you have items from 0 (zero) to 200 in your slider, and you want the initial value to be 2 items, you should add 2 to the field.




71. How to add custom Icon Font to Bold Timeline

Please refer to the instruction below on how to add custom icons to Bold Timeline:

1. Copy the font files to /assets/fonts/

Make sure that your icon files contains .ttf and .woff files, as well as CSS file with icons' names and glyph codes. If it doesn't have these files, you could use IcoMoon to generate the files.

2. Create PHP file for your icons:

Usually you will name PHP file as the icons (for example, MyIcon.php) and saved to /assets/php/ . As an example of how the PHP file should look, you can use one of the existing fonts and copy their files' content, and replace it with your glyph codes. Make sure to rename the function name in the file in line with the name of your icon set (for example function my_custom_icons())

The glyph codes are defined in style.css file (located in downloaded file from e.g. IcoMoon). Here is the example:

.icon-01:before {  content: "\f100";
}
.icon-02:before {  content: "\f101";
}
.icon-03:before {  content: "\f102";
}
.icon-04:before {  content: "\f103";
}
.icon-05:before {  content: "\f104";
}

3. Edit plugin files  - bold_timeline_item.php:

In \content_elements\bold_timeline_item\bold_timeline_item.php file,  locate the following line of code:

require_once( dirname(__FILE__) . '/../../assets/php/fa_icons.php' );
require_once( dirname(__FILE__) . '/../../assets/php/s7_icons.php' );
require_once( dirname(__FILE__) . '/../../assets/php/FontAwesome5Brands.php' );
$icon_arr = array( 'Font Awesome' => bold_timeline_fa_icons(), 'S7' => bold_timeline_s7_icons(), 'FontAwesome5Brands' => bold_timeline_FontAwesome5Brands_icons() );

here, you need to add the reference to your newly created php file and map the function within it. Here is how you need to modify the existing code:

require_once( dirname(__FILE__) . '/../../assets/php/fa_icons.php' );
require_once( dirname(__FILE__) . '/../../assets/php/s7_icons.php' );
require_once( dirname(__FILE__) . '/../../assets/php/FontAwesome5Brands.php' );
require_once( dirname(__FILE__) . '/../../assets/php/MyIcon.php' );
$icon_arr = array( 'Font Awesome' => bold_timeline_fa_icons(), 'S7' => bold_timeline_s7_icons(), 'FontAwesome5Brands' => bold_timeline_FontAwesome5Brands_icons(), 'MyCustomIcons' => my_custom_icons() );

note the require once statement and the additional member of the $icon_arr at the last line of code snippet.

4. Edit theme files - Additional CSS:

You also need to add the following statements to your theme css:

@font-face {
    font-family: 'MyCustomIcons';
    src: url(assets/fonts/MyIcon.woff?v=1.1.1) format('woff'),url(assets/fonts/MyIcon.ttf?v=1.1.1) format('truetype');
    font-weight: normal;
    font-style: normal;
    }
[data-ico-fa5b]:before {
    font-family: MyCustomIcons;
    content: attr(data-ico-fa5b);
    }

Remeber, you need to map every glyph in your Icon set as for fa5b glyph in the example above just as you did in MyIcon.php 

In the example above fa5b is the hex code of the glyph as defined in the MyIcon.php. The statement 

[data-ico-fa5b]:before {
    font-family: MyCustomIcons;
    content: attr(data-ico-fa5b);
    }

needs to be added for every glyph and string fa5b needs to be replaced with the respective hex code

5. Add custom Admin CSS:

Finally you need to add the following statements to your admin theme css (or plugin's style-admin.css file) in order to display the proper icons in the icon selection control:

@font-face {
    font-family: 'MyCustomIcons';
    src: url(assets/fonts/MyIcon.woff?v=1.1.1) format('woff'),url(assets/fonts/MyIcon.ttf?v=1.1.1) format('truetype');
    font-weight: normal;
    font-style: normal;
    }
.bt_bb_icon_preview_fa5b {
    font-family: MyCustomIcons;
}
[data-ico-fa5b]:before {
    font-family: MyCustomIcons;
}

Again, remember that you need to map every glyph in your Icon set as for fa5b glyph in the example above just as you did in MyIcon.php 

In the example above fa5b is the hex code of the glyph as defined in the MyIcon.php. The statement 

.bt_bb_icon_preview_fa5b {    font-family: MyCustomIcons;
}
[data-ico-fa5b]:before {    font-family: MyCustomIcons;
}

needs to be added for every glyph and string fa5b needs to be replaced with the respective hex code

72. How to change the header and edit other Single Shop Product page settings?

All single product pages inherit the settings from their template page. In order to edit excerpt text and header background image, please locate this page on All Pages list, and proceed to follow instructions from our article.

In order for this page to work as a template page for single products, make sure to add its slug to Settings Page Slug field in Appearance >Customize >Shop panel.


                                                          




For more info and detailed instructions please refer to our Online Theme Documentation.

73. Is there some way I can see all the icons of Hotel California theme?

We use three different sets of icons in Hotel California theme: Font AwesomeStroke 7 and Custom Icons

Please refer to these links for preview of each icon set.

74. Is there some way I can see all the icons of the theme?

We use two different sets of icons in the theme: Font Awesome and Stroke 7

Please refer to these links for preview of each icon set.

75. How to add new icon?

In order to add new icon, you will need to upload some other files in addition to .svg.

Here is the process:

  1. Go to IcoMoon.

  2. Click IcoMoon App in upper right corner:


3. Click on hamburger Menu in upper left corner and choose Manage Projects:


  4. Click New Project. Rename the project if you want. Click Load:

  5. Click Import Icons:

  6. Choose your .svg file.

  7. If asked do you want to use font's metrics click "Yes".

 8. Click on hamburger Menu in upper right corner and click Select all.

 9. Click Generate font in lower left corner:

 

 10. Click Preferences and set fontawesome-webfont for Font Name:

  11. Click Download in lower right corner:


  12. Extract files from the downloaded archive's fonts folder:

  13. Locate the font folder in theme's folder on your server and delete everything that has fontawesome in the name including woff2 and oet file.

  14. At the end, upload newly created files from IcoMoon.

76. I can’t upload plugin. It’s saying it is invalid. What went wrong?

Please unpack plugin folder and upload to your wp-content/plugins using FTP. The archive contains not only plugin but also the other files. 

If you want to upload in admin panel, you need to unpack plugin folder (bt_cost_calculator) and pack it again as zip and then upload that zip.

77. I want to change the position of section's background image on mobile resolutions so users do not see the center part of the image. How can I do that?

In order to offset the image on mobile resolutions and put some other part of the image in focus instead of center area which is displayed by default, please use the following approach:

Add Custom Id to desired section (mysection_1 for example):

And then add the following css statements to Appearance > Customize > General, Custom CSS field:

@media (max-width: 600px) {

 #mysection_1{
   background-position-x: 400px !important;
}
}

This will offset image x position by 400 px only for device resolutions of up to 600px.

Adjust the numbers according to your needs.

78. How to change logo?

The logo (and alternate logo) should be set in Appearance > Customize > General Settings panel. If, after setting your logo, it's still not visible on some pages, please do the following steps (note: example on Fast Food theme):



1. Navigate to the those pages' editor.

2. Locate Override Global Settings section at the bottom of the Page editor end remove Logo or Alternate logo:





For more info and detailed instructions please refer to our Online Theme Documentation.

79. How to change the header and edit other Single Post settings?

On Appearance > Customize > Blog panel there is a Settings Page Slug field. This field should contain the slug of the page which serves as a template for all blog posts.  All blog post will inherit settings and shortcodes of the page referenced via this field.


                                                 


In order to change elements on blog posts, please locate the page with the slug entered in Settings Page Slug field and edit it.


80. How to increase the size of the logo?

In order to increase size of the logo navigate to the Appearance > Customize > Header and Footer and in Logo Height (in px) field write the number according to your needs:


81. How do I remove the bar with Total and leave contact form?

Since plugin version 2.2.1 it is possible to remove total bar in Cost Calculator general settings panel.


*Note that this does not remove total price from the email users will receive.

82. How to increase the size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

.menuHolder .logo img {
    height: 70px;    
}

Please adjust the numbers according to your needs.

83. Installing OpenGraphiq plugin

There are two methods of installing a plugin onto your WordPress site. You can use the WordPress Admin panel to upload and install the plugin, or you can use FTP software instead.

WordPress Plugin Installation

To install the plugin directly from the WordPress admin panel, please first log-in to your wp-admin console.

  1. Navigate to Plugins > Add New,
  2. Click Upload Plugin,
  3. Click Choose File.
  4. If you want to upload the plugin in admin panel, you need to upload installable plugin .zip file, downloaded from your the Downloads section of your profile on CodeCanyon.
  5. Click Install Now and the installation will begin.
  6. Once the installation is complete, go to Plugins screen and look for the newly uploaded OpenGraphiq in the list.
  7. Click Activate to activate it.

https://documentation.bold-themes.com/opengraphiq/wp-content/uploads/sites/76/2022/09/img1.png


FTP Installation

To install the plugin using FTP software, log in to the server where your WordPress website is hosted.
First extract opengraphiq folder from downloaded .zip file from CodeCanyon.

Now connect to your server via FTP and navigate to the wp-content/plugins folder in your WordPress directory online. Upload opengraphiq folder from any of the available plugin .zip packages downloaded from CodeCanyon to the plugins’ folder on your remote server.

Once the plugin is uploaded, you need to activate it. Go to ‘Plugins > Installed Plugins’, find OpenGraphiq and click ‘Activate’ button.


84. Is there some way I can see all the icons of Estato theme?

We use three different sets of icons in Estato theme: Font AwesomeStroke 7 and Custom Icons

Please refer to these links for preview of each icon set.

85. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapse by default, please edit eventim/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

86. How to enter Purchase Code?

Since Cost Calculator version 2.2.4, once you install and activate plugin (or just update plugin to that version if you had it previously), a new option, Product License, will appear in Cost Calculator panel.

Once you enter Cost Calculator's purchase code you will be able to receive notifications about new plugin versions, and update it through your dashboard, in Updates panel.

Please note that you are not required to enter purchase code in order for the plugin to work. Registration with purchase code is only used to receive plugin updates through wp-admin panel.


87. I am getting "The Link You Followed Has Expired” Error in WordPress when trying to upload the plugin.

This error usually occurs when you are trying to upload a WordPress theme or a plugin to your website from the WordPress admin area.

WordPress hosting companies have a setting which controls the size of files you can upload from inside the WordPress admin area. They also have a setting which stops scripts from running too long.

You can try installing the plugin using above described FTP upload method or you can increase the limits for the maximum file size if possible. Please refer to the following article for details if you want to increase the limits: https://www.wpbeginner.com/wp-tutorials/how-to-fix-the-link-you-followed-has-expired-error-in-wordpress/

88. Sticky Header scroll

With the latest theme version, sticky header scroll and offset can be defined in inline JS.

The code for sticky header is defined in header.misc.js file in /themes/your-theme-name/framework/js folder, but you can change the following values by adding them to Custom JS field in Appearance >Customize >General Settings panel.

First value is:

window.btStickyOffset = 300;

The number defines after how many pixels the sticky header appears (when scrolling down).

Second value is:

window.btStickyOpenTimeout = 50;

This value defines number of milliseconds it takes for sticky to show up (previous value 'stickyOffset' needs to be defined).

Note that we recommend this value to be over 50 to avoid cutting off sticky header.

Third value is:

window.btStickyCloseTimeout = 200;

This value defines number of milliseconds it takes for sticky to close and switch to standard header (when scrolling up).

Note that this value needs to be same or higher than the transition length defined with CSS.

Lastly, to define transition length, you can add the following CSS to Additional CSS field in Customize panel.

.btMenuHorizontal.btStickyHeaderActive.btStickyHeaderOpen .mainHeader {
    transition: transform 200ms ease;
}

This number defines the speed of transition when activating / deactivating sticky header.

89. How to edit Footer area on Kids Club theme?

On Appearance > Customize > Header and Footer panel there is a Footer Page Slug


This field should contain the slug of the page which serves as a template for footer area.  All pages inherit settings, elements and shortcodes of the page referenced via this field.

In order to change elements in footer, please locate the page (on all pages list) with the slug entered in Footer Page Slug field and edit it.





For more info and detailed instructions please refer to our Online Theme Documentation.



90. How to change H tag in page headline?

Title in page headline is, by default, set to use h1 tag.

In order to change the tag, you will need to customize part of the theme's code, so some familiarity with PHP is necessary.

First, install and activate the child theme. Then, to child theme's functions.php file add the following code, and edit the H tag according to your needs:

if ( ! function_exists( 'boldthemes_get_heading_html' ) ) {
    function boldthemes_get_heading_html( $superheadline, $headline, $subheadline, $headline_size, $dash, $el_class, $el_style, $header = false ) {         if ( $header ) {
            if ( MedicareTheme::$what == 'index' && MedicareTheme::$boldthemes_page_for_header_id ) {
                $page = get_post( MedicareTheme::$boldthemes_page_for_header_id );
                $headline = $page->post_title;
                $excerpt = $page->post_excerpt;
                if ( $excerpt != '' ) {
                    $subheadline = '<div class="btSubTitle">' . $excerpt . '</div>';
                }
            } else if ( MedicareTheme::$what == 'search' ) {
                $headline = esc_html__( 'Search', 'medicare' );
            } else if ( MedicareTheme::$what == 'woocommerce' && ! is_singular() && wc_get_page_id( 'shop' ) ) {
                $page = get_post( wc_get_page_id( 'shop' ) );
                $superheadline = '';
                $headline = $page->post_title;
                $excerpt = $page->post_excerpt;
                if ( $excerpt != '' ) {
                    $subheadline = '<div class="btSubTitle">' . $excerpt . '</div>';
                }
            } else if ( is_page() ) {
                $page = get_post( get_the_ID() );
                $excerpt = $page->post_excerpt;
                if ( $excerpt != '' ) {
                    $subheadline = '<div class="btSubTitle">' . $excerpt . '</div>';
                }
            }
        } else {
            if ( $superheadline != '' ) {
                $superheadline = '<div class="btSuperTitle">' . $superheadline . '</div>';
            }             if ( $subheadline != '' ) {
                $subheadline = '<div class="btSubTitle">' . $subheadline . '</div>';
            }
        }
        
        $h_tag = 'h1';
        $class = '';         $style_attr = '';
        if ( $el_style != '' ) {
            $style_attr = 'style="' . esc_attr( $el_style ) . '"';
        }         if ( $headline_size != 'no' ) {
            $class .= $headline_size;
        }
        if ( $headline_size == 'extralarge' || $headline_size == 'huge' ) {
            $h_tag = 'h1';
        } else if ( $headline_size == 'large' ) {
            $h_tag = 'h2';
        } else if ( $headline_size == 'medium' ) {
            $h_tag = 'h3';
        } else {
            $h_tag = 'h4';
        }         if ( $dash == 'yes' ) {
            $dash = 'top';
        }
        
        if( $dash != 'no' && $dash != '' ) {
            $class .= ' btDash ' . $dash . 'Dash';
        }         if ( $el_class != '' ) {
            $class .= ' ' . $el_class;
        }
        
        $output = '<header class="header btClear ' . $class . '" ' . $style_attr . '>';
        $output .= $superheadline;
        if ( $headline != '' ) {
            $pattern = "/<(strong|b|u|i)([> ])/";
            $replace = '<$1 class="animate">';
            $headline = preg_replace($pattern, $replace, $headline);
            $output .= '<div class="dash"><' . $h_tag . '><span class="headline">' . $headline . '</span></' . $h_tag . '></div>';     
        }
        $output .= $subheadline;
        $output .= '</header>';             return $output;
        
    }
}

91. Importing Demo

The best way to start is to install demo content. If you want to install demo content please do the following:

Go to ‘Tools > Import > WordPress’ and install WordPress Importer plugin if it is not already installed.


    

When it is installed, choose xml file from demo_data folder and click ‘Upload file and import’. On the following screen make sure that ‘Download and import file attachments’ is checked. Click ‘Submit’ button and wait until import is finished.

You should see imported demo calculators in Cost Calculator panel.


92. How to change the settings only on one page?

Here is how the Setting generally works:

The settings in the Appearance > Customize panel are global, meaning that they influence every page on the site by default.


On the other hand, you have an option to override these settings on per page basis. If you take a look at the bottom of the page edit form, you will notice 'Override Global Setting' part in Settings Section - here you can override global settings for every page.


So, for example, if you need to change the logo then the value should be either absolute URL of the image or image ID from Media Library. The same is with Sidebar (left, right or no sidebar) or Boxed menu (true or false) etc.

When it comes to editing the Blog Posts, Portfolio projects or Products, than please refer to the articles:

93. New YIHT 2.2.0 version broke my site - Problem is solved!

If you've updated YITH WooCommerce Wishlist plugin to the newest 2.2.0 version, it's possible that your site is broke (especially if WP_DEBUG is enabled).

In that case, please do the following:

1. Locate 237 line in yit-debug.php  (located in \wp-content\plugins\yith-woocommerce-wishlist\plugin-fw\lib folder on your server):

$plugin_fw_version   = get_file_data( trailingslashit( YIT_CORE_PLUGIN_PATH ) . 'init.php', array( 'Version' => 'Version' ) )[ 'Version' ];

2. Replace it with:

$plugin_fw_version   = get_file_data( trailingslashit( YIT_CORE_PLUGIN_PATH ) . 'init.php', array( 'Version' => 'Version' ) );

3. Save!

94. How to change H tag in page headline?

Title in page headline is, by default, set to use h2 tag.


In order to change the tag, you will need to customize part of the theme's code, so some familiarity with PHP is necessary.

First, install and activate the child theme. Then, to child theme's functions.php file add the following code, below the default code that comes with the file.

<?php
if ( ! function_exists( 'boldthemes_header_headline' ) ) {
    function boldthemes_header_headline( $arg = array() ) {
        
        
        BoldThemesFramework::$hide_headline = boldthemes_get_option( 'hide_headline' );
        
        if ( ( ! BoldThemesFramework::$hide_headline && ! is_404() ) ) {
            $extra_class = '';
            
            $dash  = '';
            $use_dash = boldthemes_get_option( 'sidebar_use_dash' );
            if ( $use_dash ) $dash  = apply_filters( 'boldthemes_header_headline_dash', 'bottom' );
            $title = is_front_page() ? get_bloginfo( 'description' ) : wp_title( '', false );
            if ( BoldThemesFramework::$page_for_header_id != '' ) {
                $feat_image = wp_get_attachment_url( get_post_thumbnail_id( BoldThemesFramework::$page_for_header_id ) );
                
                $excerpt = boldthemes_get_the_excerpt( BoldThemesFramework::$page_for_header_id );
                if ( ! $feat_image ) {
                    if ( is_singular() &&  !is_singular( "product" ) ) {
                        $feat_image = wp_get_attachment_url( get_post_thumbnail_id() );
                    } else {
                        $feat_image = false;
                    }
                }
            } else {
                if ( is_singular() ) {
                    $feat_image = wp_get_attachment_url( get_post_thumbnail_id() );
                } else {
                    $feat_image = false;
                }
                $excerpt = boldthemes_get_the_excerpt( get_the_ID() );
            }
            
            
            $parallax = isset( $arg['parallax'] ) ? $arg['parallax'] : '0.8';
            $parallax_class = 'btParallax';
            if ( wp_is_mobile() ) {
                $parallax = 0;
                $parallax_class = '';
            }
            
            $supertitle = '';
            $subtitle = $excerpt;
            
            $breadcrumbs = isset( $arg['breadcrumbs'] ) ? $arg['breadcrumbs'] : true;
            if ( $breadcrumbs ) {
                $heading_args = boldthemes_breadcrumbs( false, $title, $subtitle );
                $supertitle = $heading_args['supertitle'];
                $title = $heading_args['title'];
                $subtitle = $heading_args['subtitle'];
            }
            // yoast plugin checking
            if ( $title != '' && is_singular() ) {
                if ( class_exists( 'WPSEO_Options' ) ) {
                    $title = get_the_title();
                }
            }
            
            if ( $title != '' || $supertitle != '' || $subtitle != '' ) {
                $extra_class .= boldthemes_get_option( 'below_menu' ) ? ' topLargeSpaced' : ' topSemiSpaced';
                $extra_class .= boldthemes_get_option( 'menu_type' ) == 'hCenter' ? ' btTextCenter' : ' btTextLeft';
                $extra_class .= $feat_image ? ' wBackground cover ' . $parallax_class . ' btDarkSkin btBackgroundOverlay btSolidDarkBackground ' : ' ';
                $feat_image_style = '';
                if ( $feat_image != '' ) {
                    $feat_image_style = ' ' . 'style="background-image:url(' . esc_url_raw( $feat_image ) . ')"' . ' ';
                }
                echo '<section class="boldSection bottomSemiSpaced btPageHeadline gutter ' . esc_attr( $extra_class ) . '"' . $feat_image_style . 'data-parallax="' . esc_attr( $parallax ) . '" data-parallax-offset="0"><div class="port">';
                echo boldthemes_get_heading_html( $supertitle, $title, $subtitle, apply_filters( 'boldthemes_header_headline_size', 'extralarge' ), $dash, '', '' );
                echo '</div>';
            }
            
        }
     }
}
?>

95. How to change the Excerpt text?

All Blog Posts, and even Pages can have Excerpt text.

In order to change the ’Excerpt text’ please take a look at the bottom of edit post page. Since this field is not visible by default, just click Screen options button at top right corner of the form and check Excerpt checkbox. 

                        


This will make excerpt field visible. You will be able to edit Excerpt text.




For more info and detailed instructions please refer to our Online Theme Documentation.



96. I want to use a child theme. How can I do that?

If you want to use a child theme, please follow these steps:

  1. First of all, make sure that you haven’t changed the parent theme’s folder name. It needs to remain the same.
  2. You should be able to find the folder your_theme_name-child in the package you've downloaded from ThemeForest.
  3. Please copy this folder to /wp-content/themes folder on your server.
  4. 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.

To replace a function, copy it from the parent theme to the functions.php file in your child theme and make your modifications.

For example, if you want to change default pagination HTML output, you need to copy entire function to the child theme:

/**
 * Pagination output for post archive
 */
if ( ! function_exists( 'boldthemes_pagination' ) ) {
    function boldthemes_pagination() {
        ...
    }
}

And then replace the output according to your needs. For example

if ( ! function_exists( 'boldthemes_pagination' ) ) {
    function boldthemes_pagination() {
        echo '<div class="new-archive-pagination"></div>;
    }
}

Please note that this is an example for one function, and it might differ for other functions and changes.

You can find additional info in this article from EnvatoTuts+.

97. Google Map API Key

*Google has, starting July 16, 2018, made certain API and billing changes. In order to enable billing, you will need to provide credit card or billing account to Google Maps platform. Please note that we are in no way associated with Google Maps and their payment system and for any questions and issues regarding payments and billing you will need to contact them. Please refer to their FAQ and their documentation to learn more about these changes.

In order to be able to fully use all Bello theme's Google Map features, you will need to get an API Key, and then enable four different API services on Google Cloud.

First, please get your API key.

Then proceed to add the API key to Bold Builder Google Maps element.


Or Listing Map panel in Customizer.


And _listing_root category.


Once you have your API key, you need to enable following four services:

1. Places API - enable this API to use autocomplete search by locations in the search shortcode or main listing search - https://developers.google.com/places/web-service/intro.

2. Geocoding API - to convert the position by longitude and latitude and calculate distance from the visitor and listing location. This is the process of converting addresses (like "1600 Amphitheatre Parkway, Mountain View, CA") into geographic coordinates (like latitude 37.423021 and longitude -122.083739), which you can use to place markers on a map, or position the map - https://developers.google.com/maps/documentation/geocoding/start.

3. Maps Javascript API - To fully utilize google maps search, customization, etc. It lets you customize maps with your own content and imagery for display on web pages and mobile devices. The Maps JavaScript API features four basic map types (roadmap, satellite, hybrid, and terrain) which you can modify using layers and styles, controls and events, and various services and libraries - https://developers.google.com/maps/documentation/javascript/examples/.

4. Directions API - It's a service that calculates directions between locations - https://developers.google.com/maps/documentation/directions/start.

98. Installing Demo Content

The best way to start is to install demo content. If you want to install demo content please do the following:

1. Start with fresh WordPress installation and make sure that theme and required plugins are installed.

2. Go to ‘Tools > BT Import’ and select demo which you want to install.

3. Wait until you get message that import is finished. If you see red colored error message, go to Media Library and delete any unfinished downloads (images) and repeat the import.

99. Missing Google API key - Google Map

*Google has, starting July 16, 2018, made certain API and billing changes. In order to enable billing, you will need to provide credit card or billing account to Google Maps platform. Please note that we are in no way associated with Google Maps and their payment system and for any questions and issues regarding payments and billing you will need to contact them. Please refer to their FAQ and their documentation to learn more about these changes.

  1. First step is to get location’s longitude and latitude. This article explains how – Find or enter latitude & longitude.
  2. When the theme is updated, please Get your API key.
  3. Then locate the Google Map element in Bold Builder/Rapid Composer and enter your API key.

Bold Builder preview:

Rapid Composer preview:



For more info and detailed instructions please refer to our Online Theme Documentation.

100. How to edit Footer area?


On Appearance > Customize > Header and Footer panel there is a Footer Page Slug

This field should contain the slug of the page which serves as a template for footer area.  All pages inherits settings, elements and shortcodes of the page referenced via this field.

In order to change elements in footer, please locate the page (on all pages list) with the slug entered in Footer Page Slug field and edit it.

101. How to disable Overlay Grid Lines?

In order to disable Overlay Grid Lines, please navigate to the Appearance > Customization > General Settings and choose No Lines from the dropdown.


102. How to translate plugin?

The procedure is standard – you can find the .pot file in the plugin’s languages folder.

Please use PoEdit to translate the .pot file and create respective .po and .mo fies.

You should upload .po and .mo files created using PoEdit back to plugin’s languages folder.

Please name .po and .mo files for example: bold-timeline-nl_NL.po and bold-timeline-nl_NL.mo (nl_NL is the language code for dutch) and place them in /wp-content/plugins/bold-timeline/languages/. 

For other languages code, please refer to the following link: Internationalization.

You can set the site language of your WordPress installation on Settings > General. WordPress will automatically use the right language files if they exist.

103. How to edit Footer area?

On Appearance > Customize > Header and Footer panel there is a Footer Page Slug

This field should contain the slug of the page which serves as a template for footer area.  All pages inherits settings, elements and shortcodes of the page referenced via this field.

In order to change elements in footer, please locate the page (on all pages list) with the slug entered in Footer Page Slug field and edit it.




For more info and detailed instructions please refer to our Online Theme Documentation.

104. How to increase the size of the logo?

In order to increase size of the logo you need to add the following CSS statements to Custom CSS field of Appearance > Customize > General panel:

.menuHolder .logo img {
    height: 100px;
}
.topBarInLogoAreaCell {
    margin-top: 25px;
}

Please adjust the numbers according to your needs. The first number (100px) represents the height of the logo and the second (25px) represents the top margin between the header widget elements and viewport's top.

105. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapse by default, please edit showcase/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

106. Is there some way I can see all the icons of the theme?

We use Font Awesome sets of icons in the theme. Please refer to the link for preview of icon set.

107. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapse by default, please edit celebration/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

108. How to change the header and edit other Single pages of Portfolio items settings?

All single portfolio items inherit the settings from their template page. In order to edit excerpt text and header background image, please locate this page on All Pages list, and proceed to follow instructions from our article.


In order for this page to work as a template page for single portfolio items, make sure to add its slug to Settings Page Slug field in Appearance >Customize >Portfolio panel.

                                                        




For more info and detailed instructions please refer to our Online Theme Documentation.

109. Issues with Grid layout

If you have activated the theme with the existing content, you will have problems with grid layout.

Once it's activated, our theme generates necessary thumbnails for every newly uploaded image. Since these were uploaded prior to activation of the theme, thumbnails do not exist yet.

In order to correct this, please install the following plugin: Regenerate Thumbnails and run it. Once you do that, all necessary thumbnails will be regenerated and the issue should be resolved. All newly uploaded photos will be ok.


110. How to add custom icons?

Please refer to the instruction below on how to add custom icons to your theme:

1. Create icon folder (e.g. MyIcon) with required fields:

Make sure that your icon folder contains .ttf and .woff files, as well as CSS file with icons' names and glyph codes. If it doesn't have these files, you could use IcoMoon to generate the files.


2. Create PHP file for your icons:

The PHP file should be named as the icons (for example, MyIcon). As an example of how the PHP file should look, you can use one of the existing fonts and copy their files' content, and replace it with your glyph codes.


Or, you can use the following example, and just replace the glyph codes (numbers: f100, f101, f102 etc.) with the ones from your icon set. 

<?php
$set = strtolower( basename(__FILE__, '.php') );
$$set = array(
     'icon-01 (myicon set)' => $set . '_f100',
     'icon-02 (myicon set)' => $set . '_f101',
     'icon-03 (myicon set)' => $set . '_f102',
     'icon-04 (myicon set)' => $set . '_f103',
     'icon-05 (myicon set)' => $set . '_f104'
);

The glyph codes are defined in style.css file (located in downloaded file from e.g. IcoMoon). Here is the example:

.icon-01:before {
  content: "\f100";
}
.icon-02:before {
  content: "\f101";
}
.icon-03:before {
  content: "\f102";
}
.icon-04:before {
  content: "\f103";
}
.icon-05:before {
  content: "\f104";
}

3. Upload icon folder:

Once you have the files, please go to \wp-content\themes\your-theme-name\fonts folder, on your server, and create a new folder, in the fonts folder, and name it as you named your icons (MyIcon).
The new fonts folder should contain .ttf and .woff files, and php file.


4. Edit theme files - Step 01:

In admin-style.php file, in \wp-content\themes\your-theme-name folder, remove the following line of code, which is located at the end:

', array() );

and replace it with the following code.

@font-face{
    font-family:"MyIcon";
    src:url("' . get_parent_theme_file_uri( 'fonts/MyIcon/MyIcon.woff' ) . '") format("woff") , url("' . get_parent_theme_file_uri( 'fonts/MyIcon/MyIcon.ttf' ) . '") format("truetype");
}
*[data-ico-myicon]:before {
    font-family: MyIcon;
    content:attr(data-ico-myicon);
}
.bt_bb_icon_preview.bt_bb_icon_preview_myicon {
    font-family: MyIcon;
}', array() );

Replace every occurrence of 'MyIcon' / 'myicon' with the name of your icons (if you didn't name them MyIcon).


5. Edit theme files - Step 02:

In icons.php file in \wp-content\themes\your-theme-name folder, remove the following line of code, which is located at the end:

', array() );

and replace it with the following code.

@font-face {
        font-family: "MyIcon";
        src:url("' . get_parent_theme_file_uri( 'fonts/MyIcon/MyIcon.woff' ) . '") format("woff") , url("' . get_parent_theme_file_uri( 'fonts/MyIcon/MyIcon.ttf' ) . '") format("truetype");
}
*[data-ico-myicon]:before {
        font-family: MyIcon;
        content: attr(data-ico-myicon);
}', array() );

Replace every occurrence of 'MyIcon' / 'myicon' with the name of your icons (if you didn't name them MyIcon).

111. How to edit Footer area?

On Appearance > Customize > Header and Footer panel there is a Footer Page field, and there you can see which page was selected as template page for footer.

This option enables you to have static page and use it as a footer template for all pages.  All pages inherit settings, elements and shortcodes of the page referenced via this option.

In order to change elements in footer, please locate this page (on all pages list) and edit it.

*Note that the screenshot is from Nifty theme, but the process is the same on all themes.



112. Is there some way I can see all the icons of Shopscape theme?

We use different sets of icons in Shopscape theme: Font AwesomeStroke 7 and Custom Icons: Shop1, Shop2Toys1Toys2Toys3Toys4Fashion and Shopscape.

Please refer to these links for preview of each icon set.

113. I have purchased your theme. Now what?


The best starting point is to go through the provided documentation. 

It will guide your through the common tasks of theme installation and import of demo content.  

You have 2 options for downloading your theme:


Documentation pdf is in the All files and documentation package. Please download it and the document should be in the root of the downloaded archive.



For more info and detailed instructions please refer to our Online Theme Documentation.

114. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapse by default, please edit reconstruction/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

115. How to create One page

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.

Please have a look at the following steps, how to achieve one page:

1. Insert in required shortcode section Custom ID Attribute. 

2. Then in Appearance > Menus add a new custom link and as a URL insert custom ID atribute with #.

116. Embed code I have placed using text element is being cut off. It does not have the proper height. How can I resolve this?

It may happen that iframe created by your embed code gets cut off.

Please do the following to resolve this:
1. Define Custom Id for the section containing embed code (for example: section_1)


2. Add the following statements to Custom CSS field of Appearance > Customize > General panel 

#section_1 iframe {
    height: 150px !important;
}

Adjust the height according to your needs.

117. Will I loose content when updating the plugin?

With new plugin update you will not loose any content, but it will affect and overwrite any changes in the bt_cost_calculator.php code that you've made. The best way is to manually repeat modifications with new update.

118. How to create mega menu?

In order to create mega menu please navigate to Appearance >Menus and enable CSS Classes in Screen Options, on top of your dashboard.

8687606578.jpg

Then add the btMenuWideDropdown class to the parent menu item (the first item you want in your mega menu).

In order for mega menu to display correctly top menu item needs to have sub menu items, and those sub menu items need to have their child items.


2635579197.jpg

The example is from our Medicare theme, but the steps are the same for all themes.

*Note that frontend display may vary depending on the theme you are using.

119. "404 Page not found" error on inner pages

If after installing demo content inner pages are returning "404 Page not found" error, please try to recreate permalink structure by going to Settings > Permalinks, changing it to Post name, for example, saving the settings, then changing it back to the one you originally had, and saving it again.

120. Is there some way I can see all the icons of Medicare theme?

We use three different sets of icons in Medicare theme: Font AwesomeStroke 7 and Custom Icons

Please refer to these links for preview of each icon set.

121. My articles are not visible on homepage

If you added your posts and categories, but they are not visible on homepage, it is possible that sections on homepage still have default categories that come with demo.

In order to change them, navigate to page editor and in Edit Section panel, tab Posts, add your desired categories (if the fields are left empty, section will display posts from all categories).


Note that Article Container element also has category filters that you need to adjust to show your posts and categories.


122. How to make a page load with accordion items closed by default

In order to make a page load with accordions collapse by default, please edit cargo/bt_elements.js file in your wp-content/plugins folder and locate the following statements:

$( '.tabsVertical' ).each(function(){
 $( this ).find( '.tabAccordionTitle' ).first().click();
 });

Remove these statements from file or comment them out and your accordions will remain closed on page load.

123. Installing Demo Content

The best way to start is to install demo content. If you want to install demo content please do the following:

1. Start with fresh WordPress installation and make sure that theme and required plugins are installed.

2. Go to ‘Tools > BT Import’ and select demo which you want to install.

3. Wait until you get message that import is finished. If you see red colored error message, go to Media Library and delete any unfinished downloads (images) and repeat the import.

124. How to edit Footer area?


On Appearance > Customize > Header and Footer panel there is a Footer Page Slug

This field should contain the slug of the page which serves as a template for footer area.  All pages inherits settings, elements and shortcodes of the page referenced via this field.

In order to change elements in footer, please locate the page (on all pages list) with the slug entered in Footer Page Slug field and edit it.




For more info and detailed instructions please refer to our Online Theme Documentation.

125. Cost Calculator & Bold Timeline - purchase code

Please note that our two premium plugins, Cost Calculator and Bold Timeline, come bundled with the theme and therefor don't have separate purchase codes.

Although newer versions of the two plugins have product license panel for entering purchase code, this will only work when they are purchased separately, not when they come bundled with the theme.

Note that you are not required to purchase them separately if you are using one of our themes, and you shouldn't enter theme's purchase code.

The only purpose of the product license is to allow people to update plugins through wp-admin panel, but since you got them together with the theme you will get the necessary updates with new theme versions.

You can find more information on bundled plugins on the following link.

126. How to set Event week view?

Kids Club and Fitness Club themes use Events Calendar third party plugin for events list appearance.

From versions 1.0.4 - Kids Club and Fitness Club themes include Events week view element on Bold Builder page editor which contains several settings (Date, Number of events, week day format etc.) in order to illustrate week view.



For more info and detailed instructions please refer to our Online Theme Documentation.

127. How to add custom icon font

In order to add new icon font, you need to customize the theme. Please do the following steps:

1. First of all you need to import your font file. 

2. Please take a look at the top of style.crush.css file and you will find @font-face declaration. You need to import your own font files in the same manner as FontAwesome and the rest and declare the font-family as 'myFont' or something similar.

3. Then you need to search for all 'data-ico-fa' in the style.crush.css file and create respective statements for your font. For example when you locate

*[data-ico-fa]:before {
    font-family: FontAwesome;
    content: attr(data-ico-fa);
    }

you need to create 

 *[data-ico-mf]:before {
    font-family: myFont;
    content: attr(data-ico-mf);
    }

etc.

4. Then, you need to create new file in celebration plugin folder called bt_mf_icons.php by copying the file bt_fa_icons.php and changing it by mapping you glyph codes:

function bt_mf_icons(){
 $arr = array(
     '  ' => 'no_icon', 
     'myname1' => 'mf_' . 'xxxx',
     'myname2' => 'mf_' . 'xxxx',,
etc...

5. Finally, you need to edit celebration.php in your plugin's folder, search for bt_fa_icons() and add respective statements for bt_mf_icons() as well. For example to change all occurrences of 

$icon_arr = array_merge( bt_fa_icons(), bt_s7_icons(), bt_custom_icons() );

to

$icon_arr = array_merge( bt_fa_icons(), bt_mf_icons(), bt_s7_icons(), bt_custom_icons() );

128. How to update a plugin?

There are two ways to update Bold Timeline plugin - through wp-admin or through FTP.

Since plugin version 1.0.3 it is possible to update plugin through your dashboard, in Updates panel. In order to be able to do this, you will need to register your purchase code.

You can register your purchase code in Bold Timeline >Product License panel, on your dashboard.

Other option to update Bold Timeline to the latest version is to download the plugin folder from the download section of your CodeCanyon profile and update through FTP. We suggest that you use Filezilla to access your server. Here is the article that explains how Filezilla works.

Extract bold-timeline file from the folder you downloaded, and upload it to /wp-content/plugins/ folder of your WordPress installation. You will be prompted to overwrite the existing files. Select ‘Yes’, and the plugin will update.

If you have made some changes in the plugin’s code, you will need to reapply the changes in the new version.

Timelines that were made before update will be preserved.

129. RTL Support

In order to ensure that the theme you purchased / want to purchase is RTL supported, you can check on our themes' profiles on ThemeForest.

These themes have CSS defined for RTL layout, so when you change site's language in Settings >General on your dashboard (or via language switch if you have multilingual site), the RTL layout will automatically apply to certain elements.

However!

Some elements in Bold Builder that have alignment option (such as Icons, Images, Columns, etc...) will need to be rearranged manually to fit the RTL layout.


Additionally, two of our themes, Medicare and Industrial, come with full, premade RTL demos.

130. How can I change total format’s display?

Since version 2.1.6. total format can be changed in Cost Calculator Settings panel.

131. How to install Hero Products plugin

There are two methods of installing a plugin onto your WordPress site. You can use the WordPress Admin panel to upload and install the plugin, or you can use FTP software instead.

WordPress Plugin Installation

To install the plugin directly from the WordPress admin panel, please first log-in to your wp-admin console.

  1. Navigate to Plugins > Add New,
  2. Click Upload Plugin,
  3. Click Choose File.
  4. If you want to upload in admin panel, you need to extract plugin folder (hero-products folder), from downloaded hero-products.zip file and pack it again as zip and then upload that zip.
  5. Click Install Now and the installation will begin.
  6. Once the installation is complete, go to Plugins screen and look for the newly uploaded Hero  Products in the list.
  7. Click Activate to activate it.

FTP Installation

To install the plugin using FTP software, log in to the server where your WordPress website is hosted. First extract hero-products folder from downloaded hero-products.zip file.

Now connect to your server via FTP and navigate to the wp-content/plugins folder in your WordPress directory online. Upload hero-products folder to the plugins’ folder on your remote server.

Once the plugin is uploaded, you need to activate it. Go to ‘Plugins > Installed Plugins’, find Hero Products and click ‘Activate’ button.

132. Can I redirect users to another page after submitting message?

Since Cost Calculator Version 1.2.1, Cost Calculator Settings contain the field for URL that you want your users to be redirected to.

In order to redirect users to another page after submitting the form, add the URL to ‘Optional URL for confirmation’ field.




133. AI Feature

Starting with Bold Builder version 4.7.0 it is possible to use OpenAI API to generate content for specific elements.

This feature is available on themes starting from Law Firm to newer ones.

The elements that can be edited using AI Generator are Headline, Service, and Text.

For more detailed explanation on how AI Generator works and how to use it on our themes, please refer to our online documentation - https://documentation.bold-themes.com/bold-builder/ai-features/.



*Please note that on some themes Headline and / or Service elements cannot be edited with AI Generator at the moment. This feature will be then added in future theme updates. 

134. How do I get 1.000 format for the total value?

In order to change format of total value, you'll need to modify plugin’s code.

Please locate line 544 in cc.main.js in plugin’s folder. It should have the following code:

total = total.toFixed( decimals );

Replace the noted line with the following statement:

total = Math.round(total);
        total = total.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");

Make sure to clear cache after making the changes.

135. How to add new Font icons?

In order to add new Font icons, you should customize the theme. Please do the following steps:

1. First of all you need to import your font file. You will need to import .eot, .svg, .ttf, and .woff files of your font, and name them the same. For example 'myFont'. Files need to be added to \wp-content\themes\your-theme-name\fonts folder.

2. Please take a look at the top of style.crush.css (or style.css) file and you will find @font-face declaration. You need to import your own font files in the same manner as FontAwesome for example, and declare the font-family as 'myFont' or any name you used for your font (*note that it has to be the same name you used for files).


3. Then you need to search for 'data-ico-fa' in the style.crush.css (or style.css) file and create respective statements for your font. 


For example when you locate:

*[data-ico-fa]:before {
    font-family: FontAwesome;
    content: attr(data-ico-fa);
    }

you need to create:

*[data-ico-mf]:before {
    font-family: myFont;
    content: attr(data-ico-mf);
    }

etc.

*Please note that mf stands for the name of the font (in our example myFont), so if you named your font differently, you need to use acronym that matches your font's name. This refers to all the code that is added for new icons, as well as file names.

4. Then, you need to create new file in theme plugin's folder called bt_mf_icons.php. The file should be added to \wp-content\plugins\your-theme-name folder.


As an example of how the PHP file should look, you can use one of the existing fonts (bt_fa_icons.php) and copy their files' content, and replace it with your glyph codes.

Or, you can use the following example, and just replace the glyph codes (numbers: f100, f101, f102 etc.) with the ones from your icon set. 

function bt_mf_icons(){
 $arr = array(
     '  ' => 'no_icon', 
     'icon-01' => 'mf_' . '_f100',
     'icon-02' => 'mf_' . '_f101',
     'icon-03' => 'mf_' . '_f102',
     'icon-04' => 'mf_' . '_f103',
     'icon-05' => 'mf_' . '_f104',
);

The glyph codes are defined in style.css file of your font. Here is the example:

<?php
$set = strtolower( basename(__FILE__, '.php') );
$$set = array(
    'icon-01:before {
  content: "\f100";
}
    'icon-02:before {
  content: "\f101";
}
    'icon-03:before {
  content: "\f102";
}
    'icon-04:before {
  content: "\f103";
}
    'icon-05:before {
  content: "\f104";
}------>


5. Finally, you need to edit php file in your plugin's folder, search for bt_fa_icons() and add respective statements for bt_mf_icons() as well. The file is in \wp-content\plugins\your-theme-name folder (it is the file named as the theme).

*The example is from our Industrial theme but the process is the same for all themes.

For example to change all occurrences of:

$icon_arr = array_merge( bt_fa_icons(), bt_s7_icons(), bt_custom_icons() );

to:

$icon_arr = array_merge( bt_fa_icons(), bt_mf_icons(), bt_s7_icons(), bt_custom_icons() );