CSS Question

Support Area Forums Foundation CSS Question

Viewing 12 posts - 1 through 12 (of 12 total)
URL to the page in question:
  • Author
  • #5009
    Jon Gilgoff

    Hello Bill:

    Apologies for plaguing you with another question but–
    I’m using Foundation 1.1.1 and I’d like to create a “box”
    which surrounds our logo, the menu bar, content area, etc.,
    on ALL the pages. (To get an idea of what I mean visit:

    I’ve started writing out some code (view it at:

    My question(s):

    1) Is it even possible to do this with the theme I’m working with?

    2) If it is possible am I on the right track with the code and what
    else do I need to include to make it work?

    3) Where would I insert the code in the stylesheet?

    Thanks a million for all your help!

    Bill Robbins


    This may actually be a bit easier than you might think. All of the content in the theme is wrapped in a div with the ID of “wrap.” The div is there to center the content horizontally on the screen, but there is no reason you can’t use it as a starting point for your changes.

    The spot in the style.css file that defines this wrapper is:

    #wrap {
    width: 960px;
    margin: 0 auto;
    position: relative;

    You could apply a background color here, as well as a border and shadow.

    If you run into any trouble, let me know,

    Jon Gilgoff

    Thanks Bill! Made the changes and the page displays perfectly with Firefox, but in IE9 there seem to be a few problems.

    Basically, in the Home Bottom area, two of our three widgets drop down a row.
    (In Firefox the three widgets line up in one row just underneath the slider.)

    Also, two other widgets are ‘broken’ apart: an image/link from one widget has
    become its own separate widget, and the title from another widget has become its own separate widget. You can see what I mean by logging onto


    Here’s a link to the exact code I used:


    I looked through our Page Source code & style.css and I’m just not able to identify
    what went wrong. Any thoughts would be greatly appreciated!


    Bill Robbins

    It’s probably the added padding that’s causing those to bump around. If it’s only happening in IE 9, then you can target just that browser to make adjustments. You can add a conditional statement like this to your header.php file:

    Just replace the “Your style here” with the css just for IE 9. That’s how I would go about making those adjustments. Experiment until you have it looking just like you want to.

    I hope that helps out. Let me know if I can help anymore.

    Jon Gilgoff

    Thanks Bill! So I’m hoping to only ask about three more questions. Here’s one about the Staff Page:

    When I navigate to the Staff Page everything displays perfectly: picture in column left, content in center column, widgets in right (sidebar) column.

    The problem arises when I click on “Read More” and go to the child of the Staff Page.
    Here’s a link:


    I want it to look exactly like it does in your Foundation Demo. In other words, I want just a photo on the left, with no grey box, and just the text on the right, with no photo.

    How do I go about doing this?

    Thanks a million!

    Bill Robbins

    Great Question Jon. When you add the staff images, set them as the featured image as you’ve done, then don’t insert them into the actual content for the staff person. That will have the image included in the staff listing and on the left of the staff page, but not on the right.

    If you ever need to you can include image on the right, or videos or image galleries if you’d like to.

    To take away the gray box around the featured image, add this to the bottom of your CSS file (or in the custom css box in the theme options page):

    #staff-image-contact {
    	background: transparent;

    If you have any other questions, just let me know.

    Enjoy your weekend,

    Jon Gilgoff

    Thanks Bill, that worked! Second to last question–and this is
    actually a new issue: Our home page bottom widgets have
    been displaying oddly in Mozilla lately. For weeks, everything
    looked perfect–two rows, three widgets per row.

    Several days ago two of the widgets in the second row popped
    down a row and they’ve displayed that way ever since (brothersontherise.org/wpfiles
    to see what I mean).

    I’m using the same widget (text) for everything, and I haven’t made any
    recent changes to the style.css sheet. I checked the WordPress.org forums:
    this problem is actually mentioned somewhat frequently but no one has
    any solutions. If you can give us some advice on how to fix this we’d really
    appreciate it!

    Bill Robbins


    Sorry I replied to this via email instead of posting it here. My apologies for the delay; it just popped back in my inbox:


    I took a look and on it’s kind of odd. On my Mac in Firefox, everything
    lines up in two rows, but on Chrome, they spill over to three (see
    screenshot). I lined up the first widget in both browsers as I think
    this may explain what’s happening. Chrome (on the left) is rendering the
    font a bit larger than Firefox (on the right). That is causing the
    height of the text widget to be taller than the other two in that row.
    That will cause the row below it to shift one of those widgets down
    forming an extra row.

    One solution would be to create a fixed height for the home page
    widgets. To do that you could add this to the bottom of your stylesheet:

    #home-widgets .widget {
    height: 375px;

    See if that doesn’t help. If you run into trouble, let me know.

    Jon Gilgoff

    Thanks, Bill, that worked perfectly!

    Ok, I think this is my last question: I’ve gotten our drop down menus to
    work perfectly but my boss would like them to display horizontally
    (they currently display vertically). I’ve tried using “display: inline” and
    “float: left” in the css sheet but neither works. Is this something I need
    to use php for? Or is there a css solution?

    Thanks for your help!

    Bill Robbins


    That can be done via CSS. The drop down menu actually uses a script called Superfish and it has an option for a “nav-bar” style drop down. You can read up on it at http://users.tpg.com.au/j_birch/plugins/superfish/#sample4.

    The only thing that was really changed is the class is just called menu instead of sf-menu. Also the basic CSS from Superfish is already rolled into the theme’s style.css so it isn’t loaded in a separate file like the example is.

    Let me know if you have any trouble. It’s not something that I’ve tried, but it should be possible to do.

    Take care,

    Jon Gilgoff

    Hello Bill:

    Thanks for your response. I’d actually found that Superfish link earlier.
    I tried following the suggestions and didn’t have much luck. Here’s a
    link to some of the css I tried:


    I’m finding that when I use .menu li ul I can control the dropdown menu’s
    background color, border radius, padding, etc., but I’m still not able to
    get it to display horizontally. Any thoughts on what I might be doing wrong?

    Thanks a million for all your help!

    Bill Robbins


    Did you also add the nav-bar class to your menu? If you’ll edit the header.php file you’ll see a spot that looks like this:

    <?php wp_nav_menu( array( ‘theme_location’ => ‘primary’ ) ); ?>

    If you’ll replace it with this, that should add the nav-bar class to your menu which will let your new CSS work with it (I hope).

    Let me know if you have any trouble,

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘CSS Question’ is closed to new replies.