Grow your CSS skills. Land your dream job.

How do I create a variable masthead?

  • # December 31, 2009 at 12:44 pm

    Hi all,

    I’m working on a new site design to be implemented in WordPress. I have attached 2 sketches below showing what I want to do.

    In sketch #1 I would like to have a 250px tall masthead that features an "image" that is floated left and a "headline plus blurb" floated right. Then below are the sections "main content" floated left and "sidebar" floated right.

    In sketch #2 the change is that the masthead is only 100px tall and features only one <div> instead of two.

    I can create this design in CSS/HTML without any problem. My dilemma comes into play when trying to figure out how to create this using WordPress. I would prefer to be able to edit the "Masthead" areas via the CMS features on WordPress. I’m sure I’m over thinking this, I just can’t seem to get into my brain how to set these two different styles setup in WordPress.

    I can create separate page templates for each scenario but that’s defeating the use of a CMS.

    Anyone have any suggestions on how to accomplish this?

    Thanks,

    Jerry

    # December 31, 2009 at 2:45 pm

    I’ve done similar things using WordPress’ custom fields functionality. You’re best bet would probably be to make a template for each of the two looks, and then use Custom Fields to give you the ability to edit the content within the two templates.

    http://perishablepress.com/press/2008/1 … -tutorial/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".