ROSA

User Guide

Check full Documentation Online at ​https://pixelgrade.com/docs/rosa/

 Getting Started 

Installing the theme 

We want to help you start with the right foot in order to fully enjoy our WordPress
theme. This why, you need to make sure you have a solid foundation for what’s next
by installing WordPress, the theme you’ve chosen from our portfolio, and the right
plugins. In this article, we will walk you through a friendly process of setting up the
theme in a way that’s correct and trustworthy.

Step 1 — Installing the theme 

1. Get the theme files by going to your ​Envato account → ​Downloads →

Theme Name → Download → Installable WordPress file only
2. Back to the ​WordPress Dashboard and navigate to Appearance →
Themes. C​lick ​Add New button at the top of the page and go for the
Upload option.
3. For the file upload, pick the ​ZIP archive downloaded earlier from
ThemeForest and click Install Now.
4. Once the file has been uploaded, click the Activate link.

Step 2 — Installing required and recommended plugins 

Follow the top banner instructions and install/activate the required and
recommended plugins.

FAQ 

Missing the Stylesheet Error during the process? 

Most of the time this happens because you are trying to install the wrong .ZIP
archive you’ve downloaded from ThemeForest.

When you try to download the theme you have just purchased you are presented
with 2 different options (besides the license file):

● The first one is Main Files and this contains all the files provided including
documentation, PSD files, theme files, etc;
 ● The second one is Installable WordPress file and this is just an archive of
the theme files; this is the .ZIP archive you want to use to install the
theme.

Adding demo Content

The demo content covers two main aspects that you should consider: it presents the
strengths of our theme, and it showcases the smart features we provide. We highly
recommend referring to it as a great inspiring starting point in order to see how much
you can achieve with your upcoming website.

Before you start 

To get the right results, please validate once again these details:

● make sure you installed and activated the required plugins

● if your site is already filled with content, please don’t import demo data
because your current content will be mixed with the new one and things
will get messy
● double check that you have no errors in ​Theme Dashboard → Status so
that the process will run as smooth as possible

Loading Demo Content 

It’s time to start importing the demo data by following these steps: ​Appearance →
Customize ​→ Theme Options → Demo Data. ​Click on the ​Import Demo Data button
and wait until the process is finished. Normally, you shouldn’t wait more than one to
three minutes, but it depends on your Internet connection and speed.

FAQs

What happens if the import process stops at some point?

If the import process seems to stop, then you should know that it might be just a
common WordPress issue related to the ​maximum execution time exceeded. There
is a ​plugin that you can use to fix this easily. If you still struggle with it, read our
friendly ​article​ about what you need to do to finish the demo data import.
Is the demo content free to use?

Because all the demo media content is under copyright, you’re not allowed to use it
in any personal or commercial way. Instead, what you can do is to analyze it and get
inspired to make your website at least as striking as our demo shows.

Why do you insert demo content?

We never liked the websites with ​Lorem ipsum and dumb images. We prefer real
and authentic content (photos, text, multimedia) that matches the style and attitude
of the theme we provide. Also, the demo content is available to expose our aesthetic
approach and general look-and-feel that you can achieve it too.

Still struggling?

Don’t hesitate to reach us out. We have dedicated ​services to help you out in no
time.

Using a Child Theme 

Besides the colors, fonts and spacing options, we know that at a certain point you
will like to dig deeper and make advanced changes which include HTML, JavaScript
or PHP code. The best way to make them happen while preserving the custom code
changed from being overwritten the next time your theme is updated, is through a
child theme. You can easily modify and add functionality without changing any code.
So this is very important mostly because you don’t lose the possibility to update the
theme without losing your changes.

Download and install the Child Theme

WordPress considers a Child Theme as an entirely separate theme so the process
of installing is similar with the installing a Parent Theme. We recommend you follow
these steps in order to get a Child Theme up and running.

Download our starter Child Theme.

You can do that by following this link.
Navigate to Appearance → Themes and click Add New button.
Select Upload Theme.
Click Browse and choose the file you just downloaded and click Install Now.
When the theme is installed click Activate.
Start Customizing

The great part of this process is that you don’t have to worry about the next session
of theme’s updates. If you add customizations in the Child Theme all the changes
you made will be automatically saved.

Adding custom CSS styles

There are two different ways to add custom CSS to your Child theme — use an FTP
client or the WordPress Dashboard. If the first method requires connecting to your
site via FTP and editing the style.css file, the second one is much easier because
you just have to go to your WordPress Dashboard site under Appearance → Editor
and select style.css from the right side and start adding your CSS. Simple as that.

