Decorator Front End Documentation

Lists: Basic Unordered Nested List

Example:

Australia
Austria
The Netherlands
Germany
France
United States Of America
- New York
- California
- Texas
- Florida
India
South Africa
Nigeria
Ghana
Egypt


/*---------- STANDALONE STYLE -----------*/

.list{
    position: relative;
    color: #444;
    font-family: Arial;
    font-size: 14px;
    float: left;
}

.list li{
    margin-bottom: 4px;
}

.push-left > ul{
    margin: 8px 0;
    padding-left: 17px;
}

.list-disc{
    list-style: disc;
}

.list-circle{
    list-style: circle;
}

Lists: Basic Ordered List

Example:

Australia
Austria
The Netherlands
United States Of America
Germany
France
Sweden
Denmark
South Africa
India


/*---------- STANDALONE STYLE -----------*/

.list{
    position: relative;
    color: #444;
    font-family: Arial;
    font-size: 14px;
    float: left;
}

.list li{
    margin-bottom: 4px;
}

Lists: Basic Inline List Using Flag Icons

Example:

Bosnia And Herzegovina
The Netherlands
Germany
France
South Africa


/*---------- STANDALONE STYLE -----------*/

/* IMPORTANT IF YOU USE IT AS STAND ALONE COMPONENT
------------------------------------------------------
To be able to use icons, you need to add
icons-decorator.css right below your main decorator.css
Also do not make any changes in the main style file's
such as decorator.css and icons-decroator.css!!!
------------------------------------------------------
*/

.list{
    position: relative;
    color: #444;
    font-family: Arial;
    font-size: 13px;
    float: left;
    padding: 0;
    margin: 0;
}

.list li{
    margin-bottom: 4px;
}

/*-------EXTRA INLINE LIST EDITS---------*/

/*
Important: to be able to use flags, you have to include icons-decorator.css
after your main decorator.css styles
*/

.list-inline li{
    float: left;
    margin-bottom: 0;
    margin-left: 15px;
    list-style: none;
    display: inline;
}

.list-inline li i{
    margin-top: 0;
    vertical-align: text-bottom;
}

.list-inline:first-child, .list-inline .first{
    margin-left: 0 !important;
}

Lists: Menu filter list bottom

Example:


/*---------- STANDALONE STYLE -----------*/

