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(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 {
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(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;}