WordPress CSS Help Needed

By Wesley Fryer On November 23, 2011 · · 7 Comments

Hello there! If you are new here, you might want to subscribe to the RSS feed for updates on this topic.

If you work with CSS and WordPress, I’m hoping you can provide me with some quick advice for a minor page template change I need to make. On the K-12 Online Conference website, we’re currently using the WordPress theme “Permanent 3.0″ by NewWpThemes.com. By default I have the site pages set to use three columns, with two sidebars on the right side. I need to create an alternative page template which only has one column, however, and does not include the two sidebar columns. I need the text in the main “body” column of the page content to flow all the way across the page.

Using this helpful post from David Risley I figured out how to duplicate my “page.php” file and create an alternate page I named “nosidebar-page.php”. I uploaded that page into my theme directory and can now select it for a page on which I want to use it. I deleted the sidebar includes on the new page so they do not show up. The problem, however, is my content column is still just on the left side of the page and doesn’t overlap over the area where the two right sidebars were. The screenshot (of this current, ‘live’ page) below shows my situation and need.

I think I need help with the CSS: I need to add some CSS code to my “style.css” page so my new template can use those formatting directions and flow across those columns. I also need to remove the vertical lines in the page which separate the sidebars from the page/post body content. I used this tutorial this evening to briefly play with a child theme: I created one and activated it successfully, but all the previous customizations I’d added to the Permanent theme (including very detailed menus) were no longer available. So, I’m thinking I need some basic CSS advice here along with code to insert into my “nosidebar-page.php” template file. My current code in that page is included below. If you can offer suggestions / tips I’d love to hear them. Thanks!

Remember to follow Wesley Fryer on Twitter (@wfryer), Facebook and Google+. Also "like" Wesley's Facebook pages for "Speed of Creativity Learning" and his eBook, "Playing with Media." Don't miss Wesley's latest technology integration project, "Mapping Media to the Common Core / Curriculum."

On this day..

Share →

Matt Yamamoto

I’m no expert, but I looked at the page using firebug (it’s a great web developer plugin for fire fox)….here’s what my meager skills can tell you to try:

The vertical lines are controlled by an image. Look in your CSS for
#contentwrap { background: url(“images/contentwrap.png”) repeat-y scroll right top #FFFFFF;}

And comment that out.

The width seems to be controlled by:
.span-13 { width: 510px;}change the width….or comment it out.Some of the text on the page still looks weird with those changes, but it looks like there are line breaks in there. Did you add those? Like at the top: “All times are GMT. Direct links to presentations will be added as the [LINE BREAK HERE] presentations are”Anyway, I hope this makes sense….and/or helps out.
http://wfryer.wpengine.com Wesley Fryer

Matt:

Thanks so much for your help! I have installed Firebug previously on my FireFox but haven’t used it much, it is a great tool and I appreciate that reminder/encouragement.

Using your suggestions I WAS able to successfully remove the image reference by duplicating the CSS class that called for it, renaming it, and then changing the class reference on the new template page so it’s used instead (I called it “nocontentwrap”
http://wfryer.wpengine.com Wesley Fryer

Matt:

Thanks so much for your help! I have installed Firebug previously on my FireFox but haven’t used it much, it is a great tool and I appreciate that reminder/encouragement.

Using your suggestions I WAS able to successfully remove the image reference by duplicating the CSS class that called for it, renaming it, and then changing the class reference on the new template page so it’s used instead (I called it “nocontentwrap”
http://wfryer.wpengine.com Wesley Fryer

The page content width challenge is proving harder. I thought I found the code which sets this in CSS, shown here:
http://www.flickr.com/photos/wfryer/6388879323/

I duplicated the entire CONTENT part of the CSS and then renamed it, and tried adjusting the width of the pre class to 100%. That didn’t work:
http://www.flickr.com/photos/wfryer/6388897293/

It didn’t work to set the width to fixed 680px either:
http://www.flickr.com/photos/wfryer/6388900801/

I’m thinking the ‘approved’ way to do this is with a child theme so there aren’t so many changes to the code, and now I’m thinking I could create my child theme with ALL the theme elements from my original and not just the style.css page… perhaps that would preserve my original edits. I really don’t want to go to all that trouble, however, if there is a line of code I can adjust…

I’m not finding the file which has the “.span-13 { width: 510px;}” code in it. I’m searching both style.css and nosidebar-page.php for “510″ and not finding the string anywhere in them.

I did find a reference to “span-13″ in the single.php page:
http://www.flickr.com/photos/wfryer/6388972429/

I really don’t tweak code like this very often (and am always feeling like I’m stumbling around in the dark when I do) so I’m not sure what to try next. Any further suggestions you or others have would be most appreciated!
http://wfryer.wpengine.com Wesley Fryer

OK, thanks to help from HUB_Wordpress I’m much closer, I have the content going across the page now.
https://twitter.com/#!/HUB_Wordpress/status/139344960372752384I've created an editable Google Doc if anyone wants to chime in with more suggestions, this shows my current template page code and style.css page.

https://docs.google.com/document/d/1lDRW1Evb0u1pTRD3B0dnnwIfNy6Rz1TQsNOM8kGkeEc/edit
Here is the current page
http://k12onlineconference.org/?page_id=847
http://twitter.com/jmpcronin Matt Cronin

Hi Wes, like Matt Y, I’m no expert, but I’ve been in similar holes. You may want to create a new class or id for a column-less layout (ex. div id=”content-nocolumn”) to your template and add that class / id to your stylesheet. Otherwise you may impact other parts of your site that use that same style.
http://nicolaavery.pip.verisignlabs.com/ Nicola Avery

Hi Wes, had another thought. If you create a new page then under Settings-Reading in your dashboard – set as home page. Then you could create a second stylesheet – paste in most of the code from your main one – in the editor – you would need to change the reference to this second sheet e.g. styles2.css and that way it won’t affect the rest of the site. It would involve more CSS experimentation – so providing you have the original code which you can overwrite again if necessary.