Ramble

Multi-purpose WordPress Blog Theme


Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Server Requirements

Server Requirements are very critical in order to seamlessly upload the theme and import the demo data. Below are the list of configuration parameters of php.ini file that should be verified before installing the theme. 

How can this be checked ? 

1. You can check this in the php.ini file on your server and modify them as necessary. If you are not familiar with modifying this, you can reach out to your server hosting provider who should be able to configure this for you.
 
2. You can install and activate a plugin called Host PHP Info. On activating the plugin, the PHP Info can be found by navigating to Tools > PHP Info. You can then reach out to your server hosting provider who should be able to configure/modify this if required.
 

Install theme

After you download the package from ThemeForest, unzip it. You'll see a file ramble.zip in the theme folder, which is the main file that needed to upload and install. You can either choose to upload and install the theme using WordPress theme install or use FTP function.

Install theme using WordPress install function

Theme Installation Video Documentation

 

Upload and install using FTP

If you get any fail when install theme by Wordpress install function, we recommend to use FTP:

Import demo content

If you are new to WordPress and have problems with setting up the theme you might want to import the demo content file that comes with the theme. The following actions will import some dummy posts and pages from the live preview:

After completing all above steps, go to Posts, Pages and other sections to see imported data.

Import widget demo content

If you are new to WordPress and have problems with setting up the widget you might want to import the demo widget data file that comes with the theme. The following actions will import some dummy widget data from the live preview:

The importer Widget Importer & Exporter page like the following screenshot.

 

 

Ramble comes with a fantastic a powerful admin panel from where you can update almost every part of the theme. Just go to your WordPress admin panel and click on Dashboard > Ramble Settings

From the Ramble Settings, you can manage overall Color Schema, Typography, Layout Changing, Post Settings, Featured Post, About Page, Contact Page, Search Page, Footer Section, 404 Page etc  The Ramble Settings panel looks like this. I think when you see every section of this options panel you will understand. So I do not describe everything part by part here.

 

How to manage Header Section

You can manage header section from Dashboard > Ramble Settings > Header Section

 

Everything I've describes with section field. If you don't understand please see the video documentation.

 

Setup Menu And Mega Menu

How manage mega menu please see the video  documentation.

How to manage home page layout

You can manage layout from Dashboard > Ramble Settings > Layout

Everything I've describes with section field. If you don't understand please see the video documentation.

 

How to manage magazine layout

You can manage magazine from Dashboard > Ramble Settings > Layout. Please see the video documentation to manage magazine layout

Here is video documentation:

How to manage woo commerce layout

You can manage Woo Commerce layout from Dashboard > Ramble Settings > Woo Commerce

Everything I've describes with section field. If you don't understand please see the video documentation.

How to manage typography

You can manage typography section from Dashboard > Ramble Settings > TypographySection 

Everything I've describes with section field. If you don't understand please see the video documentation.

How to manage featured post

You can manage featured post section from Dashboard > Ramble Settings > Featured Post

 

Everything I've describes with section field. If you don't understand please see the video documentation.

Setup About page 

After installing and activating Glimmer, you need to perform the following tasks to enable About page and Contact page. 

  1. Go to WordPress Admin Panel's Settings Menu, click on Permalink and pickup one (we suggest that you pick up postname) and click on Save
  2. Create a new page. Enter "About Me" as title and keep the content field blank. Now select "About Me" as page template from the right side page template dropdown menu. Now save/publish it
  3. Same way create another new page with a title "Contact" and keep the content blank. Now assign it "Contact" page template from the right side page template dropdown menu. Now save/publish it
  4. From menu section just add this link into menu.

Screenshot below:

From this section in Ramble Settings , you can manage the appearance and content of About Me page. This section looks like the following screen. 

 

If you don't understand please see the video documentation

Setup Portfolio page 

How to manage Portfolio Page Please see the video documentation

 

Setup Contact page 

How to manage About  Page Please see the video documentation

 

Setup Contact Form 7 Plugin

How to manage About  Page Please see the video documentation

 

Contact Form 7 Code

<div class="row">
    <div class="col-md-4 padding-right">

       [text* name id:name class:form-controller placeholder "Name *"]  
  
    </div>

    <div class="col-md-4 padding-left-right">

        [email* email id:email class:form-controller placeholder "Email *"] 

    </div>

    <div class="col-md-4 padding-left">

        [text* subject id:subject class:form-controller placeholder "Subject *"]

    </div>
    <div class="col-md-12">

        [textarea* message id:message class:form-controller 45x8 placeholder "Write a Comment...."]

    </div>
    <div class="col-md-12">

        [submit id:submit "Submit"] 

    </div>
