Salient - Responsive Multi-Purpose Theme

Contents

1. The package could not be installed. The theme is missing the style.css stylesheet

2. Theme Installation Errors

3. 4 | Installing and Updating Salient Visual Composer (Bundled with Theme)

4. 1 | Troubleshooting the Salient Theme (Website not working correctly)

5. Updating Your Theme and Plugins

6. How to update theme Manually via FTP

7. Size of images in lightbox . Images getting cut

8. How to Translate the theme

9. Comments not showing on Pages

10. Create Landing Page (Remove Header / Footer per page )

11. Two Minute Theme Update.

12. Increasing Memory Limit To PHP

13. Missing "Read More" button in Ascend Skin”

14. Increase Nectar Love value manually

15. Move Secondary Menu Social Media Icons to Left

16. Change color of Nectar Slider Heading and sub heading

17. Make init.js changes in Child Theme .

18. “Lightbox to open an embed file”

19. Make button open lightbox

20. Portfolio Size and Order

21. Mobile Menu hidden by Wordpress Toolbar

22. mobile full width, but keep the desktop in the boxed mode

23. “Sticky Mobile Menu”

24. Howto: Make logo big or small

25. how to make the color of the hover on the thumbnails different from the global link color

26. Remove thin bottom border on transparent header

27. Change Team Member Size

28. Move Third level menu to left instead of right

29. Map marker icon not showing

30. Changing content in portfolio thumbnail hover

31. Hide Portfolio Arrows / Squares / Title

32. Mobile Drop Down , Change word not arrow as link

33. Nectar Slider Arrows Color and Background Change

34. Hide responsive secondary menu In Mobile/Tablet

35. Remove WooCommerce Add to Cart - Amount Function

36. Change order of Portfolio categories title's

37. Howto: Add Custom image sizes ?. Change Responsive Behavior of images

38. Change Slide Out Widget Icon

39. Hide Mega Menu Column Title in Mobile Menu

40. Adjust Nectar Slider Text with CSS

41. Change the numbers of columns in the recent projects slider from 3 to 6 items

42. Parallax Bug on Chrome and (bit older version of) Firefox”

43. Add Phone-Number/Email in secondary menu with icon

44. Nectar Slider: Semi Transparent Background for Heading

45. Hide Portfolio Thumbnail Title or date

46. Make Header Nav Menu Look like a Button

47. OpenGraph loaded twice, when Wordpress Jetpack Publicize feature in use”

48. Remove slide count in Home slider next/prev arrows

49. Decrease the vertical spacing or leading between all 3 elements in the nectar slider- the large text, the sub text and the button

50. How to Create Mouse Based Parallax ?.

51. Navigation gains bottom margin on page scroll

52. Visual Composer in Woocommerce Product Page

53. Advancing nectar slide at end of video [Hack]

54. Removing Author, Date, Tags, and Comments on Blog Titles

55. Nectar Flexible Slider Height Cropping Image in Responsive Screen Sizes.

56. Fonts Used in Theme Demos , Screenshots of Typography Panel

57. strange icons on iOS

58. Change logo url link via JS code Globally.

59. Add TEXT Next to Hamburger Menu Icon

60. Corporate Demo - Contact Form

61. Anchor Links not Working

62. Twitter Share Count API Closed

63. Visual Composer template is reordering elements

64. Change hamburger icon to envelope mail icon in main menu .

65. Changing Theme Texts Using Loco Translate Plugin .

66. Add Text to Footer Right .

67. Clear Cache

68. Make Nectar Slider Button open lightbox link or video

69. Typography Section options.txt files For Salient Theme Demos.

70. limit the Search Function to Just Display Products Only.

71. Install your Theme

72. Downloading Your Theme

73. Firefox Padding Top and Bottom Not Appearing on Columns

74. Importing the Theme Demos ( Make Theme Look Like Demo )

75. Adding your Google Map API Key

76. Activate and Save Permalinks

77. Change Woocommerce Products per Page.

78. Home Page Setup

79. Adding your Google Analytics Tracking Code

80. Getting Started - First Steps

81. Google Page Insights Shows Errors/Warnings

82. Install Recommended Plugin

83. Center Copyright Text In Footer

84. Woocommerce Payment Gateway Not Showing ( BrainTree / Amazon )

85. Hiding Rows on Mobile / Desktop in Visual Composer

86. Add Down Arrow in FullScreen Page Rows Option [JS hack]

87. Forms , Checkboxes Not Appearing Correctly

88. Transparent Header Not Showing on All Pages

89. Quick Notification Bar

90. Make Masonry Blog height Uneven (Not Fixed)

91. Header Logo Not Showing | Cant Change Demo Logo

92. Troubleshooting Video Backgrounds

93. W3 Performance Setup

94. Change Order of Portfolio Items or Portfolio Categories

95. Cloudflare Rocket Loader Conflict with WPBakery Page Builder

96. Add Different Mobile Logo (CSS)

97. Loading Icons mind font when using shortcodes in footer

98. Add a Custom Font

99. Change Mobile Column Order

100. Make Column Link Open Lightbox

