Contents

1. Using the Child theme to add custom scripts in the footer.

2. Setting up Booking, Terms of Service and Deposits.

3. Google Maps not working (API Key Missing)

4. Change WooCommerce Add to Cart button text.

5. What version of Stratus do I have?

6. Adding a Favicon

7. Custom Footer Colors

8. Limit to portfolios shown | Max Portfolio

9. Questions about the Embark Theme?

10. Adding event tracking to pricing plans.

11. Add a 6th column for Pricing Plans

12. The Booking System

13. Adding a second button to the Page Header

14. Updating the WP Booking System Plugin

15. How to upload image and create a header banner

16. Translating the theme into a different language.

17. Enable Sticky Header for Mobile

18. Hide Shopping Bag / Cart icon

19. Hide Label from Forms (Formidable)

20. Adding Calendar to Slider (Chalet Demo)

21. Change the background colour to transparent for the sub menu.

22. Background colour for entire site.

23. Bug: Standard buttons are being converted to Add to Cart buttons

24. Disabling the links on the Portfolio section

25. How to Add JavaScript, or Other Code into Your Site

26. Extra fees and charges

27. E-mail forms not sending / receiving

28. Adding more than 5 meta boxes of the same kind.

29. Service Block Meta Box Options

30. Using Shortcodes

31. Hide comments section "You may use these HTML tags".

32. How to Change or Remove the Credit in the Footer

33. Slider loads after content appears on the page. Slider is last to load.

34. Optimal header image sizes and settings

35. Adding a custom metabox

36. How do I change or remove the logo?

37. Skip Cart Go Straight to Checkout Page in WooCommerce

38. Cannot import widgets .wie file "You must upload a .wie file generated by this plugin."

39. Remove Scroll to Top Arrow in the right side bottom of the website.

40. Enable Sticky Header and Parallax for Touch Laptops.

41. Menu & Header customization

42. iCal Syncing with WP Booking System

43. Changing Background Photos

44. WPML Flags in Top Menu

45. Page Header Background Settings.

46. Translate Strings using Poedit

47. Adding Yoast Breadcrumbs to rooms and pages.

48. Using the Slider Gallery Shortcode [slider_gallery]

49. Changing Size of a set Image

50. Reducing Spam

51. Installing a Theme and Activation Steps

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

53. Rooms Sort Order

54. How to Improve Site Load and Performance

55. How to Update the Theme

56. Minimum Days Required - WP Booking System

57. Adding your own custom CSS

58. How to make a full width Google Map

59. Updating Bellevue Version 1

60. Adding Rooms or Portfolio Projects

61. Trigger Mobile Menu

62. Adding down arrow on Sliders

63. Custom Color for Rooms Hover

64. Error message: Download failed. A valid URL was not provided.

65. Limit to rooms shown | Max Rooms

66. Enable Transparent Header for Touch Laptops.

67. Required & Recommended Plugins - Stratus

68. Required and Recommended Plugins - Pursuit

69. Using Widget Logic

70. Master Slider Full-screen mode

71. Sticky Header Logo Size

72. Communication between WooCommerce and WP Booking System

73. Slow loading Flex Slider / JS Error

74. Enable Sticky Header for Mobile and touch laptops

75. Yoast SEO Support

76. Using Custom Icons

77. Custom Video Styling

78. Image margin / gap

79. Adding an accent or outline button in the main menu

80. Promoting from development to production

81. Auto Filter Rooms on Page Load

82. Stratus - Widget Settings for the Shop / WooCommerce Page

83. Did we do something awesome for you? Let us know :)

84. Seasonal Pricing

85. Adding a Circle image or creating a circle crop.

86. Customizing the Booked Calendar Plugin (colors)

87. Enable Sticky Header for Mobile and touch laptops

88. Upgrading from Bellevue v1 to Bellevue v2

89. Custom Star Rating to Testimonials.

90. Polylang Error | Warning: Illegal offset type in isset or empty

91. Adding a button to the navigation

92. How to Add Breadcrumbs

93. Show room price and info on touch / mobile

94. Remove entire footer or hide top footer band

95. How to Change the Color of the Menu Links in the Transparent Header

96. Setting up a blog

97. Video Tutorials and Guides for Bellevue Hotel + Bed and Breakfast Theme

98. MIssing demo content XML file.

99. Mobile Menu Dropdown Parent Link not Clickable

100. Photos included with demo import

101. Using Polylang

102. Updating Stratus Version 2 and previous versions

103. Removing Meta Boxes aka Content Blocks

104. Start here!

105. Change the Mobile Menu Break Point

106. How to find what version of the theme you are using.

107. Email Form Notifications

108. Loading accordions with a closed state

109. Customization to show 2 rooms or 2 columns vs 3, 4 or 5.

110. SSL HTTPS troubleshooting

111. How to Change the Transparent Header Content From Light to Dark

112. Centering Slider_Gallery aka slider

113. Enabling Transparent Header Support on Touch Laptops

114. Changing Colors in the Theme (and other style changes)

115. How to find your Envato Purchase Code

116. Booked Plugin Sender named WordPress coming from the e-mail address Wordpress@mydomain.com.

117. WooCommerce Shop Product Columns - How to Change the Number Shown

118. Go full width with any meta box

119. How the WP Booking System works with WooCommerce

120. Stratus Classic

121. How to Update Stratus

122. Adding JavaScript or jquery to metabox

123. List of Required and Recommended Plugins for Bellevue.

124. Missing photos after demo import.

125. Demo Content

126. 404 Page Styling and/or Changes

127. Auto Filter Portfolio on page load

128. Required and Recommended Plugins - Entrepreneur

129. Enable Sticky Header for Mobile

130. Updating Master Slider

131. Recommended Server Settings

132. Adding Form to Slider (Hotel, Beachhouse Demo)

133. Installing & Setting up WPML

134. Service Block Colour / Color

135. Add WooCommerce to a booking calendar

136. Sort Order / Drag and Drop Content

137. How to Correct a Form Field Not Appearing Properly

138. How to Remove a Section Showing on The Frontend But Not The Backend

139. Adding Google Tracking Code aka Google Analytics

140. How to change the room descriptions. "sleep 2 queen bad" etc

141. Setup Auto Pending on the Bellevue Booking System

142. How to Update Bellevue

143. Add 6th column to pricing table

144. Disable lightbox in slider_gallery shortcode

145. How to include Blog Posts on a page

146. Changing the rooms slug, url, permalink

147. Third level menu (aka sub, sub-menu)

148. How to Recreate the Video Slider In the Live Demo

149. Page Builder (aka meta box builder) Overview

150. Upgrading from Stratus v2 to Stratus v3

151. How to make the Portfolio hover content stay visible

152. Using Modal window / Lightbox with a button, shortcode or image link

153. Can I Use The Theme On More Than One Website?

154. Remove / Hide 'All' and / or Sort from the Rooms Filter Bar

1. Using the Child theme to add custom scripts in the footer.

If you've install the child theme you'll see that the functions.php file is already there..

You can use cpanel or ftp to edit your functions.php file. The foot scrip  function is already there. 

1) Just uncomment the 

//add_action( 'wp_footer', 'my_themo_footer_scripts' );

becomes

add_action( 'wp_footer', 'my_themo_footer_scripts' );


Then you'll want to replace the <script> tags with your code.

So remove :

<script type="text/javascript">
        /* Disable slider_gallery lightbox  */
        jQuery(document).ready(function($) {
            "use strict";
            console.log('My Footer Script');
        });
    </script>

###p

That should be it.

Make sure your child theme is activate. You can install and activate it just like installing a new theme. The zip will be in your zip you download form themeforest. Look for bellevue-child.zip


Cheers!

2. Setting up Booking, Terms of Service and Deposits.

Make sure to use the auto pending feature so that when someone requests a stay, those dates will automatically be set to a different color to indicate that they are not available. We wrote a guide here: 

Setup Auto Pending on the Bellevue Booking System

Next I would create a form to go with the calendar and ask for Name and Email and Phone, this will become your booking reference so that you can match them up with the deposit inside of WooCommerce. You can find the forms under Dashboard / WP Booking / Forms / Add New if you haven't already. Create your form. If you want notifications and or Auto Reply please set those up as well. Then you can include that form with your calendar when you add the calendar to your page. It's under the section 'Form Options'. There is a screenshot of this in the article above.

The Calendar also has an option for specifying Minimum Days. It's also included in the screenshot inside the guide above.

Then you will want to create a product in WooCommerce that will be used to price out your room and add it to the calendar shortcode. We wrote a guide on there here:

Add WooCommerce to a booking calendar

Once the visitors requests a booking, an add to cart button will appear and they can proceed to checkout.

For the second half, taking deposits, terms of service, etc, you will need to use WooCommerce as the WP Booking System plugin will pass the prices off to WooCommerce and WooCommerce handles all the payments. 

Adding Terms of Service Check box Video: 


As for the deposits, the plugin will take the days booked and use that as a multiplier for the quantity added to the cart. If you book 5 days, it will take the product and multiply it by 5. So if you would like to take a deposit perhaps you can reduce the $ amount on the product and then change the text that shows up on he product indicating that this is a deposit.

There are also several plugins that helps taking partial payments. Please contact the plugin author to ensure it will work the way you want it to . Here is one I found. 

http://codecanyon.net/item/woocommerce-deposits-partial-payments-plugin/9249233

I think that covers your questions. Let us know how it goes and if you have any other questions for us. We are happy to help. Cheers!

3. Google Maps not working (API Key Missing)

Recently, Google updated their API requirements for new domains. We have updated all our themes and plugins affected, but we also have a bundled plugin, Meta Box that will need to be updated as well and we have contacted the developers of that plugin. We hope this will be updated soon. Even still, right now if you put your address in the meta box and save your changes the map should be working on the frontend.

Please see this article on how to update your theme: https://themovation.ticksy.com/article/3825/

Please ensure to update your theme to the latest version and check that your plugins are also using the very latest version, specifically the shortcode plugin that comes bundled with the theme.

The new space to add your key is under Theme Options / General / 

If you have any questions please contact support, we will be happy to help you.

Bellevue users

Please ensure you are using version 1.6.5 of the Bellevue theme or later. Also make sure your plugins are up to date, specifically Bellevue Custom Post Types which should be version 1.2.1 or later and also Bellevue Shortcodes which should be version 1.4.3 or later.

Entrepreneur users

Please ensure you are using version 1.1.6 of the Entrepreneur theme or later. Also make sure your plugins are up to date, specifically Entrepreneur Custom Post Types which should be version 1.3 or later and also Entrepreneur Shortcodes which should be version 1.4.1 or later.

Troubleshooting & Error messages.

Geocode was not successful for the following reason: REQUEST_DENIED

This means that your key was not setup correctly. You can remove it and leave the API key field blank to test using our default key until you resolve the issue with your key.

Cheers!

4. Change WooCommerce Add to Cart button text.

Add this to your functions files inside your child theme.

add_filter( 'woocommerce_product_add_to_cart_text', 'woo_custom_cart_button_text' );    // < 2.1

function woo_custom_cart_button_text() {

    return __( 'My Button Text', 'BELLEVUE' );

}

If you wish to change the text on the add to cart button. 

5. What version of Stratus do I have?

Not sure which version you have?

You can find out quickly and easily. 

Example for Stratus Version 2

Example for Stratus Version 3

From WP Dash / Appearance / Themes / you can click on the Stratus theme and notice the version number.

6. Adding a Favicon

We were asked by ThemeForest to remove that option once WordPress updated to include the option itself.

It's now available under Appearance > Customize > Site Identity > Site Icon

Thank you.

7. Custom Footer Colors

Add this to your Appearance / Theme Options / General / Custom CSS

For footer icon color.

.footer a .soc-icon {
    color: rgba(240, 240, 240, 0.88);
}

and for hover state

.footer a:hover .soc-icon {
    color: rgba(255, 0, 0,.5);
}

backgrounds

.footer {background: #1D1D1D;}

.footer-btm-bar {background: #000;}

To change footer title color

.footer .widget-title {
    color: #ffacac;
}

To change footer widget paragraph text color

.footer p, .footer a {
    color: #ffa4a4;
}

Cheers!

8. Limit to portfolios shown | Max Portfolio

Sometimes you may want to show more than 10 projects at once. There is an easy fix! If you go to settings / reading / and edit the show blogs at most setting, bump it from 10 to whatever you need. :)

9. Questions about the Embark Theme?

Our Embark Tours theme is based on an entirely new framework, and we have a separate knowledge base to answer any questions that you have about the theme:

http://themovation.helpscoutdocs.com/

If you have any questions not answered in the knowledge base, please feel free to open a ticket here on Ticksy.

10. Adding event tracking to pricing plans.

For pricing, don't use the default button option, but instead add the button HTML inside the pricing plan options details field. 

Then you can add your own custom class or ID and then match it up with your google tracking code.

https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide#setting-up-event-tracking

If this leaves a line below the bottom try using css to remove it.

ul.features li:last-child {
    border: none;
}

Before:

After:

If that won't work to remove the line try adding important.

ul.features li:last-child {
    border: none !important;
}

11. Add a 6th column for Pricing Plans

Install and activate the child theme, then copy over meta-pricing_plans.php into your child theme folder, then overwrite the the contents of that file with this gist. 

https://gist.github.com/ryanlabelle/74ea48f62b1ba7c3ab1b31d8bd0169bb

The buttons might need a little styling because the padding is designed for 5 columns and under. So you might need to add this to your custom css.

.pricing-table .btn {
    padding: 8px 25px;
}

12. The Booking System

Entrepreneur comes bundled with a premium booking plugin called Booked which is integrated into our theme to provide an awesome booking system.

The plugin includes some really helpful documentation to answer questions you may have about getting setup and using the plugin:
https://boxystudio.ticksy.com/articles/7827/

If you have any questions, feel free to open a support ticket.

13. Adding a second button to the Page Header

If you'd like to include two buttons in the page header, you can add HTML into the Subtext field instead of using the field to add a button.

You can have a header like this:

By adding this code into your Subtext field:

Subtext<br />
<a href="#" target="_self" class="btn btn-standard">Button 1</a>
<a href="#" target="_self" class="btn btn-ghost">Button 2</a>

It's just the text you'd like to have, followed by a break tag and then the code to output two buttons, in this case standard and ghost style.

14. Updating the WP Booking System Plugin

You can update the WP Booking System Plugin without updating the Bellevue theme, although we recommend always using the most recent version of the theme and plugins. 

* Always make a full database backup of you website before performing any updates.

To find out how to update the theme please see: https://themovation.ticksy.com/article/3825/

To update the plugin only without updating the entire theme:

You should be using the most recent version of WP Booking System which is version 3.4.2 at the time of writing this article dated September 21, 2016. 

If you have any question you can always contact support and create a ticket here: https://themovation.ticksy.com/

Happy to assist. 

15. How to upload image and create a header banner

Here is how to you can use the header image:

1. Choose Upload Image and then Choose file or Upload from the prompt. 


2. Then choose your image form your local computer or from your media library. 


3. Then click the 'File URL' button and the full path to the photo should display inside the Link URL filed. 


4. Then Click 'Insert into Post'


5. Then the URL should be copied back to the image field in theme options. If you are creating a header image don't forget to check 'Auto Crop and Sew'


6. and save changes.


7. Should generate...


I hope this helps.

16. Translating the theme into a different language.

We wrote a few guides to help you.

We recommend:

Cheers!

17. Enable Sticky Header for Mobile

Our theme automatically disables sticky for mobile, so if you want to enable it , just make this modification and it should world on both desktop and mobile. :)

