środa, 2 grudnia 2015

DBzP #3 - kody CSS i ich zastosowanie



Heii!

Dzisiaj w ramach trzeciego posta z serii 'Design bloga z Paulan' mam dla Was listę kodów CSS oraz mini instrukcję ich 'obsługi'.



Wartości pogrubione można zmieniać i dopasowywać do swojego szablonu.
Poniższa legenda powinna pomóc Wam w tworzeniu wybranego kodu :)

POZYCJA: center- wyśrodkowanie, justify- wyjustowanie, right- do prawej, left- do lewej
STRONA: left- lewa, center- środkowa, right- prawa
URL: adres url do obrazka, który ma się znaleźć w jakimś miejscu
RAMKAdotted- kropkowana, dashed- przerywana, solid- ciągła, double- podwójna, hidden- niewidoczna

NAGŁÓWEK

  ustalenie wysokości nagłówka
                     .header { height: 300px;}                         


KARTY
    
                       obrazek jako tło kart                         
.tabs-outer {background-image: url(URL);} 
  
                                       rodzaj ramki wokół karty                                        
.tabs-outer {border-style: RAMKA;}       

                                    Grubość ramki wokół karty                                         
.tabs-outer {border-width: 5px;}      

    margines kart (górny, prawy, dolny, lewy)
.tabs-outer {margin: 10px 20px 30px 40px;}       

rozsunięcie przycisków kart
.tabs-inner .widget li a {margin: 15px;}     
          
     Odstępy pomiędzy linkami kart
.tabs-outer .widget li a {margin: 5px;}

Długość belki z kartami
.tabs-outer {width: 450px;}  
         
               wysokość belki z kartami               
                                                         .tabs-outer {top: 20px;}                                                         


POSTY

Pozycja nagłówka postu
h3.post-title {text-align: POZYCJA;}   
    
Pozycja daty
h2.date-header {text-align: POZYCJA;}

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

  Zaokrąglone rogi tła pod postem
 (Wartości odpowiadają kolejnym rogom zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od prawego górnego)

.post {border-radius: 10px 20px 30px 40px;}

Margines posta
.post {padding: 50px;}  

Styl ramki wokół postów.
.post {border-style: RAMKA;} 
Grubość ramki wokół postów.
.post {border-width: 1px;}      
   
  Suwak w notce.
.post { overflow: scroll; width: 450px; height: 600px; }

Usunięcie linków "Starszy post", "Nowszy post".
.blog-pager { display: none !important;}    
         
Obrazek pod postem (oddzielający posty)
.post {background-image: url(URL);}    

Usunięcie napisu 'Technologia blogger'
#Attribution1 {display: none;}


KOMENTARZE

Margines komentarza
.comment p {padding: 10px;}   

Styl ramki wokół komentarza
.comment p {border-style: RAMKA;}

Okrągłe awatary w komentarzach
 (wszystkie wartości muszą być takie same!)

.avatar-image-container {
-moz-border-radius: 20px !important;
-webkit-border-radius: 20px !important;
-goog-ms-border-radius: 20px !important;
border-radius: 20px !important;
}             

Styl ramki wokół awatara.
.avatar-image-container {border-style: RAMKA;}   
       
Grubość ramki wokół awatara.
.avatar-image-container {border-width: 5px;} 

KOLUMNY

     Pozycja tekstu w danej kolumnie.
.column-strona-inner {text-align: POZYCJA; }

Marginesy w danej kolumnie
column-strona-inner { margin: 25px 50px 75px 100px; } 
             
Ustawienie odległości pomiędzy linijkami w widżetach.
.sidebar .widget { line-height: 5px; }     

 LINKI

Rozsunięcie się liter linku po najechaniu kursorem.
a:hover { letter-spacing: 3px; } 

Rozsunięcie się wyrazów linku po najechaniu kursorem.
a:hover { word-spacing: 5px; }

Pojawienie się ramki wokół linku po najechaniu kursorem.
a:hover {border-STRONA-style: RAMKA ;}         

Litery linku stają się duże po najechaniu kursorem.
a:hover {font-variant: small-caps;}        
     
Rodzaj ramki która pojawi się wokół linku po najechaniu kursorem
a:hover{outline-style: RAMKA;}   

Kody wzięte z bloga http://www.mypastel-garden.pl/  

A jak je zastosować?
1. Kopiujemy wybrany kod i uzupełniamy go według legendy (jeżeli jest taka potrzeba).
2. Wchodzimy w 'układ', a następnie 'projektant szablonów'.

       
3.Wybieramy opcję 'zaawansowane' i wchodzimy w kody CSS.
4.Na białej karcie wklejamy kod i zapisujemy. Następne kody należy wklejać pod poprzednimi - nie obok.

Uwaga! Niektóre kody nie działają do wszystkich szablonów!

Jest to post bardziej dla początkujących blogerek/blogerów, ale Ci doświadczeni może znajdą jakiś kod, którego dotychczas nie znali, a może im się przyda :)

