MARQUIS - Ghost Theme User Manual

This user manual will teach you how to set up and use the MARQUIS Ghost Theme.


Thank you very much for purchasing our item.


This user manual will teach you how to set up and use the Marquis Ghost theme. In case you have any questions that are beyond the scope of the user manual, please send us a message via profile page here.

Remember, you did not only buy this theme but you also bought our support, we are here to help so drop us a line if you need assistance.

Well Done! If you like our work, please rate it. If you rate it with less than 5 stars, please let me know the reason first and I will do my best to improve the item.


THANKS SO MUCH!




1. Theme Info

Theme Name: Marquis

Version number: 1.0.0

Date of release: 03/16/2015


1.1 Change Logs

03/16/2015 v1.0.0
	==> Initial Release 1.0.0
					


2. Install

2.1 Install Ghost

If you need help installing Ghost, follow the instructions in here


2.2 Install Theme

If you’ve downloaded whole theme package, unzip it. There you will find the theme installation file , user manual, dummy content .json file, license folder, etc.

2.2.1 Select Style:

When you are ready to install a theme, you must first upload the theme files and then activate the theme. For this purpose, unzip the file that you downloaded from ThemeForest and there you would find the theme file and upload it.

  • Default Style: go to folder theme/marquis
  • Redefine style 1 (demo 1): go to folder theme/redefined/style1/
  • Redefine style 2 (demo 2): go to folder theme/redefined/style2/
  • Redefine style 3 (demo 3): go to folder theme/redefined/style3/
  • Redefine style 4 (demo 4): go to folder theme/redefined/style4/
  • Redefine style 5 (demo 5): go to folder theme/redefined/style5/
  • Redefine style 6 (demo 6): go to folder theme/redefined/style6/

2.2.2 Install Theme:

A. Intall for Ghost Hosted

  1. Sign in on ghost.org and go to Blog Settings

    Blog Settings

  2. Upload marquis.zip file in theme style folder that you selected from 2.2.1 to your hosted control panel.

    Upload Theme

B. Install for Other Host

  1. Upload the marquis folder in theme style folder that you selected from 2.2.1 to content/themes/ on ghost hosting folder.

  2. Restart the service of ghost.

  3. Login to your Ghost Admin Dashboard > SETTINGS. Select Marquis in the 'Theme' options dropdown, save it and you are set up with the theme now. Enjoy!

    Select Theme


2.2 Install Demo Data

We have included the exported JSON files from our demo. This allows you to quickly set up your theme the same way our demo is set up.

  1. Go to Admin Dashboard > SETTINGS > Labs

  2. Choose the demo style that you want and click IMPORT button

    Import Demo

  3. Now the installer will process and import all content to your site.

NOTE: The install process will take up to 5 minutes depending on your server, start it & go grab a cup of tea! Do not leave this page until you have confirmation of the system.



3. Getting to know the Theme

3.1 Package Content

Upon downloading the package zip file from ThemeForest, you'll have all files you need inside. Zip package contains the following files and folders:

Package Content

  1. Documentation folder

  2. Sample Content folder contains JSON Demo Contents such as pages and posts and Menu import file.

  3. Theme folder contains marquis.zip and all re-define styles ready for installation.

  4. changelogs.txt file


3.2 Theme Re-Define

Re-Define Style allows you to quickly set up your theme the same way our demo is set up. This is base on default theme, we just custom some variable in theme file.

3.2.1 Re-Define Style1

Location: theme/redefined/style1

Demo URL: http://marquis-style1.sunflowertheme.com

Home Style 1

Options Mixing:

Option Name Option Value
Site Layout 3 Columns
Top Bar True
Header Style Center
Header Color Transparent
Sticky Header True
Full Height Banner True
Parallax True
Border Pattern None
Cover Preview Explain
Footer Color Light

3.2.2 Re-Define Style2

Location: theme/redefined/style2

Demo URL: http://marquis-style2.sunflowertheme.com

Home Style 2

Options Mixing:

Option Name Option Value
Site Layout 2 Columns - Right Sidebar
Top Bar True
Header Style Right
Header Color Light
Sticky Header True
Full Height Banner False
Parallax True
Border Pattern Dashed
Cover Preview Explain
Footer Color Dark

3.2.3 Re-Define Style3

Location: theme/redefined/style3

