Date Badge and Post Title on the same line
-
I am trying to setup this date badge, https://examples.oncemade.com/, on my new hosted WordPress site. What I would like to do is have the date badge and title on the same line with the content below it. Is this possible? If so, how would I code that?
Below is the same code and css from the link listed above:
Markup
<div class=”entryDate”>
<span class=”postMonth”><?php the_time(‘M’) ?></span>
<span class=”postDay”><?php the_time(‘d’) ?></span>
<span class=”postYear”><?php the_time(‘Y’) ?></span>
</div>CSS
body { font-size: 62.5%; }
.post {
position: relative;
margin-left: 4.8em;
}
.entryDate {
border: 1px solid #999;
font-family: Georgia,”Times New Roman”, serif;
left: -4.8em;
line-height: 1;
position: absolute;
top: 0;
width: 3.5em;
}
.entryDate span {
display: block;
text-align: center;
}
.postMonth {
text-transform: uppercase;
font-size: 1.2em;
padding-top: 0.3em;
}
.postDay { font-size: 2em; }
.postYear {
background-color: #2358B8;
color: #FFF;
font-size: 1.2em;
padding: 0.3em 0;
margin-top: 0.3em;
}
- The topic ‘Date Badge and Post Title on the same line’ is closed to new replies.