Lines, dividers and borders

Here you will find snippets to change the different lines, diveders and borders in your design.

Bar, Link list, Download and Comments module


This snippet will allow you to change the thickness, color and style of the borders on your Bar module, Download module and Link list module.

1) Bar module - Top border (color, thickness, style)

2) Bar module - Bottom border (color, thickness, style)

3) Link list module -  Headline top border (color, thickness, style)

4) Link list module - Headline bottom border (color, thickness, style)

5) Link list module - Elements bottom border (color, thickness, style)

6) Link list module - Arrow (color)

7) Download list module -  Headline top border (color, thickness, style)

8) Download list module - Headline bottom border (color, thickness, style)

9) Download list module - Elements bottom border (color, thickness, style)

10) Download list module - Arrow (color)

11) Comments module - Bottom border (color, thickness, style)

12) Comments module - Border between comments (color, thickness, style)

 

/* BAR MODULE, LINK LIST MODULE, DOWNLOAD MODULE, COMMENTS MODULE */

/* BAR MODULE */

/* 1) Top Border */
.bar .h2{
    border-top-color: #4573b2;
    border-top-width: 1px;
    border-top-style: solid;
}
/* 2) Bottom Border */
.bar .h2{
    border-bottom-color: #4573b2;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}


/* LINK LIST MODULE */

/* 3) Link list headline border top */
.linklist .h2{
    border-top-color: #4573b2;
    border-top-width: 1px;
    border-top-style: solid;
}
/* 4) Link list headline border bottom */
.linklist .h2{
    border-bottom-color: #4573b2;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/* 5) Link list elements border bottom */
.linklist li{
    border-bottom-color: #4573b2;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
/* 6) Link list arrow color */
.linklist li:before{
    color: #4573b2;
}


/* DOWNLOAD LIST MODULE */

/* 7) Download list headline border top */
.downloadlist .h2{
    border-top-color: #4573b2;
    border-top-width: 1px;
    border-top-style: solid;
}
/* 8) Download list headline border bottom */
.downloadlist .h2{
    border-bottom-color: #4573b2;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/* 9) Download list elements border bottom */
.downloadlist li{
    border-bottom-color: #4573b2;
    border-bottom-width: 1px;
    border-bottom-style: dotted;
}
/* 10) Download list arrow color */
.downloadlist li:before{
    color: #4573b2;
}


/* COMMENTS MODULE */

/* 11) Bottom Border Add comment */
.comments .h4{
    border-bottom-color: #4573b2;
    border-bottom-width: 1px;
    border-bottom-style: solid;
}
/* 12) Top Border Individual comments */
.comments dt{
    border-top-color: #4573b2;
    border-top-width: 1px;
    border-top-style: dotted;
}
Copy to clipboard

Dividers


This snippet will change the thickness, color and style of your dividers.

1) Divider module - Solid border (color, thickness)

2) Divider module - Dotted border (color, thickness)

/* DIVIDER  MODULES */

/* 1) Divider module - solid */
.divider-divider{
    background: #4573b2;
    height: 1px;
}
/* 2) Divider module - dotted */
.divider-dotted{
    border-bottom-color: #4573b2;
    border-bottom-width: 1px;
}
Copy to clipboard