Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

We have a site that is three columns wide. On just a handful of pages (maybe 10 out of 300) we'd like for the right column to be hidden, and the main content area to stretch over that. It's literally 2 lines of CSS.

But I'm wondering, what's the best way of doing this in Sharepoint? Ideally I'd just add a specific web part into the right hand side with the two lines of CSS, I'd rather not mess around with master pages etc since it'd be confusing for the people using the site.

Page layouts AFAIK won't work since it's controlled in the master page, and by default Sharepoint doesn't have a third column where we'd like to place this one.

Thanks

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

If it's ideal for you to add a webpart you can simply add a Content Editor Web part and define your CSS style in its content HTML source - there's an option in the Ribbon to do it like this - it was the similar task to affect the page by CSS in CEWP (http://gyazo.com/e20b53ab587667d61628c98ea7de31cf.png): enter image description here

share|improve this answer
    
Perfect, thank you! –  Nick Mar 2 '12 at 10:59
add comment

If,

  1. There is a patten for these 10 pages which could easily distinguish them from the other 290 pages, and
  2. There could be more pages want to hide the right column in the future, and
  3. You hat repeating works.

Then, I suggest you use jquery in the master page to find out the 10 pages (maybe more pages in the future) and give them the css attached. This is an once-for-all solution, and, this is one of the reasons why we need a master page, right?

Else,

  1. Create a webpart to generate the css and then put it in the 10 pages would be an ideal choice, since you can easily update the css and enable or disable it by just deploying the webpart solution in one place. So, you don't need to go through all the 10 pages to update the css style each time.
share|improve this answer
    
This is a nice idea, thank you –  Nick Mar 2 '12 at 10:58
add comment

a) Overriding the layout with inline css works fine. WP in these special pages can hide the right column and stretch the first and second.

b) conditional css and adding special class with javascript is even better, IMHO

consider this:

<div id="wrapper">
  <div id="left"></div>
  <div id="middle"></div>
  <div id="right"></div>
</div>

Then css it like you want 290 pages of 300 to look like.

Then css the special 10 pages:

#wrapper.special-case right {
  display: none;
}

In wepbart or or in some element which the special 10 pages have in common, add the class "special-case" to the wrapper.

jQuery("#wrapper").addClass("special-case")
share|improve this answer
    
This is great, thanks:) –  Nick Mar 2 '12 at 10:57
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.