Rise & Shine

Installation Guide

Thank you!

From all of us at Elegant Child Themes, thank you for purchasing Rise & Shine! This is by far our most aggressive child theme to date and we’ve spent a lot of time pushing the Divi envelope to deliver an awesome, feature packed design that you and/or your clients will love! Not to mention it will save you countless time and money in the process. Just follow the steps below to install Rise & Shine and if at any point you have any questions, just shoot us an email and we’ll be happy to help.

Before we go any further, please note that Rise & Shine was built specifically for use with Divi by Elegant Themes. In order to install this child theme, you must first purchase a membership to Elegant Themes and download the Divi theme package. If you’ve not yet purchased a membership, visit http://elegantthemes.com. Ok, let’s get started!

Installation Instructions

Step 1: Installing the child theme
Once you’ve downloaded the Divi theme package, login to your WordPress website and go to Appearance > Themes. Find and upload the Divi parent theme and activate it.

Just like you installed the Divi parent theme, install & activate the RiseandShineChildTheme.zip child theme located in your Rise & Shine download package.

Screen Shot 2015-12-11 at 1.37.28 PM

 

Step 2: Installing the plugins
Once you activate Rise & Shine, you should see a notification at the top of your screen prompting you to install 5 recommended plugin: Divi Login, Recipe Card, Restaurant Reservations, WooCommerce & WordPress Countdown Widget. Simply click the “Begin installing plugins” link to get started.

On the next screen, install & activate the necessary plugins. You may be prompted to setup WooCommerce if it’s not already installed. Just follow the prompts to complete the setup. Once all of your plugins have been installed and activated, you’re good to go!

Screen Shot 2015-12-11 at 1.26.29 PM

Step 3: Importing the sample content & library
From your WordPress admin panel, click the Tools > Import link in your WordPress Dashboard. This will bring you to a new page with a list of import types. Click the “WordPress” link to download and install the importer.

Once the importer plugin has been installed, click the Tools > Import > WordPress link again to open the importer. You will see an option to upload an XML file. Click the “Choose File” link and locate the riseandshine-content.xml file from the Import folder of your Rise & Shine download package. Complete the import dialog to finalize the import and add all pages, posts & content.

Before leaving the import page, you’ll want to import the Divi Library as well. Just as before, click the “Choose File” link and located the riseandshine-library.xml file and complete the import to add the items to your library.

Visit Pages or Posts to confirm that your sample content has been imported. Also visit the Divi > Divi Library page to confirm that your library items have been imported.

image-2

Step 4: Import the Customizer Settings
If you would like to match the look of the Rise & Shine demo, you’ll need to import the customizer settings. Located inside the Imports folder of your Rise & Shine download package, you’ll find a riseandshine-customizer.dat file. This file contains the theme’s live demo Customizer options.

To import these options and set up your Customizer like the demo, be sure that you’ve successfully installed and activated the Customizer Export/Import WordPress plugin (via Step 2). After installing and activating the plugin, go to Divi > Theme Customizer and look for the Export/Import section – typically located at the bottom of the screen.

Click to find the riseandshine-customizer.dat file and add that file into the uploader within the Export/Import section of the Theme Customizer and press the “Import” button.

Screen Shot 2015-12-11 at 1.51.54 PM

 

Customizing Rise & Shine

Split Columns
Our unique split column layout is featured on the Rise & Shine homepage and throughout the Menu page. Swapping out images and text is all done via the module settings. 

To replace the image, go to the row module settings > Advanced Design Settings and choose a new column background.

To replace the content, simply open up the text module and edit as needed.

Restaurant Menus
Screen Shot 2015-12-11 at 2.32.25 PMPerhaps the most unique and custom feature of Rise & Shine, the menu overlays are easy to update and customize. When you open up the Menu page you’ll see separate section blocks for each menu section.

The first row module is made up of the split column section, similar to the layout featured on the homepage.