Open up bellevue/assets/js/main.js

Then edit line 844 (or around line 844)

if(!isTouch){

to

if(true){

Let us know how that works. 

18. Hide Shopping Bag / Cart icon

If you don't want the icon to appear, you can deactivate WooCommerce if you aren't using it and it will hide the shopping cart. 

If you are using an updated version of the theme, you should noticed a theme options under Appearance / Theme Options / Shopping Cart / WooCommerce with options to hide the icon or change it's style.


For older versions:

If you want to use the plugin without the icon, there is also a way to use CSS to hide as well:

.themo_cart_icon {display: none;}

There is a place to input under Appearance > Theme Options > General > Custom CSS

19. Hide Label from Forms (Formidable)

If you wish to hide the field label and are already using the placeholder text, set the field position to none.

https://formidablepro.com/knowledgebase/field-options/#kb-label-position

This is the formidable plugin. 

20. Adding Calendar to Slider (Chalet Demo)

Here is a screenshot of our settings under WP Dash / Bellevue / Sliders / Add New

Here is the live demo: http://demo.themovation.com/bellevue/chalet/

Cheers!

21. Change the background colour to transparent for the sub menu.

To make your sub menu drop downs transparent add this to your custom theme options / Theme Options / General / Custom css

.navbar .navbar-nav .dropdown-menu { background-color: rgba(0, 0, 0, 0.5); }


Cheers!

22. Background colour for entire site.

If you want to change the background color for the whole site, just leave all the individual metabox background colour settings blank and then add this custom css to theme options / general / custom css :) and choose the colour you wish to use.

.inner-container {
    background: #fbfcfd;
}

Cheers!

23. Bug: Standard buttons are being converted to Add to Cart buttons

**EDIT: The Meta Box plugin author has since released a new version of the plugin (4.8.7) including a fix for this issue. You can just update the plugin from within the WP admin area it will be resolved.


Unfortunately there is a bug in the current version of one of the required plugins we use, Meta Box (4.8.6) that is causing standard buttons to automatically turn into Add to Cart buttons. The plugin author will be releasing a new version soon containing the fix, but we can't be sure exactly when. In the meantime, there are a few options to overcome this issue:

1. It will only occur if you have products setup in WooCommerce, so if you're not using the plugin you can deactivate it and the issue won't come up.

2. Each time you update a page or custom post type containing a button, you can just click the small x on the right side of the dropdown for the button before clicking Update.

3. If neither of those options is ideal for you, we have a hotfix you can apply:
( *This should be a smooth process but it's always best to make a backup just in case )

Download this zip file: https://www.dropbox.com/s/nwj82ysqftjtw2b/meta-box-4.8.6-hotfix.zip?dl=0

Extract the folder inside, titled 'meta-box'.

Connecting over FTP, copy the 'meta-box' folder into /wp-content/plugins/ to override the existing folder with the same name. If any prompts come up, choose yes to override files.

24. Disabling the links on the Portfolio section

Without customizing the code there isn't a way to entirely disable links on the portfolio section, however one thing you could do is add the following code into your Custom CSS box under Appearance > Theme Options (or into your child theme) which will change the cursor on portfolio items so that it doesn't look like a link:

.port-wrap .port-link {cursor:default}

Coupled with that, you can have the images open up in a lightbox from the Portfolio instead of linking to an individual page (in case someone happens to click on the blocks).

On each portfolio item, you'll just need to choose the Image Format from the right column and then check "Enable Lightbox on Portfolio Home" from the Project Options box.

If you have a question about this, feel free to open a ticket.

25. How to Add JavaScript, or Other Code into Your Site

In WordPress, certain types of code can sometimes cause issues when added directly into the Content Editor, whether it be from switching between HTML and Visual tabs, or because it gets stripped out by WPautoP.

We recommend using a plugin as a simple and easy way to add any scripts you want to include on your site, rather than inserting code directly into a meta box or editing the templates.

This plugin works well: https://wordpress.org/plugins/scripts-n-styles/

The plugin allows you to add scripts that will appear on every page, or if you go to the Edit Page screen for a specific page, you can add code just for that page.

The Hoops Feature

One unique option is the "Hoops" feature in that plugin. It basically allows you to make a shortcode out of anything. Here is how to use it:

1. Enable the plugin, and go to Tools > Scripts n Styles, and the Hoops tab

2. Give your hoop a name, and then copy/paste in the whole block of code into the textarea

3. Save that, and it will provide a shortcode below

4. Then you can copy/paste that shortcode wherever you want it to appear, such as in a meta box on a page, or in the content area

26. Extra fees and charges

Adding extra fees to the check out is possible via WooCommerce plugin or when you add custom code.

Child theme

If you are comfortable installing the included child theme and adding code to a functions.php file then this link is for you.

Add a surcharge to cart and checkout.

How to add handing fee to WooCommerce Checkout.

Adding Fee to WooCommerce with Conditional Logic Made Easy

A mroe technical guide from stack overflow

Plugin

If you are more comfortable using plugins then here are few we've found that should be able to add extra fees for you.

WooCommerce Product Fees

WooCommerce Extra Fee Options

Paid

27. E-mail forms not sending / receiving

Some Bellevue users have experienced an issue where email from the WP Booking system and also Formidable is not sending. Please ensure your web host has enabled php script allowing email to be sent form the website.

Thank you Emanuel for sharing your solution with us.

You can also try adding a SMTP plugin to authenticate emails and improve deliverable rates. 

We recommend. 

https://wordpress.org/plugins/easy-wp-smtp

https://wordpress.org/plugins/wp-mail-smtp/

https://wordpress.org/plugins/postman-smtp/



28. Adding more than 5 meta boxes of the same kind.

if you want to use any meta box more more than 5 times, you can increase this limit under Appearance / Theme Options / General / "Set the maximum times you can use a metabox on a single page".


29. Service Block Meta Box Options

There are 3 main display options for the Service Block meta box.

Here is a screenshot from the documentation:

In order of appearance in the screenshot:

A) Vertical layout (can be 1-3 in a row, always shows as circled style)

B) Horizontal layout (1-2 in a row, can be standard or circled style)

C) Horizontal layout "3 column" where the middle column is an image

30. Using Shortcodes

The shortcodes are accessible via the shortcode button in the content editor. 

We have full list here: http://docs.themovation.com/bellevue/#shortcodes

The add shortcode button looks like this:

Shortcodes should be accessible anywhere there is a content editor toolbar. Potentially also in any text fields as well. 

31. Hide comments section "You may use these HTML tags".

This is from WordPress, you can edit the template file directly (please use a child theme) or you can hide it by putting the following under theme options / general / custom css:

p.form-allowed-tags {
    display: none;
}

Template file is: templates/comments.php

Also, if you are looking to disable comments on pages or posts please refer to this article.

http://www.cryoutcreations.eu/wordpress-themes/wordpress-tutorials/wordpress-disable-comments-tutorial

Cheers!

32. How to Change or Remove the Credit in the Footer

To remove the text you can just add this code into your Custom CSS box in the Theme Options area:

#footer .credit {display:none}

If you'd like to change the text instead, you just have to open up footer.php in the theme folder (or add it to the child theme folder if you're using one) and you can edit the credit text there.

33. Slider loads after content appears on the page. Slider is last to load.

This happens because of how the slider loads on the page. A preloader is a great solution for this.

Here are a couple of good options:

https://wordpress.org/plugins/dwl-preloader/

or

https://wordpress.org/plugins/zd-pre-loader/

34. Optimal header image sizes and settings

If you want to adjust your image more specifically, try unchecking parallax and play around withe the background settings so that you can pick a focal point, like center center. 

As an example of my page:

http://demo.themovation.com/bellevue/hotel/explore/

Here is the background settings to make the image stay crisp while centering it properly:

Actual image link (1400 x 600)

I'm viewing your site on a 1920 x 1200 monitor.

35. Adding a custom metabox

Warning: Advanced Topic. Please always make a full backup of your website before making any core customization to this theme.

Sometimes you may want to add a custom metabox field and then have that display on a page or in area of your page.

Step one

Install and activate the child theme. 

All of our themes include a child them that you should be able to install and activate just like a normal theme. If you don't see the theme under Appearance / Themes / then you'll need to Add / Upload it from the theme zip you downloaded from ThemeForest. 

Step Two

Create a file called functions.php inside the child theme folder if it does not exist already. You can add this via your FTP program and a text editor or you your cpanel to create and add the file.


Step Three

Add the following action_filter inside the new functions.php. If you've started with an empty file it should look like this. 

<?php
/**
 * Bellevue Child Theme Functions File.
 */

/* Add Custom Top Nav Text Metabox. */
add_filter( 'rwmb_meta_boxes', 'themo_register_custom_meta_boxes' );

function themo_register_custom_meta_boxes( $meta_boxes ) {
    $prefix = 'themo_';

    // 1st meta box
    $meta_boxes[] = array(
        'id'         => 'personal',
        'title'      => __( 'Top Nav', 'BELLEVUE' ),
        'post_types' => array( 'post', 'page' ),
        'context'    => 'normal',
        'priority'   => 'low',

        'fields' => array(
            array(
                'name'  => __( 'Top Nav Text', 'BELLEVUE' ),
                'id'    => $prefix .'top_nav_text',
                'type'  => 'text',
                'size' => '40',
            ),
        )
    );

    return $meta_boxes;
}

You can add any metabox type you like, check out this link for more examples:

How to register Meta Boxes

https://metabox.io/docs/registering-meta-boxes/

Different Field Types

https://metabox.io/docs/define-fields/

More reading: https://metabox.io/docs/

* Now that you've added this action_filter you should see a new meta box on all your pages and posts at the very button of the edit screen. In this example above it looks like this: 


Step Four

To display the content of your meta box you'll need to write code where you want the content to appear. In our example above we added a custom top nav text to override the theme option setting. So we'll need to edit header-top-navbar.php inside the templates folder. So that we do not edit core files in the parent theme, we'll want to copy this file from the parent themes template folder to the child theme template folder. So make a copy of header-top-navbar.php and copy it to the child theme folder inside of a new sub folder called templates. It should look something like this:

You can do this with your FTP program or cpanel file manager / editor. 

Step Five

Add the custom code around line 211 of header-top-navbar.php inside the child theme folder.

    /* Get top nav text. */
    // Check for top nav text from page, if not exists, than
    // get the theme options setting.
    
    $page_top_nav_text = false;
    $page_top_nav_text = get_post_meta($postID, "themo_top_nav_text", true);
        if(isset($page_top_nav_text) && $page_top_nav_text > ""){
            $top_nav_text = $page_top_nav_text;
        }else{
            $top_nav_text = ot_get_option( 'themo_top_nav_text');
        }
        if ( ! empty( $top_nav_text ) ) {
            echo '<p>'.wp_kses_post($top_nav_text).'</p>';
        }

This example is a little different in that we are merging it with exisiting logic, we are saying,

"check the page for the new top nav metabox field first, if it doesn't exist, then use the theme option setting'".

You might use something simpler if you you are just looking to output the field value. Something like this:

$page_top_nav_text = get_post_meta(get_the_ID(), "themo_top_nav_text", true);
if(isset($page_top_nav_text) && $page_top_nav_text > ""){
    echo '<p>'.wp_kses_post($page_top_nav_text).'</p>';
}
            

You can place the above function anywhere you wish the custom field to output. Essentially what you created is just a meta value and so you can do some pretty cool stuff with it. Check out more on the WordPress Codex.

https://developer.wordpress.org/reference/functions/get_post_meta/

The Metabox plugin also allows you to get the custom field value in other ways. Read more here: 

https://metabox.io/docs/get-meta-value/

Have fun!


36. How do I change or remove the logo?

To add a logo

The default logo that shows in the upper left corner is bundled with the theme. You’ll need to go under Appearance > Theme Options and look under the General Tab to find the areas where you can upload your own logo.

There are two areas where you upload your logo.

  1. Logo with Retina Support
  2. Upload Logo for Transparent Header

The first one is for your standard logo. The second one is for the logo that appears on the transparent header (generally a white version instead).

To Adjust the size

You can also adjust the size of your logo before you upload by moving the Logo Height Slider up or down. Once that is done, you must save your changes and then re-upload your logo for the new size to take shape.

To hide the logo

If you want to hide the logo entirely, you can add this code to your child theme, or to the Custom CSS box under Appearance > Theme Options:

#logo {visibility:hidden}

How to make a Retina Logo

If you would like to have a retina logo, you'll need to figure out the non retina size first, set that size using the logo size slider under Theme Options / General / Logo Height. Then save changes. Once you know and set the height, you'll need to make sure the logo you will upload is twice the size as of the height you set. Then you need to upload it under 'Logo with Retina Support' and also one for 'Upload Logo for Transparent Header' if you are using transparent header. 

That should make a logo exactly twice the size of your non retina version automatically. 


37. Skip Cart Go Straight to Checkout Page in WooCommerce

WooCommerce workflow can be a little too long for simple products, here’s how to skip past the cart page and go straight to the checkout page.

We've found a few article and a plugin that might help you skip a step or two during the payment process.

Skip Cart Go Straight to Checkout Page in WooCommerce (guide)

WooCommerce: Skip Product & Cart Pages (guide)

WooCommerce Direct Checkout - Plugin

Did this work for you? Let us know :)


38. Cannot import widgets .wie file "You must upload a .wie file generated by this plugin."

** Update Jan 26th, 2017 - All fixed up with the most recent version of Widget Importer Plugin. Issue resolved!

REF: https://wordpress.org/support/topic/solution-for-wp-4-7-1-bug-causing-you-must-upload-a-wie-file-generated-by/#post-8703483

-- Achieved --

* Update Jan 26th, 2017 - We can confirm that WordPress 4.7.2 has again broken the import. We are working to resolve. 

Some people have seen this error,  "You must upload a .wie file generated by this plugin."  when uploading the widget import file. 

This is a known bug as of the release of WordPress 4.7.1 and will be fixed in 4.7.2 but there is no ETA on that release. 

The plugin authors recommend installing another plugin to temporarily fix this. Please see:

https://wordpress.org/support/topic/you-must-upload-a-wie-file-generated-by-this-plugin-2/#post-8647979

This is the plugin you can use: 

https://wordpress.org/plugins/disable-real-mime-check/

Please let us know if you have any questions or concerns. 

39. Remove Scroll to Top Arrow in the right side bottom of the website.

To remove the scroll to top button in the bottom right side of your website.

#scrollUp {
    display: none !important;
}

or to move it left...

#scrollUp {
    left: 18px !important;
    right: inherit !important;
}

40. Enable Sticky Header and Parallax for Touch Laptops.

We disable sticky header and also parallax for touch devices because of some inconsistencies with mobile menu. You can certain try it with sticky and parallax by turning this setting off just for touch devices. It will still disable for smaller screens like iPhone.

Open pursuit/assets/js/main.js

Go down to line 234 and change it from

var isTouch = Modernizr.touch ||

to

var isTouch = false ||

That should be it.

41. Menu & Header customization

