Add styles to page and save as web part

Background:
Use this technique to override an existing style on the page and then save the style as a webpart that can be inserted into other pages.

How To:
The easiest way to reveal what style is affecting an area on the page is to use the reveal javascript.

Once you know what style is being affected, site > edit page

– add a Content Editor Webpart to the page. Set it to “Hidden”
– modify webpart > source
– in the source, add the style declaration:

a:link {
color:#990000;

}

Replace the above with whatever style needs to be overridden.

– save the changes and exit editing mode.

To save the webpart so it is reusable, click the edit on the webpart, and choose Export from the dropdown.

– save the webpart with a name that is descriptive in a folder.
– site > edit site settings
– if not already at the top level site, click Go to top level site settings under Site Collection Administration
– under Galleries, click Webparts
– click Upload
– browse to the saved webpart. Create a group for it to go under

Once the webpart is saved, you can add it to any web part zone throughout the site.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s