To replace the image, go to the row module settings > Advanced Design Settings and choose a new column background.

To replace the content, simply open up the text module and edit as needed.

The next row module is a what we call, the “Flyover Menu”. This is an overlay screen that appears when you click the “View Menu” button in each menu section.

Divi shortcodes are used to display the menu in a 2-column layout. For a list of all shortcodes available, click here.

There are also several neat effects that you can achieve by altering the classes over the flyover menu. You can preview each effect by clicking the View Menu button on the different menus of the Rise & Shine demo. Below is a complete list of effects that can be achieved by adding it as a class in the flyover menu row module:

open-fade-in
scroll-from-top
scroll-from-right
scroll-from-left

Be sure not to remove the fw-menu class as this will break the functionality of the menu overlay.

Screen Shot 2015-12-11 at 2.59.16 PM

Subscription Module
The custom single line Global Subscribe Module is featured at the bottom of every page throughout Flourish and is a great and subtle way to encourage your website visitors to subscribe to your newsletter. More information about configuring the Subscribe module can be found here: http://www.elegantthemes.com/gallery/divi/documentation/newsletter/
Restaurant Reservations
Rise & Shine integrates the popular (and free!) Restaurant Reservations plugin by NateWr. While we’ve overhauled the styling to seamlessly integrate with Rise & Shine, the functionality is the same. For instructions how to use this plugin, please visit: https://wordpress.org/plugins/restaurant-reservations/
Countdown Timer
While there is a countdown timer prepackaged with Divi, unfortunately at the time of the release, it is not currently available for use within the full-width modules. We wanted to make the event sliders a little more dynamic so we’ve featured the simple, but effective WordPress Countdown Widget by Metin Saylan. To implement a countdown within a slider or full-width module, simply use the following shortcode example:

Screen Shot 2015-12-11 at 2.10.11 PM

More information about the WordPress Countdown Widget plugin can be found here: https://wordpress.org/plugins/wordpress-countdown-widget/

Recipe Card
We decided to incorporate Recipe Card by Yumprint as a neat feature for restaurants, food critics or bloggers to use to interact with their customers. Add recipes with ease via a simple shortcode, easily generated from the Recipe Card icon in the WordPress editor toolbar.

More information and instructions for using Recipe Card can be found on their website at: https://wordpress.org/plugins/recipe-card/

WooCommerce Shopping Cart
Rise & Shine features a customized WooCommerce shopping cart experience. Starting from the custom shop page all the way through, every element has been tweaked to match the overall look & feel of Rise & Shine. More information and in-depth tutorials can be found at: http://www.woothemes.com/woocommerce/
Custom Login Screen
The custom login screen is made possible with the help of the Divi Login plugin by Stephen James of Divi.space. We have customized the look of the login screen to be cohesive with the look of Rise & Shine but you can easily update the background image and colors by going here:

Plugins > Editor > Select the Divi Login plugin > Select DiviLogin/login-styles.css

The logo used on the login screen is the same logo uploaded to Divi > Theme Options > Logo

To change the background image used, simply replace the image url for the .login class. 

If you would like to change the color from the Rise & Shine gold to your own color, simply find and replace all references to the hex code #dfa91f.

Once you’re finished editing or adding your styles, click Update File to save your changes.

FAQ’s

Why am I seeing a white bar instead of the menu?

It appears that Divi 2.5.9 introduced a change to the way a transparent menu is displayed. We think this is a bug that will be fixed in a future release, but in the interim adding this css to your ePanel or style.css will fix the problem:

.et_pb_pagebuilder_layout #page-container {
 padding-top: 0!important;
 }
I'm seeing weird characters in my mobile menu instead of actual text!

Elegant Themes made a change in a recent Divi update that overrides the default mobile menu font. This can be easily fixed by adding “!important” to the following selectors under Appearance > Editor > style.css. Just search for the 2 styles below and add this to the font-family, as follows:

