23 kwietnia 2013

Anioł stróż - czyli jak powstał anielski szablon!

     Kochani! Pomyślałam sobie, że warto by napisać jakąś instrukcję i jedyne co mi przyszło do głowy, to zaprezentowanie kodów CSS, dzięki którym stworzyłam szablonik. Powiem szczerze, że gdyby nie cudne porady Śniącej z bloga Tajemniczy ogród nic by mi nie wyszło. Tak kochana, dziękuję Ci, bo jesteś wielka! 
     Na podstawie tego co wyczytałam i co podlukałam (ale jestem zła :D), opiszę wam to i owo!

Anioł stróż, czyli jak narodziło się moje dziecko.

Nie będę się rozpisywać za mocno, ani ględzić do poduchy. Krótko i na temat!

Tworzymy na początek grafikę w ulubionym programie graficznym, która w tym wypadku wygląda tak:

Efekt przezroczystości jest zastosowany specjalnie, ponieważ w ten sposób (moim zdaniem) lepiej łączyła się całość z tłem. Ale nim dokonałam takiego efektu, ucięłam kawałek tła, który zaprezentuję poniżej:

Teraz zapytacie, gdzie to wkleić? A już tłumaczę. Wchodzimy kolejno:
Projekt -> Edytuj kod HTML -> ... 

 Nie bójcie się nowego wyglądu edytora! Wbrew pozorom wcale nie gryzie. Jak już klikniecie we wskazanym miejscu, postępujemy wg:
'ctrl + F' -> wpisujemy 'png' -> enter

W swoim szablonie odszukujemy frazę:
/* Content
----------------------------------------------- */
body {


Zapisujemy szablonik i przechodzimy do kodów CSS!

Tło postów

Okazało się, że tło, które stworzyłam utrudnia czytanie literek, dlatego też postanowiłam dodać tło pod posty.

#Blog1 {
background-color: black;
opacity: 0.5;
border-radius: 0px;
}

Chciałam też, żeby wszystko się do siebie 'przyklejało', więc zastosowałam kod:

.column-center-inner {
margin-right: 130px;
margin-left: -147px;
margin-top: -28px;}

To samo zrobiłam z kolumną prawą, zamieniając wartości:

.column-right-inner {
margin-right: 112px;
margin-left: -146px;
margin-top: -28px;}

.main-inner .column-right-inner {
background-color: black;
opacity: 0.5;
border-radius: 0px;
}

Kolejnym elementem, który postanowiłam zmienić, był wygląd kart u góry. Z tego miejsca chciałabym podziękować osóbce o nicku Aura, która umieściła takowy kod na blogu Shy. Dziękuję! :)

Pierwszy człon kodu odpowiada za pierwszą kartę:

.tabs-inner .widget li:first-child a {
background-color: black;
border-radius: 20px 20px 0px 0px;
opacity: 0.5;
}

Środkowe zapisy odpowiadają kolejno wszystkim kartom z osobna, dzięki czemu każdą możecie stworzyć wg własnego uznania. Tu macie pole do popisu! ^^

.tabs-inner .widget li:nth-child(2) a {
background-color: #3B3B3B;
border-radius: 20px 20px 0px 0px;
opacity: 0.5;
}
.tabs-inner .widget li:nth-child(3) a {
background-color: black;
border-radius: 20px 20px 0px 0px;
opacity: 0.5;
}
.tabs-inner .widget li:nth-child(4) a {
background-color: #646464;
border-radius: 20px 20px 0px 0px;
opacity: 0.5;
}
.tabs-inner .widget li:nth-child(5) a {
background-color: black;
border-radius: 20px 20px 0px 0px;
opacity: 0.5;
}
.tabs-inner .widget li:nth-child(6) a {
background-color: #3B3B3B;
border-radius: 20px 20px 0px 0px;
opacity: 0.5;
}
.tabs-inner .widget li:nth-child(7) a {
background-color: black;
border-radius: 20px 20px 0px 0px;
opacity: 0.5;
}

Jak widzicie, ja zmieniłam jedynie kolor tła. Wy możecie ponieść wodzę fantazji i udoskonalać wg własnego uznania. Zmieniajcie kolory, bawcie się obramowaniem. Wszystko zależy od was.