Demo URL: http://marquis-style3.sunflowertheme.com

Home Style 3

Options Mixing:

Option Name Option Value
Site Layout 2 Columns - Left Sidebar
Top Bar True
Header Style Left
Header Color Dark
Sticky Header True
Full Height Banner False
Parallax True
Border Pattern Solid
Cover Preview Popup
Footer Color Dark

3.2.4 Re-Define Style4

Location: theme/redefined/style4

Demo URL: http://marquis-style4.sunflowertheme.com

Home Style 4

Options Mixing:

Option Name Option Value
Site Layout 1 Column
Top Bar False
Header Style Center
Header Color Light
Sticky Header True
Full Height Banner False
Parallax True
Border Pattern Dashed
Cover Preview Explain
Footer Color Light

3.2.5 Re-Define Style5

Location: theme/redefined/style5

Demo URL: http://marquis-style5.sunflowertheme.com

Home Style 5

Options Mixing:

Option Name Option Value
Site Layout 2 Columns
Top Bar False
Header Style Right
Header Color Main-Color
Sticky Header True
Full Height Banner False
Parallax True
Border Pattern Solid
Cover Preview Explain
Footer Color Dark

3.2.1 Re-Define Style6

Location: theme/redefined/style6

Demo URL: http://marquis-style6.sunflowertheme.com

Home Style 6

Options Mixing:

Option Name Option Value
Site Layout 1 Column
Top Bar False
Header Style Center
Header Color Light
Sticky Header True
Full Height Banner False
Parallax True
Border Pattern Dashed
Cover Preview Explain
Footer Color Light

3.3 Theme Widgets

Storia allows you include any widget to sidebar and footer.

How to use widgets:

  1. Open file partials/sidebar/default.hbs or partials/sidebar/left.hbs or partials/footer/default.hbs
  2. You will see the code like this:
    									{{>widget/about}}
    									{{>widget/recent-posts widget_title="Recent Posts" display="10" show_desc="false" show_pubdate="true"}}

    + Each line is one widget include
    + Add widget: {{>widget/widget_name widget_options ...}}. Example: {{>widget/recent-posts widget_title="Recent Posts" display="10" show_desc="false" show_pubdate="true"}}
    + Remove widget: just remove line that include widget.

  3. Save file and re-upload it to your server.

Available Widgets

Display your site Navigation

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Navigation
custom_class Text NO Your custom class for this widget

Use this widget by code: {{>widget/navigation widget_title="Navigation"}}

Navigation Widget

3.3.2 Search

Display search form

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Search
custom_class Text NO Your custom class for this widget

Use this widget by code: {{>widget/search widget_title="Search"}}

Search Widget

3.3.3 Tags

Display Tags as List Or Cloud

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Tags
custom_class Text NO Your custom class for this widget
style Text NO Option for style of this widget. Change it to stack or cloud
max_items Number NO Option for how many tag to display
show_count Boolean NO Option for display number post under tag. Change it to true or false

Use this widget by code: {{>widget/tags widget_title="Tags" style="stack" max_items="10" show_count="true"}}

Tags Widget

3.3.4 Recent Posts

Display Recent Posts List

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Recent Posts
custom_class Text NO Your custom class for this widget
display Number NO Option for how many post to display
show_desc Boolean NO Option for display post description. Change it to true or false
show_pubdate Boolean NO Option to display post publish date. Change it to true or false

Use this widget by code: {{>widget/recent-posts widget_title="Recent Posts" display="10" show_desc="false" show_pubdate="true"}}

Recent Posts Widget

3.3.5 Flickr

Display Your Flickr Photo Stream

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Flickr Stream
custom_class Text NO Your custom class for this widget
user_id Text YES The Flickr user id that you need to get photo
display Number YES Option for how many photo to display
cols Number YES Option for how many columns to display
popup_preview Boolean NO Option to use popup for preview photo. Change it to true or false

Use this widget by code: {{>widget/flickr widget_title="Flickr Stream" user_id="36587311@N08" display="10" cols="5" popup_preview="true"}}

Flickr Widget

3.3.6 Dribbble

Display Your Dribbble Photo Stream

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Dribbble Stream
custom_class Text NO Your custom class for this widget
user_name Text YES The Dribbble user name that you need to get photo
display Number YES Option for how many photo to display
cols Number YES Option for how many columns to display
show_follow_box Boolean NO Option to display Dribbble follow buton. Change it to true or false

