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:
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 {
----------------------------------------------- */
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;
}
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;}
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;}
margin-right: 112px;
margin-left: -146px;
margin-top: -28px;}
.main-inner .column-right-inner {
background-color: black;
opacity: 0.5;
border-radius: 0px;
}
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;
}
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;
}
#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;}
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! :)
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,
OdpowiedzUsuń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.
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ńJa korzystam z niego w każdym szablonie :P Jest na prawdę pożyteczny.
UsuńCiesze się, że pomogłam
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ńPiękny szablon… To tło i ta kobieta… Po prostu cudne!
OdpowiedzUsuńAle teraz czas na pytanie:
Gdzie nowy rozdział na mrok nocy?
Postaram się dzisiaj wszystko odpowiednio poprawić i dokończyć rozdział na mrok-nocy. Troszkę w tym tygodniu czas mi gdzieś uciekł ;p
OdpowiedzUsuńNo... Jak dla mnie to ten szablon wymiata *,* Może dlatego, że nie znam się na tych HTML'ach? xD
OdpowiedzUsuńTak czy inaczej - anielsko ^^
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 :>
OdpowiedzUsuń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.
Odsyłam do regulaminu.
Usuńskorzystam z instrukacji
OdpowiedzUsuń