</div>

And here is the Contact Form HTML extracture: 

<div class="row">
    <div class="col-md-4 padding-right">
        <p>
            <input type='text' name='name' id='name' class="form-controllar"  aria-required="true" placeholder="Name*">
        </p>
    </div>
    <div class="col-md-4 padding-left-right">
        <p>
            <input type='text' name='email' id='email' class="form-controllar"  aria-required="true" placeholder="Email*">
        </p>
    </div>
    <div class="col-md-4 padding-left">
        <p>
            <input type='text' name='subject' id='subject' class="form-controllar"  aria-required="true" placeholder="Subject*">
        </p>
    </div>
    <div class="col-md-12">
        <p>
            <textarea name='message' id='message' class="form-controllar" aria-required="true" rows="8" cols="45" placeholder="Write a Comment....">
</textarea>
        </p>
    </div>
    <div class="col-md-12">
        <p class="form-submit">
            <input type="submit" value="Submit" id="submit" name="submit">
        </p>
    </div>
</div>

We've created extra 15 custom widget for this Ramble theme. 

If you want to show this widget. Just drag the widget in the widget area.

 

Mailchimp Widget Configuration 

How to setup Mailchimp widget ?

step 1:  Need to create a mailchimp account from Mailchimp.com or if you have account than go step two.

step 2: Login your mailchimp account and make a list 

and fill the necessary informations than click save.

step 3: After step one and two you will show that interface 

than click Signup forms > Embedded forms 

step 4: After clicking Embedded forms Select button than you will show

and you need to copy form action URL

step 5:  Go Theme admin Panel > Apprerance > Widgets

Drag the widget to your selected location

Step 6: 

1. To change the widget title

2. Paste the action URL which copied from mailchimp embeded form action URL

3. Description about Newsletter to show above form field and under the widget title. 

4. To change the subscribe button name.

5. To show or hide first and last name field


and click Save Button 

*** Finish ***

How to setup Instagram slider widget

How to manage Instagram widget please see the video documentation

How to manage single post page

You can manage single post page  from Dashboard > Ramble Settings > General Options > Single Post Page Option

Everything I've describes with section field. If you don't understand please see the video documentation.

How to manage normal page

You can manage normal page  from Dashboard > Ramble Settings > General Options > Normal Page

Everything I've describes with section field. If you don't understand please see the video documentation.

How to update author info

How to update author info please see the video documentation

In Ramble Theme has 15 shortcode

  1. Button Shortcode
  2. Progress Bar Shortcode
  3. Status Shortcode
  4. Alert Shortcode
  5. Video Shortcode
  6. Audio Shortcode
  7. Tooltip Shortcode
  8. Dropcap Shortcode
  9. Columns Shortcode
  10. Accordion Shortcode
  11. Tab Shortcode

In Wordpress post editor when you click on shortcode icon the shortcode list will show. Then use your desire shortcode from the list. 

 

Describe below about shortcode:

Magazine Shortcode:

For magazine shortcode, there is an extra video in Theme Layout Section you can see that

Column Shortcode:

[row]
   [column number=" "] Column content will stay here [/column]
[/row]

Column Shortcode Demo:

[row]
  [column number="6"] Column content will stay here [/column]
  [column number="2" offset="2"] Column content will stay here [/column]
[/row]

number attribute for column and offset attribute for margin. You can use highest 12 column.

Status Shortcode:

[status type=" " url=" " background=" "]

In type attribute give value "facebook" or "twitter" (without Quotation) And url give facebook, twitter or google_plus status url.

In url attribute give your desire status url

With value Facebook shortcode like this :

[status type="facebook" url="https://www.facebook.com/envato/posts/10153577094401209"]

If you want to add background behind status just give image url to background attribute

Accordion Shortcode:

[collapse_group]
   [collapse id=" " title=" "] Content will stay here [/collapse]
   [collapse id=" " title=" " expanded="true"] Content will stay here [/collapse]
   [collapse id=" " title=" "] Content will stay here[/collapse]
[/collapse_group]

In id attibute every time use different value Like (collapse_one, collapse_two, collapse_three).

In title attribute give your collapse title.

If you want to expanded collapse add a attribute like this (expanded="true").

Button Shortcode:

[button type=" " size=" " text=" " disabled="true"]  

 

