Manual Theme Changes for SIMS Learning Gateway
NOTE: Do not try these techniques in a CEWP which has ordinary formatted text displayed, e.g. MS Word. You should add a dedicated CEWP in which you only use the Source Editor for STYLE work, e.g. Notepad.
NB: This is no more than a ‘get you started’ document – much more can be found at: http://www.heathersolomon.com/content/sp07cssreference.htm#ContentArea
Graphic 1
If any section cannot be found in the theme.css file, then add the text carefully, after the } which ends the previous class section.
Experiment by changing the bits in red ink. See also other graphics for more detail.
The code listed here should be pasted between <style> and </style> headings in the CEWP Source Editor page.
1 / .ms-globalbreadcrumb{background-color:#a9c6c3;
}
------
.ms-globallinks,.ms-globallinks a{
color:#ff0000;
text-decoration:none;
font-family:tahoma;
}
------
.ms-globallinks .ms-SPLink a,
.ms-globallinks .ms-SPLink a:link,
.ms-globallinks .ms-SPLink a:visited,
.ms-globallinks .ms-SPLink a:active{
color:#ff0000;
} / background-color:
try red/green/yellow instead of #ff0000 etc
------
This code controls the text colour for the text at right hand end of globalbreadcrumb section:
Welcome . . .; My Sites ; My Links
------
And also at the left:
SLG>Green Abbey School
And Welcome . . .; My Sites ; My Links
2 / .ms-bannerContainer{
background:#ff0000 url("topbanner.gif") no-repeat right top;
height:10px;
vertical-align:top;
}
.ms-globalTitleArea{
background:#ff0000 url("logo.gif") no-repeat right bottom;
height:100px;
}
.ms-globalTitleAreaSeparator{
background-image:url("logo.gif");
background-color:#ff0000;
} / background-color :(x3) / logo.gif
NB: if you use this code in a CEWP for test purposes you need to store logo.gif in a SLG Doc Library and use its URL in this code.
http://sims-demo-1/GreenAbbeySchool/Shared%20Documents/logos/logo.gif
NB the MS Default theme has no folder definition. To use it, yet apply your banner graphic at the top, see the definition called GENERIC in SLG theme definitions.
3 / Graphic in Theme folder
------
.ms-quicklaunchheader {
padding:4px 5px 0px 5px;
height:23px;
margin-bottom:4px;
color: #003399;
background-image: url("quickLaunchHeader_classic.gif");
background-position:bottom;
background-color:#fff;
border-bottom:solid 1px #a5a5a5;
}
------
.ms-quicklaunchheader{
background-image:url("quickLaunchHeader_breeze.gif");
background-color:#00ffff;
border:solid 10px #ff0000;
}
------
.ms-quicklaunchheader{
background-color:#00ffff;
border:solid 10px #ff0000;
} / quicklaunchheader_classic.gif
------
padding: top left bottom right
height: of tab
margin: space below tab
color: ???
image: tiled 1 px wide graphic
position: of text – try top
tab colour – try #ff0000 for red
try #ff0000 and add border-top:solid 5px #ff0000
try dashed / dotted (instead of solid)
------
This variation gives a wide red border and pale blue background:
------
And this one (without the graphic) splits the flood fill in half – I can’t find a way to flood the top half a new colour:
4 / .ms-quickLaunch {
border:none;
background-color:transparent;
margin-top:5px;
} / background-color:
if transparent QLA background shows through (see 7)
if background-color number: set – colour floods tab
5 / .ms-quicklaunch table.ms-navheader td {
background-color:transparent;
border-left:none;
border-bottom:none;
border-top:none;
background-image:none;
}
------
.ms-navheader a {
color: #ff0000;
}
.ms-navItem a {
color: #ff0000;
}
------
.ms-navheader a {
display: none;
}
.ms-navItem a {
display: none;
}
------
.ms-quicklaunch table.ms-selectednavheader td{
width:100%;
background-color:#4B88B6;
padding-top:2px;
padding-bottom:2px;
border-top:solid 2px #E1ECFC;
border-left:solid 1px #E1ECFC;
border-right:solid 0px #ff0000;
border-bottom:solid 0px #ff0000;
padding:1px 6px 3px 6px;
}
.ms-quicklaunch table.ms-selectednavheader td a {
color:#ffffff;
} / background-color:
if transparent QLA background shows through (see 7)
if background-color number: set – colour floods tab
To show borders (as thin red lines) use:
border-left:1px solid #ff0000;
border-right:1px solid #ff0000;
border-top:1px solid #ff0000;
border-bottom:1px solid #ff0000;
------
Changes text colour on menu heading bar (to red)
Changes text colour on menu item (to red)
See also Graphic 2 and 3
------
This hides ALL Header bars in QLA
This hides ALL sub-item links in QLA
------
The SIMS Learning Gateway header is often orange
but can be changed with this code.
First part floods the tab (dark blue here).
You may need to experiment with the border line colours
This code alters the text colour (to white here)
6a / table.ms-navitem td,span.ms-navitem {
background:url("navBullet_classic.gif") no-repeat;
background-color:#f2fbff;
} / background-color:
if transparent QLA background shows through (see 7)
if background-color number: set – colour floods area behind text items
See also Graphics 2 and 3
6b / Graphic in Theme folder / selectednavbullet_classic.gif
7 / .ms-nav {
background-image:none;
background-color:#e1ecfc;
border-right:solid 1px #d4dce6;
}
------
.ms-nav {
display: none;
} / background-color:
if transparent QLA background shows through (see 7)
if background-color number: set – colour floods tab
This hides the QLA and is exactly what the Hide QLA web part does.
8 / .ms-pagemargin {
background-image:none;
background-color:transparent;
} / background-color:
if transparent QLA background shows through (see 7)
if background-color number: set – colour floods tab
9 / .ms-pagebreadcrumb,.ms-pagebreadcrumb a{
background-color:transparent;
} / background-color:
if transparent background shows through (see 7)
if background-color number: set – colour floods tab
See also 16 and more detailed Graphic 4
10 / Graphic in Theme folder
TD.ms-titleareaframe, Div.ms-titleareaframe, .ms-pagetitleareaframe, .ms-mwspagetitleareaframe {
background: #ffffff url("pageTitleBKGD_classic.gif") repeat-x;
} / pagetitlebkgd_classic.gif
try #ff0000
NB this heading also appears in mossextensions.css and can over-ride settings here – so delete/match from there as well.
11 / .ms-bodyareaframe, .ms-viewareaframe {
background-color:#000000;
border-top: 1px solid #3d3838;
border-right: 1px solid #3d3838;
border-left: 1px solid #3d3838;
}
td.ms-bodyareaframe {
background-color:#000000;
background-image: url("http://sims-demo-1/GreenAbbeySchool/Shared Documents/parents wmark.gif");
} / background-color: #000000 = black
try 10 px and new colour
try 10 px and new colour
try 10 px and new colour
Watermark – a faint watermark gif has been created and stored in the Shared Docs library so its URL can be found. The background-image: url displays it on the page behind everything else.
12 / .ms-sitetitle a{
color: #ff0000;
}
------
.ms-sitetitle a{
display: none;
} / Also experimented here with:
font-size: x-large;
font-family: "Courier New", Courier, monospace;
------
This makes the Tile text disappear
13 / .ms-sbtable-ex{
display: none;
} / Hides the search boxes
14 / td.ms-rightareacell div.ms-pagemargin{
background-image:url("pagebackgrad_breeze.gif");
background-repeat:repeat-x;
background-color:#ff0000;
border-left:solid 10px #00ff00;
}
------
td.ms-rightareacell div.ms-pagemargin{
background-color:#ff0000;
border-left:solid 10px #83b0ec;
} / Graphic in right hand narrow stripe.
------
Paper border with red flood and 10px wide left border in green. No graphic.
15 / topnavhover_verdant.gif – if you hover the mouse over the tab
topnavselected_verdant.gif – after you have clicked the tab
topnavunselected_verdant.gif – the normal state
.ms-topNavHover{
background-image:url("topnavhover_breeze.gif");
background-color:#ff0000;
}
------
.ms-topnavselected {
background-image:url("topnavselected_classic.gif");
background-color::#b7c9e8;
background-repeat:repeat-x;
} / The top navigation tabs are formed from a set of thin (1 px) tiled graphics. These need redesigning and replacing.
The label ‘verdant’ will vary from theme to theme.
If there is no graphic then this code flood fills the tab (red) when you hover mouse over it.
------
If there is no graphic then this code flood fills the tab (red) after you have visited it.
16 / .ms-pagebreadcrumb {
background-color:#D4D0C8;
border-left:1px solid #ff0000;
border-right:1px solid #ff0000;
border-top:1px solid #ff0000;
border-bottom:1px solid #ff0000;
color:#ffffff;
} / The crumb-trail section has a background fill colour (yellow in graphic) with a thin border line (white in graphic). There are separate lines of code for background, top, bottom, right and left borders..
color:#ffffff; makes the text here black.
See also 9 and Graphic 4.
17 / table.ms-recyclebin td{
background-color:#ff0000;
}
table.ms-recyclebin td a{
color:#0000ff;
} / The Recycle Bin section – here flooded red with lue text.
Graphic 2
background-color:#ff0000;
}
.ms-navsubmenu2{
background-color:#0000ff;
}
Graphic 3
border:solid 10px #123456;
border-bottom:solid 10px #6f9dd9;
font-size:8pt;
font-family:tahoma;
line-height:10pt;
background-color:#ff0000;
}
.ms-nav {
background-image: none;
background-color:#ff0000;
border:solid 10px #ff0000;
}
.ms-pagemargin {
background-color:#ff0000;
background-image:none;
}
.ms-bodyareaframe, .ms-viewareaframe {
background-color:#ff0000;
border-top:1px solid #3d3838;
border-right:1px solid #3d3838;
border-left:1px solid #3d3838;
}
Graphic 4
border-left:10px solid #ff0000;
border-top:10px solid #ff0000;
background-color:#00ff00;
color:#000000
}
.ms-pagebreadcrumb,.ms-pagebreadcrumb a{
font-size:8pt;
background-color:#ebf3ff;
color:#666666;
text-decoration:none;
}
td.ms-pagebreadcrumb a {
color:#ffffff
background-color:#0000ff;
}
Graphic 5
.ms-SPZone {border:10px solid #ff0000;
background-color:#00ff00;
} / Each web part has the same colour border (10px red here) and a background colour (green here)
.ms-WPTitle {
color:#ff0000;
} / The web part text is red here
.ms-SPzone .ms-WPHeader TD,.ms-SPZoneSelected .ms-WPHeader TD{
background-color:#ff00ff;
background-image:url("partgrad_breeze.gif");
} / And the heading bar is flooded purple
Graphic 6
.ms-quicklaunch table.ms-navheader td,.ms-navheader2 td{border-bottom: solid 10px #ff0000;
border-top: solid 10px #00ff00;
border-left: solid 10px #0000ff;
border-right: solid 10px #ff00ff;
}
------
.ms-quicklaunch table.ms-navheader td,.ms-navheader2 td{
border-bottom: none;
border-top: none;
border-left: none;
border-right: none;
} / Coloured borders – usually only 1px wide and all same colour
------
Hides borders