1

Hi all here is my problem. I need to make style changes to a Webpart but I cant change the css file that it is currently using because it will affect other webpart to. Ok so I know that I need to make a new class that overrides the current css and I think this is done in the master page.

Ok so I sort of know what i should do but I have know idea how to do it. I am very new to share point and all my programming knowledge is back end so this is all new to me. So I know how to create a css and link it with a page but every thin else I'm lost. Any help would be greatly appreciated.

Tools at my disposal: Share Point 2010 Visual Studios Share Point designer 2010

Thank you

2 Answers 2

2

you need to show some code!

but as you already have the css running on the page it shouldnt be a huge issue!

you need to first find out what element you want to show/hide! you can do this in the browser using "F12 developer" in IE or firebug in FireFox.

as sharepoint is mainly supporting ie we will go with F12 developer!

goto "tools" (top right) -> click on "Developer Tools" or just click F12 on the keyboard!

That should bring up a window at the bottom of the screen! click on the mouse icon and now select the element on the browser you want to hide or show! in the html source it will show you the html output and its from there you can see either its class name or ID. using the class name or ID you can then use that in the css to manipulate what you want :)

as an example: i have a webpart on a page, in F12 devloper i clicked on the page where the webpart reside and it bought up the html! you should see the hiraci, for simplicity i have my webpart in zone1, I want to not just hide the webpart but the whole zone! so i look up the id for that zone which in my case is zone1 and from that id i can then do this:

#zone1
{
    display:none;
}

if its a class it would look like this:

.zone1
{
    display:none;
}

that is what iv put in my css! this will hide the zone1 what contains all webparts under zone1!

if you just want the webpart only than you would need to find its id or class, for me its ID is called "ctl00_SPWebPartManager1_g_c8085bc6_4eb5_4342_a20d_64550eb201e3"

when you add a webpart to the page its auto generated id! so for my css it would look like this:

#ctl00_SPWebPartManager1_g_c8085bc6_4eb5_4342_a20d_64550eb201e3
{
    display:none;
}

it will hide only that specific webpart!

inbetween the webpart zone and the webpart (html) its also auto generated tables ect, just forget about those! what you need is only the webpart id!

you can do what styling you like this way! if you have a button within the webpart than do as above and get its class or id and then add it into the css!

if for some reason its not taking effect, thats because its being overwritten somewhere down the tree! so your adding ur css in the masterpage but the css for the webpart is added after that would cause your css not to work!

to get around this you would add "!important" again as an exaple i would do this in css to force the stlye:

#ctl00_SPWebPartManager1_g_c8085bc6_4eb5_4342_a20d_64550eb201e3
{
    display:none !important;
}

if its a button you want changing and to change the webpart background you would do:

//make the background color red and semi transparent
#ctl00_SPWebPartManager1_g_c8085bc6_4eb5_4342_a20d_64550eb201e3
{
    background-color:red;
    opacity:0.55;
    filter:alpha(opacity=55); /* For IE8 and earlier */
}

//force the button width to 100px (pixels)
.btnClick
{
    width:100px !important;
}

use sharepoint designer to open the css with as its similar to VS when adding styles! it will help you out alot!

4
  • Hm.. Can't generated id's be different for different browsers?
    – Gennady G
    Feb 10, 2015 at 21:41
  • But + from me for the detailed how-to!.
    – Gennady G
    Feb 10, 2015 at 21:42
  • @GennadyG yes your right, without looking at detailed code i wouldnt know the right Id or better yet the class to use! the guid would change on a new page created but would stay the same for that page.
    – Ali Jafer
    Feb 19, 2015 at 10:25
  • Yes the guid will be same but sharepoint can generate different code for different browsers, so instead "_" in FF there could be "$" in IE and etc. So imho better to use jQuery getters, by example name*='guid here' ,or something
    – Gennady G
    Feb 19, 2015 at 17:00
0

If your webpart is on a page you can edit, then you can edit it to add a Content Editor Webpart. Then on your content editor webpart, you can edit its HTMl content (using your browser (preferably IE), and add a tag to your custom stylesheet. You can publish your custom stylesheet in a document library, either to the same site or to the topmost parent of your site collection.

Your Answer

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

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