#et_mobile_nav_menu .mobile_nav.closed .mobile_menu_bar:before {
    font-family: ‘Montserrat’, Helvetica, Arial, Lucida, sans-serif !important;
}

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar:before {
    font-family: ‘Montserrat’, Helvetica, Arial, Lucida, sans-serif !important;
}

I have the Recipe Plugin installed but I'm not seeing any recipes?

Unfortunately, there’s not a way to export our sample recipe along with our content.xml. Here’s a snapshot of our demo recipe to use as a guide, but it should be fairly self-explanatory how to add your own recipes. If you have any questions, please refer to the Recipe Card plugin page for more details: https://wordpress.org/plugins/recipe-card/

demo

My menu headers aren't displaying correctly... the border is showing through for some reason.

In some newer versions of Divi, the original “span” used to display the header is removed when the module is saved. If you update to the latest version of Divi, we’ve fixed this already, but if you’d rather just implement the change, here’s how.

Just go to Appearance > Editor > style.css and scroll until you get to the Menu section. Copy and paste the attached section in place of what you have. Just be sure not to remove anything other than this section in the css. And as we always recommend, be sure to save a backup of your stylesheet before making this change, just in case!

.fw-menu h3 {
 font-family: 'mustacheregular', Helvetica, Arial, Lucida, sans-serif;
 font-size: 60px;
 line-height: 0;
 margin: 20px 0 40px;
}
.fw-menu h3:before,
.fw-menu h3:after {
 background-color: #dfa91f; /* Set your left & right border colors here */
 content: "";
 display: inline-block;
 height: 2px;
 position: relative;
 vertical-align: middle;
 width: 50%;
}
.fw-menu h3:before {
 right: 0.5em;
 margin-left: -50%;
}
.fw-menu h3:after {
 left: 0.5em;
 margin-right: -50%;
}
.fw-menu .one_half strong {
 display: block;
}
.fw-menu .et_pb_column {
 border-right: 0!important;
}
My last navigation linke has no left padding for some reason

If you’re seeing this, then you’re likely not using a shopping cart. This is an easy fix though, just go to Appearance > Editor > style.css and search for the following class. Either remove it altogether or comment it out like so: /* Code Here */

@media only screen and (min-width: 981px) {
#top-menu > li:nth-last-child(2) {
padding-right: 0;
}
}
My login screen isn't transparent and the text/links are dark

We’ve fixed this in a recently released version of Rise & Shine, but you can also fix this by going to Plugins > Editor > Divi Login > login-styles.css. Just modify the following lines to fix the problem. You’re simply adding !important to the 2 styles listed below:

.login label, .login #nav a, .login #backtoblog a {
 color: #fff !important;
 text-transform: uppercase;
 }
.login form {
 margin-top: 20px;
 margin-left: 0;
 padding: 0;
 background: transparent !important;
 -webkit-box-shadow: none;
 box-shadow: none;
 }
How can I increase the height of the menu overlay?

By default, the max height of the menu is set to 2000px. If you would like to increase the height of the menu, simply go to Appearance > Editor > menus.css and search for the class .fw-menu.open. Increase the max-height selector to whatever px height you’d like and hit save. You’re good to go!

Terms & Conditions

Please note that many images and icons used in this theme are copyrighted and must be purchased prior to use. You can find most photos available at http://dollarphotoclub.com. The original homepage & inside PSD layouts are available for download free. Click here to download.

All designs are the intellectual property of Elegant Child Themes and may not be sold, redistributed or given away. We ask that you respect the hard work we’ve put into this custom design and not send this file to others. Due to the nature of this product, refunds are not available. If you have additional questions, please visit us at http://elegantchildthemes.com.

Disclaimer: Rise & Shine is a child theme created by Elegant Child Themes for Divi, created by Elegant ThemesRise & Shine is not a licensed product of Elegant Themes. Elegant Child Themes is not affiliated with or sponsored by Elegant Themes.