wtorek, 31 grudnia 2013

Data obok tytułu posta - kolejne modyfikacje

       Jakiś czas temu pamiętam, że takie pytanie padło. Nie umiem powiedzieć od kogo, gdzie i czy w ogóle ktoś takowe zadał, ale uważam, że ta modyfikacje może być dosyć ciekawa. W dodatku nie jest trudna. Całość udało mi się zrobić tylko i wyłącznie za pomocą opcji "Dodaj arkusz CSS" w projektancie szablonów.


Zaczęłam oczywiście od otworzeniach projektanta szablonów. Dodałam podstawowe kody : body, #navbar-iframe, a:link, a:hover, a także zakodowałam ulubioną czcionkę.
Dla zainteresowanych:
#navbar-iframe {
display:none;}
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(http://themes.googleusercontent.com/static/fonts/notoserif/v1/fVu1p3782bqS2z-CaJvp9hsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
font-family: 'Noto Serif';
font-style: italic;
font-weight: 400;
src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/notoserif/v1/HQXBIwLHsOJCNEQeX9kNzxa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
body {
font: normal normal 10px  'Noto Serif';
color: #111;
line-height:19px;
background:#fffff9;
background-image:url(http://1.bp.blogspot.com/-7EcCAI9-MII/UgeUwEUP53I/AAAAAAAAA1w/OIAVX-kbpsI/s1600/sfwbb7.jpg);
}
a:link {
text-decoration: none;
color: #615e76;
}
a:visited {
text-decoration: none;
color: #615e76;
}
a:hover {
text-decoration: underline;
color: #706e89;
}
Dalej wpisałam kod na tytuł posta. 
h3.post-title, h4 {
font: normal 20px 'Cardo';
color: #222;

text-align:left;

letter-spacing:2px;
padding:0px;
text-transform:lowercase;
}
Przy takich operacjach koniecznością będzie ustawienie tytułu do lewej, dzięki czemu oczywiście  data i tytuł nie będą wchodzić sobie w drogę. 

Warto jeszcze wspomnieć, że tuż przed dodaniem kodu na tytuł zmieniłam kolor tła daty. 

Następnie napisałam kod.
.date-header {
text-align:center;
font: normal 10px Droid Serif,
serif;

float:right;

margin-top:10px;
font-style:italic;color: #aaa;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-border-radius: 2px;
}
Aby data przeniosła się na prawą stronę używamy float:right. Większość z Was zapewne wie o co chodzi i ta rzecz wydaje się być oczywista. Jednak, aby ustawić datę i tytuł ze sobą na równi użyłam margin-top:10px, który pozwolił mi "obniżyć" datę w poziomie. 

Teraz musimy się ubezpieczyć na wypadek za długiego tytułu posta. Aby zobaczyć "zagrożenie" z jego strony, a także je wyeliminować dodam do kodu na tytuł background:#f5f5f5;
Jak już i Wy dodaliście tło dla Waszego tytułu, teraz dopiszcie także width:70%. Powinniście zauważyć, że "przestrzeń" tytułu zmniejszyła się i odsłania już kawałek daty. Wybierzcie pasującą wartość dla width i usuńcie z kodu tytułu wartość background,
Na pierwszym obrazku widzicie width:100%, a na drugim już width: 65%. Widać, że tytuł już odsłonił naszą datę, dlatego spokojnie usuwamy background i nasz kod wygląda w tej chwili tak:
h3.post-title, h4 {
background:#f5f5f5;
font: normal 20px 'Cardo';
color: #222;
text-align:left;
letter-spacing:2px;
padding:0px;
text-transform:lowercase;
width:65%;
}
I to tyle, moi Drodzy! Na tym kończy się nasza modyfikacja. Możemy oczywiście dodać także efekty dla post-header, ale nie musimy. Ja dodałam border-top:1px solid #ddd, aby lepiej móc ustawić datę na równi z tytułem.

Jeśli ktoś byłby zainteresowany całym kodem, który wkleiłam w "Projektancie Szablonów" to:
#navbar-iframe {
display:none;}
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(http://themes.googleusercontent.com/static/fonts/notoserif/v1/fVu1p3782bqS2z-CaJvp9hsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
font-family: 'Noto Serif';
font-style: italic;
font-weight: 400;
src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/notoserif/v1/HQXBIwLHsOJCNEQeX9kNzxa1RVmPjeKy21_GQJaLlJI.woff) format('woff');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('Montserrat-Regular'), url(http://themes.googleusercontent.com/static/fonts/montserrat/v3/zhcz-_WihjSQC0oHJ9TCYBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
body {
font: normal normal 10px  'Noto Serif';
color: #111;
line-height:19px;
background:#fffff9;
background-image:url(http://1.bp.blogspot.com/-7EcCAI9-MII/UgeUwEUP53I/AAAAAAAAA1w/OIAVX-kbpsI/s1600/sfwbb7.jpg);
}
a:link {
text-decoration: none;
color: #615e76;
}
a:visited {
text-decoration: none;
color: #615e76;
}
a:hover {
text-decoration: underline;
color: #706e89;
}
h3.post-title, h4 {
font: normal 20px 'Cardo';
color: #222;
text-align:left;
letter-spacing:2px;
padding:0px;
text-transform:lowercase;
width:63%;
}
@font-face {
font-family: 'Droid Serif';
font-style: normal;
font-weight: 400;
src: local('Droid Serif'), local('DroidSerif'), url(http://themes.googleusercontent.com/static/fonts/droidserif/v3/0AKsP294HTD-nvJgucYTaIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.date-header {
text-align:center;
font: normal 10px Droid Serif,
serif;
float:right;
margin-top:10px;
font-style:italic;color: #aaa;
letter-spacing: 2px;
text-transform: uppercase;
-webkit-border-radius: 2px;
}
.post-header, .post-footer { background:#f5f5f5;border-top:1px solid #ddd;
text-transform:uppercase;
text-align:left;
padding-left:10px;
font-style:italic;
letter-spacing:2px;}

14 komentarzy:

  1. Pobrałam szablon Serenade na bloga bloodbonds.blogspot.com

    Co do tutoriala to na pewno bardzo przydatny. Ja jeszcze nie do końca ogarniam te całe kody, ale miejmy nadzieję, że w końcu mi się uda :D

    Pozdrawiam, Dakota / bloodbonds.

    OdpowiedzUsuń
  2. Pobieram szablon Serenade na bloga effekta.blgospot.com :)

    OdpowiedzUsuń
  3. Hej! Kiedyś, w maju? czerwcu? poprosiłam Cię o szablon... nawet mam dowód, że przeczytałaś! :) http://imageshack.com/a/img534/3612/bek1.png

    OdpowiedzUsuń
    Odpowiedzi
    1. 'Cześć! :) Mam osoboste życzenie co do szablonu: delikatny, kobiecy, minimalistyczny szablon w kolorach bezchmurnego nieba (hehe). Taki szablon typowy na pamiętnik, blog refleksyjny.. :)" O to chodzi?
      Otóż na mój gust to jest propozycja. A z propozycjami różnie bywa - czasem faktycznie ma się na nie pomysł, czasem kompletnie nie wie jak się za to zabrać i wszystko skleić do kupy.
      Potem czas mija i zapomina się o niektórych rzeczach. Jestem człowiekiem, więc nie umiem spamiętać wszystkich komentarzy i wszystkich próśb. Mam różne obowiązki, czasem pracuję, muszę się uczyć, od czasu do czasu wyjdę na tenisa czy coś. :P
      Teraz do składania tego typu propozycji jest specjalna zakładka, gdzie wszystko czarno na białym można przejrzeć. A ja mogę się w tym lepiej odnaleźć. :)
      Ale w tej chwili, wybacz mi Ty i wszyscy czytający te słowa, ale najważniejsze są zamówienia, które muszę oddać. :)

      Pozdrawiam,
      Tyler

      Usuń
  4. Pobrałam szablon Muffins na bloga http://jedno-party-by-bunko.blogspot.com/ :)

    OdpowiedzUsuń
  5. nawet w Sylwestra pracowała!

    OdpowiedzUsuń
  6. Hej, jakiś czas temu powstał nowy projekt Wschodzące Gwiazdy, który ma na celu stworzenie "bazy" blogerów w blogosferze, poprzez prezentację blogów w wywiadach.
    Jeśli jesteś zainteresowana udziałem w projekcie to zapraszamy na wschodzace.blogspot.com - tam znajdziesz wszystkie informacje.

    Pozdrawiamy :)

    OdpowiedzUsuń
  7. Hej, świetny blog. Chciałam poinformować, że pobieram szablon f*ckinguseless na
    gnome-in-hat.blogspot.com . Wygląda bosko!

    Mam tylko pytanie. W podglądzie tego szablonu jest fajny chatbox. Mogłabyś mi podać kod na niego?

    OdpowiedzUsuń
    Odpowiedzi
    1. tutaj: http://cbox.ws/. Potrzebna oczywiście rejestracja i te sprawy. :)

      Usuń
  8. Od dłuższego czasu tu zaglądam i zauważyłam zmianę szablonu, więc jestem z siebie dumna. Bardzo ciekawy podział szablonów. Ja bym jeszcze dodała szablony typowe na strony internetowe, z różnymi bajerami we Flashu i Javie (wiadomo o co chodzi).
    Czyżbyś czytała w moich myślach? :D Jakiś czas temu przeszukiwałam kilka blogów z instrukcjami HTML / CSS w poszukiwaniu własnie efektu na datę w tej samej linijce, co tytuł. Nie muszę chyba dodawać, że nie znalazłam, a jednak moje umiejętności pisania szablonów w tych językach nie są na bardzo wysokim poziomie, żebym chociaż mogła jakoś kombinować. Także dziękuję! Sprytnie, zwyczajnie pokombinować z marginesami żeby jedno naskoczyło na drugie :D W weekend pokombinuję w przerwie pomiędzy kończeniem projektów na uczelnię!
    Od czasu do czasu przeglądam również starsze artykuły i akurat jak mnie najdzie wena to kombinuję z kodem ;)

    OdpowiedzUsuń
  9. Tyler (znaczy się Riko) cierpi z powodu chłopaka, postów nie będzie ^^ Pozdrawiam, Loczuś - moderator, geniusz zła, wspaniała i olśniewająca blaskiem siostra Tyler <3

    OdpowiedzUsuń
    Odpowiedzi
    1. I zgłaszam prośbę o umieszczenie chatboxa, bo nie ładnie tak spamować w komentarzach! <3 <3

      Usuń
  10. Pobieram szablon serenede (http://4.bp.blogspot.com/-rlz1Ivkx_Io/Ur_dpu9h04I/AAAAAAAABLc/onHeggtlyYE/s1600/serenade1.png) na bloga http://erinti.blogspot.com/

    OdpowiedzUsuń
  11. Chciałam pokombinować z położeniem daty, udało się. Dziękuję! Przy okazji poczytałam więcej notek, wciągnęło mnie. Nigdy wcześniej nie widziałam instrukcji napisanych takim fajnym stylem - na luzie, a miejscami także zabawnym. Dołączam i pozdrawiam.

    OdpowiedzUsuń

- +
Szablon wykonany przez Tyler