style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 13px; PADDING-RIGHT: 0px; COLOR: #e9ab17; FONT-WEIGHT: bold; PADDING-TOP: 10px">Introduction
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">The
wiki pages are a new feature in SharePoint 2010 that seems to replace the base
pages of SharePoint 2007. With the wiki pages, SharePoint 2010 provides a way of
not only quickly publishing content within a SharePoint site page but even more,
to manage the layout of this content more easily.
The improvement of the
publishing is due to two new features provided by the new SharePoint 2010 ribbon
when displayed in edit mode:
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">The
Styles and the Markup
Styles menus
These two menus allow end users to easily add
styles to the content written using the Rich Text
Editor.
href="http://c-lien.blogspot.com/?aHR0cDovLzIuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9TeU10Q2hlR1VSSS9BQUFBQUFBQUJWRS9qcnFkVEhSYkxKYy9zMTYwMC1oL1NoYXJlUG9pbnQrMjAxMCstK21hbmFnaW5nK3N0eWxlcystKzAxMCstK1N0eWxlcyttZW51cy5KUEc=">
id=BLOGGER_PHOTO_ID_5414220698397069586 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIYO1Kinfs-t6rAdKQlw7f7BsfAculpy0XuOwjZBsKXWUncQLhBvx8YQ-mn2UOc8zftwUuyjyXKNDwKD4QToZr6VgfAIomSFglt1f_sM6hBLIEThvOjqW73f21sT8DjpvfRWw76NmL9We/s320/SharePoint+2010+-+managing+styles+-+010+-+Styles+menus.JPG">
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">The
Text Layout Menu
This menu allows end users to
share the wiki page in several zones where to write content.
href="http://c-lien.blogspot.com/?aHR0cDovLzMuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9TeU10Q1kxSVVjSS9BQUFBQUFBQUJVOC9tOFZlYXJJWUdFWS9zMTYwMC1oL1NoYXJlUG9pbnQrMjAxMCstK21hbmFnaW5nK3N0eWxlcystKzAyMCstK1RleHQrbGF5b3V0K21lbnVzLkpQRw==">
id=BLOGGER_PHOTO_ID_5414220696077750722 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghzXH77vMSZWPA6FMpYZsqWe4B2ZD9weAJFnO24jdVJSwQMG-HtKBnHmvYgMieZbKDehXihO-8pRT7gKKKN2PBFtbBW3-zBdxGtjwT27tF9LymBVPOLV9MIEDCtB8mI8ymaF7AaOInuz81/s320/SharePoint+2010+-+managing+styles+-+020+-+Text+layout+menus.JPG">
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">In
this post we will focus on the Styles and Markup Styles menus and explain
how they work and even more, how to remove, add, or modify some of their items.
Regarding the items adding, we will examine all the possible solutions
and it will be a chance for the developer that wants to familiarize
with SharePoint customization to see the different approaches when wanting to
customize the product and the drawbacks pending for each.
So if you are an
advanced developper or architect, or wants a quick synthesis on the topic, I
rather advice you to move to href="http://c-lien.blogspot.com/?aHR0cDovL21vc3Nob3d0by5ibG9nc3BvdC5jb20vMjAxMC8wNi9zaGFyZXBvaW50LTIwMTAtd2lraS1jdXN0b21pemluZy5odG1sIzEuMg==">this
section of this second post.
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">Anyway,
here are all the steps described in this post with anchors for a quick
consultation:
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px"> href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMQ==">1 - How do the Styles and
Markup Styles Menus of the wiki pages work in SharePoint
2010?
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMS4x">1.1 information for
advanced end-users (knowing basic html and CSS) and web designers
1.2
Information for web designers and developers - Location of the CSS and loading
mode
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMS4z">1.3 - Information for web
designers and developers - CSS syntax for these styles
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMg==">2 - How to manage items in
the Styles Menus of the wiki pages in SharePoint 2010? (audience: SharePoint
developers and Architects)
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMi4x">2.1 - The 2 possible
locations for the Out Of The Box CSS of the RTE styles and thus for the
definition of the styles menus items
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMi4y">2.2 - Creating and storing
a custom CSS file.
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMi4z">2.3 - First location for a
custom Style CSS: within an HTML Form Web Part inserted in the wiki page
2.4
- Referencing a custom CSS file within the code of the wiki page
2.5 -
Modifying an existing SharePoint 2010 wiki page by using the WebDav and the
FrontPage RPC protocols with Visual Studio
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMi42">2.6 - Adding a new wiki
page in the Site Pages library by using a provisioning SharePoint 2010
Feature
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMi43">2.7 - First limitation of
the wiki pages in SharePoint 2010 Foundation: there is only one available
template
href="http://c-lien.blogspot.com/?LzIwMDkvMTIvc2hhcmVwb2ludC0yMDEwLXdpa2ktc3R5bGVzLmh0bWwjMi44">2.8 - Second limitation of
the wiki page in SharePoint 2010: it is very difficult to remove the OOTB
RTE style
3 -
Workaround to give its own CSS to each wiki page library of a team
site
4 - To go
further
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">style="COLOR: red">Important: do not mistake a Wiki Page of a Team Site
for a Wiki Page of an Enterprise Wiki. They are totally different since an
Entreprise Wiki is a kind of publishing site, and a Wiki Page of an Enterprise
Wiki can be based on different Wiki Page Templates.
style="COLOR: red">In this post, I will examine the Wiki Pages for a Team
Site so that this information can be used for SharePoint foundation 2010.
For more information about Enterprise Wiki:
href="http://c-lien.blogspot.com/?aHR0cDovL3RlY2huZXQubWljcm9zb2Z0LmNvbS9lbi11cy9saWJyYXJ5L2VlNzIxMDU1LmFzcHg=">Enterprise Wikis
overview (SharePoint Server 2010)
href="http://c-lien.blogspot.com/?aHR0cDovL21zZG4ubWljcm9zb2Z0LmNvbS9lbi11cy9saWJyYXJ5L21pY3Jvc29mdC5zaGFyZXBvaW50LnB1Ymxpc2hpbmcuY29udGVudHR5cGVpZC5lbnRlcnByaXNld2lraXBhZ2UuYXNweA==">ContentTypeId.EnterpriseWikiPage
Property
href="http://c-lien.blogspot.com/?aHR0cDovL2NvbW11bml0eS5iYW1ib29zb2x1dGlvbnMuY29tL2Jsb2dzL3NoYXJlcG9pbnQtMjAxMC9hcmNoaXZlLzIwMDkvMTAvMjEvc3BjLWN1c3RvbWl6aW5nLWVudGVycHJpc2Utd2lraXMtaW4tc2hhcmVwb2ludC0yMDEwLXdpdGgtZ2FpbC1qYWNvYnktYW1wLXRlZC1wYXR0aXNvbi5hc3B4">SPC:
Customizing Enterprise Wikis in SharePoint 2010 with Gail Jacoby & Ted
Pattison
style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 13px; PADDING-RIGHT: 0px; COLOR: #e9ab17; FONT-WEIGHT: bold; PADDING-TOP: 10px">name=1>1 - How do the Styles and Markup Styles Menus of the wiki
pages work in SharePoint 2010?
style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 26px; COLOR: #e9ab17; FONT-WEIGHT: normal; PADDING-TOP: 10px">name=1.1>1.1 information for advanced end-users (knowing basic html and
CSS) and web designers
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">
style if the tag to nest is a <span> element
(this is a way of removing a Markup style for an end-user)
not already inside an HTML tag
<span> tag
applied a second time (this is a way of removing a Style for an
end-user)
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">Let
us illustrate this by a little example. Assume we want to populate our page with
five lines of text (I used Firefox 3.5 for the demo in order to show the cross
browser compatibility):.
href="http://c-lien.blogspot.com/?aHR0cDovLzQuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9TeU10Q0ZzLXdwSS9BQUFBQUFBQUJVMC9oU0ZtWjMwd3M0ay9zMTYwMC1oL1NoYXJlUG9pbnQrMjAxMCstK21hbmFnaW5nK3N0eWxlcystKzAzMCstK3BvcHVsYXRpbmcrUlRFLkpQRw==">
id=BLOGGER_PHOTO_ID_5414220690943296146 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBSvR39wXp_61_IUYAoyUBj_-MBWfFQLzd_4a4TU-SDpacdItyNmPTR1HSwOzjuEnzQ1fBAaNhZLpXQGmJRDlSRazK-2BMMUeZMkeTt7bOw4f-3-eDyLeqFiG2aKf4jIxtumBziXZVl2F/s320/SharePoint+2010+-+managing+styles+-+030+-+populating+RTE.JPG">
Then we apply
menu
menu
"Call out 1" style from the "Markup Styles" menu
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px"> and
we obtain the following result
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">
href="http://c-lien.blogspot.com/?aHR0cDovLzEuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9TeU10Qnc3Y05WSS9BQUFBQUFBQUJVcy9fWGM2YUZTXy1zOC9zMTYwMC1oL1NoYXJlUG9pbnQrMjAxMCstK21hbmFnaW5nK3N0eWxlcystKzAzNSstK2FwcGx5aW5nK3N0eWxlcy5KUEc=">
id=BLOGGER_PHOTO_ID_5414220685366801746 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVKssT-DG3xPru0WI5tQuiCk64YMfiZaqlG5QbqtWoG7PXcMKMQtS0k9vAfO-hAybxolhihfMHq_8kZxHiIm6jNZsMX3BOgcimbZ7NqbDxo2NhhVIlWAyjArW6AU0LeLKk3t3Diw44KVNl/s320/SharePoint+2010+-+managing+styles+-+035+-+applying+styles.JPG">
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">
style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 26px; COLOR: #e9ab17; FONT-WEIGHT: normal; PADDING-TOP: 10px">name=1.2>1.2 Information for web designers and developers - Location of the
CSS and loading mode
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">What
is fantastic in the inplementation of the Styles and Markup Styles menus in the
ribbon of the SharePoint 2010 wiki pages is that they are populated dynamically
by the client side code using Ajax when you activate the Edit Mode of the wiki
page. Furthermore, they are populated, based on ALL the
CSS styles that are available for a specific wiki page and thus, can be
stored:
face="Courier New">14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\corev4.css)
file system
content databases
2010 content databases but were automatically generated by SharePoint
(Themes).
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">All
these locations may be parsed by the client side code of ribbon using XMLHTTP
requests when you activate the Edit Mode of a wiki page of a SharePoint 2010
team site. (I have debugged the Ribbon while loading the CSS, so if you want to
see it in action you can consult this href="http://c-lien.blogspot.com/?aHR0cDovL21vc3Nob3d0by5ibG9nc3BvdC5jb20vMjAxMC8wNi9zaGFyZXBvaW50LTIwMTAtd2lraS1jdXN0b21pemluZy5odG1sIzEuMQ==">section of
another post)
style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 26px; COLOR: #e9ab17; FONT-WEIGHT: normal; PADDING-TOP: 10px">name=1.3>1.3 Information for web designers and developers - CSS syntax
for these styles
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">If
the wiki page HTML editor detects Cascading Style Sheet (CSS) classes whose
names have the prefix ms-rteStyle-XXXX, where XXXX is the display name of the
classes it populates the Styles menu with an item corresponding to this set of
styles. The new item displayed text is the value of the property ms-name.
You
can see below, an excerpt of the corev4.css file where you can notice the 2
first elements available in the Styles menu of an Out Of The Box SharePoint
2010 team site. color=#000000 size=3 face="Times New Roman">
style="FONT-FAMILY: 'Courier New'; COLOR: #a31515; FONT-SIZE: 10pt"
lang=EN-CA>.ms-rteStyle-Normal
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>{
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>-ms-namestyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">"Normal";
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>font-familystyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">Verdana,Arial,sans-serif;
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>font-sizestyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">8pt;
style="FONT-FAMILY: 'Courier New'; COLOR: green; FONT-SIZE: 10pt" lang=EN-CA>/*
[ReplaceColor(themeColor:"Dark1")] */style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA> style="COLOR: red">color:style="COLOR: blue">#676767;
style="FONT-FAMILY: 'Courier New'; COLOR: green; FONT-SIZE: 10pt" lang=EN-CA>/*
[ReplaceColor(themeColor:"Light1")] */style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA> style="COLOR: red">background-color:style="COLOR: blue">#fff;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>}
style="FONT-FAMILY: 'Courier New'; COLOR: #a31515; FONT-SIZE: 10pt"
lang=EN-CA>.ms-rteStyle-Highlight
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>{
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>-ms-namestyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">"Highlight";
style="FONT-FAMILY: 'Courier New'; COLOR: green; FONT-SIZE: 10pt" lang=EN-CA>/*
[ReplaceColor(themeColor:"Dark1-Darker")] */style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA> style="COLOR: red">color:style="COLOR: blue">#312a26;
style="FONT-FAMILY: 'Courier New'; COLOR: green; FONT-SIZE: 10pt" lang=EN-CA>/*
[ReplaceColor(themeColor:"Accent6")] */style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA> style="COLOR: red">background-color:style="COLOR: blue">#fae032;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt"
lang=EN-CA>}
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">If
the wiki page HTML editor detects Cascading Style Sheet (CSS) classes whose
names have the prefix ms-rteElement-XXXX, where XXXX is the display name of the
classes it populate the Markup Styles menu with an item corresponding to this
set of styles. The new item display text is the value of the property
ms-name.
You can see below, an excerpt of the corev4.css file where you can
notice the 2 first elements available in the Markup Styles menu of an Out
Of The Box SharePoint 2010 team site. face="Times New Roman">face="Times New Roman">face="Times New Roman">
style="FONT-FAMILY: 'Courier New'; COLOR: #a31515; FONT-SIZE: 10pt"
lang=EN-CA>H1.ms-rteElement-H1
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>{
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>-ms-namestyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">"Heading 1";
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>font-sizestyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">2em;
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>font-weightstyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">normal;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>}
style="FONT-FAMILY: 'Courier New'; COLOR: #a31515; FONT-SIZE: 10pt"
lang=EN-CA>H2.ms-rteElement-H2
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>{
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>-ms-namestyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">"Heading 2";
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>font-sizestyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">1.3em;
style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt"
lang=EN-CA>font-weightstyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>:style="COLOR: blue">normal;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt"
lang=EN-CA>}
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">We
are now going to examine all these locations their use and their impact on the
rendering of the contents published by using the Rich Text Editor within a
wiki page of a team site.
style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 13px; PADDING-RIGHT: 0px; COLOR: #e9ab17; FONT-WEIGHT: bold; PADDING-TOP: 10px">name=2>2 - How to manage items in the Styles Menus of the wiki pages in
SharePoint 2010? (audience: SharePoint developers and Architects)
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">The
goal of the demonstartion is now to examine the different locations where
the RTE styles are stored or might be stored and to draw conclusions regarding
this location about branding operations.
style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 26px; COLOR: #e9ab17; FONT-WEIGHT: normal; PADDING-TOP: 10px">name=2.1>2.1 The 2 possible locations for the Out Of The Box CSS
of the RTE styles and thus for the definition of the styles
menus items
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">
2.1.1 The first Out Of The Box location is the corev4.css file located
at:
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">color=#000000 face="Courier New">C:\Program Files\Common Files\Microsoft
Shared\Web Server
Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable\corev4.css
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">If
you modify this file, you might modify the styles and the styles menus items of
the wiki pages for all the team sites of your SharePoint 2010 Farm except
if a theme is applied to the site. Most of all, if you modify this file, and you
have later to apply a SharePoint 2010 upgrade, hotfix, or maybe just run
the SharePoint Products and Technology Wizard, all your changes will be
overwritten by the OOTB corev4.css. So it is a very bad idea to modify
the RTE styles that way.
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">
2.1.2 The second Out Of The Box location if a theme is applied
- a /_theme/number site folder
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 18px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">Now
we are going to go back to the previous example and change the theme of the site
to "Bittersweet"
href="http://c-lien.blogspot.com/?aHR0cDovLzQuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9TeU10Qms0MFYwSS9BQUFBQUFBQUJVay8xaVJzNUg0ZWF6MC9zMTYwMC1oL1NoYXJlUG9pbnQrMjAxMCstK21hbmFnaW5nK3N0eWxlcystKzA0MCstK2NoYW5naW5nK3RoZW1lLkpQRw==">
id=BLOGGER_PHOTO_ID_5414220682134574914 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBGz2GlqyryNLZWUOGxBOzTO5jVTynrv_FHkm5vYamkjjNjQ75XK0aW-2kPNfZ-R8TAHEp6mvvZJxyroCnP3kGthFZliNCTDLEjyIGqZvxjCWJ9YDg1hjq1ihVenvlAxJyQNz9TVOkQc8v/s320/SharePoint+2010+-+managing+styles+-+040+-+changing+theme.JPG">
We obtain this:
onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://c-lien.blogspot.com/?aHR0cDovLzEuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9TeU0xYnJYRk1BSS9BQUFBQUFBQUJWcy9sdGdjV185SjVuUS9zMTYwMC1oL1NoYXJlUG9pbnQrMjAxMCstK21hbmFnaW5nK3N0eWxlcystKzA1MCstK3RoZW1lK2NoYW5nZWQuSlBH">
id=BLOGGER_PHOTO_ID_5414229926641741826 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_pKhf0WphxQrFImUvOGwz6vOaMOGSM0L3f2jA9k2HmiukTMJShAM8-LUDbGbZX6MBHt1QSa_Q16gb9Ac59d6B3hENsrbN8R4DDaXMhj-HL6bbXpE4jv0dBC7UVXtRt3hSPptAZLSAhLv1/s320/SharePoint+2010+-+managing+styles+-+050+-+theme+changed.JPG">
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">Notice
that all the styles was changed partially or totally by the new theme, except
the "Callout 2" style that remained exactly the same. This is due to several
things. Some of the SharePoint 2010 rte styles are explicitly defined to change
when the theme is changing, like the Markup style
"Paragraph" for which are defined the following instruction regarding
the SharePoint themes:
face="Courier New">[ReplaceColor(themeColor:"Dark2-Darker")]
*/
Some others are defined to remain unchanged while applying a
theme. The "Callout 2" style was not planned to change when the theme
changes because it overwrites the elements of the theme CSS so it will
remain exactly the same even if you change for any theme of SharePoint
2010.
(The "Callout 1" style that was delivered by Microsoft with an
error in the color property that prevents it from overwriting the default text
color defined by the theme CSS).
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">Now
that the "Bittersweet" theme is applied to the site, if you try to modify the
corev4.css file, you won't see any modification because the CSS are now stored
in a file automatically generated by SharePoint 2010 and located in a site
folder with this kind of url:
/_themes/20/corev4-8A0ABD2F.css?ctag=21
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">The
SharePoint site will reuse the corev4.css file only if you apply the default
option for the SharePoint site themes, that is to mean, no theme.
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">That
means that it is really not a good idea to modify the styles by customizing
the OOTB themable/corev4.css file since these modifications won't be
visible for any sites for which a SharePoint 2010 theme is
applied execpted if the theme is applied after the corev4.css
customizations. It is not a good idea neither to modify the CSS after
having applied a theme by customizing the CSS stored in the theme folder. Were
are now considering different approaches to store custom CSS.
style="PADDING-BOTTOM: 10px; MARGIN: 1px 0px; PADDING-LEFT: 26px; COLOR: #e9ab17; FONT-WEIGHT: normal; PADDING-TOP: 10px">name=2.2>2.2 Creating and storing a custom CSS file.
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">From
now, we could either use a <style> tag or a <link> tag,
but assume we have chosen to store the custom CSS in a .css file. We are
now going to create a file for the custom styles and try to find the best way to
reference it in the SharePoint 2010 wiki page in order to have these custom
styles populating the Styles and Markup Styles menus of the Rich text Editor
within the SharePoint 2010 ribbon.
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">Create
a sub folder named contoso-marketing in the folder of the themable/corev4.css :
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">color=#000000 face="Courier New">C:\Program Files\Common Files\Microsoft
Shared\Web Server Extensions\14\TEMPLATE\LAYOUTS\1033\STYLES\Themable
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">
onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"
href="http://c-lien.blogspot.com/?aHR0cDovLzEuYnAuYmxvZ3Nwb3QuY29tL185ZnNnRHF1TjlNSS9TeU0xYm9vRkgxSS9BQUFBQUFBQUJWay9iRFRnU2hxN1FSYy9zMTYwMC1oL1NoYXJlUG9pbnQrMjAxMCstK21hbmFnaW5nK3N0eWxlcystKzA2MCstK25ldytydGUrc3R5bGVzK3N1Yitmb2xkZXIuSlBH">
id=BLOGGER_PHOTO_ID_5414229925907734354 border=0 alt=""
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGdTdMdFxrFxHx4mX4tQ4UvVdGN636xzP-MlMZiFhOZTbTVYNZDEiEQlXPTRnkVSlrfOVeWMs4AMs9KZOmtrncgWnj3Zmf1j4tpWQZUhFUVl3gnfq9Y0oglYqS9v0xjKx1cS86OqbOFibH/s320/SharePoint+2010+-+managing+styles+-+060+-+new+rte+styles+sub+folder.JPG">
style="TEXT-ALIGN: justify; PADDING-BOTTOM: 18px; MARGIN: 1px 0px; PADDING-LEFT: 31px; PADDING-RIGHT: 5px; FONT-FAMILY: arial; COLOR: gray; FONT-SIZE: 10pt; FONT-WEIGHT: normal; PADDING-TOP: 5px">create
a new css file named also corev4.css
in this file paste the following
code:
lang=EN-CA>
style="FONT-FAMILY: 'Courier New'; COLOR: green; FONT-SIZE: 10pt" lang=EN-CA>/*
_lcid="1033" _version="14.0.4536"*/
style="FONT-FAMILY: 'Courier New'; COLOR: green; FONT-SIZE: 10pt"
lang=EN-CA>
style="FONT-FAMILY: 'Courier New'; COLOR: green; FONT-SIZE: 10pt"
lang=EN-CA>
style="FONT-FAMILY: 'Courier New'; COLOR: #a31515; FONT-SIZE: 10pt"
lang=EN-CA>DIV.ms-rteElement-mkg-H1
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>color=#000000>{
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>color=#000000> style="COLOR: red">-ms-name: style="COLOR: blue">"marketing-header"color=#000000>;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>color=#000000> style="COLOR: red">color: style="COLOR: blue">#d65c26;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt" lang=EN-CA>color=#000000> style="FONT-FAMILY: 'Courier New'; COLOR: red; FONT-SIZE: 10pt">font-familystyle="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt">:
Verdana,Geneva,sans-serifcolor=#000000>;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt">color=#000000> style="COLOR: red">font-weight: style="COLOR: blue">normal;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt">color=#000000> style="COLOR: red">font-size: style="COLOR: blue">2em;
style="FONT-FAMILY: 'Courier New'; FONT-SIZE: 10pt">color=#000000>}
Aucun commentaire:
Enregistrer un commentaire