Editing the functions.php file

If most files in your Child Theme overwrite the parent theme’s files (like style.css
does for instance), functions.php file is pretty different. Instead of overwriting the
parent theme’s functions.php file, you can simply load it in addition to it. Basically,
your child theme’s functions.php file is loaded right before the parent theme’s
functions.php file. You have to use a functions.php file only if you want to replace or
modify a function from the Parent theme.

Editing or adding a new template file

Beyond CSS and Functions changes, we let you do structural changes to your
theme by changing the PHP template files. In most scenarios, we recommend you to
create a copy of the template files you want to change from the parent theme and
make your modifications to the copied files. This way you make sure you’re on safe
ground.

For example, if you want to modify the content-single.php template, just copy and
paste this file to your Child Theme folder and do the changes you want there.
Personalize your Site Appearance
Rosa takes full advantage of the Customizer to make managing colors, fonts, layout
and more settings, throughout your site as easy as possible.

And what better way to make style changes than with live preview? Simply change
any setting and see it take effect right way from ​Appearance →​ Customize.

Theme Options

One of the most important components, that can be found under Appearance →
Customize → Theme Options​, where you’ll see options related to ​Logo​, ​Scrolling,
Header Elements, you’ll be able to ​add share services​, play with your ​Custom
JavaScript snippets​ or ​Import Demo Data​.

Colors

You will find all the settings related to colors in the ​Appearance → Customize ​→
Colors​. By clicking on it, you have access to a number of different sub-sections with
controls for the color of various elements on your site. We have grouped them in
order to keep you focused on a specific area at a time (like the header or the footer).
Each color option comes with an interactive color picker, allowing you to select any
imaginable shade. If you already know what you are after, simply type in the HEX
color code (in case you wish to put the exact same color in multiple settings).

Layout

Here you can find three major sections — ​Header, Content and ​Archive​, where you
can make different customizations like Setting the Logo Height, Making the
Navigation Bar Sticky, Choosing the Menu Placement, Setting the Width of the
Container, Showing the Main Sidebar in the Single Post Pages, Choosing Where to
display the Share Links and much more.Here you can find four major sections —
Header, Content, ​Archive ​and Footer​, where you can make different customizations
like Changing the Logo Height, Making the Navigation Bar Sticky, Choosing the
Menu Placement, Setting the Width of the Container, Choosing the Parallax
Movement and much more.
Fonts

Heap delivers the whole 600 Google Fonts library at your fingertips. You can change
each font by going to ​Appearance → Customize→ Fonts​. Be aware of using more
than three different fonts — being consistent with fonts creates a unified look for your
site. If you are after premium fonts like the ones offered by TypeKit or the like, you
will need to insert manually the code they provide via a child-theme.

CSS Editor

Now you have the ability to insert your own custom CSS code straight into the
Customizer and get a live preview of it. If you are looking for some CSS tweaks,
have a look around in our CSS playground section.

Creating One-Page Style Website

In this article we’re looking to create a One Page Website where the menu navigates
through each subpage. Further is an example of ​One Page Demo using Rosa​.

Step 1 — Creating the pages’ structure 

We need to have a top level Parent Page with a list of Child Pages that we will link
through our system. We will create this structure easily, following the ​Creating the
“Home” Page (Front Page)​ article.

As a result, the structure will look similar to:

● Parent Page (Welcome)

○ Sub Page 1 (Menu)
○ Sub Page 2 (Reservation)

Step 2 — Link the pages through the menu

In order to create the menu links, we will:

1. Go to ​WordPress Dashboard → Appearance → ​click on Menus.

 2. Add a new Menu and assign it to the “Main Menu” location.
3. Add a menu item for each ​page/subpage that you want to scroll to. We will
use the “Links” type and each item will have this structure:
○ URL: #post-id-title where “id” is the Page ID that you can find by
going in ​WordPress Dashboard → click on Pages and select a
page to edit and look at the browser URL bar (see screenshot
below)
○ *Note: You can skip the “-title” if you want to link directly to the
content or if you don’t have a featured image.
○ Link Text: the name that will appear on the menu (Eg:
Reservations).

Below is an illustration to help you better understand how the menu items are linked
to pages:

This is it. Quite simple right? We hope you enjoy this witty logic we have envisioned
to help you create beautifully one–page websites in no time.

 
Updating the theme 
Maintaining the theme relevant and updated is quite mandatory since your goal is to
be relevant for the long game. Our goal is to help you achieve great results that are
sustainable and one of the way we do that is by investing resources in product
updates.