34 komentarze:

  1. Lubię tego typu posty. :) zawsze ratują mi tyłek jak chce dokonać jakichś zmian na blogu. :D

    OdpowiedzUsuń
  2. Dziękuje <3
    Może w końcu coś zmienię na blogu :)
    http://emily-kalinka.blogspot.com/

    OdpowiedzUsuń
  3. Dziękuje bardzo na pewno się to przyda już sobie zapisałam link :)
    blog-kilk

    OdpowiedzUsuń
  4. Bardzo przydatny post ;)

    pozdrawiam

    wikujama.blogspot.com

    OdpowiedzUsuń
  5. W końcu ktoś zwrócił uwagę, że te kody mogą niedziałać. Niestandardowe szablony mają zazwyczaj nazewnictwa klas autora, więc trzeba je znaleźć i potem edytować. W sumie dobrze byłoby też napisać jakiś tutorial na ten temat. xd

    Outsider's eyes, zapraszam! :)
    ROZDANIE, matowa paleta :)

    OdpowiedzUsuń
  6. Niezwykle przydatne rady :)

    Pozdrawiam ♥,
    yudemere

    OdpowiedzUsuń
  7. Twoje posty o designie bloga są bardzo pomocne. Może kiedyś z nich skorzystam.

    Mam prośbę. Możesz poklikać w linki pod ubraniami? Z góry dziękuję.
    http://hellomyflower.blogspot.com/2015/11/whish-list-dresslink.html

    OdpowiedzUsuń
  8. Świetny post! :) Bardzo przydatny :) Zapraszam do mnie caroliv-photography.blogspot.com

    OdpowiedzUsuń
  9. Ciekawy pomysł na post.
    Pozdrawiam.

    OdpowiedzUsuń
  10. Przydatny post ;)
    http://modoemi.blogspot.com/

    OdpowiedzUsuń
  11. Great post! Do you want to support each others blog by following each other? Please let me know so I can follow you right back:)

    xoxo
    www.theclosetelf.com

    OdpowiedzUsuń
  12. Szkoda, że wszystkie kody nie działają we wszystkich szablonach, ale było by za pięknie. :) Przydatny post. Na pewno skorzystam, gdy będę odświeżała swój wygląd na blogu. :D

    http://justdaaria.blogspot.com/

    OdpowiedzUsuń
  13. Na pewno post mi się przyda, gdy będę zmieniać wygląd bloga. :D

    http://patrvcia.blogspot.com/

    OdpowiedzUsuń
  14. Uwielbiam takie posty, ostatnio głowiłam się z narzędziami i to właśnie ode mnie uratowały ;p
    Mój blog :)

    OdpowiedzUsuń
  15. pomocne
    obserwujemy?
    http://paolciapolcia16.blogspot.com/

    OdpowiedzUsuń
  16. Perfect and wonderful! I love and i follow your blog, please follow me too
    http://alamodenatine.blogspot.com/

    OdpowiedzUsuń
  17. Jestem laikiem więc wpis bardzo pomocny ;) może obserwacja? ;)

    OdpowiedzUsuń
  18. Bardzo przydatne rady :)
    Zapraszam do mnie http://vivi-vivii.blogspot.com/

    OdpowiedzUsuń
  19. Baardzo przydatny post!:)


    http://diarygirla.blogspot.com

    OdpowiedzUsuń
  20. świetny post! wiele osób ma własnie problem z css chociaż tak serio to wcale on nie jest taki trudny w opanowaniu jak wydaje się na początku :) Dobrze jednak, że są takie osoby jak ty, które ułatwiają zrozumienie CSS innym :)
    Zapraszam również na mojego bloga :)
    Może wspólna obserwacja? :)
    Pozdrawiam :)
    want-to-come-back.blogspot.com

    OdpowiedzUsuń
  21. Super. Bardzo pomocne :)
    ♥http://kisieltruskawkowy.blogspot.com/?m=1♥

    OdpowiedzUsuń
  22. Lubię takie posty są bardzo przydatne :)
    http://anonimoowax.blogspot.com/

    OdpowiedzUsuń
  23. świetny i przydatny post dla początkujacych ! oby wiecej takich :) kochana zapraszam do mnie

    OdpowiedzUsuń
  24. przyda się! ;D

    Zapraszam:
    unnormall.blogspot.com

    OdpowiedzUsuń
  25. przydatny post :D

    Seria świąteczna :)
    http://zyciepiszehistoriee.blogspot.com/

    Pozdrawiam Zuzia :)

    OdpowiedzUsuń
  26. ciekawy post :)

    www.kuriatka.blogpost.com

    OdpowiedzUsuń
  27. jestem w trakcie robienia designu więc na pewno się przydadzą :)
    http://karik-karik.blogspot.com/

    OdpowiedzUsuń
  28. Przydatny post, może i nawet skorzystam, jak w końcu będzie mi się chciało coś zrobić z wyglądem bloga :)
    Zapraszam na nowego posta
    Odbicie lustra…

    OdpowiedzUsuń
  29. ciekawy post i bardzo przydatny ;)
    zapraszam do mnie na nowy rozdział http://www.emptyy-promises.blogspot.com/
    pozdrawiam :*

    OdpowiedzUsuń

Dziękuję za komentarze ♥♥♥
Hejty i nieuzasadniona krytyka będą usuwane.
Zdjęcia na blogu są moją własnością i są chronione prawami autorskimi zgodnie z art. 1 ust. 2 Ustawy z dnia 4 lutego 1994 r. o prawie autorskim i prawach pokrewnych. Zabraniam kopiowania ich i używania we własnych celach bez mojej zgody.