Kilka przydatnych kodów CSS, które pomogą Ci odmienić bloga w parę minut

18 stycznia 2016


Czasem wystarczy kilka chwil, aby poprawić coś na naszym blogu i to wcale nie musi być trudne - naprawdę. Wiem, że niektóre osoby przeraża kombinowanie coś z szablonem, ale ja Wam dziś przedstawię kilka kodów, które pozwolą Wam zmienić dany gadżet/wygląd bloga w bardzo prosty sposób za pomocą kodów CSS, bez grzebania w HTML. To jak gotowi? :)

Oczywiście żeby dodać kod CSS musimy przejść do szablon - dostosuj - zaawansowane - dodaj arkusz CSS

1. Zmiana wyglądu popularnych wpisów

.item-thumbnail img{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;}


.item-thumbnail img{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

2. Ukrycie stopki wpisu 

.post-footer {display: none;}
.item .post-footer {display: block;}

3. Zmiana wypunktowania i numeracji we wpisie

.post-body li {
list-style: none;
list-style-image: url('LINK DO OBRAZKA');
}


4. Wyjustowanie tekstu we wpisie 
.column-center-inner {text-align: justify;}

5. Brak podkreślenia linków

a:hover {text-decoration: none;}

6. Usunięcie tytułów gadżetów 
.column-right-outer h2 { 
display:none; 
}

7. Zmiana wyglądu polecanego wpisu
#FeaturedPost1 {background: #fafafa;
text-align: justify;
color: #444;
line-height: 15px;
padding: 20px;}
#FeaturedPost1 a:link {font-size: 20px; padding: 0px;
font: normal bold 13px 'Open Sans', serif;
letter-spacing: 1px;}

Efekt przed i po: 


8. Wyśrodkowanie nagłówka
.header-inner .widget div, .header-inner img {
margin-left:auto;
margin-right:auto;
}

9. Wyśrodkowanie stopki wpisu

.post-footer {text-align: center; }

10. Podkreślenie tytułów gadżetów

.sidebar .widget h2 {
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 1px solid #000;
margin-left: 0px;
margin-right: 0px;
padding: 5px 0px 0px 0px !important;
margin-bottom: 5px;
}

13 komentarzy:

  1. Podoba mi się pomysł na zmianę wyglądu polecanego wpisu :)

    OdpowiedzUsuń
  2. Muszę wreszcie ustawić jakieś kreatywne wypunktowanie, ale jeszcze nie znalazłam takiej ikonki, co to by mi szczególnie do gustu przypadła. Po raz kolejny wielkie dzięki za wpis! :)

    OdpowiedzUsuń
  3. Do zapisania i zapamiętania. ;)

    OdpowiedzUsuń
  4. Andrzej Różycki19 stycznia 2016 10:04

    Dziękuję za cenne podpowiedzi :)

    OdpowiedzUsuń
  5. Na pewno skorzystam!:)

    OdpowiedzUsuń
  6. Znam ten ból związany z ikonkami :)
    Nie ma za co ;)

    OdpowiedzUsuń
  7. Przydatny wpis :) Może kiedyś będę potrzebowała któregoś kodu, wiec go sobie zapisuję :)

    OdpowiedzUsuń

- Komentarze takie jak: spam, obserwacja za obserwacje, prośby o klikanie w banery etc. zostają usuwane - ZAPAMIĘTAJ! MÓJ BLOG TO NIE TABLICA OGŁOSZEŃ
- Uznaje tylko konstruktywną krytykę
- Każdy komentarz to motywacja dla mnie.
- Weryfikacja obrazkowa wyłączona