A few people have asked for general customization to the header and menu. Although we do not provide customization as part of the theme support we will list some helpful custom css here to help get you going. If you would like to make css customization, this article will be helpful for you.

https://themovation.ticksy.com/article/4675/

This css can be placed in your Theme Options / General Tab / Custom CSS field.

Change Menu Font Color for Transparent Header

.banner[data-transparent-header="true"] .navbar-nav > li > a,
.banner[data-transparent-header="true"] .navbar-nav > li.active > a {color:#000 !important}

Sticky header background color

.headhesive--clone {background-color: #000 !important;}

Sticky header background color if you are using the dark option

.headhesive--clone.dark-header {
    background-color: #ff0000 !important;
}

Sticky header background opacity

.headhesive--clone .navbar-nav > li > a {
    color: #828282 !important;
}

Regular Header background opacity

.banner[data-transparent-header="true"] {
background-color: rgba(127, 127, 127, 0.8) !important;
}
.headhesive--clone {   background-color: rgba(255, 255, 255) !important;
}

If you are using the dark header option

header.dark-header {
    background-color: #252b2d;
}

If you have sticky header disabled you will need to do something a little different to change the header.

.navbar {
    background-color: #FFF;
}

for white or

.navbar {
    rgba(127, 127, 127, 0.8)
}

to play around with transparency

Also if you want to change the font colour of your menu

.navbar .navbar-nav > li.active > a, .navbar .navbar-nav > li.active > a:hover, .navbar .navbar-nav > li.active > a:focus {
color: #fff;
}
.navbar .navbar-nav > li > a{
color: #fff;
}

Top Navigation Text color and font size. (white header style)

.top-nav-icon-blocks .icon-block p, .top-nav-icon-blocks .icon-block a, .top-nav-text p, .top-nav-text a {
    color: #000 !important;
    font-size:30px;
}

Top Navigation background color

.top-nav{
    background: #81d742 !important;
}

Top Navigation Text Color (Dark Header Style)

header.dark-header .top-nav-icon-blocks .icon-block p, 
header.dark-header .top-nav-icon-blocks .icon-block a, 
header.dark-header .top-nav-text p, 
header.dark-header .top-nav-text a{
    color: #000 !important;
}

Top Navigation background color (sticky header)

.headhesive--clone .top-nav{
    background: #81d742 !important;
}

Top Navigation background color (sticky header - Dark Header Style)

.headhesive--clone.dark-header .top-nav{
background: #81d742 !important;
}


Dark header text menu color

header.dark-header .navbar-nav > li > a, header.dark-header .navbar-nav > li > a:hover, .headhesive--clone.dark-header .navbar-nav > li > a, .headhesive--clone.dark-header .navbar-nav > li > a:hover {
    color: #1e73be;
}

Cheers

42. iCal Syncing with WP Booking System

If you want to import iCal into Google Calendar, then you'll love this new feature on WP Booking System.

First you'll need to have copy of Belleuve which comes bundled with the WP Booking System. Once installed you can go to WP Dash and then:

1) Go to WP Booking System / Calendar / a Create a new Calendar

2) Go to WP Booking System / Sync and copy the iCalendar Link of the calendar you want to sync with Google Calendar.

http://new.tinygrab.com/6407caa59e6b88885bba183659e02c3b82bf8438bc.png

3) Then use the iCal link whenever it is asked by Google when importing or setting up a new iCal sync.

https://support.google.com/calendar/answer/37118?hl=en

That's it.

* WP Booking System does not sync both ways, only from WP Booking System to Google Cal or any calendar that supports iCal. Syncing from iCal into WP Booking System is something that will be added in a future release.

43. Changing Background Photos

Video

This video shows how to add background photos to sliders but also applies to page headers and many other meta box types.


44. WPML Flags in Top Menu

  1. from WPML > "Language switcher options" section
  2. "Language switcher in the WP Menu" sub-section > tick the box "Display the language switcher in the WP Menu" and choose your mainmenu
  3. "Language switcher style" sub-section > choose "Horizontal"
  4. "What to include in the language switcher" sub-section > choose "Flag"

Then add CSS like this :

  1. From Appearance > Themes Options > General (bottom Custom CSS) add this
li.menu-item-language img
{border:1px solid #e7e7e7;
}
@media screen and (min-width: 750px) {
li.menu-item-language,
li.menu-item-language a
{margin:6px 0 0 0 !important; padding:0 2px 18px 0 !important;
}

li.menu-item-language-current a
{margin:6px 0 0 50px !important
}

}

@media screen and (max-width: 751px) { 
li.menu-item-language,
li.menu-item-language a
{display:inline !important;}
}

Huge thanks for Julien for posting a solution! You rock!

45. Page Header Background Settings.

To help you replicate the demo, please install / import the demo content you can see a video of how to do this here:

http://bellevuetheme.com/2015/09/09/wp-booking-system-manage-availability/

If you are trying to add your own custom page header background, try these settings:

http://new.tinygrab.com/6407caa59e6c55314d01725cd003d9642ecc239949.png

Taken from this page (our live demo):

http://demo.themovation.com/bellevue/hotel/explore/

Cheers! :)

46. Translate Strings using Poedit

This is based off the Entrepreneur theme so you'll need to adjust the folder for the .po file accordingly.

Open poedit / 'Create a new translation'

http://grab.by/NYaY

Choose the .po file included with the theme

http://grab.by/NYb4

Choose your language from the drop down.

http://grab.by/NYba

Find the item you wish to translate and add your translations in the box labled 'Translation'

http://grab.by/NYbo

(Save changes. )

http://grab.by/NYbq

Choose your language under Settings / General / Site Language

http://grab.by/NYby

(Save changes)

http://grab.by/NYbC

47. Adding Yoast Breadcrumbs to rooms and pages.

Big thank you to Mario for posting his guide. He took the time to share his solution for other to use. Thank you!!

You'll need to have the Yoast SEO plugin installed Make sure you have the Child Theme installed and copy the bellevue/templates/page-header-rooms.php to your Child Theme into the templates folder

Then on your dashboard, Apperance>>Editor  -- Make sure you select the Bellevue Child Theme and edit page-header-rooms.php around line 210 Find    

<?php           
 //-----------------------------------------------------
 // GET BORDER CLOSE
//-----------------------------------------------------

Type this code BEFORE it          