101. Nectar Slider CSS Classes

102. Add Different Mobile Logo (CSS)

103. Add html5 sound to Salient

104. Salient Theme Sensei Support .

105. FontAwesome Plugin Conflict , Child Theme Override

106. Salient Mega Menus

107. Add Different Logo on Particular Page

108. Masonry Image Gallery

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.

  1. Download the final zip file from your downloads page.
  2. Unzip the final zip file; you should now have a final download folder.
  3. Do NOT upload the final download folder. Open up the final download folder.
  4. Browse the contents and find the actual theme folder. If you look inside the theme folder, you will see a �style.css� file. This is how you know you have found the theme folder.
  5. Using an FTP client, upload ONLY the theme folder to your �wp-content/themes� folder.
  6. Login to your WordPress admin panel and activate the theme.

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:

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.


There are two methods to Install/Update.

A) Update your Theme via : https://themenectar.ticksy.com/article/3218 .

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) .


  1. Go to your Downloads page in your ThemeForest profile.
  2. Locate the Download button next to Salient and click it. Upon clicking the Download button, a dropdown should appear.
  3. Select Installable WordPress file only from the dropdown to begin downloading a .zip file of Salient itself.
  4. 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.
  5. 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 .
  6. Connect to your server via FTP and navigate to your /wp-content/plugins/js_composer_salient directory.
  7. 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 .

2: Make sure you are running the Latest Version of the Theme. See: How To Update Theme and Plugin .

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 .

6: Caching and Minification :



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.




5. Updating Your Theme and Plugins


Updating the Theme : 

Please view our New Guide: http://themenectar.com/docs/salient/updating-salient/ .

Updating Plugins

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:

See screenshot: http://prntscr.com/3lj0co

7. Size of images in lightbox . Images getting cut

Hey !

Simply change your "large" image size in settings > media to 1280x720 and it should work alright :)

Cheers

8. How to Translate the theme

See Relevant url : http://themenectar.com/docs/salient/translations/ 


Translation Basics

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:

<span class="border-top"></span><span class="border-right"></span><span class="border-bottom"></span><span class="border-left"></span>
add_action('after_setup_theme', 'child_lang_setup');
function child_lang_setup(){ load_child_theme_textdomain('salient', get_stylesheet_directory() . '/lang');
}

Translation Process

Salient includes three files in the lang directory to assist with translation.

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.

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.

 Official WPML Guide

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.

 WPML Contractors List

Loco Translate (Free)

Loco Translate provides in-browser editing of WordPress translation files.

Download Loco Translate

Poedit (Free)

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.

Download Poedit


9. Comments not showing on Pages

By default there's no option for the comment field on static pages, but adding it in is simple.

If you'd like to handle it in a cleaner, update-proof fashion, you can use the "nectar_hook_after_content" hook.

Here's an example that you can add into your child theme functions.php:

add_action('nectar_hook_after_content', 'salient_child_page_comments', 10);
function salient_child_page_comments() {
    if( is_page() ) {
        comments_template();
    }
}



1) Add the code to page.php via Apperance -> Editor .

<div class="comments-section"> <?php comments_template(); ?> </div>


2) Turn on the checkbox option in the page quick edit mode :

.

Cheers

10. Create Landing Page (Remove Header / Footer per page )

You need to find the Page id of the page you want to remove the Header and footer . Here is how to find it: http://quadroideas.com/find-page-id-wordpress/ .

Also see: https://support.woothemes.com/hc/en-us/articles/203105957-Customizing-your-theme-with-Firebug

Add this into the Custom CSS box located in your Salient Options panel:

For header:

.page-id-645 #header-space , .page-id-645 #header-outer {

display:none;

}

For Secondary Header:

.page-id-645 #header-secondary-outer {
    display: none;
}


For Footer:

.page-id-645 #footer-outer{

display:none;

}


11. Two Minute Theme Update.

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.

2 Minute Method using "Easy Theme and Plugins Update" Plugin :

  1.  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 .

  1. Go to your Downloads page in your ThemeForest profile.
  2. Locate the Download button next to Salient and click it. Upon clicking the Download button, a dropdown should appear.
  3. 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. 

3. D. Activate the Theme .


Your Theme is now Updated . 

To Update the Visual Composer Plugin follow this guide: https://themenectar.ticksy.com/article/5182/ 


Cheers

12. Increasing Memory Limit To PHP

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:

/* update_post_meta(post_id, '_nectar_love',value) */
update_post_meta(1851, '_nectar_love',60);

For more info on the function: http://codex.wordpress.org/Function_Reference/update_post_meta

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)

<script type="text/javascript" src="http://Myserver.com/blah.js"></script>
<div id="lightbox-content" style="width:600px; height:500px;">
  <object width="600" height="500" style="display:none;">
     <param name="host_url" value="http://Myserver.com" />
     <param name="name" value="ABC/XYZ"/>
   </object>
</div>

And then using a link like this:

<a href="#lightbox-content"> link </a>

Your could also hide the initial div from displaying outside of the lightbox with css

#lightbox-content {
  display: none;
}

Cheers

