« Creating Custom Select Boxes | Main | How to Create an Accordion Web Part »

02/01/2010

Comments

Feed You can follow this conversation by subscribing to the comment feed for this post.

David Phillips

Great post Brandon and a solution to something I've been looking to do for a while. Not being very technical though can you advise if your solution is implemented using SPD directly or can it be implemented in a Content Editor Web Part? If the later I'd love to see some code examples that combine the jQuery code with CSS calls.

Finally, sorry a lot of asks, is it possible to adapt your code to read a Web Part Title and then style the web part based on the title and if so could you give me some pointers.

Regards,

David

Brandon Anderson

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 http://fitandfinish.ironworks.com/2010/01/the-best-way-to-add-custom-javascript-and-jquery-to-sharepoint.html ). 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;
}
h3.ms-WPTitle {
color:#36424a !important;
font-size:15px !important;
font-weight:normal !important;
margin:-3px 0 0 10px !important;
padding:0 14px 4px 4px !important;
}
h3.ms-WPTitle a {
color:#36424a !important;
font-size:15px !important;
font-weight:normal !important;
}
h3.ms-WPTitle nobr {
white-space:normal !important;
}
.ms-WPHeader td div.ms-HoverCellInActive {
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 img.ms-HoverCellInActive { /* Firefox */
padding:0 0 2px 0 !important;
}
.ms-WPHeader td .ms-HoverCellActiveDark {
border:0 !important;
margin:0 !important;
padding:0 0 2px 0 !important;
}
td.ms-WPBorder, td.ms-WPBorderBorderOnly {
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($("h3.ms-WPTitle 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.

David Phillips

Brandon, thank you very much for such a comprehensive response. I'll work my way through it and see if I can understand enough of it to test it on my site. I'll let you know how I get on.

Regards,

David

David Wallach

Hi Brandon, this is exactly what I want to do in SP 2010 to a webpart. Can you give me idiot proof instuctions on how to do this?

Bill Burke

When using with a webpart on a web part page the borders stop about 3/4 of the way across. Can I modify the css to ensure it grows with the web part?

Brandon Anderson

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.

Prakash Acharya

Hi Brandon,

Can you please share those corner images that put in CSS?

Thank You

Patrick

Brandon is it possible to get the images wpcorners_f0f3f5_tr.png?
THe images you used would be helpful if you can post it

Brandon Anderson

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.

Brandon Anderson

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". http://fitandfinish.ironworks.com/2010/08/using-jquery-to-wrap-web-parts-and-achieve-the-unachievable-the-packaged-solution.html

The comments to this entry are closed.

About This Blog

Welcome to "Fit & Finish", the Ironworks User Experience blog. We are very proud of the talented team (led by Bill Buell) of information architects, designers, developers and strategists that we have at Ironworks. You can look forward to us sharing our ideas, best practices, creativity, humor and useful resources on this blog. We welcome your active participation with comments and questions.

Contact ICF Ironworks

  • ICF Ironworks combines strategy, technology and design services to assist clients in the development of large-scale, complex technology projects. Ironworks offers three core services: Business & IT Alignment, Portal and Content Management, and Interactive.

    Contact us for help with your next project.

ICF Ironworks is Hiring!

  • If you're the best... we want you to work here!

    If you're the best... we want you to work here!ICF Ironworks is always on the lookout for experienced professionals who believe in hard work, having fun, and great client service.

    View our open positions, or, if you don't see an exact match, send us your resume.

Workswire e-Newsletter

  • Workswire e-newsletterSign up to receive Ironworks' quarterly e-newsletter for the latest news, events, client successes, industry insights and more!
    subscribe

Ironworks Twitter Updates

    follow me on Twitter

    Our Other Favorite Blogs

    Become a Fan