<?php if ( function_exists('yoast_breadcrumb') )
{yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>

On your dashboard, Apperance>>Theme Options in your custom CSS add this to display the breadcrumbs on the right side instead of the default left side. If you're happy with displaying breadcrums on left side, than ignore this step.

#breadcrumbs {float: right; margin-right: 200px;}

If you want to remove the breadcrumbs from devices with screens smaller then 767px (mobile devices)

@media only screen and (max-width: 767px) 
{#breadcrumbs {display: none !important;} }

To have the breadcrumbs on all your other pages except the Home (front) page Make sure you have the Child Theme installed and copy the bellevue/templates/page-header-rooms.php to your Child Theme into the templates folder

On your dashboard, Apperance>>Editor  -- Make sure you select the Bellevue Child Theme and edit page-header.php at the very end add this code

<?php if (is_front_page()) {
            echo '';
} else {
if ( function_exists('yoast_breadcrumb') ) {
     yoast_breadcrumb('<p id="breadcrumbs">','</p>');
}
} ?>

If you ALSO want to show the Breadcrumbs on the Home page then just use this code instead     

<?php if ( function_exists('yoast_breadcrumb') )
         {yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>

48. Using the Slider Gallery Shortcode [slider_gallery]

You can use the [slider_gallery] to add as many sliders as you wish.
(You can also use the Master Slider plugin and shortcode as well)

The easiest way to add a slider gallery is to add a normal gallery using WordPress Gallery feature.

https://codex.wordpress.org/The_WordPress_Gallery

Then, switch to text mode.

https://make.wordpress.org/support/user-manual/content/editors/visual-editor/

Find the [gallery] shortcode and change it to [slider_gallery] so it would go from this:

[gallery ids="1385, 1384, 1382"]

to something like this:

[slider_gallery ids="1385, 1384, 1382"]


Related:

Disable lightbox in slider_gallery shortcode

https://themovation.ticksy.com/article/7099/

49. Changing Size of a set Image

The best way to update the add_image_size is to do it in a child theme functions file so you don't edit any core files.

I found an article on that here: http://wordpress.stackexchange.com/questions/74934/remove-or-update-add-image-size

So something perhaps like this on your child theme functions file.

function child_theme_setup() {
add_image_size( 'blog_image', 668, 180, true ); //(cropped) 
}
add_action( 'after_setup_theme', 'child_theme_setup', 11 );

Here are all the image sizes used:

themo_full_width
themo_full_width
themo_thumb_slider
themo_thumb_slider_portrait
themo_brands
themo_mini_brands
themo_testimonials
themo_featured
themo_team
themo_showcase
themo_page_header
themo_blog_standard
themo_blog_masonry
themo_rooms_standard

Once that is done you will need to reupload or you can use a plugin like https://en-ca.wordpress.org/plugins/regenerate-thumbnails/ to regen the thumbnail sizes. 

I hope that helps you. 

50. Reducing Spam

If you are referring to Formidable there is a great article for reducing spam emails that come from the forms.

https://formidablepro.com/knowledgebase/add-spam-protection/

If it's from the Booked Plugin, then just install Really Simple Captcha and activate it. 

https://wordpress.org/plugins/really-simple-captcha/

If this is from WP Booking System, make sure you have Captcha enabled under WP Booking / Forms /

Cheers!

51. Installing a Theme and Activation Steps

Video

This video will show you how to install and activate the Bellevue theme. This also applies to Entrepreneur, Stratus and Pursuit themes.

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

This is a common error are there are two zips you download from themeforest, a solution to this issue is in this article.

https://help.market.envato.com/hc/en-us/articles/202821510?_ga=1.61327468.1140640435.1445836150

I hope this helps.

53. Rooms Sort Order

We wrote some help on sorting here: 

http://docs.themovation.com/bellevue/#metaboxsorting

and

http://docs.themovation.com/bellevue/#draganddrop

and here is a little bit more about adding rooms.

http://bellevuetheme.com/2015/08/30/adding-the-rooms-custom-post-type-to-a-page/

The key is going to be the 'order by' setting inside the Rooms meta box. 

Ensure that 'drag and drop' is selected here.

Then under WP Dash / Rooms / All Rooms, make sure 'Sort by order' has been clicked at the top. 

Then you should be able to drag and drop your order. 

just be clicking and dragging on the rooms.

If you are trying to use Prev / Next navigation in the Rooms page header, then you'll need to make sure that all your rooms belong to at least one group. Call it 'All' and make sure to include this group when you add your rooms to the Rooms meta box 'select by group' field. 

Happy to help if you run into any issues.

54. How to Improve Site Load and Performance

When it comes to website load time and overall speed / performance, here are some things to consider:

Plugins: All of our themes include some required plugins and some recommended plugins that each add specific functionality. Depending on your site however, they may not all be necessary. Additionally it's common to have extra 3rd-party plugins that were added for a specific reason, or included with your hosting account. I would recommend disabling all non-essential plugins and testing to see the difference.

Caching: Using a plugin to add caching can usually make a solid difference in load time. We use this plugin in our demos: https://wordpress.org/plugins/w3-total-cache/

Images: In our themes we have setup many content areas to use specific images sizes, but depending on the images you have uploaded they could still be very large in size. It's best to keep most images under 100kb (0.1mb) and smaller if possible. For large, full width images sometimes they'll be larger, but ideally shouldn't be much above 150-200kb.

Preloader: You can consider removing the preloader feature that appears for pages containing a standard slider. The option is under Appearance > Theme Options > General. It's personal preference- without it the page will appear a bit quicker but things may take a second to full align.

Hosting: All hosting is not created equal. Depending who your provider is, it could certainly be a bottleneck. While WordPress is an amazing platform, it's still going to take more resources than say just a basic HTML site. Our recommendation for low-cost hosting is SiteGround which offers really good value at a low price point. If you are looking for really great performance and you're willing to spend a bit more, then definitely check out WPEngine.

CDN: Another option to consider is utilizing a content delivery network (CDN) - we use KeyCDN which works well with W3 Total Cache mentioned above. The main idea behind a CDN is that a user’s distance to the server on which your site is hosted has an impact on loading time - by using a CDN, your content is hosted not just on one server but is distributed on specifically places servers worldwide to improve speeds for all users. More info here.

55. How to Update the Theme

Are you using Stratus V2? Not sure?  Please see important update instructions for Stratus here.

Are you using Bellevue V1? Not sure?  Please see important update instructions for Bellevue here.


For Embark, Stratus V3, Bellevue, Entrepreneur, Pursuit and Eatery, please continue.

The latest versions of our themes can be download any time from your ThemeForest download page.

First of all we recommend making a backup of your files and database when updating the theme, just in case even though it should go over smoothly.

If you have made any modifications to the core theme files then you’ll need to make note of the changes, and in that case we would definitely recommend making a backup. A program like WinMerge (Windows) or DiffMerge (Cross platform) can also be very helpful in that situation. For theme file changes, we always recommend using a child theme instead of editing the theme itself.

If you haven’t made any core theme file changes, the best way to update the theme would be to extract the download package and overwrite the theme folder over FTP.

If you’re not familiar with FTP, then you can just go into the WP dashboard and delete the theme, then install the newly downloaded version of the theme as you normally would (note that you’ll have to switch the theme before deleting it, since WP doesn’t allow you to delete the active theme.) Since your content and settings are stored in the database, you won’t be deleting that content.

If you have any questions, feel free to open a support ticket.

56. Minimum Days Required - WP Booking System

To use minimum days required, click on the 'Add Calendar' in the content editor toolbar.

http://new.tinygrab.com/6407caa59eb3dbbea3f902284c7bded77fc2280a5e.png

then choose 'minimum days' from the modal window.

http://new.tinygrab.com/6407caa59e2c7b41350b4422016ba4345c77257f44.png

Regards

57. Adding your own custom CSS

We have provided an area under the theme options so you can add your own custom css. You will find this under the Dashboard / Appearance / Theme Options / General / Custom CSS. 

Cheers!


58. How to make a full width Google Map

Set your map met box like you would normally, then check 'Replace Header with Map' Under the map tab inside the map meta box.

Uncheck the display and header options inside the map meta box and make sure to check display and custom header checkboxes inside the page header meta box.

Display tab: https://cl.ly/3u0Y2q1k3s3q

Header tab: https://cl.ly/3e0p1D3S1y3p

Map tab: https://cl.ly/1I0F1q1a0w3x

Background, border, padding all unchecked.

Live demo: https://cl.ly/1s112i04002e or http://demo.themovation.com/entrepreneur/contact-2/


59. Updating Bellevue Version 1

Thank you for purchasing Bellevue Version 1. Please make sure you know which version of Bellevue you are currently using before continuing. 

Not sure which version of Bellevue you are running? 

Easy easy to find out, please read this guide.

If you are running Version 1.9.1 or earlier, we will be posting a direct link to the download below.


The most recent version of Bellevue 1 is Version 1.9.1 and you can download it here.

Please do not download directly from ThemeForest, as you will be downloading a newer version that is not compatible with Version 1.


Once you have downloaded the zip from the link above, you can continue.

  1. First of all we recommend making a backup of your files and database when updating the theme, just in case even though it should go over smoothly.
  2. If you have made any modifications to the core theme files then you’ll need to make note of the changes, and in that case we would definitely recommend making a backup. A program like WinMerge (Windows) or DiffMerge (Cross platform) can also be very helpful in that situation. For theme file changes, we always recommend using a child theme instead of editing the theme itself.
  3. If you haven’t made any core theme file changes, the best way to update the theme would be to extract the download package and overwrite the theme folder over FTP.
  4. If you’re not familiar with FTP, then you can just go into the WP dashboard and delete the theme, then install the newly downloaded version of the theme as you normally would (note that you’ll have to switch the theme before deleting it, since WP doesn’t allow you to delete the active theme.) Since your content and settings are stored in the database, you won’t be deleting that content.
  5. If you have any questions, feel free to open a support ticket.

Still not sure?  Please open a ticket and we will be happy to assist.


Bellevue Version 1 Change log

VERSION 1.9.1 - Sep 14th, 2017

Notes:

Files Updated:

VERSION 1.8.9 - Apr 14th, 2017

Notes:

Files Updated:

VERSION 1.8.8 - Apr 4th, 2017

Notes:

Files Updated:

VERSION 1.8.6 & 1.8.7 - Mar 17nd, 2017

Notes:

Files Updated:

VERSION 1.8.5 - Jan 2nd, 2017

Notes:

Files Updated:

VERSION 1.8.4 - Dec 6th, 2016

Notes:

Files Updated:

VERSION 1.8 - Nov 7th, 2016

Notes:

Files Updated:

VERSION 1.7 - Oct 27th, 2016

Notes:

Files Updated:

VERSION 1.6.6 - Oct 4th, 2016

Notes:

Files Updated:

VERSION 1.6.5 - Jul 9th, 2016

Notes:

Files Updated:

VERSION 1.6.4 - July 4th, 2016

Notes:

Files Updated:

VERSION 1.6.3 - June 21nd, 2016

Notes:

Files Updated:

VERSION 1.6.2 - June 2nd, 2016

Bug Fixes

Files Updated:

VERSION 1.6.1 - May 10th, 2016

VERSION 1.6 - April 23rd, 2016

VERSION 1.5.5 - April 12th, 2016

VERSION 1.5.4 - March 25th, 2016

VERSION 1.5.2 FEB 28, 2016

VERSION 1.5.1 JAN 21, 2016

VERSION 1.5 JAN 16, 2016

Version 1.4.3 - Dec 18, 2015

Updated all plugins
+ bellevue-custom-post-types,zip (new version)
+ bellevue-shortcodes.zip (new version)
+ masterslider.zip (new version)
+ meta-box.zip (new version)
+ meta-box.zip (new version)
+ wp-booking-system.zip (new version)
+ style.cs (Version bump)
+ lib/custom.php (bug fixes)
+ assets/js/main.js (bug fixes)
+ templates/meta-testimonials.php (bug fixes)
+ lang/bellevue.pot (added)

Version 1.3.6 - October 23, 2015

+ templates/meta-slider-flex.php

Added Target attribute on the button shortocde.

+ lang/bellevue_en.mo

+ lang/bellevue_en.po

Update localization to support plugins and option tree

+ lib/titles.php

Typo causing error. esc_html__ on line 33 was duplicated

+ assets/js/main.js

Adding support for external links to angular sites.

+ lib/custom.php

Master Slider Version Bump

+ assets/js/main.js

+ assets/js/vendor/vendor_footer.js

Correct bug / lightbox reversed order via prev / next

+ style.css

Version bump

Version 1.3.4 - October 6, 2015

File: assets/js/vendor/vendor_footer.js

Note: Correct bug / lightbox reversed order via prev / next

File: lib/custom.php

Note: Bellevue Shortcode Plugin - Update 1.2.4 - Support for pre / next inside lightbox for slider_gallery

File: plugins/bellevue-shortcodes.zip

Note: Bellevue Shortcode Plugin - Update 1.2.4 - Support for pre / next inside lightbox for slider_gallery

File: register-meta-boxes.php

Note: Fixed missing service block custom post types from showing inside the select individually service block split metabox.

File: style.css

Note: Version bump

Version 1.1 - August 25, 2015

Initial Release

60. Adding Rooms or Portfolio Projects

Video

This is a video overview of how to add a room to the Bellevue theme. Also applies to portfolio projects in the Entrepreneur and Stratus themes.


61. Trigger Mobile Menu

Sometimes you may want to trigger the mobile menu sooner than the default screen size.

** Before you customize, please back up your files so you can roll your changes back if you need to.**

First thing is to add this custom css under theme options / general / custom css

/* Mobile Menu */


@media screen and (max-width:991px) {


    .navbar-header {float:none}


    .navbar-toggle {display:block}


    .navbar-collapse {
        border-top:1px solid transparent;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);        
    }
    .navbar-collapse.collapse {display:none!important}


    .navbar-nav {
        float:none !important;
        margin:7.5px -15px;
    }


    .navbar-nav > li {float:none}
    .navbar-nav > li > a {
        padding-top:10px;
        padding-bottom:10px;
    }
    .navbar-text {        
        float:none;
        margin:15px 0;
    }


    .navbar-collapse.collapse.in {display:block !important}


    .collapsing {overflow:hidden !important}


    .navbar-nav .open .dropdown-menu {
        position:static;
        float:none;
        width:auto;
        margin-top:0;
        background-color:transparent;
        border:0;
        box-shadow:none;
    }


    .navbar-default .navbar-collapse {border:0}


    .navbar .navbar-nav {
        float:none;
        text-align:left;
        margin:0 0 10px;
        padding-top:15px;
        border-top:1px solid #e7e7e7 !important
    }
    .navbar .navbar-nav > li > a {
        padding:10px 15px;
        margin-left:0;
        margin-right:0;
    }


    .navbar .navbar-nav > li > a:after,
    .navbar .navbar-nav > li > a:hover:after {height:0 !important}


    .navbar .navbar-nav .open .dropdown-toggle {background-color:#eee !important}


    .navbar .navbar-nav .dropdown-menu {background-color:#f4f4f4}


    .navbar .navbar-nav .dropdown-menu li a {line-height:200%}


    .navbar .navbar-nav .dropdown-menu li.active a {background-color:transparent !important}


    .navbar .navbar-nav .dropdown-menu {
        left:auto;
        padding:5px 0;
        border:0;
        box-shadow:0 0 0 0;
    }
    .navbar .navbar-nav .dropdown-menu li a {
        font-size:14px;
        text-align:left;
        padding:5px 15px 5px 25px;
        color:#777;
    }
    .navbar .navbar-nav .dropdown-menu li a:hover,
    .navbar .navbar-nav .dropdown-menu li.active a {color:#333 !important}


    .navbar .navbar-nav .dropdown:hover .dropdown-menu {display:none}
    .navbar .navbar-nav .dropdown.open:hover > .dropdown-menu {display:block}


    .navbar .navbar-nav li:last-child .dropdown-menu {
        right:auto;
        left:auto;
    }
    .navbar .caret {display:inline-block}
}


@media screen and (min-width:768px) and (max-width:991px) {
    .navbar-toggle {margin-right:0}
}

Second step edit assets/js/main.js

line 60 max-width:767px -> 991px


line 67 min-width:768px -> 992px


line 301 max-width:767px -> 991px

That's it. Make sure to clear your cache and fresh.

Tested on our local dev :)

62. Adding down arrow on Sliders

When you add a slider meta box, you have the option to enable a down arrow, it's inside the slider meta box on your edit screen, Slider / Slider tab / Down Arrow.

Cheers!

63. Custom Color for Rooms Hover

.room-overlay {
    background-color: #a94442;
}

* Custom CSS can be added under Dashboard / Appearance / Theme Options / Custom CSS

64. Error message: Download failed. A valid URL was not provided.

If you see an error message "Download failed. A valid URL was not provided." when attempting to install the bundled plugins, try disabling the child theme (if active) before instaling the plugins.

65. Limit to rooms shown | Max Rooms

Sometimes you may want to show more than 10 rooms at once. There is an easy fix! If you go to settings / reading / and edit the show blogs at most setting, bump it from 10 to whatever you need. :)


66. Enable Transparent Header for Touch Laptops.

We disable transparency for touch because of some inconsistencies with mobile menu. You can certain try it with transparency by turning this setting off for "touch" devices. It will still disable for smaller screens like iPhone.

Open bellevue/assets/js/main.js

line 263 of main.js

var isTouch = Modernizr.touch ||

should be

var isTouch = false ||

Also, go into page-header.php and change

<script>
            jQuery(document).ready(function($) {
                "use strict";
                if (Modernizr.touch) {
                    <?php echo sanitize_text_field($background_js);  ?>
                }
            });
        </script>

to

<script>
            jQuery(document).load(function($) {
                "use strict";
                if (Modernizr.touch) {
                    <?php echo sanitize_text_field($background_js);  ?>
                }
            });
        </script>

That should be it. :)

67. Required & Recommended Plugins - Stratus

All the plugins that you will need to use are either bundled or downloadable for free. There are no extra costs. 

Installing plugins is all taken care of using the built in plugin manager. Once you go though the Activation / Installation steps you will be set.


Required

Optional (Can be deactivated if you aren't using certain features)

Install / Activation steps only (Can be deleted once theme is installed / demo content imported)

68. Required and Recommended Plugins - Pursuit

Here is a list of the plugins that are either required or recommended for use with the Pursuit theme:


69. Using Widget Logic

Let's say you wanted to show the WooCommerce cart in a sidebar but only on the about page. You would add the WooCommerce cart to your sidebar and then at the bottom of the widget under the 'Widget Logic' header you would add something like:

is_page('about')

So, only display where the page name is about.

or lets say you wanted to show another widget but only on the home page, you would add the widget to your sidebar and then add the following under the 'widget logic' header.

is_front_page()

This uses built in WordPress Logic. You can see a full list of them here:

http://codex.wordpress.org/Conditional_Tags

and some examples on the Widget Logic plugin page here:

https://wordpress.org/plugins/widget-logic/other_notes/

70. Master Slider Full-screen mode

One thing we noticed while playing around with Master Slider is that sometimes the full screen mode can extended past the fold of the screen or below the view port. We've found that adjusting your Fullscreen Margin helps to make it meet up with the bottom of the screen.

71. Sticky Header Logo Size

Normally the logo is resized for the sticky header to move it up and out of the way allowing for more screen real estate. Sometimes though you may want the sticky header logo to be a bit larger or even the same size as the regular logo. You can fine tune this setting using the following custom CSS in your WP Dash / Appearance / Theme Options / General / Custom CSS

/* Adjust the sticky Header logo height */
.headhesive--clone #logo img {
    height:inherit !important;
    width:inherit !important;
    max-height: 75px !important;
}

/* Adjust the padding above your menu */
.headhesive--clone .navbar-nav {
    margin-top:34px !important
}

/* Adjust the padding for cart icon */
.headhesive--clone .themo_cart_icon{
    margin-top:46px !important
}

Cheers!

72. Communication between WooCommerce and WP Booking System

The booking system hands off the number of nights to WooCommerce via add_to_cart shortcode but does not pass any other info to WooCommerce.

We’ve recently added support for passing Check and and Check out dates to WooCommerce and we’ve also provided 3 additional custom fields to be used in the future.

This code is available in the child theme that we have included but you may need to work with a developer or designer to enable this and to make this work to your needs.

The plugin is developed by another company and we have requested some big updates, they are currently working on them.

Some people have assed about the order status and if it updates automatically with WooCommerce. WooCommerce does not talk to the WP Booking System like this yet. The WP Booking System can set it to auto pending so that no one else can book those days once the request is made, then Woo takes over for payment. Once the payment has been made and confirmed someone will need to go in and confirm payment then set the auto pending status to ‘Booked’. Currently that’s how it works. 

We’ve requested some updates from the developer and this is something we would like to see too. I’ll be putting a request in. 

73. Slow loading Flex Slider / JS Error

This issue should be resolved with all of the newest versions of our themes, however on some installs the slider has a JS bug that causes the site to load slowly.

To resolve, go to Appearance > Theme Options > Slider and make note of all the ON/OFF settings, then turn all switches to OFF then save changes, then turn them all back to ON and save changes. Then reference your note about the original settings and modify accordingly, then save changes. The JS issue should be resolved.

Thank you!

74. Enable Sticky Header for Mobile and touch laptops

Our theme automatically disables sticky for mobile, so if you want to enable it , just make this modification and it should world on both desktop and mobile. :)

Open up entrepreneur/assets/js/main.js

Then edit line 860

if(!isTouch){

to

if(true){

Let us know how that works. 

75. Yoast SEO Support

Our themes are ready to roll with the Meta Box Plugin for Yoast. You should not need to add any code to it. 

https://wordpress.org/plugins/meta-box-yoast-seo/

There is one caveat though. some content such as Custom Post Types that are referenced on the page won't be added up by Yoasts keyword count but anything entered on the page should be counted.

Cheers!

76. Using Custom Icons

Even though Glyphicons includes over 1000 icons, there may be times when it does not include the one you are looking for. We've started some custom CSS that allows you to add your own icon for your web site.

What you need to do is create an icon image the same size as where you'd like it to appear. Then when adding it, select Glyphicons, and add your own class into the field- like say "custom-icon". Then add the following bit of CSS to either your child theme or the Custom CSS box under Theme Options and your custom image will appear:

.glyphicons.custom-icon:before {
  content:url('http://path-to-your-icon.png')
}


Meta box screenshot:

Caveat: This is not vector so you can't change the colour using CSS and it might also not be responsive depending on your custom CSS.

77. Custom Video Styling

Custom CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.entry-content img,
.entry-content iframe,
.entry-content object,
.entry-content embed {
        max-width: 100%;
}

Custom DIV

<div class="video-container">
<iframe width="1280" height="720" src="paste your yourtube link here" frameborder="0" allowfullscreen></iframe>
</div>

Cheers!

78. Image margin / gap

On our demo, we have an image inside an HTML metabox that sticks to the bottom without any gaps.

http://new.tinygrab.com/6407caa59eb22274a735228cfd8856832554cc54a3.png

Issue: Wordpress adds P tag and that has padding on it.

Solution: We've added a little but of custom code to close this gap. Add this to your Custom CSS under theme options / general / custom css (if you've imported our demo content it should work well, otherwise you may need to adjust the class selectors to suit your layout).

.page-id-2710 #themo_html_4 .col-md-12 p {margin: 0 0 0;}

Cheers!

79. Adding an accent or outline button in the main menu

From the WP Dash / Appearance / Menus / make sure the menu item you want to style has a class of 'th-accent'

If you don't see the CSS Classes option, go up to Screen Options tab at the top and check the 'css classes'

Cheers!

80. Promoting from development to production

For promoting from development to production we find tools like this one are amazing for migrating databases, then you don't have to do the find / replace bit:

http://pixelentity.com/wordpress-search-replace-domain/

Since the options builder we are using (OptionTree) stores the data as serialized it makes it much more difficult to do a simple find / replace and that's why the link above is so great. That service does have a max database size of 5mb though, so we've also found an open source tool that works similarly without the max size limitation:

https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

This is something you can download locally and it supports serialized data as well.

Using a Plugin

As another option, one of our awesome customers has used and recommends the following premium tools which handle the migration from Development to Production.

Thanks Tom!

81. Auto Filter Rooms on Page Load

We wrote a little javascript to help customize what filter is triggered on page load.

Put this in your child theme functions file.

// themo_hook_head_css = to add custom css or JS to your head
add_action('wp_head','themo_hook_head_css');

function themo_hook_head_css() {
    $output="<script>
        jQuery(document).ready(function($) {

            // Change collaboration to your filter name.
            var filterby = 'king';

            // DONT EDIT BEYOND THIS
            jQuery('.rooms-row').isotope({
                // options
                itemSelector: '.rooms-item',
                layoutMode: 'fitRows'
            });

            jQuery('.rooms-row').isotope({ filter: '.p-'+filterby }); // Filter by specific class
            jQuery('a[data-filter=\"*\"]').removeClass( 'current'); // Remove All as active
            jQuery('a[data-filter=\"#themo_rooms_1 .p-'+filterby+'\"]').addClass( 'current'); // Add active state to specific class.
        });
            </script>";
    echo $output;
}

Then change the filterby variable to the filter you wish to auto filter by on page load.

In the example above I want to auto filter on page load by the 'king' filter. You can see an example of the 'king' filter on this page although we don't have it auto filtering at this time.

http://demo.themovation.com/bellevue/hotel/#themo_rooms_1

:-)

82. Stratus - Widget Settings for the Shop / WooCommerce Page

We recommend a plugin called Widget Logic, with that plugin installed and active you can add some logic to each widget, and that allow you to show or hide widgets per page. Here are our examples as seen on the Stratus Demo.

Cart Widget 

https://cl.ly/0d1N1a0M1n1l

is_product() || is_page(2699)

(where the number is the page id of your shop.)

Product Categories Widget

https://cl.ly/3K203T3z2H1n

is_shop() || is_product_category() || is_page(2699)

Payments Accepted

https://cl.ly/1F0v343E2X2g

is_shop() || is_product() || is_product_category()|| is_page(2699)

Recently Viewed

https://cl.ly/0C2k3I362y2i

is_shop() || is_page(2699)

Recent Posts

https://cl.ly/3S3f2y0s421s

!is_shop() && !is_product() && !is_product_category() && !is_page(2699)

Tag Cloud

https://cl.ly/3U272e2n0q2d

!is_shop() && !is_product() && !is_product_category() && !is_page(2699)

Formidable Free Trial

https://cl.ly/0e1G0U151j08

!is_shop() && !is_product() && !is_product_category() && !is_page(2699) && !is_page(821)

Formidable Questions

https://cl.ly/181R06040F0c

is_product()

Woo Filter by Price:

https://cl.ly/341o09453x0S

83. Did we do something awesome for you? Let us know :)