19. Make button open lightbox

The correct HTML to add a button with an icon that links to a video would be:

 
<a class="nectar_video_lightbox nectar-button small accent-color regular-button magnific-popup" target="_blank" href="https://www.youtube.com/watch?v=yarB1NCyqfs" data-color-override="false" data-hover-color-override="false" data-hover-text-color-override="#fff" style="visibility: visible;" rel="prettyPhoto"><span>Test Span</span> </a>

Cheers

20. Portfolio Size and Order

1. Make sure you're using the Fullwidth masonry style .

2. Make sure your images meet the size requirements as stated in the Masonry Sizing section of the User guide : http://themenectar.com/docs/salient.pdf

3 And last - if you want to order your items without changing the date, use this plugin: http://wordpress.org/plugins/intuitive-custom-post-order/

21. Mobile Menu hidden by Wordpress Toolbar

Try adding this into the custom css box located in your Salient Options panel:

@media only screen and (max-width: 690px) { #wpadminbar { position: fixed!important; } } 

Cheers

22. mobile full width, but keep the desktop in the boxed mode

Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

@media only screen and (max-width: 690px) {
    #boxed {
        width: 100%!important;
    }
}

Thanks

23. “Sticky Mobile Menu”

add this into your custom css box located in the Salient options panel:

@media only screen and (min-width : 1px) and (max-width : 1000px) {
   body #header-space {
      height: 56px!important;
      display: block!important;
   }
   body #header-outer {
        position: fixed !important;
   }
   #mobile-menu {
     position: fixed!important;
     top: 52px!important;
     width: 100%!important;
   }
}

Note: Might be incompatible with some smartphones .

24. Howto: Make logo big or small

Add this into the Custom CSS box located in your Salient Options panel:

/* Desktop greater then 1000px */
@media only screen
and (min-width : 1000px) {
    
    body header#top #logo img {
        height: 50px!important;
        margin-top: -8px !important;
    
    }
}


/* Desktop */
@media only screen
and (min-width : 1px) and (max-width : 1000px) {
    
    body header#top #logo img {
        height: 37px!important;
        margin-top: -6px !important;
    
    }
}




/* iPad */
@media only screen and (min-device-width: 481px) and (max-device-width: 1025px) {
    
    body header#top #logo img {
        height: 54px!important;
        margin-top: -12px;
    
    }
}


/* iPad landscape  */
@media only screen and (min-device-width: 481px) and (max-device-width: 1025px) and (orientation:landscape) {
    body header#top #logo img {
        height: 54px!important;
        margin-top: -12px !important;
    
    }
}
/* Mobile */
@media only screen and (max-width: 470px) {
    body header#top #logo img {
        height: 54px!important;
        margin-top: -12px;
    
    }
}



Change height and top values according to the height and placement of your logo.

25. how to make the color of the hover on the thumbnails different from the global link color

Please see the comment by nectar in this thread: http://themenectar.ticksy.com/ticket/155205/ .

26. Remove thin bottom border on transparent header

Add this into the Custom CSS box located in your Salient Options panel :

body #header-outer[data-transparent-header="true"].transparent {
    border: none !important;
}

27. Change Team Member Size

Add this into the Custom CSS box located in your Salient Options panel :

#ajax-content-wrap .team-member img {
    height: 206px;
}


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 :)

31. Hide Portfolio Arrows / Squares / Title

For Whole Section including the title:

.single-portfolio .project-title .container {
    display: none !important;
}

For All Three:

#portfolio-nav {
   display: none!important;
}

For Arrows Only:

#portfolio-nav ul.controls { display: none; }

For Square Only:

#portfolio-nav li#all-items {
    display: none;
}

For Title Only:

.single-portfolio div.row div.col.section-title h1 {
    visibility: hidden;
}

32. Mobile Drop Down , Change word not arrow as link

The mod would indeed take place in the init.js file – this section:

 $('#mobile-menu .container ul li:has(">ul") > a .sf-sub-indicator').click(function(){
    $(this).parent().parent().toggleClass('open');
    $(this).parent().parent().find('> ul').stop(true,true).slideToggle();
    return false;
});

would become:

 
$('#mobile-menu .container ul li:has(">ul") > a').click(function(){
    $(this).parent().toggleClass('open');
    $(this).parent().find('> ul').stop(true,true).slideToggle();
    return false;
});

Cheers :)

33. Nectar Slider Arrows Color and Background Change

1:To Change arrow color:

.swiper-container .slider-prev > i {  color: red; }
.swiper-container .slider-next > i { color: red; }

2:To change background color:

.swiper-container a.slider-prev:hover, .swiper-container a.slider-next:hover {
    background-color: rgba(0,0,0,0.8);
}
.swiper-container a.slider-prev, .swiper-container a.slider-next {
    background-color: rgba(0,0,0,0.2);
}<p>Cheers</p>

34. Hide responsive secondary menu In Mobile/Tablet

You can remove the secondary nav in ipad and mobile view using below custom css:

@media only screen and (min-width : 1px) and (max-width : 1000px) {
    #header-secondary-outer ul.sf-menu {
        display:none !important;
    }
}