In this article, we walk you through the steps you need to take to update your theme
with ease.

There are three main areas where you can see the notification for a new update:

1. Log into your ​WordPress Dashboard​, click on ​Updates and update all of
your outdated themes;
2. Go to ​Appearance → Themes​, and you will notice a badge with the ​New
version available over the outdated theme. Just click on that message and
hit the Update now button;
3. Go to ​Appearance → Theme Dashboard​, and you will see a banner with
the ​New Theme Update is Available!

What should I do to be able to update the theme?

You might get this kind of message: ​An error occurred while updating Listable:
Update package not available when trying to update the theme through the
Dashboard → Updates​ area.

On the other hand, you can get this one ​Automatic update is unavailable for this
theme​ when looking for the ​Update now​ button on ​Appearance → Themes​ area.

To have access to the automated updating system, you need to update the theme
license first. To do that, just follow these simple steps:

1. Make sure that you installed and activated the Pixelgrade Care plugin;
○ If it’s not available in your Dashboard (the blue button named
Theme Help​), just go to ​Appearance → Install Plugins and take
it from there;
2. Go to ​Appearance → Theme Dashboard​ area;
3. Click the Connect to pixelgrade.com button;
4. Login with your account:
 ○ If you purchased the theme via ThemeForest, just click the
Login with Envato button and add the credentials for the account
used to purchase the theme;
○ If you bought the theme from our shop, just log in to your
account;
5. Once the process is completed, your theme will be activated and ready to
be used.

I connected my account, but I still cannot update

the theme

Most of the times, this problem appears because you don’t have an active support
period for your license. In this particular case, the automated updating system is not
available. Verify if you have an active support period by going to the ​My
Account​page and double check the message.

If you see a message like ​Active. You have about 6 months of support remaining. —
then you know that you can surely activate the theme without any struggles.

I have an active support period, but I still cannot

activate the theme license

If you still cannot activate the license even if you have an active support period,
please go to ​My Account page and Logout. Now go to ​Appearance → Theme
Dashboard and hit the Disconnect button from the right side. Once you did this, just
follow again the following instructions about activating the theme, and everything
should be back to normal in just a few minutes.

Can I manually install the theme without using the

automatic updating system?

Yes, you can do that with no problem. You just need to follow these steps:

1. Go to your ​ThemeForest​ account;

2. Open the ​Downloads​ page;
 3. Download the theme;
4. Go to your website dashboard area;
5. Activate another theme (like ​Twenty Seventeen​);
6. Delete the existing version of the theme you want to update;
7. Install the version of the theme that you just downloaded from
ThemeForest;
8. Activate back the theme.

Is there any backup system available for the

updates?

There’s no backup option for updating the themes. That’s why, before making any
change on this, we recommend you make a backup of your whole website. This way,
if anything goes wrong (chances are that this won’t ever happen) you can quickly go
back to a working version of your website.

Will I lose the changes I made in the ​Appearance → Customize area when
updating the theme?

No worries, you will not lose changes from the ​Customize while updating the theme.
No matter if you played around with the font or the color options or you simply added
a custom CSS to the ​Additional CSS​ area everything will remain the same.

Will I lose the changes I made inside the theme files?

We know that there are times when you want to make some small tweaks to improve
the overall look-and-feel. Therefore, you need to know that all the changes should be
done using a ​child theme​. This way, you make sure that everything you
mix-and-match will be safe when the next update of the theme is available and ready
to go.

What happens when we change the theme or directory name?

There are two cases here:

1. Changed the theme name: if you update the theme, the name of the
theme will go back to the original one (e.g. Rosa, Julia);
 2. Changed the folder name: in this case, the updating system won’t be able
to track your theme and you won’t get any notification about new updates
available for your theme.

That’s why it’s better to keep the name untouched. This way, you’ll get automatic
access to the latest updates and nothing will break or be damaged.

Add a location Map

Contact information is one of the most important detail on your website. They’re a
proof of transparency, a will to be reached by your audience, an act of honest
communication. Businesses who take it for granted don’t inspire trust and openness
to dialogue.

One piece of this puzzle is represented by the location of your business. No matter if
you’re the owner of a design studio, a restaurant, or a kindergarten, having an
accessible and recognizable map is important.

Step 1 — Set the API key from Google Maps to display your
Location on the Website