Use this widget by code: {{>widget/dribbble widget_title="Dribbble Stream" user_name="dekkerslade" display="12" cols="3" show_follow_box="true"}}

Dribbble Widget

3.3.7 Instagram

Display Your Instagram Photo Stream

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Search
custom_class Text NO Your custom class for this widget
user_name Text YES The Instagram user name that you need to get photo
api_token Text YES The Instagram API Token
api_clientid Text YES The Instagram API Client ID
display Number YES Option for how many photo to display
cols Number YES Option for how many columns to display
show_follow_box Boolean NO Option to display Instagram follow buton. Change it to true or false

Use this widget by code: {{>widget/instagram widget_title="Instagram Stream" user_name="dekkerslade" api_token="518686459.9d1fadd.b2bb7107f2a745a78c991ddec9f0b161" api_clientid="9d1fadd22dc942e5a7c75f409fac0cc0" display="12" cols="3" show_follow_box="true"}}

Instagram Widget

3.3.8 Social

Display Your Social Media Icons

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Stay Connected
custom_class Text NO Your custom class for this widget

Use this widget by code: {{>widget/social widget_title="Stay Connected"}}

Social Widget

3.3.9 Newsletter

Display MailChimp Newsletter box allows user subscribe

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Search
custom_class Text NO Your custom class for this widget
desc Text NO Option for form description text
form_url Text YES Option for mailchimp form url

Use this widget by code: {{>widget/newsletter widget_title="Newsletter" desc="Enter your email address and get all latest content delivered to your inbox a few times a month." form_url="http://sunflowertheme.us5.list-manage.com/subscribe/post?u=7e0a4b0ce5fd160742dc568d3&id=cc1306b53a"}}

Newsletter Widget

3.3.10 Recent Tweets

Display Recent Tweets Box

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Search
custom_class Text NO Your custom class for this widget
twitter_user_url Text YES Your twitter user url
tweet_widget_id Text YES Your twitter widget id

Use this widget by code: {{>widget/recent-tweets widget_title="Recent Tweets" twitter_user_url="https://twitter.com/SunflowerTheme" twitter_widget_id="409933315160829952"}}

Recent Tweets Widget

3.3.11 Facebook Like

Display Facebook Like Box

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Search
custom_class Text NO Your custom class for this widget
fanpage_url Text YES Your Facebook Fan Page url
show_faces Text NO Option to show faces. Change it to true or false
show_header Text NO Option to show header. Change it to true or false
show_stream Text NO Option to show stream. Change it to true or false
show_border Text NO Option to show border. Change it to true or false

Use this widget by code: {{>widget/facebook-like widget_title="Like Us" fanpage_url="https://www.facebook.com/sunflower.theme" show_faces="true" show_header="true" show_stream="false" show_border="false"}}

Facebook Like Widget

3.3.12 Text

Display Your custom Html Text

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Search
custom_class Text NO Your custom class for this widget
text_content Text YES Your html text content

Use this widget by code: {{>widget/text widget_title="Text Widget" text_content="<p>Put any text here, <strong>html tags</strong> also support</p>Cred listicle trust fund 8-bit Blue Bottle, tousled flannel pickled Neutra hoodie High Life. Meggings Pinterest master cleanse, fanny pack aesthetic small batch gluten-free try-hard pop-up Williamsburg. Meggings aesthetic pour-over mlkshk DIY. Sustainable paleo freegan, listicle normcore drinking vinegar crucifix mlkshk quinoa Echo Park scenester Helvetica."}}

Text Widget

3.3.13 Google Plus Badge

Display Your Google Plus Badge

Options:

Option Name Value Type Require Description
widget_title Text NO Title text for this widget, example: Search
custom_class Text NO Your custom class for this widget
gpage_url Text YES Your Google Plus Url

Use this widget by code: {{!>widget/google-plus-badge gpage_url="https://plus.google.com/115618351539604391074" custom_class="full-box"}}

google-plus-badge Widget



4. Setting Up The Theme

You can set the Marquis theme of change some variable in theme file. First of all, you'll need a text editor to open and edit it.

If you have a PC and use Windows, you can install and use Notepad++, the most basic text editor on your computer.

If you have a Mac with OS X, you can use TextEdit.

After you're done, you need re-upload file changes to your server.

