Przejdź do głównej zawartości

Porady CSS

Dodaj arkusz CSS


Usunięcie paska nawigacyjnego: 
.navbar {display: none;}
lub:
#navbar-iframe {display: none !important;}
lub:
#navbar-iframe {visibility: hidden;}

Wyśrodkowanie nagłówka:
#header-inner {text-align: center;}

Tło nagłówka:
#header-inner {background-color: #kolor;}  
lub: 
#header h1 {background: #kolor} 

Zaokrąglone rogi tła nagłówka:
.header h1 {border-radius: 25px;}  
lub:
#header-inner {border: 0;
-webkit-border-radius: 21%;
-moz-border-radius: 21%;
border-radius: 21%;} 


Zwiększenie przestrzeni wokół nagłówka:
#header-inner {margin: 30px auto;} 

Zmniejszenie przestrzeni wokół tytułu posta:
#Header1 {margin: -35px 10px;}

Podzielenie nagłówka na dwie kolumny:
#header {
     float:left;
     width:50%;
     }

     #header2 {
     float:right;
     width:30%;
     } 


Podzielenie tytułu bloga na dwie kolumny:
#Header1 {
     float:left;
     width:70%;
     }

     #Header12 {
     float:right;
     width:30%;
     }


Wyśrodkowanie archiwum:
#Stats1, #BlogArchive1 #ArchiveList {text-align: center;}

Wyśrodkowanie menu górnego:
#PageList1 ul {text-align: center;}
#PageList1 ul li {float: none;display: inline;} 



Uwaga! Nazwa gadżetu (oznaczonego tutaj jako PageList1) znajdującego się w menu może być inna. Sprawdzamy ją za pomocą sposobu opisanego w poście dotyczącym tytułów obrazków na bloggerze.


Wyśrodkowanie tytułu posta:
h3.post-title {text-align: center;} 

Wyśrodkowanie treści posta:
.post-body {text-align: center;}

Wyśrodkowanie daty posta:
h2.date-header {text-align: center;}

Duże litery w tytule posta:
h3.post-title {text-transform: uppercase;}

Wyśrodkowanie gadżetów w pasku bocznym:
.sidebar .widget {text-align: center;} 

Odstępy między literami w tytule posta:
h3.post-title {letter-spacing: 5px;}

5px - wybrana wartość 

Odstępy między wyrazami w tytule posta:
h3.post-title {word-spacing: 5px;}

Opacity na zdjęciach w pasku bocznym - po najechaniu myszką:
.sidebar img:hover {opacity: .50;}
lub:
.sidebar img:hover {opacity: 0.5;} 

Opacity na zdjęciach w pasku bocznym - przed najechaniem myszką:
.sidebar img {opacity: 0.5;}.sidebar img:hover {opacity: 1.0;} 

Opacity w postach - przed najechaniem myszką:
.post-body img {opacity:0.5;}
.post-body img:hover {opacity: 1.0;}


Opacity w bloggerowskim skrypcie cookies:
div#cookieChoiceInfo {opacity:0.8 !important;}

Więcej informacji o wartościach opacity znajduje się w tym oto poście.

Obramowanie tekstu Czytaj dalej:
div.jump-link a {border: 1px solid #ffcc0d; border-radius: 25px;} 

Przykładowa modyfikacja tekstu Czytaj dalej:
div.jump-link {padding-top: 15px; letter-spacing: 3px; font-weight: 700; font-family: Rockwell; font-size:21px; text-align: center;} 

Przykładowa modyfikacja tekstu Czytaj dalej po najechaniu myszką:
div.jump-link a:hover {padding: 10px; border: 1px solid #ffcc0d; border-radius: 25px;} 

Przykładowa modyfikacja bloggerowskiego skryptu cookies:
div#cookieChoiceInfo {background-color: #222; opacity:0.8 !important; bottom: 0; top: auto !important; font-size: 10px;} .cookie-choices-text {font-size: 10px !important;}

Skrypt cookies w wersji białej:
div#cookieChoiceInfo {z-index: 999; background-color: #fff !important; bottom: 0; top: auto !important; font-size: 10px;} .cookie-choices-text {font-size: 10px !important; color: #000 !important;} a.cookie-choices-button {color: #000 !important;} a:hover.cookie-choices-button {color: #ffda00 !important;}

Wolniejsze pojawianie się koloru po najechaniu myszką na link:
a:hover {transition: all 0.4s ease-in-out 0.4s; transition-delay: 0.4s;} 

Zmiana wielkości czcionki pagera:
div#blog-pager {font-size: 16px} 

Sepia na zdjęciach po najechaniu myszką:
img:hover {-webkit-filter: sepia(84%);
-moz-filter: sepia(84%);
-o-filter: sepia(84%);
-ms-filter: sepia(84%);
filter: sepia(84%);
-webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;}

Bądź na bieżąco

Introwertyczka na Bloggerze Introwertyczka na Wordpressie Introwertyczka na Weebly Introwertyczka na Facebooku Introwertyczka na Twitterze Introwertyczka na Tumblerze Introwertyczka na Youtube Introwertyczka na Pinterest Introwertyczka na We♥it Introwertyczka na Bloglovin Introwertyczka na Google+ Introwertyczka na Google+ Introwertyczka na Pingerze Introwertyczka na Filmwebie Forum dla Ciebie Introwertyczka na Disqusie Napisz do mnie Subskrybuj blog
Kopiowanie wierszy i opowiadań jest zabronione. Wszelkie prawa zastrzeżone.