This is Brandon Anderson's Typepad Profile.
Join Typepad and start following Brandon Anderson's activity
Join Now!
Already a member? Sign In
Brandon Anderson
Glen Allen, Virginia, USA
Web developer and lead SharePoint user interface developer for Ironworks Consulting
Recent Activity
Thanks, Steve. I appears the link did not come through in the post. I'd be interested to hear your thoughts.
Dhaval, given your access restrictions, you can add a Content Editor Web Part (CEWP) to the page. Inside of that CEWP, in the HTML editor view, you can drop in the script reference to your jQuery library file like I have in step 8 in the post above. Alternatively, instead of referencing the jQuery library hosted on your server (which you may not have the ability to add) you can reference the jQuery library on Google's Content Delivery Network. The code you would use for that is [lt]script type="text/javascript" src=""[gt][lt]/script[gt]. Now that you have your CEWP referencing the jQuery library, you need to specify what you want to do with jQuery. So, in the same CEWP, in HTML edit view, after your jQuery library reference tag, add another script tag, inside of which you can put your jQuery statements. That would look like this: [lt]script type="text/javascript"[gt] $(document).ready(function(){ $("p.hide").fadeOut(); // some statement }); [lt]/script[gt]
Hi, Ben. I understand it all can be overwhelming at first. I've written posts addressing the questions you have; please see the posts listed at If you still have questions I'd be glad to try to answer.
Neil, it sounds like you've got a lot of things going on. I don't use themes, nor do I use the Alternate CSS URL in the master page settings. As for CoreV4.css, leave all out-of-the-box SharePoint CSS intact (very important); simply create a scratch CSS file for your site that will hold your overrides and reference it in your master page as detailed in the post. This is what I would do. Retrace your steps to see where you may have varied: (1) Duplicate v4.master and name it (ex. my.master) (2) Open my.master and reference your custom CSS (ex. /Style%20Library/my/mystyles.css) (assumes you've created this file and checked in or published it) (3) Save, publish, and approve my.master (4) Go to your site's master page settings and select my.master for the Site Master Page. Leave System Master Page and Alternate CSS URL at their defaults. (5) Your site should now be using my.master. View the page source to verify your CSS reference via the link tag is there. To verify you have the correct path, copy the href of that link tag and paste it into the browser at the root level of your site. You should be good to go following this approach. If you still think your CSS is not being included, use a tool like Firebug (Firefox) or Developer Toolbar (IE8) to view the CSS files being included on the page and see if yours is there.
I find that I don't really need to wrap web parts in my own div since in 2010 each web part is defined by the table with class "s4-wpTopTable". 2007 was missing a defining CSS hook for web parts. If the reason you want to wrap your web parts is to get divs for rounded corners, please look at using the Curvy Corners jQuery plugin instead--it works well.
You can reference the script tag from the head tag, like shown, or anywhere in the body. If I need to call the jQuery from only a particular page, I'd add a Content Editor Web Part (CEWP) to a web part zone. I'd edit that CEWP in HTML view and add my script references (or the scripts themselves). That way the jQuery only takes place on that page.
Thanks for catching the typing error, Steve. I have corrected it in the post.
Jacob, I updated the post to include the CSS and the images.
Hi, David. This script is not specific to any version of SharePoint or to SharePoint at all. It can be used in SP2007 or SP2010, or it can be used on a static HTML page. Have fun with it!
Prakash and Patrick, you can find the links to all of the assets in my latest post, "Using jQuery to Wrap Web Parts and Achieve the Unachievable: The Packaged Solution".
David, I will be working on the SP2010 version of this script soon. I will post a follow up comment here to let you know when it is available.
Bill, you are welcome to modify anything as you see fit. It sounds like the images you created for the top and bottom borders are not as wide as the web part to which they belong, likely because the web part is inside a wide web part zone. You'll want to either modify the top and bottom images to be wider or set the background-repeat property on .wpCornersTop and .wpCornerBtm to repeat-x so that the background image repeats to fill the horizontal space. Which you choose depends on what your images look like (whether they are repeatable). I hope this helps. Good luck.
Berman, check in, publish, and approve your master page in the root /_catalogs/masterpage directory. Then in your browser go to [root]/_layouts/settings.aspx. Under the Look-and-Feel column click on the "Master Page" link. For the Site Pages, select your master page from the select box. If you want to force that master page for all sub-sites and overwrite any master page selections by those sub-sites, click the "Reset all.." link. Click the OK/Save button.
Sandeep, I added the missing HTML so you can see how the list structure should be set up for the expand/collapse. Good luck.
Sandeep, you're right. Looks like my HTML was stripped out by Typepad. Sorry I didn't realize that sooner. I'll try to get up the HTML in the next day or two. Thanks for notifying me.
Christophe, correct, this solution assumes jQuery is used throughout the site. If you want to use jQuery on specific pages, you can include the jQuery references from the post on specific page layouts in the PlaceHolderAdditionalPageHead content place holder.
David, regarding implementing via SPD or a Content Editor Web Part, you'll need to include the reference to jQuery in the tag of the master page (see ). This can be done either in SPD or in a simple text editor. You can include scripts and introduce jQuery to a page in a content editor web part, but I'd recommend against it; I prefer to include the jQuery library properly in the [head] tag. (The comments section won't let me include HTML, so replace [ and ] with HTML brackets.) That doesn't mean, however, that you can't put your jQuery script (not the library) in a content editor web part. You would put something like the following inside the HTML editor (not WYSIWYG) of the content editor web part: [script type="text/javascript"]$(document).ready(function(){alert("Script goes here.");});[/script] I think this answers your question...let me know if not. As for your request for examples including CSS, below is the CSS I wrote to get the look of the Industry News web part you see in the screengrab in the post: .wpContainer { padding-bottom:24px !important; } .wpTitleBorder, .wpBorderOnly { background-color:#fff !important; border-left:1px solid #c6c6c5 !important; border-right:1px solid #c6c6c5 !important; } .ms-WPHeader td { background:#d5e3ee url('/Style%20Library/Images/standard_inner_wptitle_lightgrey_bg.gif') repeat-x 0 -12px !important; border:0 !important; padding:0 !important; } { color:#36424a !important; font-size:15px !important; font-weight:normal !important; margin:-3px 0 0 10px !important; padding:0 14px 4px 4px !important; } a { color:#36424a !important; font-size:15px !important; font-weight:normal !important; } nobr { white-space:normal !important; } .ms-WPHeader td { margin:0 !important; *padding:0 0 2px 0 !important; /* IE <8 fix */ } .ms-WPHeader td .ms-HoverCellInActive { margin:0 !important; *padding:0 0 2px 0 !important; /* IE <8 fix */ } .ms-WPHeader td .ms-HoverCellInActive img { margin:0 0 2px 0 !important; *margin:0 !important; /* IE <8 fix */ } .ms-WPHeader { /* Firefox */ padding:0 0 2px 0 !important; } .ms-WPHeader td .ms-HoverCellActiveDark { border:0 !important; margin:0 !important; padding:0 0 2px 0 !important; }, { border:0 !important; padding:10px 14px !important; } .ms-WPBody { font-family:Tahoma, arial, sans-serif !important; font-size:11px !important; padding:0 !important; } .ms-WPBody td { font-family:Tahoma, arial, sans-serif !important; font-size:11px !important; } .wpCornersTop { background:url('/Style%20Library/Images/wpcorners_f0f3f5_tr.png') top right no-repeat !important; height:10px !important; padding-right:10px !important; } .wpCornersTop div { background:url('/Style%20Library/Images/wpcorners_f0f3f5_tl.png') 0 0 no-repeat !important; height:10px !important; } .wpCornersBtm { background:url('/Style%20Library/Images/wpcorners_ffffff_br.png') bottom right no-repeat !important; height:20px !important; padding-right:10px !important; } .wpCornersBtm div { background:url('/Style%20Library/Images/wpcorners_ffffff_bl.png') 0 0 no-repeat !important; height:20px !important; } As for your last question about using the web part title as the hook styling purposes...absolutely. The jQuery script would look something like this: if($(" span").text() == "Unique Web Part"){$(this).parents(".wp").addClass("wpUnique");} This script assumes you have the jQuery library in place and are using the wrapWebParts() function from the post. It adds a class to the container of the web part with the title "Unique Web Part" so that you can style the web part HTML using the CSS prefix .wpUnique. There is a negative here, and that is that jQuery is going to be parsing the entire page as it loads looking for a web part with that title; doing so may result in the web part loading with some delay before the CSS specific to that web part is applied. I hope I've answered your questions.
Brandon Anderson is now following The Typepad Team
Jan 22, 2010