...maybe we went above and beyond to help you resolve an issue or answer a question, maybe you're just in a giving mood... 

If you haven't already, we would love to receive a 5 star rating from you, as it helps others know we give excellent support. It takes a few seconds and makes a big difference.

Click here to give 5 stars: http://themeforest.net/downloads (You must login to Themeforest.net in order to leave feedback)

We hope you have a great day!

Here's what it looks like. That would be greatly appreciated. :)

http://new.tinygrab.com/6407caa59eab84d5efb6251b5d2d5d10c244e54f50.png

You rock!

84. Seasonal Pricing

What we've done is we have snapped the wp booking system into WooCommerce so that each calendar can be tied in with a product or in the case of a variable product, a sku.

You can create one product in WooCommerce and choose variable which allows you to set multiple prices for 1 product.

https://docs.woothemes.com/document/variable-product//

Once that is done you can add the sku replace of the ID like this:

wooproductsku="room_1_summer"

So altogether your shortcode would look something like this:

[wpbs id="1" form="1" title="no" legend="yes" start="1" display="3" language="auto" history="1" tooltip="1" month="0" year="0" selection="multiple" autopending="yes" weeknumbers="no" wooproductsku="room_1_summer"]

Then you create a calendar for each season and use the corresponding sku for that season rate. Something like this:
Summer Calendar:

[wpbs id="1" form="1" title="no" legend="yes" start="1" display="3" language="auto" history="1" tooltip="1" month="0" year="0" selection="multiple" autopending="yes" weeknumbers="no" wooproductsku="room_1_summer"]

Winter Calendar:

[wpbs id="2" form="1" title="no" legend="yes" start="1" display="3" language="auto" history="1" tooltip="1" month="0" year="0" selection="multiple" autopending="yes" weeknumbers="no" wooproductsku="room_1_winter"]

With the WP Booking System, you can create a calendar for each season, and then block off the dates that fall outside of that season, allowing the customer to only selected dates that fall within, coupled with the sku for that seasons rate, the calendars shortcode will add the room with the correct price.

You can also use the same calendar for both seasons, just make sure to add a unique wooproductsku to tell the calendar what pricing to use.

Example:

Setup a variable product:

Add variations 

Add variation prices

Add the calendars to your page

Should look like this in text mode. Make sure to add your wooproductsku parameter.

Add second calendar (notice the Start Month for winter season, could be helpful)

and now how the shortcodes should look in text mode. Make sure to add your wooproductsku parameter.

Make sure you have specified your cart, checkout pages

update your cart behaviour

Testing...

After Book is clicked

Should be redirected to cart page.


That's it!


85. Adding a Circle image or creating a circle crop.

1. Click on the image when editing your page and click on the pencil icon to edit.

2. from the advance menu add the circle class to the image css class section, save you changes.

Cheers!

86. Customizing the Booked Calendar Plugin (colors)

Custom CSS can be added under Appearance / Theme Options / General / Custom CSS

Tooltip Color
.cal-tooltip {
    background-color: #353c40;
}

Active Date Circle

body table.booked-calendar td.today .date .number {
    background: #e3f2f9;
}

Calendar Header

body table.booked-calendar thead, body table.booked-calendar thead th {
    background: #e5e7e9 !important;
}

Box below header (Days of the week)

body table.booked-calendar thead tr.days th, body table.booked-calendar tr.days {
    background: #f1f3f4 !important;
}

Current Day

body table.booked-calendar td.today .date .number, body table.booked-calendar td.today.prev-date .date .number {
    background: #cfcef5;
}

Cheers!

87. Enable Sticky Header for Mobile and touch laptops

Our theme automatically disables sticky for mobile, so if you want to enable it , just make this modification and it should world on both desktop and mobile. :)

Open up stratus/assets/js/main.js

Then edit line 855