If you want to remove the whole secondary menu including social icons use this:

@media only screen and (min-width : 1px) and (max-width : 1000px) {
    #header-secondary-outer {
        display:none !important;
    }
}

For mobile only:

@media only screen and (max-width: 470px) {
    #header-secondary-outer {
        display:none !important;
    }
 }

35. Remove WooCommerce Add to Cart - Amount Function

To remove this:http://ticksy_attachments.s3.amazonaws.com/8206310... .

Add this into the Custom CSS box located in your Salient Options panel:

 
.quantity input[type=number] {
    -moz-appearance: textfield;
     margin: 0; 
}

Cheers :)

36. Change order of Portfolio categories title's

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.

Anwser: Use this plugin: https://wordpress.org/plugins/taxonomy-terms-order...

37. Howto: Add Custom image sizes ?. Change Responsive Behavior of images

By default all images inherit responsive behavior - if you want to use fixed dimensions, either do so by adding a class to your image e.g.

img src="" /> 

and then add this into the Custom CSS box located in your Salient Options panel:

.my-size { width: 400px!important; height: 300px!important; }

OR remove these lines from the style.css to clear the responsive behavior for all images:

.main-content img {
    height: auto;
    max-width: 100%;
}
.row .col img {
    height: auto;
    margin-bottom: 15px;
    max-width: 100%;
    width: auto;
}

Cheers :)

38. Change Slide Out Widget Icon

.slide-out-widget-area-toggle i:before {
    content: '\f0e0';
    font-family: 'FontAwesome';
    top: 6px !important;
    position: relative;
    font-size: 22px !important;
}




.slide-out-widget-area-toggle span i.lines {
    display: none !important;
}
.slide-out-widget-area-toggle span i.lines-button.x2:before {
    content: '\f0e0';
    font-family: 'FontAwesome';
    top: 6px !important;
    position: relative;
    color:#fff !important;
    font-size: 22px !important;
}





.slide-out-widget-area-toggle i:before {
    font-style: normal;
}




header#top .span_9 > .slide-out-widget-area-toggle i {
    line-height: 25px;
}

39. Hide Mega Menu Column Title in Mobile Menu

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 :

<span class='icon-phone'></span>0437 445 352 

As can be seen in this screenshot: http://prntscr.com/47l3c0 .

For Email :

<span class='icon-envelope'></span>


And then add this to custom css:

body span.icon-phone {
    background: none;
    height: 10px;
    line-height: 10px;
    font-size: 26px !important;
}


body span.icon-envelope {
    background: none;
    height: 10px;
    line-height: 10px;
    font-size: 26px !important;
}

This might also help write up Custom CSS: https://support.woothemes.com/hc/en-us/articles/203105957-Customizing-your-theme-with-Firebug .

Thanks

44. Nectar Slider: Semi Transparent Background for Heading


.swiper-slide .content h2 {
        padding: 4px 0px;
	display: inline;
	position: relative;
	left: 10px;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
	box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
	-o-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
	line-height: 45px;
}

45. Hide Portfolio Thumbnail Title or date

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>

46. Make Header Nav Menu Look like a Button

Please see our New Doc Article : http://themenectar.com/docs/salient/header-button-links/

Cheer

47. OpenGraph loaded twice, when Wordpress Jetpack Publicize feature in use”

add the following code in the themes functions.php

add_filter( 'jetpack_enable_open_graph', '__return_false' );

before this code at the end of the file:

add_action( 'wp_head', 'add_opengraph', 5 );

48. Remove slide count in Home slider next/prev arrows

Add this into the Custom CSS box located in your Salient Options panel :

.swiper-container .slider-prev, .swiper-container .slider-next {
   width:50px !important;
}<p>.swiper-container .slider-next .slide-count,.swiper-container .slider-prev .slide-count{
    display:none;
}</p><p>Cheers</p>

49. Decrease the vertical spacing or leading between all 3 elements in the nectar slider- the large text, the sub text and the button

Add this into the Custom CSS box located in your Salient Options panel:

<p>#boxed .swiper-slide .content h2 {
    line-height: 30px;
}
.nectar-slider-wrap[data-full-width="false"] .swiper-slide .content h2 {
    line-height: 40px;
}
.swiper-slide .content p {
    padding-bottom: 0px;
}
</p>

Cheers

50. How to Create Mouse Based Parallax ?.

Please see https://www.youtube.com/watch?v=NIgi-YyspcE .

Cheers

51. Navigation gains bottom margin on page scroll

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. Visual Composer in Woocommerce Product Page

VC is enabled when you're using the alt single page layout as available in the Theme options panel > woocommerce options tab: http://themenectar.com/demo/salient-ecommerce/product/mens-button-down/ if you enable that option and it's still not there also remember to go into your Visual Composer settings and check the box to enable it on the product post type.

53. 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!

54. 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;
}

55. Nectar Flexible Slider Height Cropping Image in Responsive Screen Sizes.

Please see Updated Doc here : http://themenectar.com/docs/salient/nectar-slider-plugin/ . 

