piątek, 7 sierpnia 2015

Nie każdy lubi Disqus

Witajcie
Wiem, że przez temperaturę nikomu nic się nie chce, ale działać i pracować trzeba, tak więc dziś kolejny mini poradnik jak używać kodów CSS. Mamy już za sobą Wygląd Strony Głównej oraz Poprawki Wyglądu Postów.
Trzeci poradnik z tej serii więc już trochę tych kodów znacie, ale czy wiecie jak w łatwy sposób poprawić komfort komentowania bez konieczności instalacji Disqus czy podłączenia komentarzy Google +, jeśli nie to zapraszam do lektury.

Tła:
  • kolor
    .comment p {background-color: #5a5555;}
  • obraz w tle
    .comment p {background-image: url(http://s6.ifotos.pl/img/guiguojhj_xxenawe.png);} 
Przezroczystość, sama nie polecam jeśli tło Strony głównej ma pstrokaty wzór
  • .comment p {opacity: 0.7;} 
Cienie:
  • tekstu
    .comment p {text-shadow: 2px 2px 5px #5a5555 }
  • ramki
    .comment p{box-shadow:0px 0px 2px black} 
Zaokrąglone rogi:
  • .comment p{border-radius: 90px 90px 5px 5px;} 
UWAGA: parametry odpowiadają wszystkim czterem rogom. Można zostawić tylko jeden i będzie się wtedy odnosić do całej ramki.

Marginesy (chodzi o to by tekst nie przyklejał się do ramki)
  • .comment p {padding: 20px;} 
 Obramowanie:
  • linia ciągła
    .comment p {border-style: solid;}
  • linia kreskowa
    .comment p {border-style: dashed;}
  • linia kropkowana
    .comment p {border-style: dotted;}
  • linia podwójna
    .comment p {border-style: double;}
Grubość obramowania:
  • cienkie
    .comment p {border-width: thin;}
  • średnie
    .comment p {border-width: medium;}
  • grube
    .comment p {border-width: thick;}
No dobrze wygląd samych komentarzy mamy, ale co z Avatarami użytkowników?
Spokojnie na to też są kody.

Zaokrąglone rogi:
  • .avatar-image-container {border-radius: 90px 90px 5px 5px;} 
UWAGA! Jeśli wpiszecie duże parametry we wszystkich czterech rogach, wtedy avatar będzie mieć kształt koła. Ale po co ograniczać się tyko do kół. 

Obramowanie:
  • linia ciągła
    .avatar-image-container {border-style: solid;}
  • linia kreskowa
    .avatar-image-container {border-style: dashed;}
  • linia kropkowana
    .avatar-image-container {border-style: dotted;}
  • linia podwójna
    .avatar-image-container {border-style: double;}
Grubość obramowania:  
  • cienkie
    .avatar-image-container {border-width: thin;}
  • średnie
    .avatar-image-container {border-width: medium;}
  • grube
    .avatar-image-container {border-width: thick;}
Cienie
  • .avatar-image-container {box-shadow:0px 0px 2px black}    
Kochani tyle na dziś, następnym razem zajmiemy się Zakładkami na blogu czyli potocznie nazywanymi Stronami.

Pozdrawiam  

Brak komentarzy:

Prześlij komentarz

Copyright © Szablon wykonany przez Blonparia