05 lutego 2014

004. Such a smoky world

Hejo, jak wam mija czas? 
Ja prawie nie mam wolnego czasu XD. 
Trudno się mówi ^^. Dobra przechodzę do notki. 


*Poszedł na główną*



Podoba mi się, jak bardzo delikatny szablon mi wyszedł ^^. Kolory współgrają ze sobą i się nie gryzą. Mam nadzieję, że wam również się spodoba. 

Karty Poziome
Mam tylko jedną miniaturkę. Właśnie muszę znaleźć czas to zrobię więcej przykładów jakich będziecie mogli użyć. Ale na razie to czasu brak. Muszę odrabiać lekcję z bratem... Jest głupi jak but, ale to szczegół XD. 


Jak widać użyłam karty z szablonu, który wam pokazałam. 
Męczyłam się z nimi długo... Zapomniałam kodu. 
Żaden: 
.tabs-inner czy .tabs-outer - dla nie wiedzących to są selektory odpowiadające za karty poziome, chociaż osobiście rzadko ich używam.
Na początku wpisałam:

.tabs-inner{
position: relative;
bottom: 560px;

Gdy wpisywałam kolor bakcground (kolor tła) robił się pasek. Wkurzona wypróbowałam .tabs-outer, ale oczywiście próba się nie powiodła. Ten selektor to pasek z kartami. Ten wyżej moim zdaniem też, bo mi się chce działać z osobnymi przyciskami nawet z .tabs-inner co podobno jest selektorem tych oto osobnych przycisków. Ja tam pokażę wam co zrobiłam. Łatwy sposób i nie musiałam się męczyć. 

#PageList1 a:link { 
display: block;
background: #D3A290;
margin-left: 10px;
border-radius: 10px;
border: double 3px #F7E8B9;} 

#PageList1 a:visited { 
background: #E8B4A2;
border: double 3px #F7E8B9;} 


#PageList1 a:hover {
background: #F7E8B9; 
border: double 3px #E8B4A2;
display: block; 
margin-bottom: 10px;
transition:all 2s;
-moz-transition:all 2s;
-webkit-transition:all 2s;
-o-transition:all 2s;}

Jak w poprzednich kartach użyłam #PageList1. Gdyby nie ten kod, o którym pomyślałam w ostatniej chwili, to by nie było, chociaż tego jednego przykładu poziomych kart. 

border - to obramowanie.  
(dotted - kropki, dashed - krótkie linie, solid - linia ciągła, double - podwójna linie ciągła)
margin-left - użyłam, żeby odsunąć od siebie karty. Można też wydłużać bok prawy jak i lewy. Co do górnego i dolnego nie jestem pewna. 

Kolumny
Nie ważne, czy to kolumna prawa, lewa, środkowa jedyne co się zmienia to: right, left, center. 
Nie będę wam wpisywać każdej kolumny osobno. 

.column-right-inner - wszystkie gadżety są razem jak na poprzednim szablonie, który zrobiłam.
.column-right-inner .widget - wszystkie gadżety są oddzielnie tak jak na szablonie, który teraz dodałam.
Żeby zbliżyć do siebie gadżety, czy, jeśli wolicie zmniejszyć odstęp wystarczy wpisać: 
margin-bottom czy margin-top.

Można dodawać wszystko. Kolejne tło. Czy nagłówek gadżetu zastąpić zdjęciem czy po prostu jakimś kolorem. Do tego używa się po prostu h2 ja przynajmniej tak robię XD chyba jest jeszcze jeden kod, ale nie wnikajmy zaprezentuję go wam następnym razem jak sobie przypomnę. 

Posty
Do wyglądu posta są dwa kody. 

#Blog1 - obejmuję wszystko, co znajduję się w poście.
.post - nie obejmuję daty i napisu starszy post.

Na dzisiaj to wszystko. Chciałam powiadomić was, iż w sobotę możliwe, że udostępnimy wam już galerię, w której jak na razie będzie puściutko >.< Niestety. Mam nadzieję, iż spodoba wam się wykonanie szablonu i wszyściuteńko będzie działaś XD cieszę się przedwcześnie, ale co tam. Właściwie to dzisiaj muszę dokończyć kod CSS, ale mało zostało. Trzymajcie kciuki. Paaa.  

4 komentarze:

  1. szablon głowny jest taki śliczny *_______* warto było czekać. Kody na karty również przydatne, skorzystam ;)

    OdpowiedzUsuń
    Odpowiedzi
    1. Przyznam, że nie było to postanowione, ale Yuki tak mnie tym szablonikiem zaskoczyła, że postanowiłam go użyc ;)

      Usuń
    2. Ej nie zawstydzaj mnie! >.< Cieszę się, że szablon przypadł do gustu, a karty się przydadzą. Następnym razem spróbuję dodać coś ciekawego! Ale muszę najpierw znaleźć czas.

      Usuń
    3. Na razie to szykuj się do MT ;p

      Usuń