Hi there!
I am having one of those days where nothing I try is working and I am about to toss my laptop out the window. I am hoping someone can un-confuse me as I think I have just gone back and forth so many times I ended up messing everything up.

I had added a kicker image and fancy-type date over the image to my blog (beyondbooks.ca) last month using the following code in HTML inserts

.date {
background: url('http://beyondbooks.ca/photos/bbhalbump.png') repeat-x scroll top left;
display: inline;
float: left;
width:60px;
text-align:center;
color:#000;
font-family:Georgia, sans-serif;
font-size:14px;
font-weight:bold;
text-transform: uppercase;
border:0 #fff;
margin: 0 3px 0px 0;
}
.date-inside {
border: 0 #fff;
padding:0;
}
.date .date-day {
font-size:22px;
}

And then in the Edit POST/PAGE INFO ITEMS, I had a DIV code that I accidentally deleted before saving because I am having the WORST DAY! Ugh.

But then I decided I wanted to put my date back where it was on the BYLINE and just keep the image. Only I messed up somehow and I can't seem to keep a static, left-floating image there without the date over top.

I searched the forum and found some related posts, but I can't seem to grasp what I'n reading I guess because I am SO CONFUSED now. The following thread was easier to follow, but I must have messed something up between the html inserts and the POST/PAGE info tab because it's not working. http://forum.bytesforall.com/showthr...t=kicker+image


What I had was a lovely little 60x60 pixel image behind the post date, which was listed in a box-type format:

OCT
09
2012

I don't want the date boxed like that, or floating to the left side of my post title. I just want an IMAGE floating to the side of my post title and put my date back in the byline.

I have managed to mix myself up so much that I'm totally lost and I have given up and am writing this really embarrassing post in the forums in hopes that someone can help me get back on track.

I need really specific instructions, please. I am pretty sure I will need to flitter between the HTML INSERTS and POST/PAGE INFO menus, right?

Help! Please!

Thanks
Cat

Here is how AII put a box around the dates.
1) in ato->Edit POST/PAGE INFO ITEMS->kicker: xxxx add the following

<div class="date">
  <div class="date-inside">
    <div class="date-month">%date('M')%</div>
    <div class="date-day">%date('d')%</div>
    <div class="date-year">%date('Y')%</div>
  </div>
</div>

2) in the css inserts use the following

/* =========================== */
/* START - Fancy date on posts */
/* =========================== */
.date {
        background: #AD4744;
        display: inline;
        float: left;
        width:60px;
	text-align:center;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
 	border:1px solid #7e0101;
        margin: 5px 10px 0px 0;
        -moz-border-radius: 20px;
        -khtml-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;

}
.date-inside {
 	border:1px solid #FFEEBF;
	padding:2px;
        -moz-border-radius: 20px;
        -khtml-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;

}
.date .date-day {
	font-size:22px;
}

/* =========================== */
/* END   - Fancy date on posts */
/* =========================== */
.align-link-center {text-align: center;}

It seems like you would just take out the CSS you have that puts a background on the date and add html in the kicker for just the image. You should probably wrap the image in a div with an id so you can position with CSS.

Before doing anything export the theme options or at least make a copy of the CSS so you can replace if something doesn't go the way you want.

Thank you for that - that's going to saved right now for future reference!

Except, I don't want the date over the image. (as it appears right now: http://beyondbooks.ca/)

I just want the image there and I'd move the date back to the byline.

I thought if I just removed the date tags from the POST/PAGE info, the image would remain by itself, but alas. It does not. So how would I code it to just have my little pumpkin kicker image all by its lonesome?

Originally Posted by lmilesw

It seems like you would just take out the CSS you have that puts a background on the date and add html in the kicker for just the image. You should probably wrap the image in a div with an id so you can position with CSS.

Before doing anything export the theme options or at least make a copy of the CSS so you can replace if something doesn't go the way you want.

I have to say that nothing makes me feel stupider than CSS and pHp. I miss the simple days of the original Blogger where I could just HTML up anything and it was lovely. I am going to beg for your patience with me and ask if you wouldn't mind showing me what you mean? (So, so sorry!) Please?

The CSS you showed in a previous post is for putting a background image behind the date. Since you don't want that I would take it out.

Then if you want an image in the kicker just add the html for an image in the kicker box such as

<img src="http://beyondbooks.ca/photos/bbhalbump.png" />

You could use inline CSS such as

<img style="float:left;" src="http://beyondbooks.ca/photos/bbhalbump.png" />

or wrap the image in a div like

<div id="kickerimage"><img src="http://beyondbooks.ca/photos/bbhalbump.png" /></div>

and style with CSS in CSS Inserts

change the kicker to

<div class="date"></div>

and add 'height: 60px;' to the '.date'

Thank you both, juggledad and lmilesw! I appreciate the help immensely!

It was so simple in the end and I was obviously trying to make it much more complicated. Oy.

It's working now. So happy!