4.1 General

4.1.1 Turn on / Turn Off Parallax Scroll

Marquis support Smooth Parallax Scroll, please follow the steps below to change it for your site

  1. Open file default.hbs

  2. On line 22 you will see a text line this: data-parallax="true". You can change it to data-parallax="false" and vice versa.


4.1.2 Border Pattern

Marquis support 3 Border Pattern Modes, it's apply border style for Header, Banner, Post Content, Widget and Footer area. Please follow the steps below to change it for your site.

  1. Open file default.hbs

  2. On line 31 you will see a text line this: data-border-pattern="dashed". You can change it to:

    • data-border-pattern="dashed" for Dashed pattern.
    • data-border-pattern="solid" for Solid pattern.
    • data-border-pattern="none" for plain pattern.

4.1.3 Top Bar

Top Bar display News ticker, and social media. Please follow the steps below to Turn On/Turn Off it for your site

  1. Open file default.hbs

  2. On line 23 you will see a text line this: data-show-top-bar="false". You can change it to:

    • data-show-top-bar="true" to Turn On Top Bar
    • data-show-top-bar="false" to Turn Off Top Bar.

4.1.4 Cover Preview Mode

Marquis support 2 mode for preview post cover: Pop-Up and Explain. Please follow the steps below to change it for your site

  1. Open file default.hbs

  2. On line 32 you will see a text line this: data-cover-preview-by="explain". You can change it to:

    • data-cover-preview-by="popup" to use Pop-Up mode.
    • data-cover-preview-by="explain" to use explain mode.

4.2 Header

4.2.1 Header Style

Marquis support 3 header layout: Left, Right and Center Layout. Please follow the steps below to change it for your site

  1. Open file default.hbs

  2. On line 24 you will see a text line this: data-header-layout="center". You can change it to:

    • data-header-layout="left" for Left Layout
    • data-header-layout="right" for Right Layout
    • data-header-layout="center" for Center Layout.

4.2.2 Header Sticky

Marquis support sticky header. Please follow the steps below to change it for your site

  1. Open file default.hbs

  2. On line 25 you will see a text line this: data-header-sticky="false". You can change it to:

    • data-header-sticky="true" to enable
    • data-header-sticky="false" to disable.

4.2.3 Header Color

Marquis support 4 header color modes: Light, Dark, Main Color and Transparent. Please follow the steps below to change it for your site

  1. Open file default.hbs

  2. On line 26 you will see a text line this: data-header-color="transparent". You can change it to:

    • data-header-color="light" for Light Color Mode
    • data-header-color="dark" for Dark Color Mode
    • data-header-color="main-color" for Main Color Mode
    • data-header-color="transparent" for Transparent Color Mode.

4.2.4 Navigation

Marquis supports Ghost built-in Navigation also custom Navigation so you can easily to custom it.

To custom navigation use Ghost built-in please go to Your Admin Dashboard -> Settings -> Navigation. And follow this screen to custom it.

Custom Navigation

NOTE: With Ghost built-in Navigation you can also use only one level. If you need to use 3 navigation level please follow the steps below.

  1. Step 1: Remove all Ghost built-in navigation

  2. Step 2: Create a Static Page

  3. Step 3: Intergate to Navigation

    Open File: partials/misc/menu-items.hbs and follow the instruction below

    										<li class="active">
    											<a href="{{@blog.url}}"> <!--Keep href="{{@blog.url}}" for home page-->
    												Home <!--Change text of menu here-->
    											</a>
    										</li>
    										{{!End Menu Item}}
    
    										{{!Begin Menu Item}}
    										<li>
    											<a href="{{@blog.url}}/about/"> <!--Change href: {{@blog.url}}/YOUR_POST_URL_FROM_STEP_2/  Example: {{@blog.url}}/about/-->
    												About <!--Change text of menu here-->
    											</a>
    										</li>
    										{{!End Menu Item}}
    
    										{{!Begin Menu Item}}
    										<li>
    											<a href="{{@blog.url}}/resume/"> <!--Change href: {{@blog.url}}/YOUR_POST_URL_FROM_STEP_2/  Example: {{@blog.url}}/resume/-->
    												Resume <!--Change text of menu here-->
    											</a>
    										</li>
    										{{!End Menu Item}}
    
    										{{!Begin Menu Item}}
    										<li>
    											<a href="{{@blog.url}}/contact/"> <!--Change href: {{@blog.url}}/YOUR_POST_URL_FROM_STEP_2/  Example: {{@blog.url}}/contact/-->
    												Contact <!--Change text of menu here-->
    											</a>
    										</li>
    										{{!End Menu Item}}
    										{{!Create your next Menu Item}}