For a while now, Google has made it a little harder for people to use custom Google
Maps on their websites by requiring a API key for each website. So first you need to
get yourself such a key.

Now that you have the key, follow these ​steps​ to save it on your site:

● Log in into your ​WordPress Dashboard​;

● Go to ​Appearance → Customize → General​, and copy&paste it in the
Google Maps API Key field;
● Click on Save & Publish and move to the next phase.

Step 2 — Set the Location using the “Location Map” template

Now you can set a Google Map of your business place inside a page. All you have to
do is to search your place in Google Maps, click on the Share button and copy the
link (it looks something like this:
https://www.google.com/maps/place/Firefly+Guesthouse+-+The+Berlin+Angkor/@13
.3784176,103.8537839,17z/data=!3m1!4b1!4m5!3m4!1s0x31101705677543e1:0xd2
4e4bed8c34702d!8m2!3d13.3784124!4d103.8559726​).

Here’s what you need to do next:

● Log in into your ​WordPress Dashboard​;

● Go to Pages​ → click on Add new;
● Select the Location Map page template from the right hand sidebar Page
Attributes box;
● Scroll down to ​Map Coordinates & Display Options → Google Maps URL
(beneath the page editor) and paste the share link from Google Maps;
● Now the page hero will display the map in all its glory.

In the same ​Map Coordinates & Display Options box you have other controls like the
hero height, custom colors in tune with the overall theme and the pin content (we will
create a special pin style with the information you provide) for further mending the
map to your style.

FAQs

Why is the pin on another spot than the one I want it to

be?

Another aspect that you should take into consideration is linked to the position of the
pin inside the map. You can adjust its position as you think it’s better (by default
Google aligns on ​centered the view on your location). However, if you’re not happy
with how the pin is positioned, then you should go back to Google Maps, shift the
map around and copy&paste the share link again.

Creating the Food Menu 

Since ​ROSA​ is particularly targeted for the ​restaurants​, we have thought it would be
great to have a handy dandy system to reliably create and manage your menus.

The Menu Syntax

In order to get the ​Restaurant Menu​ shortcode, first, you have to access the funky P
button from the WordPress editor (Visual mode). After this, you will be presented
with a quick ​walkthrough​ of the ​shortcode features​. Once you hit Insert, we will add a
starter ​shortcode​ into the editor so you can start editing right away. Something in the
lines of the text bellow:

HTML

[restaurantmenu]

#Section Title
-----

##First Product Title

**Description of the first product
==$15

++Our Choice
##Second Product Title
**Description of the second product (no price)

##Third Product Title (no description)

==$23

##Fourth Product Title

**Subproduct 1
==$23.99
**Subproduct 2
==$26.99
**Subproduct 3
==$29.99

##Fifth Product Title (just title)

#Anouther Section Title

-----

##Another Product Title

**Another product description
==$2993

[/restaurantmenu]

Markers

We rely on a couple of markers to identify the four sections of each menu product.
Every menu product is identified with a different set of characters at the start of the
line.

1. # for Section Title — so if you will add a single # at the beginning of a line
that will be styled as a section title. You can have multiple section titles to
help you better organize your menu.
2. ## for Product Title - notice the double # you need to add at the beginning.
You can have as many products as you want. Generally a product is
comprised of a title, a description and price, but these last 2 ones are
optional.
3. ** for Product Description — notice the double * that acts as marker for
this.
4. == for Product Price - the price has double “=” as marker so you could
write something like ==$50.99.

That wraps it up in terms of the hard part, markers and all that.

Product Group and Sub-products

Now for some magical hidden logic. If you wish to use the title as some sort of a
product group, we will recognize that. So if you decide to add multiple
description-price line groups after a title, we will treat and style these as
sub-products (see the below example).

HTML
##Fourth Product Title
**Subproduct 1
==$23.99
**Subproduct 2
==$26.99
**Subproduct 3
==$29.99

Use The Columns or Tabs Shortcode for better organization

You can combine our Columns or Tabs ​shortcode​ with the Restaurant Menu, to
make your menu into ​columns​ or ​tabs​, just like a printed one. Just insert the Menu
shortcode​ inside each ​Column​ or ​Tab​ content.

This is the beauty of using ​shortcodes​. The possibilities are almost endless when
you factor in the other ​shortcodes​, ​images​ and so on. We would love to see you
using these tools in new creative ways that we haven’t thought of.
Check full Documentation Online at ​https://pixelgrade.com/docs/rosa/