In type attribute gives button type - Like (default, primary, success, info, warning, danger).

In title attribute gives your custom button title.

In size attribute gives button size. Like (btn-normal, btn-lg, btn-sm, btn-xs).

If you want to show disable button add a attribute like this (disabled="true").

Button Shortcode Code:

[button type="primary" size="btn-lg" text="Custom Title"]

Progress Bar Shortcode:

[progress_bar type=" " width=" " animation="true" striped="true" title=" "]

In type attribute give progress bar style type - Like (primary, success, info, warning, danger).

In title attribute gives your custom progress bar title.

In width attribute gives progress bar with. Like (40, 60). It range has 1-100. Don't give % value here just add integer value, percent will automatic add.

If you want to show striped progress bar just  add a attribute like this (striped="true").

If you want to show striped animation just  add a attribute like this (animation="true").

Progress Bar Shortcode demo:

[progress_bar type="primary" width="43" animation="true" striped="true" title="43%"]

Tooltop Shortcode:

[tooltip title=" "] Content will stay here [/tooltip]

In title attribute give your custom tooltip title.

Alert Shortcdoe:

[alert type=" " dismiss="true"] Content will stay here[/alert]

In type attibute give alert style type - Like (primary, success, info, warning, danger).

If you want to add close button in alert shortcode just add a attribute (dismiss="true").

If you give anchor link in alert add a class (alert-linkin anchor. Like below

<a href="#" class="alert-link">this important alert message</a>

Alert Shortcdoe demo:

[alert type="info" dismiss="true"]Lorem ipsum dolor sit amet consectetur[/alert]

How to use Dropcap?

If you want to use dropcap just use span tag with dropcap class in wordpress editor. Use Text Mode in editor when use dropcap.

<span class="dropcap">W</span>

Note: In list lost no shortcode will show. All shortcode will show in single post page.

Tell WordPress which language file to use.

If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation.

You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation.

ust add the line below to your wp-config.php or change it if it already exists:

define ('WPLANG', 'fr_FR');

First Method: Using Codestyling Plugin

The easiest way to translate your theme locally is by using the Codestyling Localization plugin. After you have installed and activated the plugin, simply go to Tools > Localization (shown in your language) and translate the theme from your WordPress backend following the plugin instructions

Second Mothod: Using Poedit

Poedit is a common program which you can use to translate the theme. It’s available for free on poedit.net. After you have installed Poedit, you can open it and select File > New Catalog from POT file. Then select the .pot file from the theme you wish to translate which you can find in the /languages/ folder of theme. Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example es_ES.po). Normally Poedit automatically creates the .mo file and saves it, too. The last step you have to do is to upload your created language files to the language folder of your theme using FTP.

SCSS is a CSS Pre-processor which helps in writing CSS with the use of dynamic functionalities like variable and mixins making CSS dynamic language. Where attributes can be called as variables and valuees can be passed through function called mixins. For more detailed documentation visit: http://sass-lang.com/.

Using Scss
 
You will require a less compiler which can compile .scss extension to .css extension. There are many good compiler like Codekit, Koala, Preprops . and more. In my personal choice is Preprops. Or you can use Koala. Because it is open source.
 
Ramble Theme Scss Directory.
sass
   --variables-site
      --color.scss
      --typhography.scss
      --option.scss
      --stracture.scss
   --mixin
      --mixin-master.scss
   --typhography
     --headings.scss
     --copy.scss
   --elements
     --list.scss
     --table.scss
   --forms
     --fields.scss
     --buttons.scss
   --navigation
     --links.scss
     --menu.scss
     --pagination.scss
     --navigaton_responsive.scss
   --modules
     --accessibility.scss
     --alignment.scss
     --clearings.scss
     --infinite-scroll.scss
   --layout
     --heading-content.scss
     --featured-content.scss
     --main-content.scss
     --widget-contetn.scss
     --footer-contetn.scss
     --layout-responsive
   --site
     --others
        --404.scss
        --about.scss
        --contact.scss
     --primary
        --aside.scss
        --comments.scss
        --post-and-pages.scss
      --secondary
         --widget.scss
      --site_responsive.scss
    --media
       --captions.scss
       --galleries.scss
       --media.scss

All Section are fully commented. For this you can change easily.

 

I've used the following images, icons or other files as listed.

WORDPRESS PLUGINS & LIBRARIES

JAVASCRIPT / JQUERY PLUGINS 

CSS PLUGINS

 

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

SoftHopper