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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xbAwVfM8FyQp5Ck1j-eBO9FUMbwwboI4CaXrAfOAh7yft27ZLsnoxUKMe-LX4kVEWQAgrggdE73EkWvAzkqgoikbK8sNrqu0w71rhk-kMEHKxxQq-trc4hjp5dLNfjcAmo4l2MSOeBA/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 {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.
background:#f5f5f5;
font: normal 20px 'Cardo';
color: #222;
text-align:left;
letter-spacing:2px;
padding:0px;
text-transform:lowercase;
width:65%;
}
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_xbAwVfM8FyQp5Ck1j-eBO9FUMbwwboI4CaXrAfOAh7yft27ZLsnoxUKMe-LX4kVEWQAgrggdE73EkWvAzkqgoikbK8sNrqu0w71rhk-kMEHKxxQq-trc4hjp5dLNfjcAmo4l2MSOeBA/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;}