56. Fonts Used in Theme Demos , Screenshots of Typography Panel

Agency Demo


Ascend Demo



57. strange icons on iOS

Please check your .htaccess file in the wp-content folder and check if it has any below security code that is blocking specific ttf filetype .

Order deny,allow
 Deny from all
 <Files ~ ".(xml|css|jpe?g|png|gif|js|svg)$">
 Allow from all
 </Files>



58. Change logo url link via JS code Globally.


Add this JS code in the Google Anlaytics Section :  


<script type='text/javascript'>
jQuery( document ).ready(function() {
 jQuery('a#logo').attr('href','http://creativecorridor.co');
});
</script>


59. Add TEXT Next to Hamburger Menu Icon

Theme Version 8.5+ 

Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

.slide-out-widget-area-toggle:not(.slide-out-hover-icon-effect) a:after {
    content: "MENU";
    font-size: 25px !important;
    position: relative;
    left: -81px !important;
    top: -22px !important;
    color:#000 !important;
}

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.

60. 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.


<div class="row">
  <div class="col span_4">
  <label for="your-name">Name</label>
    [text* your-name] </p>
  </div>
  <div class="col span_4">
  <label for="your-email">Email</label>
    [email* your-email] </p>
  </div>
  <div class="col span_4">
  <label for="your-subject">Subject</label>
     [text your-subject] </p>
  </div>
</div>
<label for="your-message">Message</label>
    [textarea your-message] 
<p><br/>[submit "Send Message"]</p>

61. Anchor Links not Working

Salient Theme: 7.x

How to solve: Browser shows undesired positioning of anchor links if/when returning from 'other' site pages.

Steps:

  1. Go to Salient Options panel > General Settings > Functionality
    Check One Page Scroll Support (Animated Anchor Links) [On]
  2. Go to Salient Options panel > Page Transitions
    Select Animated Transition Method [Standard]
    Check Disable Fade Out On Click [On]
  3. Go to WP Admin: Appearance > Menus
    Each custom link must use full url path. i.e. http://example.com/#anchor

For more information on setting up Anchor links see:

62. Twitter Share Count API Closed

Here is the official link: https://blog.twitter.com/2015/hard-decisions-for-a-sustainable-platform .

For the other counts to Please Update Theme .

Cheers

63. 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.

64. 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) :


#header-outer.transparent header#top nav ul .slide-out-widget-area-toggle a i.lines-button.x2:after { content: "\f0e0"; position: absolute; font-family: FontAwesome; font-size: 20px !important; line-height: 24px !important; font-style: normal; } #header-outer.transparent header#top nav ul .slide-out-widget-area-toggle a i.lines { display: none !important; } header#top .span_9 > .slide-out-widget-area-toggle i:before { content: "\f0e0" !important; position: absolute; font-family: FontAwesome; font-size: 20px !important; line-height: 24px !important; font-style: normal; } #header-outer[data-full-width="true"] .slide-out-widget-area-toggle .open > span { -webkit-transform: none !important; transform: none !important; }
Best

65. Changing Theme Texts Using Loco Translate Plugin .

You can view the Updated Documentation Article here: http://themenectar.com/docs/salient/translations/ .



Please see: https://localise.biz/help/wordpress/translate-plugin/beginners 

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 .

2: After Activating the Plugin ,

Cheers

66. Add Text to Footer Right .

Hey Again,

Add this text in the copyright section in Options Panel: http://prntscr.com/9y6qim

<span style='float:right;'>  Test text </span>

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.

67. 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.

Visit WPEngine

Godaddy

To clear your Godaddy cache you’ll want to use the “Flush Cache” link located in the WordPress admin bar.

Visit Godaddy

Site Ground

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.

Visit Site Ground

Media Temple

Media Temple has built-in cache as well and it can be cleared via the WordPress dashboard admin bar.

media-temple-cache

Visit Media Temple

Caching Plugins

Below are some screenshots showing how to clear the cache for the 3 most popular WordPress plugins:

WP Super Cache

W3 Total Cache

total-cache-empty

Better WP Minify Cache


Common CDN’s

Below are links to the support URL’s showing you how to clear your cache for some of the most widely used CDN’s by WordPress sites.

Important: Clear Your Browser Cache

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:

68. Make Nectar Slider Button open lightbox link or video

Add in the lightbox extra class here : 


and the JS in here 



For 1st Button use this code:

jQuery( document ).ready(function() {

jQuery(".lightbox .button:first-child a").attr("rel","prettyphoto");
  
});


For 2nd Button use this code


jQuery( document ).ready(function() {

jQuery(".lightbox .button:last-child a").attr("rel","prettyphoto");
  
});




69. Typography Section options.txt files For Salient Theme Demos.

One Common Issue that users report is the fonts and text responsive behavior ie Text or button getting too small when window is resized.

The Easiest way to fix that is to use the Font sizes used in the Theme demos.

Simply import the below codes in the Salient Theme Options Panel -> Import/Export Section : See screenshot: http://prntscr.com/a3o149 .

Note : The below code would only overwrite the Typography Section in Salient Theme Options Panel so you can import it on a existing site.

