Override SharePoint div class Style with CSS

Question

I have this div:

enter image description here

I need to make it this:

enter image description here

I try to do it with txt file, that I load in CEWP, txt file looks like this:

<style type="text/css">
.ms-webpart-zone ms-fullWidth
{
     width: 700px;
}
</style>

But it does not work. How to do it right?

Strange but none of the four methods worked in my case oO. Maybe because of CEWP.. I'll try now in Designer — Gennady G
– Gennady G, Commented Mar 12, 2015 at 14:49
At the end I modified parent table style, right click in Firebug-> Copy CSS path, and my result CSS became: html body.ms-backgroundImage form#aspnetForm div#s4-workspace.ms-core-overlay div#s4-bodyContainer div#contentRow div#contentBox div#DeltaPlaceHolderMain div.welcome.welcome-links table { width:70%; !important } — Gennady G
– Gennady G, Commented Mar 12, 2015 at 19:58

Aveenav · Accepted Answer · 2015-03-12 14:10:10Z

2

Add the css as:

<style type="text/css">
    div.ms-webpart-zone.ms-fullWidth {
        width: 700px;
    }
</style>

Note: This change will apply to all your webpart zone(s) in the page. To apply it to a particular element prepend the CSS with a unique element identifier.

answered Mar 12, 2015 at 14:10

Aveenav

4,2011 gold badge15 silver badges13 bronze badges

Yes thanks! It works, for both webpartzones in table, so they move both relative to each other :-D So my 'adventures' continue)

Gennady G
– Gennady G

2015-03-12 19:26:19 +00:00
Commented Mar 12, 2015 at 19:26

Add a comment |

Robert Lindgren · Accepted Answer · 2015-03-12 14:10:14Z

1

Your css is not correct, you are looking for an element with the class ms-webpart-zonethat has a child element with the class ms-fullWidth which is not the case in the markup you show.

Try this:

<style type="text/css">
.ms-webpart-zone.ms-fullWidth
{
     width: 700px;
}
</style>

Or, to be compliant with all browsers (some do not like to combine two classes like I do above):

<style type="text/css">
.ms-fullWidth
{
     width: 700px;
}
</style>

or

<style type="text/css">
.ms-webpart-zone
{
     width: 700px;
}
</style>

You will have to check yourself which one of the two latest variants that works the best on your specific page.

answered Mar 12, 2015 at 14:10

Robert Lindgren

24.5k12 gold badges55 silver badges79 bronze badges

By "compliant with all browsers" are you referring to <= IE6?

eirikb
– eirikb

2015-03-12 20:27:18 +00:00
Commented Mar 12, 2015 at 20:27
I just know I have hade troubles with this in some browser / OS combination, might have been IE8 on windows 7 or similar :)

Robert Lindgren
– Robert Lindgren

2015-03-12 20:48:05 +00:00
Commented Mar 12, 2015 at 20:48

Add a comment |

clk · Accepted Answer · 2015-03-12 19:21:09Z

1

If you can use JavaScript, you can try using this jQuery in your CEWP. It will inject CSS as an inline style for the specified element:

<script src="/link-to-your-jquery-file/jquery.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function(){

        $('div.ms-webpart-zone.ms-fullWidth').css('width', '700px');

    });

 </script>

answered Mar 12, 2015 at 19:21

clk

5411 gold badge3 silver badges12 bronze badges

1

Why would you use jquery to do something that can easily be done with pure css?

Robert Lindgren
– Robert Lindgren

2015-03-12 20:11:37 +00:00
Commented Mar 12, 2015 at 20:11
I proposed it because the question asked for a solution that would provide an inline style for the element, which this jQuery does.

clk
– clk

2015-03-12 20:37:57 +00:00
Commented Mar 12, 2015 at 20:37

Add a comment |

Stack Exchange Network

Override SharePoint div class Style with CSS

3 Answers 3

Your Answer

Hot Network Questions

Override SharePoint div class Style with CSS

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions