Wed, 2013-03-27 22:59
I am working with a Frankensteined theme developed by a third party for a friend. The site runs Wordpress and it set up so that text runs over an element called "billboard" this image of which is pulled from the page's featured image.
My friend wants some text over the image, but some text under the image. This is hard to explain, so here's one of the pages:
http://www.allenhillentertainment.com/random-acts-of-fun/discovery-green-concerts/
On that page, the intro paragraph is perfect. But everything after "Click here to see the schedule!" sould be appearing under the image, not running over it.
Bonus points if I can make the first paragraph text white and the rest of the text black. I am pretty good with WP themes but this one is all cobbled together so it's weird.
Thu, 2013-03-28 02:04
#1
My eyes! It hurts!
Full disclosure: There are two things on this page that I consider extremely stupid:
- The grid system for layout. It began, as near as I can tell, with print oriented graphic designers. It is totally inappropriate for the web. You're stuck with it short of a heavy refactoring.
- That damned reset thing. See Global CSS reset considered harmful. In http://www.allenhillentertainment.com/wordpress/wp-content/themes/custom/style.css, you have this,
@import url('library/css/reset.css');. Delete it. It is useless and makes for unnecessary work. I killed it while testing with no non-trivial effect.
You need to drop the second part out of the #billboard div. The first part looks like this:
<div id="body" class="container"> <div id="billboard" class="grid_24" style="background-image: url('http://www.allenhillentertainment.com/wordpress/wp-content/uploads/2012/05/jpeg-1.jpeg'); min-height: 658px;"> <div class="grid_15 prefix_1 alpha"> <h1 class="page-title">DISCOVERY GREEN THURSDAY CONCERT SERIES</h1> </div> <div class="grid_15 prefix_1 alpha"> <div class="entry"> <p>Houston’s newest park boasts an awesome stage and natural amphitheater that has instantly become the location of choice for fabulous concerts under the stars. Bring your picnic baskets, blankets and dancing shoes. The shows are always family friendly, and the stage is just the right height so kids can get up close and personal with the bands. Parents can enjoy a beer or glass of wine while they watch their kids dance. Concerts start up again on Thursday, September 13, 2012! <a onclick="javascript:pageTracker._trackPageview('/outgoing/www.allenhillentertainment.com/wordpress/random-acts-of-fun/discovery-green-concerts/schedule/');" title="Discovery Green Thursday Concert Series Presented by UHD" href="http://www.allenhillentertainment.com/wordpress/random-acts-of-fun/discovery-green-concerts/schedule/">Click here to see the schedule!</a> </p> </div> </div> </div> <!-- end billboard -->
The rest of the text is wrapped in a div and given a new block formatting context because for some reason, there's a ruleset setting a float and inline display on or in #billboard (I forget which).
<div id="more-entry"> <h2>Head to Discovery Green This Fall, 2012 for Fun, Free, Family-Friendly Concerts</h2> <p>The Discovery Green Thursday Concert Series is presented by Green Mountain Energy</p> <p>Thursdays in September and October beginning September 13.</p> <p>Most street parking is free after 6 pm, and all concerts start promptly at 6:30 pm.</p> ... </div>
The following style rules were added in the <head>, which you'll need to move to style.css(?)
<style type="text/stylesheet"> .entry { width: 30em; } .more-entry { display: table; width: 100%; } </style>
Oh, and correct style.css at about line 107 to read
.entry p { color: white; margin: 1.5em 0; }
//edit: Forgot to mention, 12px or 75% fonts are too small. That's equiv to 9pt, which is marginally ok in print, but not on a low res screen. The minimum base font size should probably not be less than 14px (10.5pt) or 87.5% of browser default. ~gt
cheers,
gary
Thu, 2013-03-28 16:52
#2
Yes, I find this a perfect
Yes, I find this a perfect example of "over-engineering."
Thanks for the code above. So far it looks pretty good. I edited the wordpress theme so that pages make use of the excerpt function for the "billboard" section and the content function for the rest of the text. Like this:
<div id="body" class="container"> <div id="billboard" class="grid_24" style="background-image: url('http://www.allenhillentertainment.com/wordpress/wp-content/uploads/2012/05/jpeg-1.jpeg'); min-height: 658px;"> <div class="grid_15 prefix_1 alpha"> <h1 class="page-title">DISCOVERY GREEN THURSDAY CONCERT SERIES</h1> </div> <div class="grid_15 prefix_1 alpha"> <div class="entry"><?php the_excerpt(); ?></div> </div> </div> </div> <!-- end billboard --> <div id="more-entry"> <?php the_content(); ?> </div>
Now I just need help styling the "more entry" section. Thanks in advance for your help.
Thu, 2013-03-28 21:46
#3
Reset and font-size
Losing the reset stylesheet and setting the font-size on body to a sane size make a very positive first step. Do that first, then you'll have a good base from which to work.
cheers,
gary
Thu, 2013-03-28 22:52
#4
I did resize the body font to
I did resize the body font to 87.5.
I took out the reset but it screwed up the alignment of the links on the upper right of the site.
Fri, 2013-03-29 00:36
#5
There is still this:html >
There is still this:
html > body { font-size: 12px; }
Simply set the margin and padding on the ul to zero. The global zeroing is the Bad Thing.
cheers,
gary