Corporate Demo Typography Section Theme Settings .


Frostwave Demo Typography Section Theme Settings .

One Page Demo Typography Section Theme Settings .

Ecommerce Demo Typography Section Theme Settings .


Clean All Purpose Typography Section Theme Settings .

Blog Creative Typography Section Theme Settings .

Ascend Typography Section Theme Settings .

Agency Section Theme Settings .

70. 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

71. 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.



72. Downloading Your Theme

Congratulations! You just purchased our Salient Responsive Multipurpose WordPress theme on ThemeForest. 

  1. Go to your Downloads page in your ThemeForest profile. 
  2. Locate the Download button next to Salient and click it. Upon clicking the Download button, a dropdown should appear.
  3. Select Installable WordPress file only from the dropdown to begin downloading a .zip file of Salient itself.



73. 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) :

/*Firefox Padding Issue, workaround is to use viewport width parameter*/
.wpb_row .span_12 > .col.padding-1-percent, .column-inner.padding-1-percent { padding: 1vw; }
.wpb_row .span_12 > .col.padding-2-percent, .column-inner.padding-2-percent { padding: 2vw; }
.wpb_row .span_12 > .col.padding-3-percent, .column-inner.padding-3-percent { padding: 3vw; }
.wpb_row .span_12 > .col.padding-4-percent, .column-inner.padding-4-percent { padding: 4vw; }
.wpb_row .span_12 > .col.padding-5-percent, .column-inner.padding-5-percent { padding: 5vw; }
.wpb_row .span_12 > .col.padding-6-percent, .column-inner.padding-6-percent { padding: 6vw; }
.wpb_row .span_12 > .col.padding-7-percent, .column-inner.padding-7-percent { padding: 7vw; }
.wpb_row .span_12 > .col.padding-8-percent, .column-inner.padding-8-percent { padding: 8vw; }
.wpb_row .span_12 > .col.padding-9-percent, .column-inner.padding-9-percent { padding: 9vw; }
.wpb_row .span_12 > .col.padding-10-percent, .column-inner.padding-10-percent { padding: 10vw; }
.wpb_row .span_12 > .col.padding-11-percent, .column-inner.padding-11-percent { padding: 11vw; }
.wpb_row .span_12 > .col.padding-12-percent, .column-inner.padding-12-percent { padding: 12vw; }
.wpb_row .span_12 > .col.padding-13-percent, .column-inner.padding-13-percent { padding: 13vw; }
.wpb_row .span_12 > .col.padding-14-percent, .column-inner.padding-14-percent { padding: 14vw; }
.wpb_row .span_12 > .col.padding-15-percent, .column-inner.padding-15-percent { padding: 15vw; }

74. 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 . 


2. Importing the Demo Theme Options Settings Manually ( theme-options.txt )

First locate the theme-options.txt file in "salient\nectar\redux-framework\extensions\wbc_importer\demo-data\" folder .




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.

75. 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

 

 

76. 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 .


77. 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.

78. 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.


79. 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 Google Analytics field

Next paste the code into the Google Analytics field located at Salient Theme Options Panel -> General Settings -> CSS/Script Related




Note: You can also use the Google Analytics Section if you need to paste in any JS code needed to be placed in the head of the page by a Third Party Plugin .

80. Getting Started - First Steps

Please Follow These Steps if you have just Purchased the Theme and Need help Getting Started .
  1. Download Your Theme

  2. Install your Theme

    1. Theme Installation Errors

  3. Install Recommended Plugin

  4. Activate and Save Permalinks

  5. Importing the Theme Demos ( Make Theme Look Like Demo )

  6. Adding your Google Analytics Tracking Code

  7. Adding your Google Map API Key

  8. Homepage Setup


81. Google Page Insights Shows Errors/Warnings

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.

82. 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





83. 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) :

#footer-outer div#copyright .col.span_5 {
    left: 50%;
}

#footer-outer .div#copyright col.span_7 {
    float: right;
}

#footer-outer div#copyright .col {
    width: auto !important;
}

#footer-outer #copyright p {
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

Thanks

84. Woocommerce Payment Gateway Not Showing ( BrainTree / Amazon )

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;
}

85. 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 .

vc_hidden-lg vc_hidden-md vc_hidden-sm vc_hidden-xs


ClassesScreen Size Icons
vc_hidden-lgLarge Screen
vc_hidden-mdMedium Screen
vc_hidden-smSmall Screen
vc_hidden-xsExtra Small Screen






It works in the same way the Column VC " Responsive Options" Work : 




86. 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 :

<script type='text/javascript'>
jQuery( document ).ready(function() {
 jQuery('.full-page-inner').append('<a href="#" class="slider-down-arrow-full" style="transform: translateY(0px); opacity: 1;"><i class="icon-salient-down-arrow icon-default-style">  </i></a>');
jQuery('body').on('click','.full-page-inner a.slider-down-arrow-full',function(){
    jQuery.fn.fullpage.moveSectionDown();
console.log('clicked');
});
});
</script>

And add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :

