6

Is there a way to brand each web part with different styling (title / chrome-title). What I mean is that you could have many different title / chrome styling on the same site.

What I want:

  • edit branding of each web part chrome / title.
  • ex of a branding option could be that you have a icon in the background of the title
  • what style you want it to have could be managed from the edit mode.
  • if a user re-arrange all web parts in a site the styling is being kept. (ex moving from one web part zone into another one)
  • NOT using css3 (child selector) to style that specific web part

The problem in 2010 was that I got "double" headers that caused a problem. One way to fix this problem is that you could send in another css file in edit mode to remove those double headers.

Another way is by putting each web part in different zone you could accomplish this. But this is not what I want

This is quite a pain in SharePoint 2010! But is there a better way to do this in SharePoint 2013?

Improve this question
4
  • Are you targeting specific browsers or is this a public facing website?
    – Nicholas King
    Commented Aug 27, 2013 at 12:06
  • They haven't decided what browser to use. But I think I have to support IE8 :(
    – Plexus81
    Commented Aug 27, 2013 at 12:10
  • 2
    you can use css, selectors to choose which chrome titles to target with your specific code. If you use custom layouts this is easily achieved. eg div.RightCol > table .othercss to get to the relevant css class of the chrome{some css} div.LeftCol > table .othercss to get to the relevant css class of the chrome{some css}. I can provide a more detailed example if this sounds like a workable solution to your problem.
    – Nicholas King
    Commented Aug 27, 2013 at 12:15
  • How do you manage to set different "class" to wrap the entire web part? Yes, I know it's possible to ex style the second web part on the right side, but this is not a good way if the page is going to be dynamic
    – Plexus81
    Commented Aug 29, 2013 at 12:21

4 Answers 4

Reset to default
1

No. There is no easy way nor permanent way. There are workarounds and "hacks" but no specific solution as it varies from solution to solution how much tweaking the design needs.

As many people have already suggested, you can create custom pagelayouts and use CSS selectors to style your web parts depending on which zone they are in.

Another method which is not so widely used (as far as I have experienced), is creating ControlAdapters which allows you to wrap HTML around a specific type of Control/Web part and thus style the Control/Web part as you like - It's pretty much the "toss in a bunch of different webpartzones with different divs around them" solution, but much more focused on single web parts instead of all.

They are both good workarounds. I cannot and will not, ever, suggest using javascript/jquery to alter styling on webparts as this workaround will break as soon as a client has javascript disabled in their browser. It's rare, but it happens.

Improve this answer
4
  • I total agree about the part "NOT using javascript/jquery". You only use that if you don't have any more alternatives left. But how can you use ControlAdapters to take one and only one web part and style it? As I've managed to find out .. the controladapters can only style a ex "type of web part", meaning that all the web pats with the same type is getting the same styling? Isn't this a performance issue as well?
    – Plexus81
    Commented Aug 29, 2013 at 13:14
  • 1
    SharePoint is moving more and more forward into using Javascript in many aspects, to get a good UI experience, Javascript must be enabled anyway!
    – user19105
    Commented Aug 29, 2013 at 15:19
  • @MohamedDerhalli Yes they are, but that is mostly for functionality, not nearly as much for the overall design.
    – user2536
    Commented Aug 30, 2013 at 5:52
  • If functionality is not there, why would you require a design ;)
    – user19105
    Commented Aug 30, 2013 at 11:54
1

the only way i could think of is creating a feature that encapsulates any webpart that will add extra chrome settings that will overwrite the webpart to show your styles/branding!

or

for custom webparts obviously that is easy as you just add the settings in the chrome section that will ammend the title colour ect for you and will save the layouts regardless if you move it to a different zone or not! this is obviously done through code ;) when adding the extra settings for as you put it a logo in the title!

for ootb webparts that is different as you dont have custome code so you would have to use the feature way to force styling/branding within the chrome so that its visible in the edit mode! I havent done it myself as neva needed to do this! most that i do is custom webparts so all can be branded individualy!

to me styling is the right word as branding (colour scheme, logo,main menu)is ment to be a global thing accross all pages! styling can be to an individual page. Doing at an individual level will be hell to maintain accross the site!!!

so if your looking to make high maintance than go for an individual level! if im wrong and that you want to just ammend the webparts slightly like adding logos to webpart titles ect than this is somthing else... if its custom webparts than that is easier but if its ootb that is somthing else and requires more thought as you would need to encapsulate each individual webpart what wouldnt be an easy task!

if you go for custom webparts as i mainly do than that is the best method for what you want, code in all the settings you require to show up in the chrome within edit mode. your codebehind that should handle (cutom code ;)) what you want to do with it like the logo example to be placed within the title! attach a css file to each individual webpart that can easily set styles / custom branding! now you have custome settings within the chrome and custom styles and branding for each individaul webpart regardless if you move them to a different zone or not! bingo

Improve this answer
0
+25

Sometimes when you try to extract the exact classes and IDs for webparts, it would be tough to do so using the regular css selectors, what would be better to do (in case of webparts) is to get the exact classes and IDs using JQuery. It will give you more powerful set of techniques to select individual webparts.

Improve this answer
2
  • 1
    I know I can use jQuery to manipulate the site. I've already been thinking about setting a hidden unique ID inside each web part and then fetching the ID and then manipulate that specific web part using jQuery. But this isn't a "good" way!!!
    – Plexus81
    Commented Aug 28, 2013 at 10:34
  • 2
    I would be glad to learn a better way :)
    – user19105
    Commented Aug 28, 2013 at 10:53
0

I've done this before in SP2010 by creating a custom page layout with various zones and setting ID's on the zones. Then when you place the wp's into a given zone, use a decendent selector in your CSS to target your webparts.

Improve this answer
8
  • Problem with this soulution is that each site doesn't get dynamic. This soulution have only "one" way of arranging web parts on a page, you cannot mix up without repeating the webparts over and over again.
    – Plexus81
    Commented Aug 29, 2013 at 12:13
  • I'm not sure I understand your comment. If the site isn't dynamic (ie responsive/reactive design), then static zones should suffice. Or if the web part placement wont change ever, you can target the zone by the little web part counter in its classs(WP1, WP2, WP3 etc).
    – Josey
    Commented Aug 29, 2013 at 14:06
  • What I was trying to type was.. if you want to style the chrome / title bar in different color. ex. wp1 (blue chrome), wp2 (red chrome), wp3 (blue chrome). Then you have to add 3 different zones in the template. what if you want to add another web part at the bottom of the site with red chrome? Then you have to add another web part zone in the code! What I want is to have the opportunity to change the color of the chrome on each web part without having to deal with web part zones
    – Plexus81
    Commented Aug 29, 2013 at 14:20
  • Dynamic in this scope was that users have the opportunity to change the arrangement of web parts without changing the styling. It's also important that people have the opportunity to add / remove web parts anywhere in a site , and then change each web part with their needs
    – Plexus81
    Commented Aug 29, 2013 at 14:31
  • Can't you use a descendent selector on the zone at that point? For example, if you set your zone to be #zone1 and have three web parts in the zone, and assuming you can use CSS3, your CSS selector for WP2 would be something like #zone1 .ms-WPHeader:nth-child(2){}
    – Josey
    Commented Aug 29, 2013 at 14:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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