5 replies [Last post]
brittanieshey
brittanieshey's picture
Offline
newbie
Houston
Last seen: 8 years 11 weeks ago
Houston
Timezone: GMT-5
Joined: 2013-03-27
Posts: 3
Points: 4

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

My eyes! It hurts!

Full disclosure: There are two things on this page that I consider extremely stupid:

  1. 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.
  2. 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 -->
Notice the h2 is changed to h1, since it is the "page-title". Also, there are some extra </div> tags at the end of the page. I leave it to you to find them. Wink

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

brittanieshey
brittanieshey's picture
Offline
newbie
Houston
Last seen: 8 years 11 weeks ago
Houston
Timezone: GMT-5
Joined: 2013-03-27
Posts: 3
Points: 4

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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

brittanieshey
brittanieshey's picture
Offline
newbie
Houston
Last seen: 8 years 11 weeks ago
Houston
Timezone: GMT-5
Joined: 2013-03-27
Posts: 3
Points: 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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 14 weeks 5 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

There is still this:html >

There is still this:

html > body {
  font-size: 12px;
  }
which overrides what you've done.

Simply set the margin and padding on the ul to zero. The global zeroing is the Bad Thing.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.