/*Apply Fullscreen page row css copied from Nectar Slider down arrow*/
.full-page-inner .slider-down-arrow-full {
    height: 60px;
    width: 60px;
    display: block;
    margin: 0 auto;
    position: absolute;
    bottom: 30px;
    z-index: 100;
    left: 50%;
    margin-left: -30px;
}
.full-page-inner .slider-down-arrow-full i.icon-default-style[class^="icon-"] {
    height: 60px!important;
    width: 60px;
    font-size: 20px!important;
    line-height: 60px!important;
    animation: 3.4s ease-in-out infinite fadebottom;
    -webkit-animation: 3.4s ease-in-out infinite fadebottom;
}

87. Forms , Checkboxes Not Appearing Correctly

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


88. 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 

89. 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) :

/* Notification Bar */
.custom-notify{
    top: 0px;
    background-color: #cda34a !important;
    width: 100%;
    color: #fff;
    text-align: center;
    padding: 4px;
    transform: translateY(-100%);
}
@media only screen and (max-width: 1000px) and (min-width: 1px ) {
    #header-outer {
        padding-top: 0px!important;
    }
    #header-outer .container {
        padding-top: 10px!important;
    }
    .custom-notify {
        transform: translateY(0%) !important;
    }
}

90. Make Masonry Blog height Uneven (Not Fixed)

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;
}

91. 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:




2:  Salient Theme Options Panel -> Header Navigation -> Transparency Tab:



Note: Make sure you add in the Retina Logos as Well or you the Logo would be Missing on Mobile or Tablets that use a Retina Screen . 



92. Troubleshooting Video Backgrounds

See updated Docs here : http://themenectar.com/docs/salient/page-builder-row/#video-background .


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:


http://video.online-convert.com/convert-to-mp4
http://video.online-convert.com/convert-to-webm

93. W3 Performance Setup

Salient Optimization Guide : http://themenectar.com/docs/salient/performance-optimization-guide/



W3 Total Cache

General Settings

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 

94. Change Order of Portfolio Items or Portfolio Categories

Simply use this plugin: https://wordpress.org/plugins/post-types-order/ .

Cheers 

95. Cloudflare Rocket Loader Conflict with WPBakery Page Builder

The "rocker loader" feature when enabled from cloudflare is known to cause issues with WPBakery -  Please disable that by following this : https://help.mediavine.com/en/articles/450233-cloudflare-rocket-loader-conflict .

Thanks

96. 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;
    }
}

97. 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'); 
}
?>

98. Add a Custom Font

How To Make the Custom Font Show Up in The Typography Section of Salient Theme Options Panel ?. 


We can add Custom Fonts in several ways :

- The Below example uses the @font-face method and the fonts are included in a Child Theme .


Step 1:

@font-face CSS methods are included in the Salient Theme Options Panel -> General Settings -> Custom CSS Box to import the relevant font files .

@font-face {
    font-family: 'Proxima Nova Light';
    src: url("/wp-content/themes/salient-child/fonts/ProximaNova-Light.woff") format("woff"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-Light.otf") format("opentype"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova LightIt';
    src: url("/wp-content/themes/salient-child/fonts/ProximaNova-LightIt.woff") format("woff"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-LightIt.otf") format("opentype"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-LightIt.ttf") format("truetype");
    font-weight: 300;
    font-style: italic;
}
@font-face {
    font-family: 'Proxima Nova Regular';
    src: url("/wp-content/themes/salient-child/fonts/ProximaNova-Regular.woff") format("woff"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-Regular.otf") format("opentype"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova RegularIt';
    src: url("/wp-content/themes/salient-child/fonts/ProximaNova-RegularIt.woff") format("woff"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-RegularIt.otf") format("opentype"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-RegularIt.ttf") format("truetype");
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Proxima Nova Semibold';
    src: url("/wp-content/themes/salient-child/fonts/ProximaNova-Semibold.woff") format("woff"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-Semibold.otf") format("opentype"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-Semibold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova SemiboldIt';
    src: url("/wp-content/themes/salient-child/fonts/ProximaNova-SemiboldIt.woff") format("woff"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-SemiboldIt.otf") format("opentype"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-SemiboldIt.ttf") format("truetype");
    font-weight: 600;
    font-style: italic;
}
@font-face {
    font-family: 'Proxima Nova Bold';
    src: url("/wp-content/themes/salient-child/fonts/ProximaNova-Bold.woff") format("woff"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-Bold.otf") format("opentype"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Proxima Nova BoldIt';
    src: url("/wp-content/themes/salient-child/fonts/ProximaNova-BoldIt.woff") format("woff"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-BoldIt.otf") format("opentype"),
        url("/wp-content/themes/salient-child/fonts/ProximaNova-BoldIt.ttf") format("truetype");
    font-weight: bold;
    font-style: italic;
}



Step 2: 

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 .



Revised Post.

Date: May 20, 2020


99. Change Mobile Column Order

For Salient Version 12 or below:

As of Salient 12 the Column Position can be changed in the Row Settings :



For Salient Version 11 or below:

Using the "Alternating Split Section " As Example : http://prntscr.com/g0j8fe and the layout : http://prntscr.com/g0ja3j


1: Rearrange the columns as would best work on Mobile that is  image,text,image,text :

http://prntscr.com/g0jasq .




1: Add a extra class reverse-row


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

100. 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 .

For Video :

<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery(".lightbox-column a.column-link").attr("rel","prettyphoto").addClass("nectar_video_lightbox");
});
</script>

For Image :

<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery(".lightbox-column a.column-link").attr("rel","prettyphoto");
});
</script>
Click to View Larger Image


101. Nectar Slider CSS Classes


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

102. 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;
    }
}

