Public Forums 71,145 posts

[thatoo Friend thatooJoin date: August 2014Posts: 19Downloads:0Uploads:4 Thanks: 3]

#201176

Hello,

I designed my website, http://www.ecoleworldycamino.org, creating a file custom.css, I write its contents below.
I’m not a webmaster, so I tried to do good but it’s probably not the best way to do it.
I like to have this only one file to change in case Purity 3 update.
However, I wonder if it’s a proper way, and if it doesn’t slow down the charging of my web pages?
Do you think it’s ok to keep it like that or should I do something else?

Thank you,

/* center the banner */
.col-sm-3 {
width : 100%;
/*background: #73e7fb; only if I want to change color of the background around the banner */
}

/* to center the main menu */
.t3-megamenu {
position: absolute;
text-align: center;
margin-left: 20%;
margin-right: 20%;
padding: 0;
}

/* to change color of off-canvas icon */
.off-canvas-toggle {
color: #dc7609;
}

/* to change color of search icon */
.head-search .search .fa-search {
color: #dc7609;
}

/* to change color of collapsed menu icon */
.navbar-default .navbar-toggle .fa-bars {
color: #dc7609;
}

/* to change color of off-canvas background color header*/
.t3-off-canvas .t3-off-canvas-header {
background: #dc7609 ;
}

/* come from template.css to orange and uppercase the element of menu which are separator */
.nav > li > .separator{
color: #dc7609;
padding: 20px;
text-transform: uppercase;
}

/* come from template.css to white and uppercase the hovered element of menu which are separator */
.nav > li > .separator:hover{
color: #ffffff;
padding: 20px;
text-transform: uppercase;
}

/* to Color all level Dropdown menu and round the corner*/
.navbar-nav li .nav-child{
border-radius: 10px;
background: #73e7fb ;
}

/* come from megamenu.css to round the corner and change color of inactive text */
.t3-megamenu .mega-nav > li a,
.t3-megamenu .dropdown-menu .mega-nav > li a {
border-radius: 10px;
color: #000000;
}

/* come from megamenu.css to change color of head of group of menu */
.t3-megamenu .dropdown-menu .mega-nav .mega-group > .dropdown-header {
color: #dc7609;
}

/* come from megamenu.css to change color of hovered over element */
.t3-megamenu .mega-nav > li a:hover,
.t3-megamenu .dropdown-menu .mega-nav > li a:hover,
.t3-megamenu .mega-nav > li a:focus,
.t3-megamenu .dropdown-menu .mega-nav > li a:focus {
text-decoration: none;
color: #ffffff;
background: #dc7609;
}
.t3-megamenu .mega-nav > li.open > a,
.t3-megamenu .dropdown-menu .mega-nav > li.open > a {
background: #dc7609;
}

/* come from megamenu.css to change color of active element */
.t3-megamenu .mega-nav > li.active > a,
.t3-megamenu .dropdown-menu .mega-nav > li.active > a {
color: #dc7609;
background: #ffffff;
}

/* come from megamenu.css to not diplay any border in menu */
.t3-megamenu .mega-nav > li,
.t3-megamenu .dropdown-menu .mega-nav > li {
border-bottom: none;
}
.t3-megamenu .mega-nav > li:first-child,
.t3-megamenu .dropdown-menu .mega-nav > li:first-child {
border-top: none;
}

/* come from template.css to change color of the arrow near submenu */
.dropdown-submenu > a:after {
border-left-color: #dc7609;
}

/* change color of text in collapsed menu */
.t3-navbar-collapse.navbar-collapse.collapse.in ul.nav.navbar-nav.level0 li span {
color: #dc7609;
text-transform: uppercase;
}

/* change color and background of active head menu in collapsed menu */
.t3-navbar-collapse.navbar-collapse.collapse.in ul.nav.navbar-nav.level0 li.active span {
color: #ffffff;
text-transform: uppercase;
background: #dc7609;
border-radius: 10px;
}

/* change background of active menu in collapsed menu */
.t3-navbar-collapse.navbar-collapse.collapse.in ul.nav.navbar-nav.level0 li.active ul.level1.dropdown-menu li.current.active {
background: #dc7609;
border-radius: 10px;
}

/* change color of aside comment article */
.article-aside {
color: #dc7609;
}

/* change background of aside menu for email and printing */
.article-aside.clearfix div.btn-group.pull-right.open ul.dropdown-menu {
background: #73e7fb;
}

/* change background of hovered aside menu for email and printing */
.article-aside.clearfix div.btn-group.pull-right.open ul.dropdown-menu > li > a:hover,
.article-aside.clearfix div.btn-group.pull-right.open ul.dropdown-menu > li > a:focus {
background: #dc7609;
color: #ffffff ;
}

/* change color of email and printing writing in aside menu */
.article-aside.clearfix div.btn-group.pull-right.open ul.dropdown-menu > li > a {
color: #dc7609;
}

/* to change color of footer background color */
.t3-footer {
background: #226600 ;
}
/* to change color of footer writing color */
.t3-footer {
color: #ffffff ;
}

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#548826

Hi

You have 2 options available

1) To avoid css changes for upgrade of T3 Framework use the custom.css file , if you use a css compression this should not overload so much your webpages loading
2) Make modifications to the template.css file directly to avoid a new file ( custom.css ) load , but in this case you will lost your css customizations

You should test the 2 options and verify time and amount of data for page loading, after you can take a right decision about it

1 user says Thank You to pavit for this useful post

1. thatoo

[thatoo Friend thatooJoin date: August 2014Posts: 19Downloads:0Uploads:4 Thanks: 3]

#548830

thank you, that’s what I understood but I wasn’t sure. I’ll keep custom.css, that’s seems simpler. I don’t have to look deep into template.css, and it will not change if update.

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#548928

Hi Thatoo,

1. As Pavit comment, the custom.css has big advantages, so we always recommend users to use this file for the safety and convenience

2. The T3 offers Optimizing CSS/JS. This will join css files to improve the performance of the site. So its no need to worry about the site performance when using an additional css file such as custom.css. For more information about this, you can refer to: http://t3-framework.org/documentation/new-features#optimization

Best regards

[Author]

Posts