CSS Question
Support Area › Forums › Foundation › CSS Question
- This topic has 11 replies, 2 voices, and was last updated 12 years ago by Bill Robbins.
-
AuthorPosts
-
February 6, 2012 at 17:43 #5009Jon GilgoffParticipant
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:
http://www.catholiccharitiesusa.org/.)I’ve started writing out some code (view it at:
https://gist.github.com/1755911)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!
February 6, 2012 at 20:04 #5011Bill RobbinsModeratorJon,
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,
BillFebruary 9, 2012 at 11:29 #5032Jon GilgoffParticipantThanks 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 ontobrothersontherise.org/wpfiles
Here’s a link to the exact code I used:
https://gist.github.com/1781387
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!Thanks!!
February 9, 2012 at 12:01 #5033Bill RobbinsModeratorIt’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.
February 24, 2012 at 14:37 #5172Jon GilgoffParticipantThanks 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:http://brothersontherise.org/wpfiles/?staff=jon-gilgoff
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!
February 24, 2012 at 17:09 #5176Bill RobbinsModeratorGreat 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,
BillMarch 6, 2012 at 23:58 #5268Jon GilgoffParticipantThanks 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!March 8, 2012 at 10:50 #5286Bill RobbinsModeratorJon,
Sorry I replied to this via email instead of posting it here. My apologies for the delay; it just popped back in my inbox:
Jon,
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.
March 22, 2012 at 11:53 #5450Jon GilgoffParticipantThanks, 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!
March 22, 2012 at 19:03 #5458Bill RobbinsModeratorJon,
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,
BillMarch 26, 2012 at 17:57 #5477Jon GilgoffParticipantHello 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:https://gist.github.com/2176668
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!
March 27, 2012 at 14:51 #5487Bill RobbinsModeratorJon,
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,
Bill -
AuthorPosts
- The topic ‘CSS Question’ is closed to new replies.