.filter-bottom{
    border-bottom: 1px solid #ddd;
    float: left;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-bottom li{
    margin-right: 30px;
    float: left;
    margin-bottom: -1px;
    font-family: Arial;
}

.filter-bottom li a {
    padding-bottom: 14px;
    border-bottom: 3px solid transparent;
    float: left;
    text-decoration: none;
    font-size: 13px;
    color: #66757f;
}

.filter-bottom li a:hover, .filter-bottom .active a{
    border-bottom-color: #0084B4;
    color: #0084B4;
}

.filter-bottom li .active{
    font-weight: bold;
}

.filter-bottom span, .filter-top span, .filter-left span, .filter-right span {
    background-color: #CCC;
    font-size: 11px;
    text-align: center;
    margin-left: 5px;
    height: 14px;
    line-height: 15px;
    padding: 2px 4px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    top: -1px;
    float: left;
}

/* colors used in this example */

.danger{
    background-color: #EE4D3B !important;
    color: #fff !important;
}

Lists: Menu filter list top

Example:


/*---------- STANDALONE STYLE -----------*/

.filter-top{
    border-top: 1px solid #ddd;
    float: left;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-top li{
    margin-right: 30px;
    float: left;
    margin-top: -1px;
    font-family: Arial;
}

.filter-top li a {
    padding-top: 13px;
    border-top: 3px solid transparent;
    float: left;
    font-size: 13px;
    color: #66757f;
    text-decoration: none;
}

.filter-top li a:hover, .filter-top .active a {
    border-top-color: #0084B4;
    color: #0084B4;
}

.filter-top li .active{
    font-weight: bold;
}


.filter-bottom span, .filter-top span, .filter-left span, .filter-right span {
    background-color: #CCC;
    font-size: 11px;
    text-align: center;
    margin-left: 5px;
    height: 14px;
    line-height: 15px;
    padding: 2px 4px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    top: -1px;
    float: left;
}

.filter-top li span {
    position: relative;
    top: 15px;
}

/* colors used in this example */

.danger{
    background-color: #EE4D3B !important;
    color: #fff !important;
}

Lists: Menu filter list left

Example:


/*---------- STANDALONE STYLE -----------*/

/* 
In our case the width is set to 200px;
You can change this in your theme.css
*/

.filter-left{
    width: 200px;
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-left li{
    width: 99%;
    float: left;
    border-left: 3px solid transparent;
    font-family: Arial;
}

.filter-left li a {
    float: left;
    padding: 12px 14px 12px 15px;
    width: 84%;
    border-bottom: 1px solid #eee;
    margin-left: 2px;
    font-size: 13px;
    color: #66757f;
    text-decoration: none;
}

.filter-left li:hover, .filter-left .active {
    border-left-color: #0084B4;
}

.filter-left .li:hover > a, .filter-left .active a{
    color: #0084B4;
}

.filter-left .active{
    font-weight: bold;
}


.filter-bottom span, .filter-top span, .filter-left span, .filter-right span {
    background-color: #CCC;
    font-size: 11px;
    text-align: center;
    margin-left: 5px;
    height: 14px;
    line-height: 15px;
    padding: 2px 4px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    top: -1px;
}

/* colors used in this example */

.danger{
    background-color: #EE4D3B !important;
    color: #fff !important;
}

Lists: Menu filter list right

Example:


/*---------- STANDALONE STYLE -----------*/

/* 
In our case the width is set to 200px;
You can change this in your theme.css
*/

.filter-right{
    width: 200px;
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

.filter-right li{
    width: 99%;
    float: left;
    border-right: 3px solid transparent;
    font-family: Arial;
}

.filter-right li a {
    float: left;
    padding: 12px 14px 12px 15px;
    width: 84%;
    border-bottom: 1px solid #eee;
    margin-left: 2px;
    font-size: 13px;
    color: #66757f;
    text-decoration: none;
}

.filter-right li:hover, .filter-right .active {
    border-right-color: #0084B4;
}

.filter-right .li:hover > a, .filter-right .active a{
    color: #0084B4;
}

.filter-right .active{
    font-weight: bold;
}

.filter-bottom span, .filter-top span, .filter-left span, .filter-right span {
    background-color: #CCC;
    font-size: 11px;
    text-align: center;
    margin-left: 5px;
    height: 14px;
    line-height: 15px;
    padding: 2px 4px;
    border-radius: 2px;
    display: inline-block;
    position: relative;
    top: -1px;
}

/* colors used in this example */

.danger{
    background-color: #EE4D3B !important;
    color: #fff !important;
}

Lists: Pagination List

Example:

«
1
2
3
4
...
»

«
1
2
3
4
...
»


/*---------- STANDALONE STYLE -----------*/

.pagination{
    margin: 0;
    padding: 0;
}

.pagination, .pagination li, .pagination li a{
    float: left;
}

.pagination li{
    display: inline;
    font-family: Arial;
    font-size: 13px;
}

.pagination li a{
    position: relative;
    padding: 6px 12px;
    line-height: 18px;
    color: #2F84BE;
    background-color: #eee;
    font-weight: bold;
    border-left: 1px solid #fff;
    text-decoration: none;
}

.pagination>li:first-child > a, .pagination > li:first-child > span {
    border-left: none;
}

.pagination .active a{
    cursor: default;
}

.pagination .active a,.pagination > .active > span, .pagination li a:hover{
    background-color: #3B8CD3;
    border-color: #3B8CD3;
    color: #fff;
    z-index: 5;
}

/*---------PAGINATION UNDERLINED EDITS----------*/

.pagination-underlined li a{
    background-color: transparent;
    border-bottom: 3px solid transparent;
    border-left: none !important;
    color: #4A5961;
    font-weight: normal;
}

.pagination-underlined .active a, .pagination-underlined > .active > span, .pagination-underlined li a:hover{
    background-color: transparent;
    border-bottom-color: #3B8CD3;
    color: #3B8CD3;
    font-weight: bold;
}

Lists: Basic Media ( Article ) List

Example:

What is decorator?
- 2 Hours ago
- Some Dude
- frameworks
Decorator is an easy to implement and use front-end framework for creating web and mobile supported applications. Decorator is based on HTML, CSS and Javascript. It includes lot's of ready to use pre-built components and templates.
What is decorator?
- 2 Hours ago
- Some Dude
- frameworks
Decorator is an easy to implement and use front-end framework for creating web and mobile supported applications. Decorator is based on HTML, CSS and Javascript. It includes lot's of ready to use pre-built components and templates.
What is decorator?
- 2 Hours ago
- Some Dude
- frameworks
Decorator is an easy to implement and use front-end framework for creating web and mobile supported applications. Decorator is based on HTML, CSS and Javascript. It includes lot's of ready to use pre-built components and templates.


/*---------- STANDALONE STYLE -----------*/

/* IMPORTANT IF YOU USE IT AS STAND ALONE COMPONENT
------------------------------------------------------
To be able to use icons, you need to add
icons-decorator.css right below your main decorator.css
Also do not make any changes in the main style file's
such as decorator.css and icons-decroator.css!!!
------------------------------------------------------
*/

.list-hover li:hover{
    background-color: #f6f6f6;
}

.media-list{
    float: left;
    overflow: hidden;
    list-style: none;
    font-family: Arial;
    padding: 0;
    margin: 0;
}

.media-list li{
    float: left;
    width: 100%;
    margin-bottom: 20px;
}

.media-list li .media-thumbnail{
    float: left;
}

/* 
You have to edit margin-left on '.media-content', which is 
always depending on size (width) of you thumbnail image
-------------------------------------------------------------
Important: Never make changes in the main decorator.css file
If you want to make some changes, always include a theme.css
file right after decorator.css and make your changes there.
*/

.media-list li .media-content{
    margin-left: 195px;
    font-size: 13px;
}

.media-list li p{
    float: left;
    width: 98%;
    margin: 2px 0;
    line-height: 18px;
    color: #666;
}

.media-list li .media-title{
    width: 98%;
    float: left;
    color: #0084B4;
    font-size: 19px;
}

.media-list li .media-title:hover{
    text-decoration: underline;
}

.media-list li .media-meta{
    width: 98%;
    margin: 4px 0;
    text-transform: uppercase;
    color: #999;
    font-size: 11px;
    float: left;
}
.media-list li .media-meta i{
    margin-top: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    
    /* IE 5-7 */
    filter: alpha(opacity=50);

    /* Netscape */
    -moz-opacity: 0.5;

    /* Safari 1.x */
    -khtml-opacity: 0.5;

    /* Good browsers */
    opacity: 0.5;
}

.list-inline {
    list-style: none;
    float: left;
    padding-left: 0;
}

.list-inline li {
    width: auto!important;
    float: left!important;
    margin-bottom: 0;
    margin-left: 15px;
}

.media-meta .list-inline li{
    margin: 0 15px 0 0 !important;
    float: left;
}

.media-meta .list-inline li a{
    color: #222;
    text-decoration: underline;
}

.media-meta .list-inline li a:hover{
    color: #057ed0;
}

Lists: Basic Media Grid Simple


/*---------- STANDALONE STYLE -----------*/

.media-grid{
    float: left;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.media-grid li{
    width: 18%;
    margin: 0 17px 17px 0;
    float: left;
    font-family: Arial;
}
.media-grid li a{
    text-decoration: none;
}
.media-grid li a, .media-grid li a img{
    width: 100%;
    float: left;
}

.media-grid .grid-title{
    float: left;
    width: 100%;
    font-size: 15px;
    color: #057ed0;
    text-align: center;
    margin-top: 4px;
}

/*
Depending on how many rows and li elements per row you have in the grid,
you can edit 'nth-child' margin-right like shown in example below.
Example below shows: 2 rows x 5 li elements per row
*/


/* every first child in a row of 5 elements */
.media-grid li:nth-child(5n+1){
    margin-right: 18px !important;
}

/* every second child in a row of 5 elements */
.media-grid li:nth-child(5n+2){
    margin-right: 18px !important;
}

/* every fifth child in a row of 5 elements */
.media-grid li:nth-child(5n+5) {  
  margin-right: 0 !important;
  margin-left: 1px;
}

Lists: Media Grid Wide

Example:

This is a title

1 day ago - 172,762 views

Some Dude
This is a title

1 day ago - 172,762 views

Some Dude
This is a title

1 day ago - 172,762 views

Some Dude
This is a title

1 day ago - 172,762 views

Some Dude
This is a title

1 day ago - 172,762 views

Some Dude
This is a title

1 day ago - 172,762 views

Some Dude


/*---------- STANDALONE STYLE -----------*/

.media-grid-wide{
    float: left;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.media-grid-wide li{
    width: 31%;
    margin: 0 22px 22px 0;
    float: left;
    background: #eee;
    font-family: Arial;
}

.media-grid-wide li .grid-data{
    float: left;
    padding: 10px 15px 15px 15px;
}

.media-grid-wide li p{
    margin: 2px 0;
    float: left;
    width: 100%;
}

.media-grid-wide li a, .media-grid-wide li a img{
    width: 100%;
    float: left;
}
.media-grid-wide li a img{
    border: none;
}
.media-grid-wide li a:hover{
    text-decoration: underline;
}

.media-grid-wide .grid-title {
    float: left;
    width: 100%;
    font-size: 14px;
    color: #454F57;
    text-align: left;
    font-weight: bold;
}

.media-grid-wide .grid-info{
    color: #777;
    font-size: 12px;
}

.media-grid-wide .grid-meta{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.media-grid-wide .grid-meta a {
    float: left;
    margin-right: 6px;
    width: auto;
    line-height: 23px;
    font-size: 12px;
    text-decoration: none;
    color: #66757f;
}
.media-grid-wide .grid-meta a:hover{
    text-decoration: underline;
}
.media-grid-wide .grid-meta a img{
    float: left;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}

/*
Depending on how many rows and li elements per row you have in the grid,
you can edit 'nth-child' margin-right like shown in example below.
Example below shows: 2 rows x 3 li elements per row
*/

/* every third child in a row of 3 elements */
.media-grid-wide li:nth-child(3n+3) {  
    margin-right: 0 !important;
    margin-left: 3px;
}
/* every first child in a row of 3 elements */
.media-grid-wide li:nth-child(3n+1){
    margin-right: 24px !important;
}

Lists: Nested comment list

Example:

Some Dude 2 days ago

Decorator is an easy to implement and use front-end framework for creating web and mobile applications. Decoretor is based on HTML, CSS and Javascript. It includes lot's of ready to use pre-built interface components and templates.
- 24 Like
- 8 Dislike
- 6 Reply
- Some Dude 2 days ago
  
  Decorator is an easy to implement and use front-end framework for creating web and mobile applications. Decoretor is based on HTML, CSS and Javascript. It includes lot's of ready to use pre-built interface components and templates.
  24 Like
  
  8 Dislike
  
  Reply
- Some Dude 2 days ago
  
  Decorator is an easy to implement and use front-end framework for creating web and mobile applications. Decoretor is based on HTML, CSS and Javascript. It includes lot's of ready to use pre-built interface components and templates.
  24 Like
  
  8 Dislike
  
  Reply
Some Dude 2 days ago

Decorator is an easy to implement and use front-end framework for creating web and mobile applications. Decoretor is based on HTML, CSS and Javascript. It includes lot's of ready to use pre-built interface components and templates.
- 24 Like
- 8 Dislike
- Reply


/*---------- STANDALONE STYLE -----------*/

.comment-list{
    float: left;
    width: 100%;
    list-style: none;
    font-family: Arial;
    color: #555;
    padding: 0;
    margin: 0;
}
.comment-list p{
    margin: 2px 0;
}
.comment-list li{
    float: left;
    margin-bottom: 12px;
    font-size: 13px;
}

.comment-list .comment-thumbnail, .comment-list .comment-thumbnail img{
    float: left;
}

.bold a{
    font-weight: bold;
}
/*
You can edit edit the look of your thumbnail by adding or 
removing border radius on '.comment-thumbnail'
------------------------------------------------------------
Important: Never make changes in the main decorator.css file
If you want to make some changes, always include a theme.css
file right after decorator.css and make your changes there.
*/

.comment-list .comment-thumbnail{
    padding: 1px;
    border: 1px solid #ccc;
    border-radius: 188px;
    -moz-border-radius: 188px;
    -webkit-border-radius: 188px;
    overflow: hidden;
}

/* 
In our case we've added position relative to img as seen below
and set top: 2px; you can edit this as well to fit 
your own needs depending on style img you use
*/

.comment-list .comment-thumbnail img{
    position: relative;
    top: 2px;
}

.comment-list .comment-content{
    margin-left: 70px;
}

.comment-list .comment-content p{
    width: 98%;
    margin-bottom: 2px;
    line-height: 19px;
}
.comment-list .comment-content .comment-username{
    font-weight: bold;
    color: #057ed0;
    margin-right: 4px;
    text-decoration: none;
}

.comment-list .comment-content .comment-username:hover{
    color: #333;
    text-decoration: underline;
}

.comment-list .comment-content .comment-ago{
    font-size: 12px;
    color: #777;
}

.comment-list .comment-content .comment-meta{
    float: left;
    margin-top: 6px;
}

.comment-list li > .children{
    float: left;
    margin: 12px 0  0 70px;
    list-style: none;
}

.comment-list li > .children li:last-child{
    margin-bottom: 0 !important;
}
.comment-list li>.children .view-more {
    float: left;
    width: 100%;
    text-align: center;
    border-top: 1px solid #e3e3e3;
    padding: 8px 0;
}
.comment-list li > .children .view-more a{
    color: #057ed0;
    font-weight: bold;
}

.comment-list li > .children .view-more a:hover{
    color: #333;
    text-decoration: underline;
}
.comment-meta ul{
    list-style: none;
    padding: 0;
}
.comment-meta li{
    margin-right: 15px;
}
.comment-meta li a{
    text-decoration: none;
    color: #66757f;
}
.comment-meta li a:hover{
    text-decoration: underline;
    color: #333;
}