if(!isTouch){

to

if(true){

Let us know how that works. 

88. Upgrading from Bellevue v1 to Bellevue v2

In December 2017 we launched the largest update ever for our Bellevue theme that includes a long list of new features and improvements, the most important one being a brand new visual drag and drop builder.

Our original meta box page builder system worked very well, but now that Bellevue had been available for 3 years a lot changed and the new system is a great improvement.

We wanted to deliver the best possible experience and didn't want to compromise on the features of the new version so it is a full rebuild, and as such there isn't a simple upgrade option from v1 to v2. It's essentially a new theme. So for all existing customers, you have the option to continue to use v1, or included for free - you can install v2 as a new theme and recreate your content in the new system.

If you choose to upgrade to v2, we strongly recommend making a backup, though we don't expect any issues to arise.

How to upgrade

Download the latest theme from your ThemeForest downloads page, https://themeforest.net/downloads

Upload the theme zip to your website and activate.

You may see a notice when trying to activate the new theme.

There is a safety switch, which you can turn off. 

define( 'TH_PREVENT_BELLEVUE_UPGRADE', true );

to

define( 'TH_PREVENT_BELLEVUE_UPGRADE', false );

Once you have used the new installer (as seen here), you may need to set your active menu and homepage.

That's it!

You should see a page like: https://cl.ly/3w3M152x1N0X 

How to access your old content

You may want access to your old content but since we no longer use the old metabox builder you won't have access as these plugins have been disabled. You can reactivate the old theme to get access to your old content at anytime. Just activate Bellevue version 1, and you will also need or reactivate a few plugins:

404 Error - If you see a 404 error trying to access your old Room, try going to Settings / permalinks / and click save to reset the permalink structure. You may need to do the same step when reactivating the new version of Bellevue.

Switch back to the new version when you are ready.

There is separate documentation for the new version which is available here: http://themovation.helpscoutdocs.com

If you have any questions, please feel free to open a ticket here on the support system: https://themovation.ticksy.com/

89. Custom Star Rating to Testimonials.

Although the testimonials do not include a star rating you can certainly use the built in Glyphicons to make a star rating. Here is an example of what you would add to the Quote area.

<span class="glyphicons glyphicons-star"></span><span class="glyphicons glyphicons-star"></span><span class="glyphicons glyphicons-star"></span><span class="glyphicons glyphicons-star"></span><span class="glyphicons glyphicons-star"></span>

There are also many plugins that can provide you with advance testimonial quote bubbles. 

90. Polylang Error | Warning: Illegal offset type in isset or empty

Warning: Illegal offset type in isset or empty in wp-content/plugins/polylang/include/cache.php on line 54

Warning: Illegal offset type in isset or empty in wp-includes/pomo/translations.php on line 85

Warning: Illegal offset type in wp-content/plugins/polylang/include/cache.php on line 42

You might see the following error after installing and activating Polylang.

Resolve by going to Theme Options / Top Navigation / and ensure that all fields are filled out and that nothing is empty.

http://new.tinygrab.com/6407caa59e905908c3c37dcb2e4e04eec3be52e440.png

Cheers!

91. Adding a button to the navigation

You can add the code below into your child theme, or Custom CSS box under Theme Options to have a button in the main navigation, as shown in another of our theme demos here: http://demo.themovation.com/entrepreneur

Once the code is in place, you just need to add the class "th-accent" onto each menu item you'd like to appear as a button:

If that option is not visible, go to the Screen Options in the top right and select the option.

Here is the code:

.banner[data-transparent-header="true"] .th-accent {
    border: 1px solid rgba(255,255,255,0.5);
}

.th-accent, .headhesive--clone.banner[data-transparent-header="true"] .th-accent {
    border: 1px solid rgba(0,0,0,0.3);
    padding: 8px 11px;
    margin-top: 6px;
    border-radius: 2px;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.navbar .navbar-nav > li.th-accent > a {
    padding:0;
    margin:0;
}

.navbar .navbar-nav > li.th-accent:hover, .banner[data-transparent-header="true"].headhesive--clone.navbar .navbar-nav > li.th-accent:hover {
    border-color: rgba(0,0,0,0.5);
    background: none;
}

.banner[data-transparent-header="true"].navbar .navbar-nav > li.th-accent:hover {
    border: 1px solid rgba(255, 255, 255,0.7);
    background: rgba(0,0,0,0.2);
}

.navbar .navbar-nav > li.th-accent > a:after,
.navbar .navbar-nav > li.th-accent > a:hover:after,
.navbar .navbar-nav > li.th-accent.active > a:after,
.navbar .navbar-nav > li.th-accent.active > a:hover:after,
.navbar .navbar-nav > li.th-accent.active > a:focus:after {
    background: none !important;
}

.headhesive--clone .navbar-nav > li.th-accent > a:hover:after,
.headhesive--clone .navbar-nav > li.th-accent.active > a:after,
.headhesive--clone .navbar-nav > li.th-accent.active > a:hover:after,
.headhesive--clone .navbar-nav > li.th-accent.active > a:focus:after {
    background: none !important;
}

92. How to Add Breadcrumbs

Breadcrumbs are a little tricky in this case because we have several page header options so depending on what options you choose the code will output in different places. Here's how we have made it work:

1. Install and activate the plugin Yoast SEO: https://wordpress.org/plugins/wordpress-seo/

We'll be basically following the steps outlined here: https://kb.yoast.com/kb/implement-wordpress-seo-breadcrumbs/

2. Install and activate the child theme included in the download package.

Then create a template folder under the child theme folder so it looks like:

\wp-content\themes\stratus-child\templates\

and then make a copy of \wp-content\themes\stratus\templates\page-header.php in the folder you just created. Should look like this:

wp-content\themes\stratus-child\templates\page-header.php

3. Right after line 181, and add in your Yoast code from the article linked above and then save the file.

<div class='container'>
   <div class='row'>

   <?php if ( function_exists('yoast_breadcrumb') )
   {yoast_breadcrumb('<p id="breadcrumbs">','</p>');} ?>

4. Add this code into your Custom CSS box under Appearance > Theme Options:

#breadcrumbs {margin: 15px 0 0 15px;}

5. Enable breadcrumbs in the plugin as mentioned here: https://kb.yoast.com/kb/implement-wordpress-seo-breadcrumbs/

6. Now on your edit screen for the page you wish to show it on, you need to make sure Page Header is enabled and that the custom option is turned on: http://grab.by/SvV2

Then you should have breadcrumbs displaying above the page title: example

93. Show room price and info on touch / mobile

Sometimes you may want to display the rooms price and info for mobile or touch as these devices do not have a hover state. Here is some custom css to help you customize.

@media (max-width:767px){
.room-center{
    opacity: 1;
}
.room-overlay{
    opacity: 1;
    background-color:rgba(0, 0, 0, 0.3);
    }
}

or if you wanted the price / description on at all times you can leave out the @media query..

.room-center{
    opacity: 1;
}
.room-overlay{
    opacity: 1;
    background-color:rgba(0, 0, 0, 0.3);
    }

Try adjusting the background-color to whatever you wish, we made black for this example.

or this example to have text on at all times, with no background tint

.room-center{
    opacity: 1;
}
.room-overlay{
    opacity: 1;
    background-color:rgba(0, 0, 0, 0);
    }

Cheers!

94. Remove entire footer or hide top footer band

If you would like to remove the entire footer, first make sure that you have removed all content from Appearance / Theme Options / Footer and also set the Footer Widget to OFF. Save changes. If you are still seeing a copyright message please add this to your custom css under Appearance / Theme Options / General / Custom CSS

footer.footer {
    display: none;
}

Sometimes you want to hide the widget band because you are not using widgets.

.footer {
    padding-top:0;
}

or you may just want to hide the copyright bar.

.footer-btm-bar {
    display: none;
}

Cheers!

95. How to Change the Color of the Menu Links in the Transparent Header

There is a setting in the Theme Options area to change the menu text color, but that only applies to the standard white header. In the dark header and the transparent header, the menu text is always white.

If you would like to change the menu link text color for the transparent header, below is the code.

You can copy/paste this into your child theme or into your Custom CSS box under Appearance > Theme Options.

This makes the transparent header menu text black (#000) but you can change the values to another color instead:

.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li > a,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li > a:hover,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.active > a,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .themo_cart_icon a i
{color:#000 !important}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.active > a:after,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.active > a:hover:after,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li > a:hover:after
{background-color:#000 !important}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .themo_cart_icon
{border-color:rgba(0,0,0,0.2)}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.th-accent,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.th-accent:hover
{border: 1px solid rgba(0,0,0,0.65) !important;}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.th-accent a:hover:after
{height:0 !important}

96. Setting up a blog

There are two ways to setup the blog. If you want the masonry style, then under Settings > Reading, ensure the page is not set as the Posts page. Then you can select the masonry or standard template under the page attributes metabox on the edit page screen and it will work.


97. Video Tutorials and Guides for Bellevue Hotel + Bed and Breakfast Theme

We have created a website to help you get started with Bellevue, the Hotel + Bed and Breakfast WordPress Theme. Check it out here: http://bellevuetheme.com/tutorials/

98. MIssing demo content XML file.

You may be trying to install the theme but missing or can't find the demo-content.xml file. Please ensure that you are downloading the correct zip from themeforest.

1. Download the theme zip from themeforest here: https://themeforest.net/downloads

2. Make sure to choose 'All Files & documentation' and unzip that on your local computer if you are looking for the demo content file. Then you should see the demo_content folder with demo_content.xml inside that folder.

3. You'll also find a zip file called [themename]-theme.zip and use that as the installable file when installing the theme in your WordPress install.

Let us know if you have any questions.

This article may also be of help to you: https://help.market.envato.com/hc/en-us/articles/202821510?_ga=1.61327468.1140640435.1445836150\%22

Cheers!

99. Mobile Menu Dropdown Parent Link not Clickable

For dropdown links in the menu navigation on mobile, if the parent link leads to its own page as well, the way it works in the mobile menu script, the parent link does not come through on mobile.

Our recommendation in that situation is to add a child link that leads to the same page as the parent link (eg. Shop > View Shop). We feel it's the best user experience, because otherwise it's possible that some mobile users could not realize that the parent link leads anywhere.

If you don't like the idea of having the extra link appear on desktop, and instead want it to only appear on mobile, there is some simple code to make that happen.

This is the code that you can add into your child theme or the Custom CSS box under Theme Options:

@media screen and (min-width:768px) {
  .hide-on-desktop {display:none}
}

Then when you add the new item to your navigation menu, just ensure to add "hide-on-desktop" into the CSS Classes field. (see image below)

If the CSS field is not available, you can add the option from the tab at the top of the screen titled "Screen Options".




Menu Settings:


Desktop View:


Mobile View:


100. Photos included with demo import

We ship the theme with placeholder images for two reasons:

  1. Many of the photos are protected by copyright because they are stock images. *
  2. Various web hosts experienced timeouts when we tried to include photos within the import.

We've provided placeholder images and solid colours as part of the import. We've also provided links to a dropbox folder with the photos that are part of the the creative common license. This file is located under the "demo content" folder in the theme zip download from ThemeForest.

* We can provide link to stock photos upon request so you can purchase your own copy.

We also recommend this site for high quality, free photos: http://unsplash.com/

101. Using Polylang

Helpful Links

Errors and troubleshooting

If you see the Illegal offset error, go to Appearance / Theme Options / Top Navigation and save changes. No other action is required. 

Default home page cannot be seen. You must create a translation in all languages in order to use it as a default Front page.

Menu is removed - Same as above, you must create a menu for both English and french in order for the default menu to show.

Polylang Setup in Bellevue

  1. Install and Activate Polylang
  2. Go to settings / languages / Choose a language / Save changes, in my example I’ll use English Canadian or en_CA
  3. Add as many languages as you need for your website. In my example I’ll be using French Canadian fr_CA
  4. Your languages page should look something like this Screenshot
  5. Media Library - If you don’t need your media library translated (most people don't) please deactivate this under Settings / Languages / Settings / Media - choose Deactivate. Screenshot
  6. Assign default language to existing content
    • If you are translating existing content from a previous website or if you have used the DEMO IMPORT then you will need to specify a language for all the existing content.
    • Please use this guide: https://polylang.pro/doc/assign-a-language-to-an-existing-content/
      • I’ve found the quickest way to the bulk edit mode.
    • Set the default language for all content using the bulk mode.
      • DO THIS FIRST > Custom Post Types under Dashboard / Bellevue
        • Accordions
        • Brands
        • FAQ’s
        • Featured
        • Pricing Plans
        • Sliders
        • Teams
        • Thumbnail Sliders
        • Tours
        • Service Blocks & Showcase
      • DO THIS SECOND > Rooms
      • DO THIS THIRD > Posts
      • DO THIS LAST > Pages

Adding a switcher

Quickest way to add a switcher is as a widget. Appearance / Widgets / Drag and drop the Language switcher into the primary sidebar.

There are also other settings as well here: https://polylang.wordpress.com/documentation/frequently-asked-questions/the-language-switcher/

Translating a Page

Click on the + icon under All Pages / to create a translation or open the page you wish to translate for editing and click on the flag you wish to create a translation for.

or

This will create a new page, then you can choose a title, click inside the content editor and then click publish.

Once this is done, Polylang should copy over all meta boxes and content from the original translation of that page. If not you may need to move some content over manually.

You may notice that some content is missing, this is because you may need to create translations of those custom post types.

Example: The Explore page had three service blocks, What to do , what to see and where to eat. When I translate this page those service blocks won’t show in the French version until they are created and added to the correct group.

English Version live view:

English Version edit view (Service block meta box) Selected by Group ‘Explore - What to do’.

French Version live view

French Version edit view (Service block meta box) Selected by Group ‘Explore - What to do’.

To remedy - Go into Dashboard / Bellevue / Service Blocks and find those service blocks and translate them into the new language and also make sure they are part of the same group ‘Explore - What to do’. Use the plus symbol again.

French Version live view after adding the Service Block Translation.

102. Updating Stratus Version 2 and previous versions

Thank you for purchasing Stratus 2. Please make sure you know which version of Stratus you are currently using before continuing. 

Not sure which version of Stratus you are running? 

Easy easy to find out, please read this guide.

If you are running Version 2.0.2b or earlier, we will be posting a direct link to the download below.


The most recent version of Stratus 2 is Version 2.0.2b and you can download it here.

Please do not download directly from ThemeForest, as you will be downloading a newer version that is not compatible with Version 2.


Once you have downloaded the zip from the link above, you can continue.

  1. First of all we recommend making a backup of your files and database when updating the theme, just in case even though it should go over smoothly.
  2. If you have made any modifications to the core theme files then you’ll need to make note of the changes, and in that case we would definitely recommend making a backup. A program like WinMerge (Windows) or DiffMerge (Cross platform) can also be very helpful in that situation. For theme file changes, we always recommend using a child theme instead of editing the theme itself.
  3. If you haven’t made any core theme file changes, the best way to update the theme would be to extract the download package and overwrite the theme folder over FTP.
  4. If you’re not familiar with FTP, then you can just go into the WP dashboard and delete the theme, then install the newly downloaded version of the theme as you normally would (note that you’ll have to switch the theme before deleting it, since WP doesn’t allow you to delete the active theme.) Since your content and settings are stored in the database, you won’t be deleting that content.
  5. If you have any questions, feel free to open a support ticket.

Still not sure?  Please open a ticket and we will be happy to assist.


Stratus 2 Change log

Version 2.0.2 - September 15, 2017

New Features

Updates & Fixes

Version 2.0.1 - April 13, 2017

Updates & Fixes

Version 2.0 - January 28, 2017

New Features

Updates & Fixes

Version 1.2.1 - December 08, 2016

New Features

Updates & Fixes

Version 1.2.0 - August 25, 2016

New Features

Updates & Fixes

Version 1.1.4 - July 06, 2016

Updates & Fixes

Version 1.1.3 - June 04, 2016

New Features

Updates & Fixes

Version 1.1.2 - May 11, 2016

Updates & Fixes

Version 1.1.1 - Feb 26, 2016

New Features

Updates & Fixes

Version 1.1 – Jan 12, 2016

New Features

Updates & Fixes

Version 1.0 – Dec 17, 2015

103. Removing Meta Boxes aka Content Blocks

1) First make sure the display checkbox is unchecked.

Save your changes.

2) The next thing you will want to do is uncheck that meta box from the meta box builder.

3) If you have more than 1 (or multiple) meta boxes of the same type (eg. Showcase 1, Showcase 2, Showcase 3). You can use the Slider under the 'Quantities' tab to remove the meta boxes. 

Caution! Be careful here as you still need to uncheck the display checkbox under each meta box before you remove it from the meta box builder or else it will display on the frontend but be hidden from the backend (admin / edit screen).

4a) To remove multiple meta boxes of the same time. Uncheck the display checkboxes, in this case, showcase 2 and showcase 3. 

4b) Then slide the quantity slider down to 1.

Save changes.

Note: The slider only works in numerical order, so sliding from 3 down to 1, will remove Showcase 3 and Showcase 2 in that order, regardless of how you have sorted them on the page. That's why we have labelled them 'Showcase 2' and 'Showcase 3'. 

104. Start here!

Looking for more help or documentation?

We’ve made some additional help for you! Please check out:

Video tutorials http://bellevuetheme.com/tutorials/

FAQ: http://bellevuetheme.com/faq/

Articles: https://themovation.ticksy.com/articles/10115/

Helpful Plugins: http://bellevuetheme.com/add-ons-plugins/

Documentation: http://docs.themovation.com/bellevue/

If you are still having issues, please let us know, we can help. https://themovation.ticksy.com:)

105. Change the Mobile Menu Break Point

Sometimes you may want to trigger the mobile menu sooner than the default screen size.

** Before you customize, please back up your files so you can roll your changes back if you need to.**

The first thing is to add this code into the Custom CSS box under Appearance > Theme Options > General

/* Mobile Menu */

@media screen and (max-width:991px) {

    .navbar-header {float:none}

    .navbar-toggle {display:block}

    .navbar-collapse {
        border-top:1px solid transparent;
        box-shadow:inset 0 1px 0 rgba(255,255,255,0.1);        
    }
    .navbar-collapse.collapse {display:none!important}

    .navbar-nav {
        float:none !important;
        margin:7.5px -15px;
    }

    .navbar-nav > li {float:none}
    .navbar-nav > li > a {
        padding-top:10px;
        padding-bottom:10px;
    }
    .navbar-text {        
        float:none;
        margin:15px 0;
    }

    .navbar-collapse.collapse.in {display:block !important}

    .collapsing {overflow:hidden !important}

    .navbar-nav .open .dropdown-menu {
        position:static;
        float:none;
        width:auto;
        margin-top:0;
        background-color:transparent;
        border:0;
        box-shadow:none;
    }

    .navbar-default .navbar-collapse {border:0}

    .navbar .navbar-nav {
        float:none;
        text-align:left;
        margin:0 0 10px;
        padding-top:15px;
        border-top:1px solid #e7e7e7 !important
    }
    .navbar .navbar-nav > li > a {
        padding:10px 15px;
        margin-left:0;
        margin-right:0;
    }

    .navbar .navbar-nav > li > a:after,
    .navbar .navbar-nav > li > a:hover:after {height:0 !important}

    .navbar .navbar-nav .open .dropdown-toggle {background-color:#eee !important}

    .navbar .navbar-nav .dropdown-menu {background-color:#f4f4f4}

    .navbar .navbar-nav .dropdown-menu li a {line-height:200%}

    .navbar .navbar-nav .dropdown-menu li.active a {background-color:transparent !important}

    .navbar .navbar-nav .dropdown-menu {
        left:auto;
        padding:5px 0;
        border:0;
        box-shadow:0 0 0 0;
    }
    .navbar .navbar-nav .dropdown-menu li a {
        font-size:14px;
        text-align:left;
        padding:5px 15px 5px 25px;
        color:#777;
    }
    .navbar .navbar-nav .dropdown-menu li a:hover,
    .navbar .navbar-nav .dropdown-menu li.active a {color:#333 !important}

    .navbar .navbar-nav .dropdown:hover .dropdown-menu {display:none}
    .navbar .navbar-nav .dropdown.open:hover > .dropdown-menu {display:block}

    .navbar .navbar-nav li:last-child .dropdown-menu {
        right:auto;
        left:auto;
    }
    .navbar .caret {display:inline-block}
}

@media screen and (min-width:768px) and (max-width:991px) {
    .navbar-toggle {margin-right:0}
}

The second step is to edit assets/js/main.js and change the values as shown:

line 30 max-width:767px -> 991px

line 37 min-width:768px -> 992px

line 272 max-width:767px -> 991px

That's it. Make sure to clear your cache and refresh.

106. How to find what version of the theme you are using.

Login into your WordPress admin panel and go to “Appearance” -> “Themes”. Here are listed all your installed themes. Click on desired theme and pop-up window will appear. On the right-side, near theme name is displayed theme version. This method works both for active and inactive themes.


107. Email Form Notifications

Adding and editing email notifications is managed in two areas depending on which plugin are you using.

Formidable:  https://formidablepro.com/knowledgebase/email-notifications/

and WP Booking System:

http://bellevuetheme.com/2015/09/09/wp-booking-system-create-a-booking-form/

more about WP Booking System...

http://bellevuetheme.com/2015/09/09/wp-booking-system-receive-and-manage-bookings/

http://bellevuetheme.com/2015/09/09/wp-booking-system-publish-a-calendar/

http://bellevuetheme.com/2015/09/09/wp-booking-system-manage-availability/

http://bellevuetheme.com/2015/09/09/wp-booking-system-create-a-calendar/

108. Loading accordions with a closed state

By default the first accordion will load open, but sometimes you may want it to be closed:

We're using Bootstrap 3 and by default it expands the first accordion in the list. There would be a way to change the way it works but it would require customization. You may need to implement the child theme and have a look at the Bootstrap javascript. This person seemed to have made it work:

http://stackoverflow.com/questions/20347553/bootstrap-3-collapse-accordion-collapse-all-works-but-then-cannot-expand-all-wh

http://jsfiddle.net/KyleMit/f8ypa/

Having said that, there is a quicker and easier way, which would be to just use some CSS to hide the first accordion:

.panel-group .panel-default:first-child {display:none;}

And if you only want that to take effect on one page, then you could prefix that with the page's unique body class.

If you're unclear about how to find the body class, have a look at the second half of this article: https://themovation.ticksy.com/article/4675/

109. Customization to show 2 rooms or 2 columns vs 3, 4 or 5.

To show 2 rooms. Put this under Appearance / Theme Options / General / Custom CSS

@media screen and (min-width:992px) {
   .rooms-row {
       width:auto;
       max-width:760px;
       margin-left:auto !important;
       margin-right:auto !important;
   }
   .rooms-row .item {width:380px !important;}
}

To target just one specific meta box, try putting the meta box ID in front of it. You can also add in a custom anchor ID and use that too.

Example: Let's say you just wanted to target the first rooms meta box.

@media screen and (min-width:992px) {
   #themo_rooms_1 .rooms-row {
       width:auto;
       max-width:760px;
       margin-left:auto !important;
       margin-right:auto !important;
   }
   #themo_rooms_1 .rooms-row .item {width:380px !important;}
}

or a Single Room

#hidethis{
    display:none;
}
@media screen and (min-width:992px) {
   .rooms-row {
       width:auto;
       max-width:380px;
       margin-left:auto !important;
       margin-right:auto !important;
   }
   .rooms-row .item {width:380px !important;}
}

Cheers!

110. SSL HTTPS troubleshooting

Our themes are setup to work well in SSL / HTTPS. If there is an issue, it could be that something has not been fully setup yet for SSL on your site. Have a look at this article that displays the steps for setting up SSL in WordPress: http://www.wpbeginner.com/wp-tutorials/how-to-add-ssl-and-https-in-wordpress/

If any issues persist after ensuring all the steps have been followed, please feel free to open a ticket.

111. How to Change the Transparent Header Content From Light to Dark

By default, the navigation and text content in the site header is white when the transparent header is enabled.

If you'd like you can change it to black instead. You can copy/paste this code and add it into your child theme, or your Custom CSS box under Appearance > Theme Options:

.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li > a,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li > a:hover,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.active > a,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .themo_cart_icon a i
{color:#000 !important}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.active > a:after,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.active > a:hover:after,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li > a:hover:after
{background-color:#000 !important}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .themo_cart_icon
{border-color:rgba(0,0,0,0.2)}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.th-accent,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.th-accent:hover
{border: 1px solid rgba(0,0,0,0.65) !important;}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .navbar-nav > li.th-accent a:hover:after
{height:0 !important}
.banner[data-transparent-header="true"]:not(.headhesive--clone) .top-nav-icon-blocks .icon-block p,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .top-nav-icon-blocks .icon-block a,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .top-nav-text p,
.banner[data-transparent-header="true"]:not(.headhesive--clone) .top-nav-text a
{color:#000 !important}

112. Centering Slider_Gallery aka slider

Try this for your centering of the slider in your content editor:

<div style="width:50%; min-width:300px; text-align:center; margin: 0 auto;">[slider_gallery ids="3162, 3164"]</div>

If you wanted to align it to the right, then I would recommend using column shortcodes.

[column span="6"][/column][column span="6"][slider_gallery ids="3162, 3164"][/column]

Cheers!

113. Enabling Transparent Header Support on Touch Laptops

We disable the transparent header on touch devices because of some inconsistencies with the mobile menu. In some cases however it can occur where a non-mobile device is detected as touch-enabled.

If you find you would like to enable it for those devices, you can make this change below. It will still be disabled for mobile screens including iPhone and Android.

Open stratus/assets/js/main.js

On line 263

var isTouch = Modernizr.touch ||

Change to

var isTouch = false ||


Also, go into page-header.php

On or around line 160, change 'ready'

<script>
            jQuery(document).ready(function($) {
                "use strict";
                if (Modernizr.touch) {
                    <?php echo sanitize_text_field($background_js);  ?>
                }
            });
        </script>

to 'load'

<script>
            jQuery(document).load(function($) {
                "use strict";
                if (Modernizr.touch) {
                    <?php echo sanitize_text_field($background_js);  ?>
                }
            });
        </script>

Then if you save the file and clear your cache, you should see the change.

114. Changing Colors in the Theme (and other style changes)

General Colors

From the WP Dash, under Appearance > Theme Options > Colors, there are two color inputs that affect many of the colors in the theme:

Other Colors & Styling Changes

For areas not affected by the color settings in the Theme Options area, our general recommendation is to use the Inspector feature available in Chrome and Firefox. Just right click on an element on the page and select Inspect Element:

Then you can see the CSS that is affecting the element in question:

From there, you can copy/paste the relevant sections into your child theme or Custom CSS box and make the necessary changes. (Appearance > Theme Options > General > Custom CSS)

More info on the Chrome Inspector: https://developer.chrome.com/devtools
More info on the Firefox Inspector: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector

Page or Section Specific Changes

If you want to make changes specific to one page or just one section, you can make use of the unique IDs and unique classes.

The same as above, when you right click and select Inspect Element you'll see the source of the page which will show that each page has a unique class:

You can use that in your code like so:

.page-id-2710 h3 {color:#333}

That would change the color for all h3 tags on that one specific page.

Scrolling down you'll see that each section has its own IDs and classes that can be used in the same way:

The selected div tag ID comes from the anchor (if you are using one). The other ID and classes are all output by the meta box.

115. How to find your Envato Purchase Code

To get your Envato Purchase Code, follow the steps below:

  1. Login to your favorite Envato Marketplace (ThemeForest, CodeCanyon for instance)
  2. Once logged in, move your mouse over your username on the top right
  3. Click on the menu item “Downloads”
  4. Locate the product, and then click on “Download”
  5. Click on “Licence certificate & purchase code” to download the text file
  6. Open it and locate the “Item Purchase Code”

116. Booked Plugin Sender named WordPress coming from the e-mail address Wordpress@mydomain.com.

To change this default behavior in WordPress, so you have to use a plugin like one of these two:

https://wordpress.org/plugins/easy-wp-smtp

https://wordpress.org/plugins/wp-mail-smtp/

117. WooCommerce Shop Product Columns - How to Change the Number Shown

By default the theme automatically styles the shop pages to show as 3 items per row. However this can be changed with some Custom CSS:

This code is to setup 4 columns:

/* Show 4 products per row on Shop page */
@media (min-width:992px) {
    .woocommerce ul.products li.product {
        width:22%;
        margin-right:4%;
    }
    .woocommerce ul.products li:nth-child(3n+3),
    .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {margin-right:4%}
    .woocommerce ul.products li:nth-child(3n-8) {clear:none}
    .woocommerce ul.products li:nth-child(4n+1) {clear:left}
    .woocommerce ul.products li:nth-child(4n) {margin-right:0}
}

This code is to setup 5 columns:

/* Show 5 products per row on Shop page */
@media (min-width:992px) {
    .woocommerce ul.products li.product {
        width:17.6%;
        margin-right:3%;
    }
    .woocommerce ul.products li:nth-child(3n+3),
    .woocommerce ul.products li.last, .woocommerce-page ul.products li.last {margin-right:3%}
    .woocommerce ul.products li:nth-child(3n-8) {clear:none}
    .woocommerce ul.products li:nth-child(5n+1) {clear:left}
    .woocommerce ul.products li:nth-child(5n) {margin-right:0}
}

118. Go full width with any meta box

This code is in development but you can try it at your own risk. You should be able to go full width with any meta box if you add this custom css.

.inner-container #map .container {
  width:100%;
  max-width:100%;
  padding-left:0;
  padding-right:0;
}
.inner-container #map .row {
  margin-left:0;
  margin-right:0;
}
.inner-container #map .col-xs-12 {
  padding-left:0;
  padding-right:0;
}

Where #map is the meta box you are targeting. 

Custom CSS can be added under Dashboard / Appearance / Theme Options / Custom CSS

119. How the WP Booking System works with WooCommerce

That explains how to you add an add to cart button to the booking form.

Here are the steps:

1) Follow this guide to set it up: Add WooCommerce to a booking calendar

2) Once #1 is complete, when someone fills out a booking form an 'Add to cart' button will appear, along with a message you can customize. "to complete your reservation, please add your room to the cart and checkout".

This custom message can be edited, under WP Booking System / Forms / Edit / Translations / 'Thank you Message'.

You can also change the text of the 'Add to cart' button, see here: Change WooCommerce Add to Cart button text.

2) Once they click on 'Add to Cart' button, the view cart button will appear. 

You can also skip this step and have the add to cart button go directly to the checkout page, see here: Skip Cart Go Straight to Checkout Page in WooCommerce

3) Once on the cart or checkout pages, the visitor processes their order as they would any other eCommerce site and their payment is accepted.