Nie zapomnijcie o ostatniej karcie, która jest równie wyjątkowa co pierwsza i posiada własny, unikalny wygląd:

.tabs-inner .widget li:last-child a {
background-color: #646464;
border-radius: 20px 20px 0px 0px;
opacity: 0.5;
}

Dodałam również pozycjonowanie kart:

.tabs-outer {margin: 500px 0px 0px 44px;}
#PageList1 ul { margin-left: 53px;
margin-top: -16px;
}

Na samym końcu wprowadziłam różne dodatki, jak wyśrodkowanie tekstu i cienie.


h3.post-title, .comments h4 {text-align: center;}
h2.date-header {text-align: center;}
.column-right-inner {text-align: center; }
 .main-inner .column-center-inner {text-align: center; }

.column-right-inner {text-shadow: 0px 0px 10px #3B3B3B}
.column-center-inner {text-shadow: 0px 0px 3px black}
.comments h4 {text-shadow: 0px 0px 10px white}
.widget h2 {text-shadow: 0px 0px 10px white}

Wygląd linków po najechaniu kursorem:

a:hover {font-variant: small-caps;
letter-spacing: 1px;
text-decoration: none;}

W tym miejscu dodałam taki mały obrazek do wyglądu napisów typu "Menu", "Obserwatorzy".


h3.post-title, .comments h4, .comments h4, .post-footer, .widget h2 {
background-image: url(http://img839.imageshack.us/img839/5454/widgettlo1.png);
border-radius: 0px ;
padding: 5px;
margin: 0px 50px 0px 50px;
}

I to by było na tyle. Efekt pracy możecie póki co podziwiać. Mam nadzieję, że instrukcja choć troszkę się wam przyda! Pozdrawiam! :)

10 komentarzy:

  1. Może to być trochę wredne, że się wtrącę, ale osobiście odradzam używanie cechy opacity, ponieważ ona nie tylko tworzy przezroczystym nasze tło, ale również i litery, co przeszkadza w czytaniu,
    O wiele lepiej w tym przypadku sprawdza się kod:
    selektor {background: rgba(20,100,178,0.5)}.
    Tu jest wyjaśnienie jak tego używać LINK.
    Troszkę nie ładnie tak to reklamować, ale jeżeli chcesz to usuń ten komentarz.
    Chciałam tylko pomóc.

    OdpowiedzUsuń
    Odpowiedzi
    1. Serdecznie dziękuję za wskazówkę. W sumie zastanawiałam się, czy istnieje coś takiego. Wypróbuję i zobaczę jak się sprawdzi. Dzięki! :)

      Usuń
    2. Ja korzystam z niego w każdym szablonie :P Jest na prawdę pożyteczny.
      Ciesze się, że pomogłam

      Usuń
    3. Dołączam się, na to samo chciałam zwrócić uwagę. Poza tym, okno komentarza też się zrobiło przezroczyste. Tak tylko informuję, że zaglądam od czasu do czasu do Ciebie c;

      Usuń
  2. Piękny szablon… To tło i ta kobieta… Po prostu cudne!

    Ale teraz czas na pytanie:
    Gdzie nowy rozdział na mrok nocy?

    OdpowiedzUsuń
  3. Postaram się dzisiaj wszystko odpowiednio poprawić i dokończyć rozdział na mrok-nocy. Troszkę w tym tygodniu czas mi gdzieś uciekł ;p

    OdpowiedzUsuń
  4. No... Jak dla mnie to ten szablon wymiata *,* Może dlatego, że nie znam się na tych HTML'ach? xD
    Tak czy inaczej - anielsko ^^

    OdpowiedzUsuń
  5. Jutro sobie pozmienaiam blogow wygląd ,ale czy mogę prosić o szablon?? O ile robisz szablony na stronę.. Bo potrzebuję na http://iloverosewood.blogspot.com :>
    Czekam na odpowiedź :) Chciałabym też zrobić takie rzeczy na blogu jak czat , kiedy kolejny odcinek i jak będzie wyglądał , w leym pasku zakładki Facebook, Kontakt czy Zapytaj , które przekierowuje na aska.

    OdpowiedzUsuń