Announcement

Collapse
No announcement yet.

Current Custom CSS used on this site.

Collapse
This is a sticky topic.
X
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Tutorial:  Current Custom CSS used on this site.

    Click image for larger version Name: snip_20170825143526.png Views: 1 Size: 62.8 KB ID: 7115




    I am not a CSS Master Developer but wanted to share the CSS used on this site. It will be improved over time.

    Tags: beginner, cloud-friendly, css, customization
    • Stuck
    • Featured
  • #2
    updated: August 29th, 2017

    Code:
    /* Import Fonts, cloud friendly */
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300,400italic);

/* Set Background */
html {
  background: transparent url(core/css/0/0/0/0/9/2/images/pexels-photo-255463.jpg) no-repeat 0 0;  
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  background-color: rgba(248, 247, 216, 0.7);
}

/* Handle background changes for different screen sizes */
@media screen and (min-width: 800px) {
    body {
        min-height:1000px; /* some pages are too short to fill an entire 1080p window) */
    }
  }

@media only screen and (max-width: 640px) {
    html {
        background-image:none;
    }
}

/* Add proper spacing to the header. */
#header .site-logo img {padding-left:19px}

#header { position: relative; }
#header .header-cell { width: 100%; }
#header .site-logo, #header .site-logo img { max-width: 100%; } /* makes logo spans the width of the header */
#header .site-logo { padding: 0; } /* remove padding around the banner logo */
#header .toolbar {
    position: absolute;
    right: 0; /* for LTR languages (change right to left for RTL; see note below) */
    bottom: -29px; /* you may need to adjust this accordingly */
    padding: 0;
    width: auto;
}

/* Let's change the color of the register tab to have it stand out. */
#channel-tabbar .channel-tabbar-list li a.navbar_register_now {
    background-color: #dff0d8 !important;
    color: #3c763d !important;
}

/* Notices Color and Backgrounds */
.notice {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
}


[data-notice-id="1"] {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d !important;
}

[data-notice-id="4"] {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f !important;
}

[data-notice-id="5"] {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b !important;
    text-align:center;
}

[data-notice-id="3"] {display:none;}

/* Module Tabs */
.widget-tabs .widget-tabs-nav li.ui-tabs-active {
    background: #FFFFFF none 0 0;
    border: 1px solid #961A25;
    border-radius: 10px;
}

.widget-tabs .widget-tabs-nav li {
    background: transparent;
    margin-left: 6px;
    padding: 0 !important;
    border: 1px solid #B1B3B4;
    border-radius: 10px;
}

/* Override some of the fonts without their own stylevars */
.page-title-widget h1 {
    font-weight:bold;
    font-size: 24pt;
}

.forum-list-container .category-header, #widget_5 .widget-header, #widget_4 .widget-header {
    background: linear-gradient(45deg, rgba(102,73,34,1) 0%,rgba(170,120,54,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.forum-list-container .category-header .category {
    height:37px;
    font-family: "Source Sans Pro", Helvetica,Arial,Verdana,sans-serif;
    font-size: 18pt !important;
    padding-top: 6px;
    letter-spacing:2px;
    font-weight:normal;
    font-variant:small-caps;
}

.forum-list-container .forum-item .cell-forum .forum-title {
    font-size: 16pt;
}

/* Remove RSS Icons on home page and forum listings */
#widget_2 .b-icon__rss {
  display: none;
}

.forum-info-has-rss .b-icon__rss {
  background-image: none;
}


.b-userinfo {text-align:left;}

.b-avatar--m > img { max-height: 128px; max-width: 128px !important;
}

/* Hide Widget Header and Borders on Custom Pages */
#widget_174 .widget-header, #widget_167 .widget-header, #widget_182 .widget-header {
    display:none;
}

#widget_174, #widget_167, #widget_182, #widget_160 {
    border:none;
}

/* Better Article Channel Display */
.article-list.stream-view.stream-view-full-width .list-item {
    background: #feffff; /* Old browsers */
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    padding: 6px;
    margin-bottom: 12px;
}