WooCommerce will keep a separate order from the Booking System. Once the payment has been completed you will need to manually update your calendar from pending to booked or whatever your setting are that need to be updated.

Currently there is no communication between WooCommerce and WP Booking System after the reservation has been made and the customer starts the checkout process. We've explained in more detail here: https://themovation.ticksy.com/article/7980/

Here are some additional article that may be of help to you:



120. Stratus Classic

Future article for Stratus Classic upgrade to Stratus.

121. How to Update Stratus

IMPORTANT:

Before updating please find out which version of Stratus you have. Stratus V2 is not compatible with V3


Not sure which version you have?

You can find out quickly and easily. 

Example for Stratus Version 2

Example for Stratus Version 3

From WP Dash / Appearance / Themes / you can click on the Stratus theme and notice the version number.

Looking for the latest copy of Stratus V2 or V3?

Once you know your version, please use the following links to get the latest theme files.

Looking to upgrade from Stratus V2 -> V3? 

Please see: Upgrading from Stratus v2 to Stratus v3


Still not sure?  Please open a ticket and we will be happy to assist.

122. Adding JavaScript or jquery to metabox

* Skip to options B and C for shortcuts..

OPTION A

1) Install and Activate the Child theme (included in themeforest zip download).

2) Create a functions.php file and save it in the child theme folder.

3) add the following to it: (This already may be included in your child theme functions.php)

<?php
/**
 * Bellevue Child Theme Functions File.
 */
function my_themo_footer_scripts() {
   ?>
    <script type="text/javascript">your script here.</script>
<?php
}
add_action( 'wp_footer', 'my_themo_footer_scripts' );

Then add the following code where you want the html to appear.

<div class="">Add your code</div>

OPTION B

I also found that the entire script works in the content editor just not the rich text meta box. If you check 'Content Editor' in the metabox builder can you also sort where it gets displayed.

1) Add content editor to metabox builder.


2) Make sure it's set to display.

3) Sort it using the Order tab in the metabox bilder.

Option C

You may find it's easiest to use a plugin. You can include JS to appear on any specific page, or all pages.

We recommend using this great free plugin: https://wordpress.org/plugins/scripts-n-styles/


Cheers!

123. List of Required and Recommended Plugins for Bellevue.

Required

Optional

Delete these after install / activation

124. Missing photos after demo import.

If you have not imported yet, make sure to follow all the instructions to import the demo content along with the place holder images here: http://docs.themovation.com/bellevue/#democontent specifically the checkbox that says, "download and import file attachments" - make sure it's checked!

Still having issues? Try again...

You can import the demo content if you've missed the step or something went wrong after activation. The import is in your zip that you would have downloaded from ThemeForest. It should be under the /demo_content folder and the file is called Bellevue-demo-content.xml

If you go to Tools / Import / WordPress you should be able to import the pages and placeholder images again. You'll probably want to start the import process from a clean slate. Make sure that all posts and pages have been deleted and removed from your Trash tabs. If you have customized or add pages make sure not to delete your work or back it up.

also under posts and remove all content under Belleve. If you have made modifications then you'll want to back these up to try proceeding without deleting them.

Once this is cleaned up you should be able to import the demo again. It might not be perfect because the demo content is supposed to be installed on a new site but it should be helpful to you. :-)

125. Demo Content

Different demos

There are several live demos, Urban Guest House (Yaletown), Chalet (Rustic), Countryside (Parksville), Beach House (Long Beach), Lake Cabin (Lakeshore), Hotel (Bellevue) and One Pager Style (Yaletown one pager). 

The demos are virtually identical so we've combined them into one import file "demo_import.xml). The homepage and sub pages should look like like all the demos apart from the stock photos which we explain in detail below. If there is something missing that you need assistance with please let us know and we can help guide you through.

If you are looking for the home page slider that has a calendar in it, we've provided an article on how to set that up here: 

Adding Calendar to Slider (Chalet Demo)

If you are looking to setup a form on the homepage like the Hotel, Beachhouse demos please see:

Adding Form to Slider (Hotel, Beachhouse Demo)

Stock photos and image placeholders

We ship the theme with placeholder images for two reasons:

  1. Some of the photos are protected by copyright because they are stock images. *
  2. Many web hosts experienced timeouts when we tried to include photos within the import.

We've provided placeholder images and solid colours as part of the import. We've also provided links to a dropbox folder with the photos that are part of the the creative common license. This file is located under the demo content folder in the theme zip download from Theme Forest.

Cheers!

* We can provide link to stock photos upon request so you can purchase your own copy.

We are happy to assist you with any questions or concerns, just let us know how we can help or improve our setup. 

126. 404 Page Styling and/or Changes

For the 404 page you have a few options:

- If you just duplicate the index.php file in the root directory of the theme and rename it to 404.php then it will become your 404 page template that you can directly edit as you see fit.

- If you want to use the theme's meta box page builder to design a 404 page that way, then you'd want to create a page and setup all 404s to redirect to that page. This plugin can assist with that: https://wordpress.org/plugins/404-to-301/

- Or there's also this plugin that can be used to create a custom 404 page, which would be simpler with fewer features than the above option: https://wordpress.org/plugins/404-page/

127. Auto Filter Portfolio on page load

We wrote a little javascript to help customize what filter is triggered on page load.

Put this in your child theme functions file.

// themo_hook_head_css = to add custom css or JS to your head
add_action('wp_head','themo_hook_head_css');
function themo_hook_head_css() {
    $output="<script>
        jQuery(window).load(function($) {
            // Change collaboration to your filter name.
            var filterby = 'collaboration';
            // DONT EDIT BEYOND THIS
            jQuery('.portfolio-row').isotope({
                // options
                itemSelector: '.portfolio-item',
                layoutMode: 'fitRows'
            });
            jQuery('.portfolio-row').isotope({ filter: '.p-'+filterby }); // Filter by specific class
            jQuery('a[data-filter=\"*\"]').removeClass( 'current'); // Remove All as active
            jQuery('a[data-filter=\"#portfolio_content .p-'+filterby+'\"]').addClass( 'current'); // Add active state to specific class.
        });
            </script>";
    echo $output;
}

Then change the filterby variable to the filter you wish to auto filter by on page load.

In the example above I want to auto filter on page load by the collaboration filter. You can see an example of the collaboration filter on this page although we don't have it auto filtering at this time.

http://demo.themovation.com/stratus/portfolio/

128. Required and Recommended Plugins - Entrepreneur

All the plugins that you will need to use are either bundled or downloadable for free. There are no extra costs. 

Installing plugins is all taken care of using the built in plugin manager. Once you go though the activation / installation steps you will be set.

Required

Optional (Can be deactivated if you aren't using certain features)

Install / Activation steps only (Can be deleted once theme is installed / demo content imported)

129. Enable Sticky Header for Mobile

Our theme automatically disables sticky for mobile, so if you want to enable it , just make this modification and it should world on both desktop and mobile. :)

Open up bellevue/assets/js/main.js

Then edit line 901