4.3.1 On/Off Full Screen Banner

Marquis support 2 banner style: Standard and Full Screen Banner. Please follow the steps below to change it for your site

  1. Open file default.hbs

  2. On line 27 you will see a text line this: data-full-height-banner="false". You can change it to data-full-height-banner="true" to enable full screen banner style OR data-full-height-banner="false" to disable full screen banner style.


In this section you can turn on / turn off any widget that uses on Sidebar

File: partials/sidebar/default.hbs

							{{>widget/search}}                                   
							{{>widget/tags}}
							{{>widget/recent-posts}}                     									
							{{>widget/social}}

+ Each line is one widget include
+ Add widget: {{>widget/widget_name widget_options ...}}
+ Remove widget: just remove line that include widget.


Marquis support 3 columns widget for footer.

In this section you can turn on / turn off any widget that uses on Footer

File: partials/footer/default.hbs

							<div class="footer">
								<div class="widget-area">
									<div class="widget-area-wrap">
										<div class="row">
											<div class="col-md-4">					
												{{>widget/about}} 
											</div>
											<div class="col-md-4">										
												{{>widget/newsletter}}  
											</div>
											<div class="col-md-4">
												{{>widget/flickr}}  
											</div>
										</div>
									</div>
								</div>
								..............
							</div>

4.6 Color

Marquis include 24 redefined colors, if you would like to change the color for the theme please follow the steps below.

4.6.1 Using LESS

  1. Open file assets/less/variables.less

    On line 17 change value for @main-color to color name that you want.

    									/* Main Color Options */
    									@main-background:						#DADFE1;
    									@main-background-dark:					#0F0F0F;
    
    									@main-color: 							@default;
    									@content-color: 						#20252B;
    									@gray-color: 							#E2E7EA;
    									@light-color:							#ffffff;
    									
  2. Rebuild all assets file by command grunt.

    TIP: See more redefine colors in file color.less. You can also apply your custom color to @main-color by other color code


4.6.2 Using Standard CSS file

  1. open file default.hbs

  2. On line 17, you will see it like:

    										<link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />

    Add a line code after this line like this:

    										<link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />
    										<link rel="stylesheet" type="text/css" href="{{asset "css/colors/default.css"}}" />

    Take a note of the text css/colors/default.css. Change default.css to color file name that you want.
    Color file name includes:

    • default.css
    • blue.css
    • corporate-blue.css
    • dark-cyan.css
    • dark-cyan2.css
    • dark-gray.css
    • dark-gray2.css
    • dark-purple.css
    • dark-salmon.css
    • dark-slate-gray.css
    • dodger-blue.css
    • golden-rod.css
    • green.css
    • hot-pink.css
    • indian-red.css
    • maroon.css
    • medium-violet-red.css
    • midnight-blue.css
    • muted-teal.css
    • orange.css
    • purple.css
    • red.css
    • soft-green.css
    • yellow.css

    Example: I want to use green color, so i made change it to css/colors/green.css

    										<link rel="stylesheet" type="text/css" href="{{asset "css/style.css"}}" />
    										<link rel="stylesheet" type="text/css" href="{{asset "css/colors/green.css"}}" />

4.7 Social Media Icons

In this section you can change Social Network Icons on the Header, Banner, Personal Intro Screen and Footer

File: partials/misc/social-icons.hbs

						
							{{!Begin of Social Icon List}}
							<ul class="social">
								{{!Begin Social item}}
								<li class="google">
									<a href="#" target="_blank" title="Google"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
										<i class="fa fa-google-plus"></i>
									</a>
								</li>
								{{!End Social item}}

								{{!Begin Social item}}
								<li class="twitter">
									<a href="#" target="_blank" title="Twitter"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
										<i class="fa fa-twitter"></i>
									</a>
								</li>
								{{!End Social item}}

								{{!Begin Social item}}
								<li class="facebook">
									<a href="#" target="_blank" title="Facebook"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
										<i class="fa fa-facebook"></i>
									</a>
								</li>
								{{!End Social item}}

								{{!Add New Social item here}}
							</ul>
							{{!End of Social Icon List}}