.article-list.stream-view .list-item:first-child {
    border: 2px solid #FAFAFA;
}

.article-list.stream-view .list-item:first-child img.b-post__preview-image
{
      width: 900px;
      height: 160px;
      border: 0px;
      padding: 0px;
    }

.article-list li .post-links {text-align:right;}

.b-post__article-meta > li:nth-child(3) {
    display: none !important;
}

/* Forum Category Spacing (https://www.vbulletin.org/forum/showthread.php?t=324053) */
.l-xsmall .forum-list-container .forum-list-header {
    border: 0;
}
.l-xsmall .canvas-layout-container .canvas-widget .widget-header,
.l-xsmall #forum-tab .forum-list-container .forum-list-header th {
    border-top: 0;
}
.l-xsmall #forum-tab .forum-list-container .forum-list-header .header-forum {
    border-right: 1px solid #C9CED2;
}
#forum-tab.forum-category-spacing .category-header td {
    border-left: 1px solid #C9CED2;
    border-right: 1px solid #C9CED2;
}
#forum-tab.forum-category-spacing .forum-list-container {
    border-collapse: collapse;
}
#forum-tab.forum-category-spacing .forum-item .cell-forum,
#forum-tab.forum-category-spacing .subforum-list > td {
    border-left: 1px solid #C9CED2;
}
#forum-tab.forum-category-spacing .forum-item .lastpost,
#forum-tab.forum-category-spacing .subforum-list > td {
    border-right: 1px solid #C9CED2;
}
#forum-tab.forum-category-spacing .forum-item-last > td,
#forum-tab.forum-category-spacing .subforum-list table {
    position: relative;
    padding-bottom: 30px;
}
#forum-tab.forum-category-spacing .forum-item.forum-item-last .cell-forum,
#forum-tab.forum-category-spacing .subforum-list.forum-item-last > td {
    border-left: 0;
}
#forum-tab.forum-category-spacing .forum-item.forum-item-last .lastpost,
#forum-tab.forum-category-spacing .subforum-list.forum-item-last > td {
    border-right: 0;
}
#forum-tab.forum-category-spacing .forum-item-last .cell-forum:before {
    content: '';
    display: block;
    height: -webkit-calc(100% - 16px);
    height: calc(100% - 16px);
    width: 1px;
    position: absolute;
    top: 0;
    left: 0;
    background: #C9CED2;    
}
#forum-tab.forum-category-spacing .forum-item-last > td:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    position: absolute;
    bottom: 16px;
    background: #C9CED2;
}
#forum-tab.forum-category-spacing .forum-item-last .cell-forum:after {
    margin-left: -5px;
}
.l-small #forum-tab.forum-category-spacing .forum-item-last .cell-forum:after {
    margin-left: -25px;
}
.l-xsmall #forum-tab.forum-category-spacing .forum-item-last .cell-forum:after {
    margin-left: -10px;
}
#forum-tab.forum-category-spacing .forum-item-last .topics-count:after {
    margin-left: -15px;
}
#forum-tab.forum-category-spacing .forum-item-last .posts-count:after {
    margin-left: -7px;
}
#forum-tab.forum-category-spacing .forum-item-last .lastpost:after {
    margin-left: 0;
}
#forum-tab.forum-category-spacing .subforum-list.forum-item-last > td:after {
    margin-left: -29px;
}
#forum-tab.forum-category-spacing .forum-item-last .lastpost:before,
#forum-tab.forum-category-spacing .subforum-list.forum-item-last > td:before {
    content: '';
    display: block;
    height: -webkit-calc(100% - 16px);
    height: calc(100% - 16px);
    width: 1px;
    position: absolute;
    top: 0;
    right: -1px;
    background: #C9CED2;    
}
#forum-tab.forum-category-spacing .subforum-list.forum-item-last table {
    border-left: 1px solid #C9CED2;
    margin: -18px 0 -14px -29px;
}
#forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:first-child td {
    padding-top: 18px;
}
#forum-tab.forum-category-spacing .subforum-list.forum-item-last table td:first-child,
.l-small #forum-tab.forum-category-spacing .subforum-list.forum-item-last table td {
    padding-left: 29px;
}
.l-small #forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:first-child td + td {
    padding-top: 0;
}
#forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:last-child td,
.l-small #forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:last-child td:last-child {
    padding-bottom: 16px;
}
.l-small #forum-tab.forum-category-spacing .subforum-list.forum-item-last table tr:last-child td {
    padding-bottom: 0;
}
.l-xsmall #forum-tab.forum-category-spacing .forum-item:not(.forum-item-last) .cell-forum,
.l-xsmall #forum-tab.forum-category-spacing .forum-item-last .forum-wrapper, .forum-item-last .rx-forum-stats,
.l-xsmall #forum-tab.forum-category-spacing .forum-item-last .rx-lastpost-info {
    border-right: 1px solid #C9CED2;
}
.l-xsmall #forum-tab.forum-category-spacing .forum-item-last .forum-wrapper {
    margin-top: -8px;
    padding-top: 8px;
    display: block;
    padding-right: 10px;
}
.l-xsmall #forum-tab.forum-category-spacing .forum-item-last .rx-lastpost-info {
    margin-bottom: -14px;
    padding-bottom: 14px;
}
.l-xsmall #forum-tab.forum-category-spacing .forum-item-last .rx-forum-stats,
.l-xsmall #forum-tab.forum-category-spacing .forum-item-last .rx-lastpost-info {
    margin-right: -1px;
    padding-right: 10px;
    width: 100%;
}
#forum-tab.forum-category-spacing .list-footer {
    background: transparent;
    border-bottom: 0;margin-top: -10px;
}
/* Forum Category Spacing END */

