109. Switching to legacy WooCommerce cart and checkout layouts
1. The package could not be installed. The theme is missing the style.css stylesheet
A common issue that can occur with users new to installing WordPress
themes is a "Broken theme and/or stylesheets missing� error message
being displayed when trying to upload or activate the theme. This error
message does not mean that the theme you have purchased is broken, it
simply means it has been uploaded incorrectly. Luckily, there is a very easy fix. Please follow the steps below to rectify this issue or watch the screencast.
After you’ve downloaded the main theme archive from ThemeForest you’ll see the following items inside:
salient.zip The actual files that you will need to upload into your WordPress setup
Licensing (folder) Contains the general item license.
There are two main ways in which you can install Salient into your WordPress setup.
1. Through the WordPress admin dashboard
2. Uploading through FTP (file transfer protocol)
Method #1
Using The WordPress Dashboard
Step 1. Head over to Appearance > Themes in your WordPress dashboard
Step 2. Click Install Themes followed by the Upload button
Step 3. Locate the salient.zip file you extracted from the ThemeForest download archive and click the Install Now button
Step 4. Once you’ve installed the theme you will be greeted with a welcome page, as shown on the right. It will list all the available Salient plugins you can install, only two of which are required. The required plugins are the Salient WPBakery Page Builder and the Salient Core. If you already have another version of the WPBakery page builder active, deactivate it first. The other plugins Salient offers in the install plugins section are optional. You can read more about each one in the plugin installation section of the documentation.
Step 5. You’re now ready to use Salient, begin importing demos if you wish or you start configuring the theme options and creating content!
Troubleshooting Possible Errors
If you encounter the message “Are you sure you want to do this? Please try again.” or “The link you followed has expired” when attempting to install, this is most likely occurring because your server has a low maximum file size upload/low maximum execution time set in the PHP settings. You must increase the following PHP settings to be greater than 29M (Any reputable hosting company will assist you with this quickly & hassle free):
upload_max_filesize – greater than 29M
post_max_size – greater than 29M
max_execution_time – greater than 100
or you can upload the theme through FTP instead to bypass this all together.
Method #2
Uploading through FTP
Step 1. Uncompress the salient.zip file from your ThemeForest download onto your computer
Step 2. upload the extracted salient folder to /wp-content/themes/ on your server
Follow steps 4 and 5 from the Using The WordPress Admin Dashboard from above
2. Theme Installation Errors
The Salient theme should install without any errors, although on some occasions people encounter errors so here are the most common errors and the solutions:
The package could not be installed. The theme is missing the style.css stylesheet.
One of the most common reasons people have issues is because they try uploading the Full zip that includes sample data, documentation…etc which displays the “The package could not be installed. The theme is missing the style.css stylesheet.” error. Please make sure you are uploading only the installable theme which is called Salient.zip. When you download the theme from your ThemeForest downloads it will give you 2 choices one is to download the full zip which you will need to extract to locate the theme and the other one is just the installable theme. Please pay close attention to this.
Are you sure you want to do this?
This error typically happens for one of two reasons:
b. You are trying to upload the Full zip file and not just the installable theme (please refer to the guide on installing your theme).
c. The upload limit on your server isn’t large enough and you must update your PHP.INI file to increase the upload_max_filesize value or contact your webhost to fix it.
White Screen Of Death or PHP Error Notice
A “white screen of death” happens when there is a PHP error on the site but WP_Debug isn’t enabled on the server. So the first thing to do would be to enable WP_Debug so you can read what the actual error is and thus fix the problem.
This usually happens when your WordPress installation isn’t up to date (always keep WordPress up to date) or when a 3rd party plugin is creating a conflict. I would recommend always disabling all plugins and updating WordPress before switching to a new theme.
3. 4 | Installing and Updating Salient Visual Composer (Bundled with Theme)
Please Note that Salient VC 4.7.4 ++ requires PHP 5.4 or higher to be running on your server. Please contact your hosting provider to ensure your php version is latest.
After that Install/update from the Appearance -> Install Plugins Menu as can be seen below .
B) Without Theme Update ( only Salient version 5.5 or higher) .
Go to your Downloads page in your ThemeForest profile.
Locate the Download button next to Salient and click it. Upon clicking the Download button, a dropdown should appear.
Select Installable WordPress file only from the dropdown to begin downloading a .zip file of Salient itself.
Once you have downloaded this .zip file to your computer, uncompress it by double-clicking on it. This will reveal an unzipped version of the Salient theme.
Inside the Salient Theme Folder there is a /plugins folder which contains the js_composer_salient.zip, uncompress it by double-clicking on it. This will reveal an unzipped version of the Salient Visual Composer Plugin .
Connect to your server via FTP and navigate to your /wp-content/plugins/js_composer_salient directory.
Drag and drop the uncompressed version of Salient Visual Composer into this directory and ensure that all old files are overwritten.
4. 1 | Troubleshooting the Salient Theme (Website not working correctly)
Please be sure to follow each step precisely and if the issue still exist add/create your WP login details as well as FTP details in the comments.
Also be sure to let us know the specific page url where the issue can be found and how we would be able to recreate it.
Please follow these steps to Troubleshoot your Theme :
1: Make sure your Wordpress Installation is updated to the latest version . See: How To Update .
Also See ChangeLog to Find Out the Latest Version of the Theme and Details about Bug Fixes.
3: Make sure you have the Latest Version of Visual Composer . If you just updated your theme you will need to delete and install the bundled Visual Composer plugin again as it has new code in it.
4: Switch to the Parent Salient Theme if you are using a Child Theme . A Working Child theme is Provided in the Download Package available at Themeforest Download Section .
5: If you are using Third Party Plugins other then the ones recommended by Salient its possible the issue is due to a CSS or JS Plugin File conflicting with the Theme Files. 7/10 times the issue is due to a Plugin .
You can simply Deactivate all of them and Activate One at a Time and Check if the issue occurs with that plugin active . Same with other plugins .
If a conflict is found please contact the Plugin Developer as we cannot help resolve conflicts with 3rd party plugins as per Themeforest Guidelines.
However if it is a popular plugin let us know the details so we can look into adding support for it in future Theme Updates .
6: Caching and Minification :
Simply Deactivating the Plugin will not clear the plugin cache . Be sure to turn off all Caching and Minification in the Plugin Settings Page.
We Recommend using Better WP Minify for Minification and W3Total Cache for caching .
Please be sure to follow each step precisely and if the issue still exist add/create your WP login details as well as FTP details in the comments.
Also be sure to let us know the specific page url where the issue can be found and how we would be able to recreate it.
Updating plugins works in a similar fashion, but each one is a little different. We have provided detailed instructions below on how you can ensure that all of your plugins are always up to date. This is very important as it will not only give you access to the latest features provided by each plugin, but it will also keep your site secure from potential threats.
Visual Composer
When an update for Visual Composer is available, Salient will display a prompt in the dashboard requesting that you update to the latest version. This will replace the existing versions with the ones bundled with your current version of Salient. If you don’t see an update that should be available, you may need to update Salient Theme itself. Please see Details VC update guide: https://themenectar.ticksy.com/article/5182/
Contact Form 7
Since these plugins are managed via the WordPress Plugin Repository you will be notified when an update is available, which you can download and install whenever you choose. WordPress will handle the update process for these plugins.
6. How to update theme Manually via FTP
Please follow these steps to upload the theme folder manually via ftp:
Download the latest theme zip from the Downloads Section on Themeforest
Extract the latest theme zip on your local computer
Connect to your server via FTP (see tutorial on FTP)
Go to "wp-content > themes" folder
Before you replace any files or folder on your server, we recommend to download a copy of the current theme folder to your local drive for backup
The section covers the steps in creating a .po file that contains the set of translated strings. If you’re already fimilar with creating a .po file, skip to the Recommended Toolssection.
Setting The WordPress installation language
Head over to the WordPress admin panel > Settings > General tab and ensure that your desired language is selected from the “Site Language” dropdown. This step is essential for ensuring the correct language file you’ll be creating gets called on your site.
Location of Theme Language Files
By default, Salient will load language files from the lang directory, which is located in the root of the theme folder. Once you’ve created your .po/.mo files for your desired language code, you can store them in this directory.
If you’d like to keep your .po/.mo files in a child theme to ensure they don’t get removed during theme updates, you can create a directory called “lang” within your Salient child theme and keep them there instead. When going this route, you’ll also need to add the following snippet into your Salient child theme functions.php file:
Salient includes three files in the lang directory to assist with translation.
default.po/default.mo – language files with no assigned language that can be opened in a program/through a plugin of your choosing to quickly start editing the strings. Once the translations have been made, simply rename both files to the WordPress locale you’re using. For example French would named “fr_FR.po” and “fr_FR.mo”. You can find a complete list of locale codes here.
nectar_salient_strings.pot – This is the main template file that can be used to generate new po/mo files. It has all the translation strings left empty. When you use one of the recommended tools for translating listed below, you can use this file to automatically create the .po/.mo files in your chosen locale so you don’t need to manually name them or find out what your locale code is.
Recommended Tools
WPML
WPML makes it easy to build multilingual sites and run them. It’s powerful enough for corporate sites, yet simple for blogs.
Translate pages, posts, custom types, taxonomy, menus and theme’s texts.
WPML comes with state-of-the-art translation management. You can turn ordinary WordPress users into Translators. Translators can access only specific translation jobs which Editors assign to them.
WPML frees you from the hassle of editing PO files and uploading MO files. You can translate texts in other plugins and in Admin screens directly from the String Translation interface.
The WPML team has written a comprehensive guide on integration with Salient. If you’re new to the plugin, or stuck on something we recommend giving it a read through.
If you’re looking for extra assistance with for your site solution or are in need of developing customized components – WPML also has a list of official contractors.
Poedit is a program you can download for free to translate outside of WordPress. Because of this, it’s slightly more labor intensive than one of the WP plugins above, but still a great option. Poedit is intentionally spartan so that the focus is on the translation you’re working on. Just you and the translation, no distractions.
Updating the Salient Theme is incredibly simple and as long as you’ve made all of your changes to your site using a child theme, you won’t have to worry about anything being overwritten.
Go to Plugins -> Add New Menu in WP Backend Dashboard and Install "Easy Theme and Plugins Update" Plugin . See screenshot:
2. Go to Appearance -> Themes and Press the "Add New" Button . See screenshot:
3. A. Press the Upload Theme button and Then Choose "Yes" in the Upgrade existing theme? Dropdown menu box.
3. B. Choose the Latest Theme version zip that you have downloaded from the Themeforest Download Section .
Go to your Downloads page in your ThemeForest profile.
Locate the Download button next to Salient and click it. Upon clicking the Download button, a dropdown should appear.
Select Installable WordPress file only from the dropdown to begin downloading a .zip file of Salient itself.
3. C. Press the Install Now button after having selected the Salient Theme .zip File . Be sure to Select "Yes" in the Upgrade existing theme? Dropdown menu box.
Some servers (shared hosting planes usually) have a very low limit to PHP by default which can cause a blank screen (white screen of death) or an error on your site. Luckily increasing the memory limit to PHP is very simple and can be done with a small tweak in your wp-config.php file.
Have a look below at how to increase your memory limit or read the documentation on the WordPress CODEX.
Increasing the Memory Limit
Open your wp-config.php file via FTP and add the following code right before it says “That’s all, stop editing! Happy blogging”:
define( 'WP_MEMORY_LIMIT', '128M' );
You can alter the 128MB to the value you want. I personally use 256MB on my localhost but 128MB should work pretty well for most live sites.
Note: Altering your wp-config.php file may not work if your host does not allow for increasing the PHP memory limit. If that is the case, please contact your host to increase the PHP memory limit for you.
Godaddy Users
Some of the Godaddy services actually include a setting in the c panel to alter the memory limit and editing the wp-config.php file won’t do anything so please make sure to check your admin panel first.
13. Missing "Read More" button in Ascend Skinâ€
The ascend skin actually hides that on purpose for a different look - if you want it back in add this into the custom css box located in your Salient Options panel:
html .ascend #search-results .result span.bottom-line, html .ascend .masonry-blog-item span.bottom-line, html .ascend .masonry-blog-item .more-link {
display: block!important;
}
14. Increase Nectar Love value manually
Add this code to function.php press save button . Once updated remove the code:
15. Move Secondary Menu Social Media Icons to Left
Add this into the Custom CSS box located in your Salient Options panel :
@media only screen and (min-width:1000px){
body #header-secondary-outer #social {
float: right !important;
}
16. Change color of Nectar Slider Heading and sub heading
Add this into the Custom CSS box located in your Salient Options panel Or on the Visual Composer Css button so the css shows on that page only:
/* Heading for all slides*/
body .swiper-slide .content h2 {
color: #ff0 !important;
}
/* Sub heading for all slides*/
body .swiper-slide .content p {
color: #ff0 !important;
}
/* Heading for first slide */
body .swiper-slide:nth-child(1) .content h2 {
color: #ff0 !important;
}
/* Sub heading for first slide */
body .swiper-slide:nth-child(1) .content p {
color: #ff0 !important;
}
/* Heading for nth slide */
body .swiper-slide:nth-child(n) .content h2 {
color: #ff0 !important;
}
/* Sub heading for nth slide */
body .swiper-slide:nth-child(n) .content p {
color: #ff0 !important;
}
17. Make init.js changes in Child Theme .
Please see ticket: http://themenectar.ticksy.com/ticket/136919/
18. “Lightbox to open an embed file”
You'd need to do an inline content lightbox by adding an id onto your div like this (just add this on the same page as your link in the text editor)
28. Move Third level menu to left instead of right
Add this into the Custom CSS box located in your Salient Options panel:
body .sf-menu li li ul {
left: -16em!important;
}
body .icon-angle-right:before{content:"\f104" !important;}
29. Map marker icon not showing
No Additional plugin is needed. Please make sure you've activated location #1 and entered your lat/lng for that as well - just adding a lat/lng to the map center point won't add a marker.
30. Changing content in portfolio thumbnail hover
Try making the edit in the shortcode-processing.php file located in the nectar/tinymce directory. Just run a search for "//Portfolio" to end up at the right place :)
Q: I have a few portfolio categories and I would like to order them in the horizontal menu in a specific order rather than using the default alphabetical attributes.
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
#mobile-menu ul >li > ul.sub-menu> li.menu-item-has-children> a { display: none; } #mobile-menu ul >li > ul> li> a ~ul { display: inline-block !important; }
Cheers
40. Adjust Nectar Slider Text with CSS
Using the Extra Class Field in the Nectar Slider "Edit Slide" Page you can target individual slides :
Use the extra class name selector to target individual slides.
body #ajax-content-wrap .nectar-slider-wrap .swiper-slide.home_slider .content h2 { }
Add this into the Custom CSS box located in your Salient Options panel and adjust values accordingly:
@media only screen and (max-width : 1000px) {
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content h2 {
font-size: 24px!important;
line-height: 51px!important;
margin-bottom: 6px;
letter-spacing: -0.5px;
}
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p span {
font-size: 15px!important;
line-height: 20px!important;
padding-bottom: 7px;
}
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p {
font-size: 15px!important;
line-height: 20px!important;
padding-bottom: 7px;
}
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .button a {
font-size: 15px!important;
padding: 2px 7px !important;
}
body #ajax-content-wrap .nectar-slider-wrap .swiper-slide .content {
margin-top: 10px !important;
top: 30px !important;
}
}
/* For Mobile*/
@media only screen and (max-width : 690px) {
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content h2 {
font-size: 24px!important;
line-height: 51px!important;
margin-bottom: 6px;
letter-spacing: -0.5px;
}
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p span {
font-size: 15px!important;
line-height: 20px!important;
padding-bottom: 7px;
}
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .content p {
font-size: 15px!important;
line-height: 20px!important;
padding-bottom: 7px;
}
body #ajax-content-wrap .nectar-slider-wrap div.swiper-slide .button a {
font-size: 15px!important;
padding: 2px 7px !important;
}
body #ajax-content-wrap .nectar-slider-wrap .swiper-slide .content {
margin-top: 10px !important;
top: 30px !important;
}
}
41. Change the numbers of columns in the recent projects slider from 3 to 6 items
Open up the init.js file and change this:
$('.carousel:not(".clients")').each(function(){
var $that = $(this);
var maxCols = ($(this).parents('.carousel-wrap').attr('data-full-width') == 'true') ? 'auto' : 3 ;
to this:
$('.carousel:not(".clients")').each(function(){
var $that = $(this);
var maxCols = ($(this).parents('.carousel-wrap').attr('data-full-width') == 'true') ? 'auto' : 6 ;
42. Parallax Bug on Chrome and (bit older version of) Firefox”
What you're seeing is a browser level bug that exists in webkit. If you check a current Firefox version or IE10 you'll notice what you've created works fine. Essentially you can't have a parallax nectar slider close to a parallax full width section. You can have as many parallax full width sections touching as you want, but the Nectar Slider uses a different method for animation (css3 based) and that causes glitches when in view of the old way the other sections use. The solution is either to simply get more distance between the two so that by the time you scroll to your parallax fullwidth section, the Nectar Slider is out of view or to disable the parallax on one of the two sections.
Thanks
43. Add Phone-Number/Email in secondary menu with icon
Please add the span html inside the secondary menu text as :
Add this into the Custom CSS box located in your Salient Options panel :
/* hide title and date */
body .portfolio-items .col .work-info .vert-center {
display: none;
}
/* hide title only */
body .portfolio-items .col .work-item.style-3 h3 {
display: none;
}
/* hide date only*/
body .portfolio-items .col .work-info .vert-center p {
display: none;
}<p>Cheers</p>
Add this into the Custom CSS box located in your Salient Options panel:
.sf-menu ul {
top: 50px!important;
}
.small-nav .sf-menu ul {
top: 45px!important;
}
52. Advancing nectar slide at end of video [Hack]
The following code is outputted below the slider in a raw JS block:
Hope this helps someone!
53. Removing Author, Date, Tags, and Comments on Blog Titles
/* For Blog page */
body .meta-author {
display: none !important;
}
body .meta-category {
display: none !important;
}
body .meta-comment-count {
display: none !important;
}
/* For Blog Single Pages */
body #single-below-header {
display: none !important;
}
/* hide date and love on masonry blog */
body #post-area.masonry article.post .post-meta {
display: none!important;
}
article.post .content-inner {
border-bottom: none;
}
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* add the text as a pseudo css element */
.slide-out-widget-area-toggle:not(.slide-out-hover-icon-effect) a span:after{
content: "MENU";
font-size: 25px !important;
position: relative;
left: -81px !important;
text-decoration: none;
transition: color 0.2s linear;
-moz-transition: color 0.2s linear;
-webkit-transition: color 0.2s linear;
top: 1px !important;
opacity: 0.75;
}
/* adjust for Mobile/Tablet devices */
@media only screen and (max-width: 1000px) and (min-width: 1px) {
.slide-out-widget-area-toggle a span:after {
font-size: 15px !important;
left: -51px !important;
top: -6px !important;
}
}
/* increase width of icon to house the extra text */
header#top nav ul .slide-out-widget-area-toggle a {
margin-left: 65px !important;
}
/* Adjust colors for light and Dark header if Permanent transparent selected */
.midnightHeader.light .slide-out-widget-area-toggle a span:after {
color: #fff;
}
.midnightHeader.dark .slide-out-widget-area-toggle a span:after {
color: #333;
}
/* color and opacity when header is resized */
.small-nav .slide-out-widget-area-toggle a span:after {
color: #999 !important;
opacity: 1 !important;
}
.small-nav .slide-out-widget-area-toggle a:hover span:after {
color: #2ac4ea !important;
}
Best.
59. Corporate Demo - Contact Form
A common question that’s asked about some of the demo contact form setups is how to make some of the fields display in columns. For this, you need to use actual HTML columns. Below you will find an example snippet you can copy/paste and modify as needed into the Contact Form 7 form creation editor. If you don’t already have that plugin installed, make sure to read over the Installing Plugins chapter.
62. Visual Composer template is reordering elements
Hey Guys,
When we add a new portfolio item, we start by enabling "Full Width Portfolio Item Layout" and checkoff "Hide Featured Image/Video on Single Project Page?" under "Project Configuration".
Now if we load in the template it orders the elements backwards in the Visual Composer.
The reason why, is that we didn't choose the "Page Builder" on the blue button in top.
But should the Visual Composer panel be visible before we select the "Page Builder"?
On the attached screenshot you can see how the Visual Composer is visible before selecting the "Page Builder".
Best.
63. Change hamburger icon to envelope mail icon in main menu .
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
Below are the Steps to Install Loco Translate Plugin to change or edit Theme Texts Like "View Larger" Button Text in Portfolio as well as "Read More" in Blog etc .
1: Install Loco Translate Plugin from the Dashboard .
Plugins -> Add New .
Search for Loco Translate .
Install and Activate Plugin
2: After Activating the Plugin ,
Goto Loco Translate -> Manage Translations .
Click on "New Language" Link .
Choose the desired Language from the Dropdown Menu .
Press "Start Translating" Button .
Search For the String Text you want to Translate by choosing the Text from the List.
Also add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
#copyright.span_5{
width: 100%!important;
}
Best.
66. Clear Cache
Clear Your WordPress Site Cache
WordPress is fairly database intensive so it’s highly recommended to host your WordPress site with a webhost that provides built-in caching tools or to use a 3rd party Caching plugin. While caching will greatly speed up your site it can also cause some headaches when making updates and/or changes to the site. Below is a list of all the various guides explaining how to clear your site cache. Of course you should only have 1 method of caching on your WordPress site so look for the one you are using below (and if you don’t know ask your webhost or developer) then follow the instructions to clear your cache
Hosting Cache
Some of the best managed WordPress hosts include built-in caching functions and they can be cleared/flushed easily. Below are some screenshots showing how to clear the cache for these popular hosting sites, if your’s isn’t one of them you’ll need to look up directions on their hosting site.
WPEngine
The button to clear your cache in Media temple is located in it’s own admin panel at the top of the WordPress dashboard.
Site ground uses “SuperCacher” for their caching and it has it’s own admin panel so you can quickly clear all the cache as well as enable AutoFlush and Dynamic Flush.
It is useless to clear your site cache if you don’t clear your browser cache, so make sure to check out the guide below explaining how to do so.
Clearing the browser cache is extremely simple and every browser out there has a tutorial on how to clear the cache for that specific browser. Below are the links to the guides for the most popular web browsers:
Clean All Purpose Typography Section Theme Settings .
Blog Creative Typography Section Theme Settings .
Ascend Typography Section Theme Settings .
Agency Section Theme Settings .
69. limit the Search Function to Just Display Products Only.
Add this to your child theme functions.php .
function searchfilter($query) {
if ($query->is_search && !is_admin() ) {
$query->set('post_type',array('product'));
}
return $query;
}
add_filter('pre_get_posts','searchfilter');
Thanks
70. Install your Theme
Now that you have purchased this Amazing theme, it’s time to install it in WordPress!
Install Via WP Dashboard
If you have already downloaded the theme after you purchased it, Download Your Theme and then Log into your WordPress website and browse to Appearance > Themes
Then click on the option to upload theme.
Next browse for the zipped theme file you downloaded from ThemeForest (make sure you have downloaded the “Installable Wordpress File Only ” Zip as this is what you would upload, if you downloaded the "All Files & Documentation" Zip be sure to extract it and locate the theme which is salient.zip .
Install Via FTP
Your second installation option is to upload the theme via FTP. For this method first log into your site via FTP and browse to your folder located at wp-content/themes. Unzip the theme file you downloaded from Themeforest and upload only the extracted salient.zip folder to your server.
Next log into your WordPress site and navigate to Appearance > Themes to activate the Salient Theme.
71. Downloading Your Theme
Congratulations! You just purchased our Salient Responsive Multipurpose WordPress theme on ThemeForest.
Go to your Downloads page in your ThemeForest profile.
Locate the Download button next to Salient and click it. Upon clicking the Download button, a dropdown should appear.
Select Installable WordPress file only from the dropdown to begin downloading a .zip file of Salient itself.
72. Firefox Padding Top and Bottom Not Appearing on Columns
Firefox has a bug which causes the top and bottom padding to not work if the padding is using percentage values.
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
73. Importing the Theme Demos ( Make Theme Look Like Demo )
1. Importing the Demo Content on a Fresh Install
Salient Theme Version 7.x and later introduced a New One Click Demo Import Option available in Salient Theme Options Panel -> Demo Importer Section which lets you Import the Demo Content as well as that Particular Demo Theme Options Panel Settings .
First locate the theme-options.txt file in "salient\nectar\redux-framework\extensions\wbc_importer\demo-data\" folder .
Navigate to Salient > Demo Importer to begin the import process.
Open the Text File and copy the contents of it
Click on the Import from File Option and then Paste in the contents in the Field.
Press the Blue Import Button [ WARNING! This will overwrite all existing option values, please proceed with caution! ]
3. Importing the Demo Content Manually ( content.xml )
First locate the content.xml file in "salient\nectar\redux-framework\extensions\wbc_importer\demo-data\" folder .
Navigate to Tools > Import to begin the import process.
Click on the WordPress option If you haven’t already, you will be prompted to install the WordPress Importer free WordPress plugin. Just install it like you would any other plugin, and after you activate it return to this screen.
Press the Upload File and Import Button and you will get to this screen :
Choose the Appropriate Options and Press Submit .
Note: The Demo Importer works best to import on a new fresh install of WordPress. If you're not using a fresh install, make sure you backup your current theme options as they will be overwritten.
74. Adding your Google Map API Key
In order to use Google maps you need to generate an API key - please see the official documentation for more information.
Once you have the API Key you need to add in to Salient Theme Options Panel -> General Settings -> CSS/Script Related -> Google Maps API Key field
75. Activate and Save Permalinks
After installing and activating the recommended plugins for this theme, go to your Navigate to Settings> Permalink settings. This is where you can change your permalink structure. After selecting the format you would like to use, click the save button.
This step is to prevent any 404 errors on custom post type pages.
Depending on which plugins you have activated, you might see additional permalink options. For example if the WooCommerce plugin active you would see WooCommerce permalink settings .
76. Change Woocommerce Products per Page.
Add this to the Child Theme Functions.php .
add_action( 'after_setup_theme', 'change_parent_products_per_page', 10 );
function change_parent_products_per_page() {
//chnge how many products are displayed per page
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );
}
Best.
77. Home Page Setup
By default the homepage will look like a blog (this is how WordPress is intended to work). If you have imported one of the Theme Demos select the desired page or if you want a custom homepage you can create it using the salient page builder then go to Settings > Reading and you can define your homepage here.
Make sure you have created and published your homepage page prior. If you don’t have any pages or all your pages are currently drafts then you won’t be able to see the settings in the screenshot below.
78. Adding your Google Analytics Tracking Code
1. Locate your tracking code:
Your tracking code is located in Google Analytics under the “Admin” panel. Make sure you are copying the Tracking Code and NOT the user id.
2. Paste into the Custom JS code field
Next paste the code into the Custom JS code field located at Salient Theme Options Panel -> General Settings -> CSS/Script Related tab.
79. Getting Started - First Steps
Please Follow These Steps if you have just Purchased the Theme and Need help Getting Started .
Most of the errors you will see in any page speed checker including Google Page Insights have to do with the server and/or usage of the theme and not with the theme itself. Things such as compressing and resizing images is something that needs to be done by the user as well as minifying and caching are things required on the server end. You’ll need to setup your site and server correctly to archive a good score. if you notice an error coming strictly from the theme let us know so we can fix it!
Important Notice: Google PageSpeed Insights is generally acknowledged as broken and even sometimes suggesting fixes that are not needed or have already been fixed by its own PageSpeed module. We recommend instead using more reputable speed checkers such as gtmetrix or webpagetest.
81. Install Recommended Plugin
Once you have installed and activated Salient Theme you will be prompted to install recommended plugins. Just click the link to begin installing plugins.
Next, check boxes to select all the plugins you want to install, select the bulk action of install from the dropdown box and then click the button to apply. Installation can take a couple minutes depending on your host. You should see a success confirmation for each plugin as it is installed. After you have installed all the plugins, return to the plugin installer. Select the plugins you installed, and apply the bulk action to activate. You should then see a confirmation notice that you plugins were activated successfully.
Errors While Installing Recommended Plugins?
99% of errors when installing recommended plugins are due to strict server permissions not allowing the plugins to be saved in your wp-content/plugins/ folder. You’ll need to either fix up permissions on your server or you can always install the plugins manually as described below :
Manually Install Salient Visual Composer
Download the Installable WordPress file from ThemeForest .
Extract the zip file and locate the zipped js_composer_salient plugin within the plugins folder
Now install the plugin via WordPress (Plugins > Add New > Upload Plugin > browse for the salient/plugins/js_composer_salient zip file > Install & activate)
82. Center Copyright Text In Footer
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* show any Iframe added by Payment Gateway as theme has inline style that hides the iframes by default */
.woocommerce-checkout iframe {
opacity: 1 !important;
}
.woocommerce .payment_methods iframe {
opacity: 1 !important;
}
.wc-braintree-hosted-field iframe {
opacity: 1!important;
}
84. Hiding Rows on Mobile / Desktop in Visual Composer
By default, the Salient Page Builder does not allow you to hide the Rows Using the Responsive Options Tab like the VC Columns. You can however use any of these 4 classes and add them to the Row Extra Class Field to hide that row:
Note: This is just a hack and should be avoided if possible .
It works in the same way the Column VC " Responsive Options" Work :
85. Add Down Arrow in FullScreen Page Rows Option [JS hack]
Note: The Below Code is just a hack and is provided AS IS for Experienced Developers. Kindly do not ask related questions in the Support Ticket regarding its Implementation as Theme customization is not provided as Theme Support.
Add this to the Google Analytics Section in Salient Theme Options Panel -> CSS'/Script Related :
Salient Theme Uses the Select2 JS Library to Enable Fancy Select/Checkbox/Radio Styling . If for some reason the Option is conflicting with Third Party Plugins . You can turn it off in Salient Theme Options Panel - > Form Styling Tab :
Cheers
87. Transparent Header Not Showing on All Pages
To have the Header Always be Transparent you will have to Turn on the "Header Permanent Transparent" Option in Salient Theme Options Panel -> Header Navigation -> Transparency Tab:
Cheers
88. Quick Notification Bar
As of Salient 10.5 a New Option has been added :
Add this to the Google Analytics Section :
<script type='text/javascript'>
jQuery( document ).ready(function() {
jQuery('#header-outer').prepend('<div class="custom-notify">In celebration of the upcoming holiday, our offices will be closed this Friday.</div>');
});
</script>
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
If your Images are not Sized the Same and you dont want to size them Manually add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
/* Make the Masonry Blog height Uneven (Not Fixed) */
#post-area.masonry.classic_enhanced article.post.large_featured, #post-area.masonry.classic_enhanced article.post.regular .article-content-wrap, #post-area.masonry.classic_enhanced article.post.regular.format-standard.has-post-thumbnail, #post-area.masonry.classic_enhanced article.post.regular.format-video.has-post-thumbnail, #post-area.masonry.classic_enhanced article.post.regular.format-audio.has-post-thumbnail {
height: auto!important;
}
90. Header Logo Not Showing | Cant Change Demo Logo
There are Two Places where the Logos are to be Added .
1) Salient Theme Options Panel -> Header Navigation -> Logo & General Styling Tab:
If you can't get your video backgrounds to load make sure you've covered these two items before panicking:
1. Ensure that your server is capable of parsing video files. Some servers require you to add the media types supported in the .htaccess file in order for them to parse the files. Open up your .htaccess file located in the root of your WordPress install and add this in: AddType video/mp4 .mp4 AddType video/mp4 .m4v AddType video/ogg .ogv AddType video/webm .webm AddType video/webm .webmv
2. Ensure that your videos are correctly encoded for web playback. If you've added the media types to your server and are still running into difficulty, please run your videos through these converters:
In the “General Settings” tab of your W3TC plugin panel, ensure these settings are checked.
Fun fact: Enabling gzip(HTTP) compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the theme files, reduce data usage for the client, and improve the time to first render of your pages. This means that by simply telling your server to use this feature, all theme assets will be drastically reduced in size.
Browser Cache
There are many different types of caching offered in W3TC, but in this guide we’re going to focus on the simplest and the only one used on the demos: browser caching. This will allow the theme assets to be cached on your users computer after initially downloaded, to save your server from having to serve them more than once. The result significant performance increases.
If you would like a quick overview on what caching is and the various types please check this resource.
In the “Browser Cache” tab of your W3TC plugin panel, ensure these settings are checked.
Minifcation Settings
In the “Minification” tab of your W3TC plugin panel, ensure these settings are checked.
Note: If you encounter issues with your server loading or writing to the minfied files you can always deactivate the minfication features for CSS/JS assets and still keep W3 Total Cache active
Revised Post .
Dated May 20, 2020
93. Change Order of Portfolio Items or Portfolio Categories
/* Add custom mobile logo */
@media only screen and (max-width: 1000px) {
body header#top #logo img {
visibility:hidden !important;
}
body header#top #logo:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(http://yoursite.co/wp-content/uploads/2017/05/Logo.png) no-repeat;
background-size: 50px;
}
}
96. Loading Icons mind font when using shortcodes in footer
Add to Child Theme "functions.php "file :
<?php
add_action( 'wp_enqueue_scripts', 'salient_child_enqueue_styles');
function salient_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array('font-awesome'));
if ( is_rtl() )
wp_enqueue_style( 'salient-rtl', get_template_directory_uri(). '/rtl.css', array(), '1', 'screen' );
/* load iconsmind library on every page to make it accessible for footer button icon */
wp_register_style('iconsmind', get_template_directory_uri() . '/css/iconsmind.css', '', '7.6');
wp_enqueue_style('iconsmind');
}
?>
97. Add a Custom Font
Add custom fonts to the "Typography" section of the Salient Theme Options Panel
Option #1: Use a plugin
The plugin Use Any Font will allow you to upload custom fonts via a user interface and automatically add them into the Salient options panel > Typography tab as options. This approach is the easiest approach.
Option #2: Add font programmatically
If you would rather add new fonts via custom WordPress filters/font-face rules, there are several options.
Add PHP Code using Code Snippets Plugin for the Salient Theme Options -> Typography Section Fields.
function salient_redux_custom_fonts() {
return array(
'Custom Fonts' => array(
'Proxima Nova Light' => 'Proxima Nova Light',
'Proxima Nova LightIt' => 'Proxima Nova LightIt',
'Proxima Nova Regular' => 'Proxima Nova Regular',
'Proxima Nova RegularIt' => 'Proxima Nova RegularIt',
'Proxima Nova Semibold' => 'Proxima Nova Semibold',
'Proxima Nova SemiboldIt' => 'Proxima Nova SemiboldIt',
'Proxima Nova Bold' => 'Proxima Nova Bold',
'Proxima Nova BoldIt' => 'Proxima Nova BoldIt'
)
);
}
add_filter( "redux/salient_redux/field/typography/custom_fonts", "salient_redux_custom_fonts" );
Conclusion:
You should be able to now select the Custom Fonts from the Typography Section in the Salient Theme Options.
2: Add this custom css to reverse it in desktop only.
/*reverse row in desktop*/
@media only screen and (min-width: 1001px) {
.reverse-row >.col.span_12 {
flex-direction: row-reverse !important;
}
}
Thanks
99. Make Column Link Open Lightbox
Step 1: Add an Extra Class Name in the Column Setting of the Column that need to open a LIghtbox . In our Example we have added "lightbox-column" as Extra Class Name .
Step 2: Add the Javascript code in Salient Theme Options Panel -> General Settings -> CSS/Script Related Section .
The nectar slider has a few CSS classes you can add for different effects/behavior. A nifty one we created as a bonus is called "static". What it does is make it so the caption / buttons move at the same speed as the background in a parallax slider. By default it moves slightly faster, but this might always be desired if you for example are trying to make the text look like it's on an object rather than in front of it.The class to use is called "static".
Another one similar to that is called "caption-no-fade". It will also stop the parallax effect on the caption content, but in addition it will stop the opacity fade as you scroll down as well. This will in turn make the entire slide move together. The other possible css classes are "external-button-1" and "external-button-2".
Their names are pretty self explanatory, but adding either of them or both of them will cause the button(s) for your slide to open in a new window if you want your link to be external.
In summary, here's a go-to list of all the Nectar Slider classses that come by default:
• static
• caption-no-fade
• external-button-1
• external-button-2
101. Add Different Mobile Logo (CSS)
/* Add custom mobile logo */
@media only screen and (max-width: 1000px) {
body header#top #logo img {
visibility:hidden !important;
}
body header#top #logo:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url(http://yoursite.co/wp-content/uploads/2017/05/Logo.png) no-repeat;
background-size: 50px;
}
}
102. Add html5 sound to Salient
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
If you would like to use a mega menu, please head to the Appearance > Menus tab
in your admin section and make sure that "CSS Classes" are turned on in your screen
options tab in the upper right hand corner of your screen. Once the box for them is
checked, you'll see an input field for "CSS Classes (optional)" in each of your menu
items. See screenshot below :
All you have to enter in that box to make an item the mega menu holder, is
"megamenu". By default it will be a three column mega menu until you add the
second class which can be any of the following:
• columns-3
• columns-4
• columns-5
• columns-6
So for example, if you wanted a 4 column mega menu, all you would need to type
into your css class box would be " megamenu columns-4" without the quotes of
course.
Also To Make it work the Menu needs to be in 3 Levels . Simply Drag the Menu to the Right to so its like below screenshot :
You will get a menu like this :
Bes.t
106. Add Different Logo on Particular Page
The easiest way is to the change the Img url for the Page that needs a Different Logo . The Page id is used to target that particular page logo only .
Place this JS script in the Google Analytics Section in Salient Theme Options Panel
2: Choose Image Grid Style in the "Image Gallery Settings" VC Options Popup.
3: Click on the '+' sign to add the Images
4: Select the Image you want and set the Image URL and select Masonry Sizing Option for individual Images .
5: Press Add Images when you have added multiple Images.
Make sure to select the "Image Grid Style" in the Dropdown field named "Gallery Type" . Only then would the step 4 options show up .
Also you need to be updated to Salient Theme Version 7.6+ as it has these Options .
Cheers
108. Hosting Google fonts locally
If you would like to keep using the available Google fonts within the Typography options, but need to host them locally to comply with GDPR, we recommend using the Local Google Fonts plugin.
The plugin will automatically detect which fonts you're loading through the theme options, download them, and load them locally. It's simple to use and by far the easiest option to get Google fonts compliant with GDPR.
We've tested the plugin for full compatibility with Salient.
109. Switching to legacy WooCommerce cart and checkout layouts
In WooCommerce 8.3 and later versions, your cart and checkout pages will be created using the new WooCommerce blocks. This brings a new layout, which some may dislike compared to the previous legacy cart and checkout.
.