What you need is change href value to your social url, you can also copy new social icon in the list below and paste it to line 27

Here full list of social icons that the theme support:

  • Facebook

    									<li class="facebook">
    										<a href="#" target="_blank" title="Facebook"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-facebook"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • Twitter

    									<li class="twitter">
    										<a href="#" target="_blank" title="Twitter"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-twitter"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • Google Plus

    									<li class="google">
    										<a href="#" target="_blank" title="Google"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-google-plus"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • LinkedIn

    									<li class="linkedin">
    										<a href="#" target="_blank" title="linkedin"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-linkedin"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • vkontakte

    									<li class="vkontakte">
    										<a href="#" target="_blank" title="vkontakte"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-vk"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • xing

    									<li class="xing">
    										<a href="#" target="_blank" title="xing"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-xing"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • skype

    									<li class="skype">
    										<a href="#" target="_blank" title="skype"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-skype"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • yahoo

    									<li class="yahoo">
    										<a href="#" target="_blank" title="yahoo"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-yahoo"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • flickr

    									<li class="flickr">
    										<a href="#" target="_blank" title="flickr"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-flickr"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • instagram

    									<li class="instagram">
    										<a href="#" target="_blank" title="instagram"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-instagram"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • behance

    									<li class="behance">
    										<a href="#" target="_blank" title="behance"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-behance"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • dribbble

    									<li class="dribbble">
    										<a href="#" target="_blank" title="dribbble"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-dribbble"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • pinterest

    									<li class="pinterest">
    										<a href="#" target="_blank" title="pinterest"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-pinterest"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • deviantart

    									<li class="deviantart">
    										<a href="#" target="_blank" title="deviantart"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-deviantart"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • youtube

    									<li class="youtube">
    										<a href="#" target="_blank" title="youtube"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-youtube"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • vimeo

    									<li class="vimeo">
    										<a href="#" target="_blank" title="vimeo"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-vimeo"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • soundcloud

    									<li class="soundcloud">
    										<a href="#" target="_blank" title="soundcloud"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-soundcloud"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • spotify

    									<li class="spotify">
    										<a href="#" target="_blank" title="spotify"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-spotify"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • wordpress

    									<li class="wordpress">
    										<a href="#" target="_blank" title="wordpress"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-wordpress"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • tumblr

    									<li class="tumblr">
    										<a href="#" target="_blank" title="tumblr"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-tumblr"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • reddit

    									<li class="reddit">
    										<a href="#" target="_blank" title="reddit"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-reddit"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • digg

    									<li class="digg">
    										<a href="#" target="_blank" title="digg"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-digg"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • stumbleupon

    									<li class="stumbleupon">
    										<a href="#" target="_blank" title="stumbleupon"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-stumbleupon"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • delicious

    									<li class="delicious">
    										<a href="#" target="_blank" title="delicious"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-delicious"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • foursquare

    									<li class="foursquare">
    										<a href="#" target="_blank" title="foursquare"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-foursquare"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • github

    									<li class="github">
    										<a href="#" target="_blank" title="github"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-github"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • dropbox

    									<li class="dropbox">
    										<a href="#" target="_blank" title="dropbox"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-dropbox"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • rss

    									<li class="rss">
    										<a href="#" target="_blank" title="rss"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-rss"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
  • email

    									<li class="email">
    										<a href="#" target="_blank" title="email"> {{!Change href="#" to href="YOUR_SOCIAL_URL"}}
    											<i class="fa fa-envelope-o"></i> {{!Change icon for social item here}}
    										</a>
    									</li>
    								

4.8 Typography

