Wordpress Themes - WP Forum at BFA - [SOLVED] Argh! Kicker Image frustration!

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)

- Post-Kicker, -Byline & -Footer (http://forum.bytesforall.com/forumdisplay.php?f=17)

- - [SOLVED] Argh! Kicker Image frustration! (http://forum.bytesforall.com/showthread.php?t=18591)

[SOLVED] Argh! Kicker Image frustration!

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

Quote:

.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:

Quote:

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

HTML Code:

<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

HTML Code:

/* =========================== */

/* 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? :confused:

Quote:

Originally Posted by lmilesw (Post 90961)

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

HTML Code:

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

You could use inline CSS such as

HTML Code:

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

or wrap the image in a div like

HTML Code:

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

and style with CSS in CSS Inserts

change the kicker to

HTML Code:

<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! :)