Personnaliser l’apparence de son blog à l’aide de CSS

Exemple de personnalisation du thème Tube avec du css additionnel :

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
}

.tube-site-navbar {
 background-color: #1a1a1a;
}

.custom-logo {
 height: 67px;
 width: auto;
 margin: 5px;
}

.tube-site-navbar .navbar-nav > .active > a, .tube-site-navbar .navbar-nav > .active > a:focus, .tube-site-navbar .navbar-nav > .active > a:hover {
 cursor: default;
 border-color: rgba(0,0,0, 0.125);
 color: #fff;
 background-color: #aa0000;
}

.col-md-push-2 {
 left: 0;
}
.col-md-8 {
 width: 100%;
}

.tube-search-form button, .tube-search-form button:hover, .pagination > li > a:focus, .pagination > li > a:hover, .pagination > li > span:focus, .pagination > li > span:hover, .pagination > li > a, .pagination > li > span, a, a.h1, a.h2, a.h3, a.h4, a.h5, a.h6, a h1, a h2, a h3, a h4, a h5, a h6, a .h1, a .h2, a .h3, a .h4, a .h5, a .h6, a:hover, a:focus, .btn-link, .btn-link:hover, .btn-default, .btn-default:hover, .text-primary, a.text-primary, .comment-metadata a:hover, .comment-metadata a:focus, .required {
 color: #aa0000;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
 color: #aa0000;
 COLOR: Heading Color;
}

p {
 margin222: 0 0 20px;
 text-align: justify;
}

.page-masthead .post-title + .excerpt {
 margin-top: 1.5em;
}

.col-lg-push-2 {
 left: 0;
}

.col-lg-8 {
 width: 100%;
}

.page-masthead .post-meta {
 text-transform: none;
}

.page-masthead .post-meta li {
 font-size: 14px;
}

.pagination-wrap:first-child {
 margin-top: 0;
 display: none;
}

.btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .tube-site-navbar .navbar-toggle, .tube-site-navbar .navbar-toggle:hover, input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus, .form-control:focus, .tagcloud a:hover, .tagcloud a:focus {
 border-color: #1a1a1a;
}

.pagination .page-numbers.current, .pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover, .gb-primary, .btn-primary, .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:active:focus, .tube-site-navbar .navbar-toggle, .tube-site-navbar .navbar-toggle:hover, .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover, mark222, ins222, .pagination222 .prev:hover, .pagination222 .prev:focus, .pagination222 .next:hover, .pagination222 .next:focus, .widget_calendar tbody a, .page-links a:hover, .page-links a:focus {
 background-color: #1a1a1a;
}

#site-footer {
 background: #1a1a1a;
}

#copyright p:last-child {
 margin-bottom: 0;
 text-align: center;
}

#copyright {
 font-size: 90%;
 text-transform: uppercase;
}

More Like This


Catégories


free[B]logs

Étiquettes


Add a Comment

Your email address will not be published.Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.