103. 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):

/*add sound close icon*/
li#nectar-user-account.none .icon-salient-m-user:before {
    content: "\e099" !important;
}

Add this to the Custom JS Box :

<audio controls="" volume="0.5" autoplay="" loop="" id="muzyka">
<source src="https://tomgacz.pl/wp-content/uploads/2020/02/Creative-Showcase-Portfolio-Theme-_8211-Just-another-WordPress-site.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 
<script>
  var audio = document.getElementById("muzyka");
  audio.volume = 0.3;
</script>
<script>
var audio = document.getElementById('muzyka');
    var btn = document.getElementById('nectar-user-account');
btn.classList.add("selected");
    
    btn.addEventListener('click', function (e)
{
    e = e || window.event;
    audio.muted = !audio.muted;
        
         if (btn.className == "selected") {
             btn.classList.add("none");
  } else {
    btn.classList.replace("none","selected");
  
  }
        
    e.preventDefault();
}, false);</script>

104. Salient Theme Sensei Support .

The Below Code add Sensei Plugin Support to the Salient Theme .


Reference URL: https://docs.woocommerce.com/document/sensei-and-theme-compatibility/


Add this to your Child Theme functions.php or using the Code Snippets Plugin:


For Fullwidth Page :

global $woothemes_sensei;
remove_action( 'sensei_before_main_content', array( $woothemes_sensei->frontend, 'sensei_output_content_wrapper' ), 10 );
remove_action( 'sensei_after_main_content', array( $woothemes_sensei->frontend, 'sensei_output_content_wrapper_end' ), 10 );
add_action('sensei_before_main_content', 'my_theme_wrapper_start', 10);
add_action('sensei_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
  echo '<div class="container-wrap"><div class="container main-content"><div class="row">';
}
function my_theme_wrapper_end() {
  echo '</div><!--/row--></div><!--/container--></div><!--/container-wrap-->';
    
}
add_action( 'after_setup_theme', 'declare_sensei_support' );
function declare_sensei_support() {
    add_theme_support( 'sensei' );
}

For Page With Sidebar :

global $woothemes_sensei;
remove_action( 'sensei_before_main_content', array( $woothemes_sensei->frontend, 'sensei_output_content_wrapper' ), 10 );
remove_action( 'sensei_after_main_content', array( $woothemes_sensei->frontend, 'sensei_output_content_wrapper_end' ), 10 );
add_action('sensei_before_main_content', 'my_theme_wrapper_start', 10);
add_action('sensei_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
  echo '<div class="container-wrap"><div class="container main-content"><div class="row">';
      echo '<div id="post-area" class="col span_9"> <div class="posts-container">';
            
}
function my_theme_wrapper_end() {
    echo '</div><!--/posts container--></div><!--/span_9--></div><!--/row--></div><!--/container--></div><!--/container-wrap-->';
    echo '<div id="sidebar" class="col span_3 col_last">';
    get_sidebar();
    echo '</div><!--/span_3-->';
    
}
add_action( 'after_setup_theme', 'declare_sensei_support' );
function declare_sensei_support() {
    add_theme_support( 'sensei' );
}



Best.

105. FontAwesome Plugin Conflict , Child Theme Override

Please add this to your child Theme Functions.php :

wp_enqueue_style('font-awesome-salient', get_template_directory_uri() . '/css/font-awesome.min.css');

So the Child Theme Code Looks Like This: 

add_action( 'wp_enqueue_scripts', 'salient_child_enqueue_styles');
function salient_child_enqueue_styles() {
   wp_enqueue_style('font-awesome-salient', get_template_directory_uri() . '/css/font-awesome.min.css');
   
 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' );
}

Thanks 

106. Salient Mega Menus

View the Latest Doc here: http://themenectar.com/docs/salient/mega-menu/



Mega Menus

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

107. 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  

<script type="text/javascript">
jQuery( document ).ready(function() {
   setTimeout(function(){ 
jQuery('.page-id-6385 #logo img').attr('src','http://www.yourdomain.co.za/wp-content/uploads/2018/03/logo-hr-light-tur.png').attr('srcset','http://www.yourdomain.co.za/wp-content/uploads/2018/03/logo-hr-light-tur.png 1x, http://www.yourdomain.co.za/wp-content/uploads/2018/03/logo-hr-light-tur.png 2x');},500);
});
</script>


108. Masonry Image Gallery

See Latest Article : http://themenectar.com/docs/salient/galleries/  .

Follow these steps :

1: Add a Image Gallery VC Element to the Page. 

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