/* Change Quote Appearance */
.bbcode_container .bbcode_quote {
    background: #eee;
    font-size: 13px;
    font-style: italic;
    padding: 10px;
    padding-left: 38px;
    position: relative;
    margin-bottom: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding-right: 10px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-left: 3px solid #8CC8FF;
}

/* BBCode Code Boxes */
.bbcode_container .bbcode_code {
    font-family: Courier,'Courier New',Monaco,Monospace;
    overflow: auto;
    padding: 6px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #232530;
    max-width: 900px;
    max-height: 400px;
    font-size: 12pt;
    background-color:#FAFEFF;}

.bbcode_container .bbcode_description {
    margin-top: 10px;
    color: #232530;
    padding: 6px;
    display: block;
    border: 1px solid;
    border-bottom:0px;
    background-color: #FAFEFF;
    max-width: 886px;
    font-size: 14pt;
    font-weight: bold;
}

/* Miscellaneous Style Fixes */
.l-col__fixed-3, .l-row__fixed--left > .l-col__fixed-3 {
    width:180px;
}

.author {
    font-size: 120%;
}

.b-userinfo__additional-info {
    font-size:80%;
}

.conversation-toolbar-wrapper .conversation-toolbar .toolset-right > .toolbar-inline-mod {
    border-left:0px !important;
}

.lastpost-info > .lastpost-title {font-size: 15px !important;}

.b-post__title {
font-size: 16pt;
}

.post-header {
    width:90% !important;
}
    Last edited by Wayne Luke; August 29, 2017, 14:30.

    Comment

    Previous template Next

    Related Topics

    Collapse
    Working...
    X

    We process personal data about users of our site, through the use of cookies and other technologies, to deliver our services, personalize advertising, and to analyze site activity. We may share certain information about our users with our advertising and analytics partners. For additional details, refer to our Privacy Policy.

    By clicking "I AGREE" below, you agree to our Privacy Policy and our personal data processing and cookie practices as described therein. You also acknowledge that this forum may be hosted outside your country and you consent to the collection, storage, and processing of your data in the country where this forum is hosted.

    I Agree