Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Center area post/pages » Post-Kicker, -Byline & -Footer »

[SOLVED] Argh! Kicker Image frustration!


  #1  
Old Oct 6, 2012, 09:59 AM
beyondelsewhere
 
9 posts · Aug 2010
Montreal, Canada
[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
  #2  
Old Oct 6, 2012, 10:15 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
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;}
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Oct 6, 2012, 10:23 AM
beyondelsewhere
 
9 posts · Aug 2010
Montreal, Canada
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?
  #4  
Old Oct 6, 2012, 10:23 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Oct 6, 2012, 10:34 AM
beyondelsewhere
 
9 posts · Aug 2010
Montreal, Canada
Quote:
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?
  #6  
Old Oct 6, 2012, 10:56 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Oct 6, 2012, 11:01 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
change the kicker to
HTML Code:
<div class="date"></div>
and add 'height: 60px;' to the '.date'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #8  
Old Oct 6, 2012, 11:10 AM
beyondelsewhere
 
9 posts · Aug 2010
Montreal, Canada
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!

Bookmarks

Tags
kicker, kicker image

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Fixed Menu Width Forces Two Lines in Google Chrome? Argh. Alexi Header configuration & styling 2 Jul 17, 2012 11:58 PM
[SOLVED] Argh! - still can't remove border around header image beyondelsewhere Header configuration & styling 2 Sep 19, 2010 11:45 AM
Image placement issue in IE for page Kicker tmb4016 Center area post/pages 0 Sep 2, 2010 04:09 AM
[SOLVED] Banner image in kicker box? jenb Post-Kicker, -Byline & -Footer 3 Nov 22, 2009 10:09 PM


All times are GMT -6. The time now is 06:05 AM.


Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.