if(!isTouch){

to

if(true){

of if you want to totally disable this for mobile try:

if(false){


130. Updating Master Slider

When you purchase an item on ThemeForest, you receive a purchase code for the product you bought directly, but not for any products bundled with it.

Master Slider uses auto-updates, but that requires a purchase code so you if you want to update then you just need to update it manually instead.

**It is important to note that if you 'delete' Master Slider in your plugins page by clicking on the 'delete' button, the uninstall proccess will trigger and it will erase all sliders and data related to Master Slider. Instead you should follow these steps provided by Master Slider to update manually:

Please also note that Master Slider updates frequently, so sometimes the latest version will be newer than what is included in the latest version of our themes. Most updates are not vital. If there is a security fix or important update, we will update Master Slider right away.

If you have any questions, feel free to open a support ticket.

We will always have  recent version of the Master Slider Plugin here: http://bit.ly/masterslider

131. Recommended Server Settings

Check with your web host to ensure it meets the following recommended settings by WordPress

As per : https://wordpress.org/about/requirements/

The site needs:

Highly recommended

Your web host will know what all these terms mean and they should be able to configure your website to includes these settings without any issue.

Here is a helpful article on setting these limits yourself.

http://www.mhthemes.com/support/increase-memory-upload-limit-wordpress/

132. Adding Form to Slider (Hotel, Beachhouse Demo)

Here is a screenshot of our settings under WP Dash / Bellevue / Sliders / Add New

Here is the live demo: http://demo.themovation.com/bellevue/hotel/

Cheers!

133. Installing & Setting up WPML

Setup and Install WPML

Creating a new translation of the Contact page (from demo import).

String Translation

https://wpml.org/documentation/getting-started-guide/theme-localization/ for getting to any strings or trying to approach translation other than digging through the theme templates.

If you have any question, please create a ticket and let us know what issues are you running into. We are happy to help.

Best regards,

Ryan

134. Service Block Colour / Color

Try this CSS to customize the service block colour and hover states.

Main colour

.circle-lrg-icon i, .circle-lrg-icon span {
    background-color: #7df191;
    border-color: #7df191;
}

hover state

.circle-lrg-icon i:hover, .circle-lrg-icon span:hover{
color:#7df191;border-color:#7df191;background-color: rgba(255,255,255, 0);
}

135. Add WooCommerce to a booking calendar

To add WooCommerce to a booking calendar you'll need to include the product ID as part of the shortcode. Here is a snippet from our documentation (scroll down to the heading 'WP Booking System'):

wooproductid="458"

and replace the ID (or 458) with the ID of your new product (https://cl.ly/233d0j1m3D0C)

Your shortcode should look something like this:

[wpbs id="1" form="1" title="no" legend="yes" start="1" display="3" language="auto" history="1" tooltip="1" month="0" year="0" selection="multiple" autopending="yes" weeknumbers="no" wooproductid="458"]

Save changes and view your page.

REF: https://docs.woothemes.com/document/configuring-woocommerce-settings/

Cheers!

136. Sort Order / Drag and Drop Content

You can drag and drop to change the sort order on almost any content that repeats. This includes: Pricing Columns, Service Blocks, Team Members etc..

Here is how you do that:

1 - So you need to had drag and drop selected inside the pricing metabox:

https://cl.ly/24360d1n4318

2 - Make sure you have simple page ordering installed

https://cl.ly/0F30232w1a27

3 - Head over to WP Dash / Bellevue / (the content you wish to sort) and click 'sort by order'

https://cl.ly/0f082T3i070w

4 - Drag and drop the content to your liking. 

https://cl.ly/1Q411E0b1O1e

You can also drag and drop portfolio items or rooms in the same way, please see: 

https://themovation.ticksy.com/article/6890/

137. How to Correct a Form Field Not Appearing Properly

In our themes, the 'Conversion Form' meta box is intended to be used only for short, single line forms such as the one in the header of this page: http://demo.themovation.com/stratus/home-cloud

Generally we recommend using the Content Editor, or an HTML meta box for all other forms instead such as the one on this page: http://demo.themovation.com/stratus/client-form-example/

When the Conversion Form meta box is used for forms containing a textarea field, the alignment may not appear correctly.

But, you may like the centered look and slightly larger fields as well, so if you want that you can just add this code to your child theme, or to the Custom CSS box under Theme Options and it will correct the display:

.simple-conversion textarea {margin-left:10px; margin-right:10px}

138. How to Remove a Section Showing on The Frontend But Not The Backend

There is a specific scenario that can sometimes come up where a meta box appears on the frontend of the website but not in the backend.

Generally speaking, the theme will prevent you from removing a meta box in the backend of the website if the meta box is set with Display ON. It will popup and say to set Display to OFF first. However, if you have multiples of the same meta box type, and the quantity is lowered with the Display set ON, then the meta box will disappear from the backend but not the frontend.

The solution is to increase the quantity for the meta box type that is appearing, save the page, and then go to that meta box and set the Display to OFF. Then the quantity can be decreased again.

If you have questions about this or are not able to correct it, please feel free to open a ticket and we can assist.

Find out how to remove or add back in Meta Boxes here: https://themovation.ticksy.com/article/8003

139. Adding Google Tracking Code aka Google Analytics

The best way to add Google Analytics is with a plugin. The Envato marketplace theme reviewers do not allow us to add a space for tracking code anymore as there are many plugins that can do this. Here is one that we use:

https://wordpress.org/plugins/google-analytics-for-wordpress/

It works very well.

140. How to change the room descriptions. "sleep 2 queen bad" etc

That's managed under the excerpt of the post. If there is no excerpt present then it will take from the first few words of the content in the content editor.


Happy to answer any questions.

141. Setup Auto Pending on the Bellevue Booking System

To set auto-pending. You need tow things. 

1) One of the legend statuses set to auto-pending (See star button)

2) then you'll need to set auto pending in the shortcode. 

or

[wpbs id="1" form="1" title="no"  legend="yes"  start="1"  display="3" language="auto" history="1" tooltip="1" month="0" year="0" selection="multiple" autopending="yes"  weeknumbers="no" wooproductid="458"]

142. How to Update Bellevue

IMPORTANT:

Before updating please find out which version of Bellevue you have. Bellevue V1 is not compatible with V2


Not sure which version you have?

You can find out quickly and easily. 

Example for Bellevue Version 1

Example for Bellevue Version 2

From WP Dash / Appearance / Themes / you can click on the Bellevue theme and notice the version number.

Looking for the latest copy of Bellevue V1 or V2?

Once you know your version, please use the following links to get the latest theme files.

Looking to upgrade from Bellevue V1 -> V2? 

Please see: Upgrading from Bellevue v1 to Bellevue v2


Still not sure?  Please open a ticket and we will be happy to assist.

143. Add 6th column to pricing table

Install and activate the child theme, then create a /templates/ folder inside your child theme folder and copy over meta-pricing_plans.php into that folder. Then overwrite the the contents of that file with this gist. 

The buttons might need a little styling because the padding is designed for 5 columns and under. So you might need to add this to your custom css.

https://gist.github.com/ryanlabelle/0891be47920f650da414acdda530cb57

.pricing-table .btn {
    padding: 8px 25px;
}

144. Disable lightbox in slider_gallery shortcode

Before you being follow the steps in this article to create a child theme and add a javascript block to your child theme's functions file.

Adding JavaScript or jquery to metabox

Then replace the javascript block with this one:

<script type="text/javascript">
    /* Disable slider_gallery lightbox  */
    jQuery(document).ready(function($) {
        "use strict";
        jQuery('.flexslider.gallery a[data-toggle="lightbox"]').on('click', function(event) {
            console.log('disabled');
            return false;
        });
    });
</script>

Your functions.php inside your child theme should look something like this. 

<?php
function my_themo_footer_scripts() {
?>

<script type="text/javascript">
    /* Disable slider_gallery lightbox  */
    jQuery(document).ready(function($) {
        "use strict";
        jQuery('.flexslider.gallery a[data-toggle="lightbox"]').on('click', function(event) {
            console.log('disabled');
            return false;
        });
    });
</script>
<?php
}
add_action( 'wp_footer', 'my_themo_footer_scripts' );

Cheers!

145. How to include Blog Posts on a page

If you would like to add a section of blog posts onto a page on your site, the easiest way is to use a plugin- we have seen this free plugin used with good success: https://wordpress.org/plugins/wp-posts-carousel/

There are also other free options as well: https://wordpress.org/plugins/search.php?q=recent+posts

If you want a premium solution with lots of extra features and options, this plugin is a good option: https://codecanyon.net/item/the-grid-responsive-wordpress-grid-plugin/13306812

If you have questions, please open a ticket and we can assist.

146. Changing the rooms slug, url, permalink

There is a theme option setting to customize the permalink (aka url, slug) for the rooms custom post type.

1) go to theme options / rooms / and change the "Rooms Custom Slug" like so:

http://new.tinygrab.com/6407caa59e22d9244af26c574f4f69a1320ab7f3a9.png

then save changes.

2) Go to Settings / permalinks (just go to the page, don't make any changes) this resets the permalink structure.

http://new.tinygrab.com/6407caa59e33f224ab043f3a2381e29377c17e2fba.png

3) Test

what used to be: mysite.com/rooms/tofino/

(http://new.tinygrab.com/6407caa59e80040453e9a47b40e95c9cbc75aa7856.png)

now looks like: mysite.com/chambres/tofino/

(http://new.tinygrab.com/6407caa59ee4ba819b8b97a99051ea4b632c7751cc.png)

Cheers!

147. Third level menu (aka sub, sub-menu)

The theme currently supports two levels in the navigation, so a third level will not display. However I think a good solution is to use a dash or bullet point to denote a third level, like so:


To get this effect, you can just edit the title section of the navigation links under Appearance > Menus and add in the symbol:


It's not a full fledged third level, but one benefit to this method is that users are much less likely to accidentally close the dropdown as can happen with multiple levels of flyout menus :)

148. How to Recreate the Video Slider In the Live Demo

Here is how you can have a slider just like the one on this page:
http://demo.themovation.com/stratus/home-startup/

The video background is an option in Master Slider, which is a premium plugin that is included during the Theme Activation.

1. Download and extract this zip file which includes the slider import file, the video in two formats, and the fallback image for mobile devices: https://www.dropbox.com/s/639ouq7ytfq7y73/startup-video.zip?dl=1

2. On your WordPress site, upload the image and both video files into your Media Library.

3. When you're inside the Master Slider plugin, click the grey Import & Export button:


4. Navigate to where you extracted the zip file, and select to import the file:
"stratus-masterslider-startup.json"

5. In Master Slider, select the newly imported slider to edit. Then click the box that says #1 to select the slide.


6. In the Background tab, click the + sign to add the fallback image for mobile that you saved in your Media Library.

7. Then in the Video Background tab, add the video in both formats. You'll just need to copy the URL for each of the video formats from your Media Library.


8. Click Save Changes at the bottom. 

Once you have the slider setup, we recommend adding the Master Slider meta box onto your page, and then you can copy/paste the shortcode into the field in the meta box.

Example:


149. Page Builder (aka meta box builder) Overview

How to add content using meta boxes

You can add content just like you would in any WordPress website, the Content Editor is available for you on every page. If you want to add specialized content, like Testimonials, Sliders, Showcases you’ll need to use the Custom Post Types to create them and then a Metabox to show them on your page.

In this example we’ll be adding Testimonials.

Step One:

Add your first Testimonial under Dashboard > ‘Bellevue’ > ‘Testimonials’ – It helps to make groups first but it’s not required.

Step Two:

Create a new page or edit the page you want to show your testimonial on. Inside the ‘Metabox Builder’ check ‘Testimonials’ and ‘Update Post’ to save your changes (reloads page).

Step Three:

Once the page reloads you’ll find that the Testimonials Metabox is now appearing. Inside that box, check the ‘Display’  checkbox, then under ‘Testimonials’ tab, choose whether you want to select your testimonial individually or as part of a group. If you haven’t made a group yet you’ll can go back and do so or select individually for now. Once you have the testimonial  you want to display selected, save your changes using the ‘update’ button. All done.

There are several options inside each Metabox that allow you to add padding, animations, background images and colors etc.

Video 1 - Overview

This shows a live example of how the meta box builder works on our Bellevue Theme. This applies to Entrepreneur and also Stratus as well as Bellevue. 

Video 2 - Adding a testimonial


More reading

150. Upgrading from Stratus v2 to Stratus v3

In November 2017 we launched the largest update ever for our Stratus theme that includes a long list of new features and improvements, the most important one being a brand new visual drag and drop builder.

Our original meta box page builder system worked very well, but now that Stratus had been available for 2 years a lot changed and the new system is a great improvement.

We wanted to deliver the best possible experience and didn't want to compromise on the features of the new version so it is a full rebuild, and as such there isn't a simple upgrade option from v2 to v3. It's essentially a new theme. So for all existing customers, you have the option to continue to use v2, or included for free - you can install v3 as a new theme and recreate your content in the new system.

If you choose to upgrade to v3, we strongly recommend making a backup, though we don't expect any issues to arise.

There is separate documentation for the new version which is available here: http://themovation.helpscoutdocs.com

If you have any questions, please feel free to open a ticket here on the support system: https://themovation.ticksy.com/

151. How to make the Portfolio hover content stay visible

By default in the theme, the portfolio items have content that is visible on hover. If you would like to change the way it works, you have a few options. With each option, you can just add a bit of code into either your child theme, or the Custom CSS box under Appearance > Theme Options.

If you just want to have the icon and text always visible, then you could use this code:

.port-center {opacity:1}

That code will provide this result:

If you also want to have the color overlay always visible then you could use this code instead, and adjust the overlay opacity:

.port-center {opacity:1}
.port-overlay {opacity:0.5}

That code will provide this result:

You can also choose to have this effect only for mobile devices. If you just want to have the icon and text always visible for mobile devices, then you could use this code:

@media (max-width:767px) {
    .port-center {opacity:1}
}

If you also want to have the color overlay always visible then you could use this code instead, and adjust the overlay opacity:

@media (max-width:767px) {
    .port-center {opacity:1}
    .port-overlay {opacity:0.5}
}

152. Using Modal window / Lightbox with a button, shortcode or image link

Video Play Button Modal Shortcode

You can use the Video Lightbox Button from the shortcode generator which outputs a nice play icon.

[video_play src="https://www.youtube.com/embed/4AZR8a5XVSs" width="400" size="xl-icon" icon="glyphicons-play-button"]

Regular Modal

Great for when you want a button to open a modal with text in the modal window.

[modal title="Modal Title here" button_type="default" button_text="Button Text" button_size="default" footer="off"]Content goes here[/modal]

Video Lightbox from a Button

If you're wanting to launch a video from a more regular button instead, you could use this code:

<a class="btn th-btn btn-cta" href="https://www.youtube.com/embed/4AZR8a5XVSs" data-toggle="lightbox" data-width="1280">Launch video</a>

That outputs a CTA button, you could swap out "btn-cta" for "btn-standard" or "btn-ghost" instead. That code can be added anywhere HTML is accepted. You could just add that into the slider Content Editor box instead of using the fields for a slider button.

Video Modal launched from an Image Link

You can use this code to output an image link that opens a video modal:

<a href="https://www.youtube.com/embed/4AZR8a5XVSs" data-toggle="lightbox" data-width="1280" rel="nofollow"><img src="http://path-to-your-image/image.jpg"></a>

153. Can I Use The Theme On More Than One Website?

The licensing is determined by ThemeForest, and the basics of the ThemeForest license is:

"You are licensed to use the Item to create one single End Product for yourself or for one client"

https://themeforest.net/licenses/terms/regular

The way we generally look at it is if the sites are on different domains, then they would require separate licenses, with these exceptions:

- multiple domains being used for the same website
- development/test sites
- different language versions of a website
- split testing / variations of the same website
- websites that are never published online

If you have any questions about this, please feel free to open a ticket.

154. Remove / Hide 'All' and / or Sort from the Rooms Filter Bar

Version 2

Add this to your custom css under theme options / general to hide All

.th-portfolio-filters a[data-filter='*'] {
display:none;
}

Add this to your custom css under theme options / general to hide Sort

.th-portfolio-filters span {    display: none;
}

If you wanted to hide a specific filter try this:

.th-portfolio-filters a[data-filter="#themo_rooms_1 .p-vacation-rental"] {
display:none;
}

where 

.p-vacation-renta

is the name of your filter.

Version 1

Add this to your custom css under theme options / general to hide All

.rooms-filters a[data-filter='*'] {
display:none;
}

Add this to your custom css under theme options / general to hide Sort

.rooms-filters span {
    display: none;
}

If you wanted to hide a specific filter try this:

.rooms-filters a[data-filter="#themo_rooms_1 .p-vacation-rental"] {
display:none;
}

where 

.p-vacation-renta

is the name of your filter.