We are using the google web font, if you would like to change the font for the theme please follow the steps below.

  1. Open file default.hbs

    On line 16 you will see it like:

    									{{ghost_head}}
    									<link href='http://fonts.googleapis.com/css?family=Open+Sans:regular,italic,700%7CMontserrat:regular,700' rel='stylesheet' type='text/css'> {{! Change google font here }}    
    									<link rel="stylesheet" type="text/css" href="{{asset "css/style.min.css"}}" />

    Replace line 16 to YOUR GOOGLE FONT LINK

  2. Using LESS

    1. Open file assets/less/variables.less

      On line 10 and 11 you will see a code like:

      											/* Typography */
      											@headings-font: 						'Montserrat','Helvetica Neue',sans-serif;
      											@body-font: 							'Open Sans','Helvetica Neue',sans-serif;

      Paste font family to @headings-font and @body-font

      Rebuild all assets file by command grunt.

    Using Standard CSS

    1. Open file assets/css/custom.css

      Add a code like:

      											body {
      												font-family: BODY_FONT_FAMILY;												
      											}											
      											h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
      												font-family: HEADING_FONT_FAMILY;
      											}
      										

      With BODY_FONT_FAMILY and HEADING_FONT_FAMILY from google font.


More info about google font:


4.9 Comment

By Default, this theme supports comments supplied by Disqus (http://disqus.com). For assistance in setting up your own Disqus account and customizing it for your needs, please see the Disqus QuickStart Guide: http://help.disqus.com/customer/portal/articles/466182-quick-start-guide

Change content in the files below to apply Disqus Comment

Open file: partials/misc/comment.hbs you will see code like:

							<div itemprop="comment" class="comment-box">					
								<div id="disqus_thread"></div>
								<script type="text/javascript">
								    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
								    var disqus_shortname = 'example'; // required: replace example with your disqus shortname

								    /* * * DON'T EDIT BELOW THIS LINE * * */
								    // Disqus Comments Count JS
								    (function () {
								        var s = document.createElement('script'); s.async = true;
								        s.type = 'text/javascript';
								        s.src = 'http://' + disqus_shortname + '.disqus.com/count.js';
								        (document.getElementsByTagName('HEAD')[0] || document.getElementsByTagName('BODY')[0]).appendChild(s);
								    }());

								    // Disqus Comments Form JS
								    (function() {
								        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
								        dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
								        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
								    })();
								</script>
								<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
							</div>

On line 5 replace example with your disqus shortname



5. Writing Posts

Marquis support 4 custom post formats: Image, Video, Audio and Plain Text

5.1 Image Post

This is ghost built-in post format, just write your post and upload Post Cover Image in Post Settings Panel

Image Post


5.2 Video Post

This is Marquis custom post format, allows to set your YouTube or Vimeo video as post cover. Just write your post and put video url in the top of post content.

Video Post


5.3 Audio Post

This is Marquis custom post format, allows to set your SoundCloud audio as post cover. Just write your post and put soundcloud url in the top of post content.

Audio Post


5.4 Plain Text Post

This is ghost built-in post format. Like Image Post, just write your post but not upload Post Cover Image.



6. Pages

Marquis built-in custom page template called page-contact.hbs, it can be display your contact page with Google Map cover.

To use this page template you need create a static page and change Post URL to contact.

6.1 Config Google Map for Contact Page

Open file page-contact.hbs, at line 10-11

							data-latitude="10.839776" {{!Change Your map latitude here}}
							data-longitude="106.647159" {{!Change Your map longitude here}}
						


7. Dynamic Post/Page Layout

Marquis support 4 dynamic Post/Page Layouts: 3 columns (Both Sidebar), 2 columns left sidebar, 2 columns right sidebar and one column (Full Width). You can easy to change Post/Page layout by use System Tag

7.1 Both Sidebars Layout

To change your post/page to 3 columns (Both Sidebar), just add system tag called: _both_sidebar in Post Tag panel.

Both Sidebar Layout


To change your post/page to 2 columns left sidebar, just add system tag called: _left_sidebar in Post Tag panel.

Left Sidebar Layout


To change your post/page to 2 columns right sidebar, just add system tag called: _right_sidebar in Post Tag panel.

Right Sidebar Layout


7.4 Full Width Layout

To change your post/page to one column (Full Width), just add system tag called: _full_width in Post Tag panel.

Full Width Layout




8. Update

If you need any extra or feature just send us a message here and we will include it in the next update.



9. Credits

9.1 Javascript

Marquis uses several scripts many of which are documented within the theme's code. If you're a developer, you will find this particularly useful.



9.2 Images

Images showed on preview files are from pixabay.com and subtlepatterns.com. Being designed with multipurpose attitude in mind, we showed some images on our preview files so you can have an idea what can be accomplished. Not a single image file is included with the download, they were just for demo purposes due to copyright.



9.3 Fonts


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. Please contact me via email or social media. I'll do my best to assist!