CSS Files and Structure

If you would like to edit the color, font, or style of any elements, you would do the following:

1#primaryContent a {color: #someColor;}

1	1#primaryContent a {color: #someColor;}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

2. I.E #wrap #primaryContent a {color: #someColor;}

1	2. I.E #wrap #primaryContent a {color: #someColor;}

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

2.1. Main Menu structure

If you would like to change your logo, just go to the ghost administrative panel and change it. If you can you are able to change brand name. In orlando ghost we have different types of menu: typical menu for desktops and menu for tablets and phones:
Typical menu for desktop:

<!--You can edit your navbar. Change the classs of nav like below:

navbar navbar-inverse ct-navbar--logoright
navbar ct-navbar--motive ct-navbar--logoright
navbar-default
navbar-inverse
ct-navbar--transparent
ct-navbar--motive

If you changed the navbar you have to change the logo in ghost administrative panel-->

<nav class="navbar navbar-inverse ct-navbar--logoright" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
    <a class="navbar-brand" href="/">
        {{#if @blog.logo}}
        <img src="{{@blog.logo}}" title="companyname" alt="companyname">
        {{/if}}
    </a>
</div>

<div class="collapse navbar-collapse">
    <!--If you want to have a big space between the logo and text, just change the class like below:
nav navbar-nav navbar-right ct-navbarNav--secundaryActive
nav navbar-nav ct-navbarNav--defaultActive ct-navbar--fadeIn yamm-->
<ul class="nav navbar-nav ct-navbarNav--defaultActive ct-navbar--fadeIn yamm">
<li><a href="/">Home</a></li>

<li class="dropdown">
    <a href="/about-us/">Pages <i class="fa fa-angle-double-down"></i></a>
    <ul class="dropdown-menu">
        <li>
            <div class="yamm-content">
                <div class="row">
                    <div class="col-sm-6">
                        <h5 class="text-uppercase ct-fw-600 ct-menu-header">Normal Pages
                            <small>Beautiful Pages</small>
                        </h5>
                        <ul class="list-unstyled">
                            <li><a href="/about-us/"><i class="fa fa-fw fa-chevron-right"></i> About Us</a></li>
                            <li><a href="/services/"><i class="fa fa-fw fa-chevron-right"></i> Services</a></li>
                            <li><a href="/Contact-us/"><i class="fa fa-fw fa-chevron-right"></i> Contact Us</a></li>
                            <li><a href="/Our-office/"><i class="fa fa-fw fa-chevron-right"></i> Our Office</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-6">
                        <h5 class="text-uppercase ct-fw-600 ct-menu-header">Special Pages</h5>
                        <ul class="list-unstyled">
                            <li><a href="/maintenance/"><i class="fa fa-fw fa-cogs"></i> Maintenance</a></li>
                            <li><a href="/blank/"><i class="fa fa-fw fa-file-o"></i> Blank Page</a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </li>
    </ul>
</li>

<li><a href="/Contact-us/">Contact</a></li>
</ul>
</div>
</div>
</nav>

<!--You can edit your navbar. Change the classs of nav like below:

navbar navbar-inverse ct-navbar--logoright

navbar ct-navbar--motive ct-navbar--logoright

navbar-default

navbar-inverse

ct-navbar--transparent

ct-navbar--motive

If you changed the navbar you have to change the logo in ghost administrative panel-->

</a>

</div>

<!--If you want to have a big space between the logo and text, just change the class like below:

nav navbar-nav navbar-right ct-navbarNav--secundaryActive

nav navbar-nav ct-navbarNav--defaultActive ct-navbar--fadeIn yamm-->

<a href="/about-us/">Pages <i class="fa fa-angle-double-down"></i></a>

<li>

<h5 class="text-uppercase ct-fw-600 ct-menu-header">Normal Pages

<small>Beautiful Pages</small>

</h5>

<li><a href="/about-us/"><i class="fa fa-fw fa-chevron-right"></i> About Us</a></li>

<li><a href="/services/"><i class="fa fa-fw fa-chevron-right"></i> Services</a></li>

<li><a href="/Contact-us/"><i class="fa fa-fw fa-chevron-right"></i> Contact Us</a></li>

<li><a href="/Our-office/"><i class="fa fa-fw fa-chevron-right"></i> Our Office</a></li>

</ul>

</div>

<h5 class="text-uppercase ct-fw-600 ct-menu-header">Special Pages</h5>

<li><a href="/maintenance/"><i class="fa fa-fw fa-cogs"></i> Maintenance</a></li>

<li><a href="/blank/"><i class="fa fa-fw fa-file-o"></i> Blank Page</a></li>

</ul>

</div>

</li>

</ul>

</li>

<li><a href="/Contact-us/">Contact</a></li>

</ul>

</div>

</nav>

Responsive menu for tablets and phones:

<div class="ct-navbarMobile ct-navbarMobile--inverse">
    <a class="navbar-brand" href="/"><img src="{{asset "images/demo-content/logo.png"}}" alt="Orlando Logo"> </a>
    <button type="button" class="navbar-toggle">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
</div>


<div class="ct-menuMobile">
    <ul class="ct-menuMobile-navbar">
        <li>
            <a href="/" data-target="dropdown">Home</a>
        </li>
        <li class="dropdown">
            <a href="/about-us/">Pages <i class="fa fa-angle-double-down"></i></a>
            <ul class="dropdown-menu">
                <li><a href="/about-us/"><i class="fa fa-fw fa-chevron-right"></i> About Us</a></li>
                <li><a href="/services/"><i class="fa fa-fw fa-chevron-right"></i> Services</a></li>
                <li><a href="/Contact-us/"><i class="fa fa-fw fa-chevron-right"></i> Contact Us</a></li>
                <li><a href="/Our-office/"><i class="fa fa-fw fa-chevron-right"></i> Our Office</a></li>
                <li><a href="/maintenance/"><i class="fa fa-fw fa-cogs"></i> Maintenance</a></li>
                <li><a href="/blank/"><i class="fa fa-fw fa-file-o"></i> Blank Page</a></li>
            </ul>
        </li>
        <li><a href="/Contact-us/">Contact</a></li>
    </ul>
</div>

<span class="sr-only">Toggle navigation</span>

</button>

</div>

<li>

</li>

<a href="/about-us/">Pages <i class="fa fa-angle-double-down"></i></a>

<li><a href="/about-us/"><i class="fa fa-fw fa-chevron-right"></i> About Us</a></li>

<li><a href="/services/"><i class="fa fa-fw fa-chevron-right"></i> Services</a></li>

<li><a href="/Contact-us/"><i class="fa fa-fw fa-chevron-right"></i> Contact Us</a></li>

<li><a href="/Our-office/"><i class="fa fa-fw fa-chevron-right"></i> Our Office</a></li>

<li><a href="/maintenance/"><i class="fa fa-fw fa-cogs"></i> Maintenance</a></li>

<li><a href="/blank/"><i class="fa fa-fw fa-file-o"></i> Blank Page</a></li>

</ul>

</li>

<li><a href="/Contact-us/">Contact</a></li>

</ul>

</div>

In order to create mega menus read the documentation here: Yamm 3 Documentation

2.2. Blog Options

This sections shows three methods of displaying the posts:

Blog Default
Blog Secundary
Blog Masonry
Blog Infinity

1. Blog Default:

<!--This is default blog-->
<div class="col-md-10 col-md-offset-1">
{{#foreach posts}}
<article class="ct-articleBox ct-articleBox--default animated" data-fx="fadeInUp">
    <div class="ct-articleBox-date">
        <div class="ct-articleBox-dateDay">
            {{date published_at format="DD"}}
        </div>
        <div class="ct-articleBox-dateMonth">
            {{date published_at format="MMM"}}
        </div>
    </div>
    <div class="ct-articleBox-media">
        {{#if image}}
            <div class="">
                <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a>
            </div>
        {{else}}
            <div class="mbslider embed-responsive embed-responsive-16by9 text-center">
                <a href="{{url}}" title="{{title}}">{{content words="0"}}</a>
            </div>
        {{/if}}
    </div>
    <div class="ct-articleBox-titleBox">
        <h4><a href="{{url}}">{{{title}}}</a></h4>

        <div class="ct-articleBox-meta">
            Posted on {{date published_at format="MMMM DD YYYY"}}
        </div>
    </div>
    <div class="ct-articleBox-description">
        <div class="mbslider-source" style="display:none">
            {{content}}
        </div>
        <p>
            {{excerpt words="100"}}
        </p>
    </div>
    <a class="text-uppercase ct-fw-600 pull-right ct-articleBox-button" href="{{url}}">Read More <i
            class="fa fa-long-arrow-right"></i></a>
    <div class="clearfix"></div>
</article>
{{/foreach}}
    {{#if pagination}}
        {{{pagination}}}
    {{/if}}
</div>

</div>

</div>

</div>

<a href="{{url}}" title="{{title}}">{{content words="0"}}</a>

</div>

<h4><a href="{{url}}">{{{title}}}</a></h4>

Posted on {{date published_at format="MMMM DD YYYY"}}

</div>

</div>

<p>

</p>

</div>

<a class="text-uppercase ct-fw-600 pull-right ct-articleBox-button" href="{{url}}">Read More <i

class="fa fa-long-arrow-right"></i></a>

</article>

{{{pagination}}}

</div>

2. Blog Secondary:

<!--This is secondary blog-->
<div class="col-md-10 col-md-offset-1">
{{#foreach posts}}
<article class="ct-articleBox ct-articleBox--secundary animated" data-fx="fadeInUp">
    <div class="ct-articleBox-date">
        <div class="ct-articleBox-dateDay">
            {{date published_at format="DD"}}
        </div>
        <div class="ct-articleBox-dateMonth">
            {{date published_at format="MMM"}}
        </div>
    </div>
    <div class="ct-articleBox-media">
        {{#if image}}
            <div class="">
                <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a>
            </div>
        {{else}}
            <div class="mbslider embed-responsive embed-responsive-16by9 text-center">
                <a href="{{url}}" title="{{title}}">{{content words="0"}}</a>
            </div>
        {{/if}}
    </div>
    <div class="ct-articleBox-titleBox">
        <h4><a href="{{url}}">{{{title}}}</a></h4>

        <div class="ct-articleBox-meta">
            Posted on {{date published_at format="MMMM DD YYYY"}}
        </div>
        <div class="ct-articleBox-icon">
            {{#has tag="picture, image"}} <i class="fa fa-picture-o"></i> {{else}}
            {{#has tag="video, wideo, film, movie"}} <i class="fa fa-youtube-play"></i> {{else}}
            {{#has tag="gallery"}} <i class="fa fa-refresh"></i> {{else}}
            {{#has tag="music"}}  <i class="fa fa-music"></i> {{else}}
            {{#has tag="text"}}   <i class="fa fa-font"></i> {{else}}
                <i class=""></i>

             {{/has}}
             {{/has}}
             {{/has}}
             {{/has}}
            {{/has}}
        </div>
    </div>
    <div class="ct-articleBox-description">
        <div class="mbslider-source" style="display:none">
            {{content}}
        </div>
        <p>
            {{excerpt words="100"}}
        </p>
    </div>
    <a class="text-uppercase ct-fw-600 pull-right ct-articleBox-button" href="{{url}}">Read More <i
            class="fa fa-long-arrow-right"></i></a>
    <div class="clearfix"></div>
</article>
{{/foreach}}
    {{#if pagination}}
        {{{pagination}}}
    {{/if}}
</div>

</div>

</div>

</div>

<a href="{{url}}" title="{{title}}">{{content words="0"}}</a>

</div>

<h4><a href="{{url}}">{{{title}}}</a></h4>

Posted on {{date published_at format="MMMM DD YYYY"}}

</div>

{{#has tag="picture, image"}} <i class="fa fa-picture-o"></i> {{else}}

{{#has tag="video, wideo, film, movie"}} <i class="fa fa-youtube-play"></i> {{else}}

{{#has tag="gallery"}} <i class="fa fa-refresh"></i> {{else}}

{{#has tag="music"}} <i class="fa fa-music"></i> {{else}}

{{#has tag="text"}} <i class="fa fa-font"></i> {{else}}

</div>

</div>

<p>

</p>

</div>

<a class="text-uppercase ct-fw-600 pull-right ct-articleBox-button" href="{{url}}">Read More <i

class="fa fa-long-arrow-right"></i></a>

</article>

{{{pagination}}}

</div>

3. Blog Masonry:

<!--This is masonry blog-->
<div class="col-md-12">
    {{#foreach posts}}
        <div class="ct-js-blogMasonry">
            <div class="col-md-4 ct-js-blogMasonry-item">
                <article class="ct-articleBox ct-articleBox--thumbnail">
                    <div class="ct-articleBox-date">
                        <div class="ct-articleBox-dateDay">
                            {{date published_at format="DD"}}
                        </div>
                        <div class="ct-articleBox-dateMonth">
                            {{date published_at format="MMM"}}
                        </div>
                    </div>
                    <div class="ct-articleBox-media">
                        {{#if image}}
                            <div class="">
                                <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a>
                            </div>
                        {{else}}
                            <div class="mbslider embed-responsive embed-responsive-16by9 text-center">
                                <a href="{{url}}" title="{{title}}">{{content words="0"}}</a>
                            </div>
                        {{/if}}
                    </div>
                    <div class="ct-articleBox-titleBox">
                        <h4><a href="{{url}}">{{{title}}}</a></h4>
                    </div>
                    <div class="ct-articleBox-description">
                        <div class="mbslider-source" style="display:none">
                            {{content}}
                        </div>
                        <p>
                            {{excerpt words="40"}}
                        </p>
                    </div>
                </article>
            </div>
        </div>
    {{/foreach}}
</div>
    {{#if pagination}}
        {{{pagination}}}
    {{/if}}

</div>

</div>

</div>

<a href="{{url}}" title="{{title}}">{{content words="0"}}</a>

</div>

<h4><a href="{{url}}">{{{title}}}</a></h4>

</div>

</div>

<p>

</p>

</div>

</article>

</div>

{{{pagination}}}

4. Blog Infinity:

<div class="ct-u-backgroundDarkMotive clearfix ct-js-fixOnScroll">
    <div class="text-center">
        <ul id="my_tags" class="ct-gallery-filters list-unstyled list-inline">
            <!--tags generated from js-->
        </ul>
        <div class="clearfix"></div>
    </div>
</div>

<div id="ct-gallery" class="ct-gallery ct-gallery--col5 ct-js-magnificPortfolioPopupGroup">
    {{#foreach posts}}

        <div class="ct-gallery-item ct-gallery-item--masonry ct-gallery-item--default ct-gallery-item--normal ct-js-galleryTags"> <!--here should be the name of tgat that you would like to display-->

            <div class="ct-gallery-itemInner">
                <a class="ct-js-magnificPortfolioPopup" href="{{url}}">
                    <div class="ct-gallery-itemImage ">
                        {{#if image}}
                                <a href="{{url}}"><img src="{{image}}" alt="{{title}}"></a>
                        {{else}}
                        <a href="{{url}}"><img src="{{asset "images/demo-content/no_image.gif"}}" alt="no-image" /></a>
                        {{/if}}
                    </div>
                    <div class="ct-gallery-itemDescription">
                        <span class="ct-gallery-itemDescription-title"><a href="{{url}}">{{{title}}}</a></span>
                    <span class="ct-gallery-itemDescription-category">
                    {{#if tags}}
                            <i class="fa fa-long-arrow-right"></i>
                        {{tags separator=", "}}
                    {{else}}
                        <i class=""></i>
                    {{/if}}
                    </span>
                    </div>
                </a>
            </div>
        </div>
        <div class="ct-js-hiddenTags hidden">
            {{tags}}
        </div>
    {{/foreach}}

</div>
{{#if pagination}}
    {{{pagination}}}
{{/if}}

</ul>

</div>

</div>

<span class="ct-gallery-itemDescription-title"><a href="{{url}}">{{{title}}}</a></span>

</span>

</div>

</a>

</div>

</div>

{{{pagination}}}

How to make available the blog in home.hbs and index.hbs?

{{>blog_infinity}} <!--Here you can eneable infinity blog, This type of blog is different than else, so it must be activate here-->

<div class="ct-u-paddingBoth100 ct-u-diagonalBottomRight">
    <div class=""> <!--THIS EFECT IS ONLY FOR THE PUSH AND SLICE EFFECT, IF YOU WANT TO USE PARTICLES YOU MUST DELETE THIS CLASS-->
    <div class="container">
        <div class="row">
        {{!> blog_default}}    <!--if you want to have a default blog on your page-->
        {{!> blog_secundary}}    <!--if you want to have a secundary blog on your page-->
        {{!> blog_masonry}}    <!--if you want to have a blog small on your page-->

        </div>
    </div>
    </div>
</div>

{{>blog_infinity}}

{{!> blog_default}}

{{!> blog_secundary}}

{{!> blog_masonry}}

</div>

2.4. Icons

We’ve included 360+ font icons. Awesome Icons – http://fontawesome.io/icons/
HTML markup:

<!-- Awesome Icons -->
<i class="fa fa-cog"></i>

1 2	<!-- Awesome Icons --> <i class="fa fa-cog"></i>

Appearing with Animation when element in viewport
Animation can be turn off just be remove “withAnimation” class from body.
Usage: – add “animated” class to element and data-fx=”animation-type”. That’s it.
Available animation : http://daneden.github.io/animate.css/

data-fx=”hinge”
data-fx=”bounce”
data-fx=”flash”
data-fx=”pulse”
data-fx=”shake”
data-fx=”swing”
data-fx=”tada”
data-fx=”wobble”
data-fx=”bounceIn”
data-fx=”bounceInDown”
data-fx=”bounceInLeft”
data-fx=”bounceInRight”
data-fx=”bounceInUp”
data-fx=”bounceOut”
data-fx=”bounceOutDown”
data-fx=”bounceOutLeft”
data-fx=”bounceOutRight”
data-fx=”bounceOutUp”
data-fx=”fadeIn”
data-fx=”fadeInDown”
data-fx=”fadeInDownBig”
data-fx=”fadeInLeft”
data-fx=”fadeInLeftBig”
data-fx=”fadeInRight”
data-fx=”fadeInRightBig”
data-fx=”fadeInUp”
data-fx=”fadeInUpBig”
data-fx=”fadeOut”
data-fx=”fadeOutDown”
data-fx=”fadeOutDownBig”
data-fx=”fadeOutLeft”
data-fx=”fadeOutLeftBig”
data-fx=”fadeOutRight”
data-fx=”fadeOutRightBig”
data-fx=”fadeOutUp”
data-fx=”fadeOutUpBig”
data-fx=”flip”
data-fx=”flipInX”
data-fx=”flipInY”
data-fx=”flipOutX”
data-fx=”flipOutY”
data-fx=”lightSpeedIn”
data-fx=”lightSpeedOut”
data-fx=”rotateIn”
data-fx=”rotateInDownLeft”
data-fx=”rotateInDownRight”
data-fx=”rotateInUpLeft”
data-fx=”rotateInUpRight”
data-fx=”rotateOut”
data-fx=”rotateOutDownLeft”
data-fx=”rotateOutDownRight”
data-fx=”rotateOutUpLeft”
data-fx=”rotateOutUpRight”
data-fx=”slideInDown”
data-fx=”slideInLeft”
data-fx=”slideInRight”
data-fx=”slideOutLeft”
data-fx=”slideOutRight”
data-fx=”slideOutUp”
data-fx=”rollIn”
data-fx=”rollOut”

2.5. CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

1.A. Google Fonts
1.B. Revolution Slider styles
1.C. Magnific popup styles
1.D. Font Awesome styles
1.E Yamm styles
1.F Flexslider styles
1.G Animate css styles
2. GENERAL STYLES
3. Typography
4. Buttons
5. Pagination
6. Alerts
7. Inputs
8. Pophover
9. Header styles
10. Navbar styles
11. Call to action
12. Sections
13. Media sections – video/parallax/kenburns
14. Process circles
15. Person box
16. Service box
17. Pre footer section
18. Footer
19. Articles
20. Counters
21. Blockquote
22. Tabs
23. Images widget
24. Project single
25. Project images
26. Lists
27. Pricing box
28. Accordion
29. Socials
30. Square icons
31. Charts
32. Progress bar
33. Twitter
34. Google map
35. Flexslider
36. Revslider
37. Time circle counter
38. Thumbnail scroller
39. Magnific popup
40. Isotope
41. Helpers
42. D3 swimmers
43. WordPress
44. Media queries, adjustments
45. Motive colors

1.A. Google Fonts

1.B. Revolution Slider styles

1.C. Magnific popup styles

1.D. Font Awesome styles

1.E Yamm styles

1.F Flexslider styles

1.G Animate css styles

2. GENERAL STYLES

3. Typography

4. Buttons

5. Pagination

6. Alerts

7. Inputs

8. Pophover

9. Header styles

10. Navbar styles

11. Call to action

12. Sections

13. Media sections – video/parallax/kenburns

14. Process circles

15. Person box

16. Service box

17. Pre footer section

18. Footer

19. Articles

20. Counters

21. Blockquote

22. Tabs

23. Images widget

24. Project single

25. Project images

26. Lists

27. Pricing box

28. Accordion

29. Socials

30. Square icons

31. Charts

32. Progress bar

33. Twitter

34. Google map

35. Flexslider

36. Revslider

37. Time circle counter

38. Thumbnail scroller

39. Magnific popup

40. Isotope

41. Helpers

42. D3 swimmers

43. WordPress

44. Media queries, adjustments

45. Motive colors

2.6. Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.
Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.
Orlando uses utilities for the following categories:

Typography
Display Types
Paddings
Margins
Colors
Borders
Background Colors
Triangles
Diagonals
Shadows

News

2.1. Main Menu structure

2.2. Blog Options

How to make available the blog in home.hbs and index.hbs?

2.4. Icons

2.5. CSS Files & Structure

2.6. Utilities

Siver

Estato

Disrupt

We are elite