A couple of weeks ago I had two sessions at SharePoint & Exchange forum 2011 about branding in SharePoint and Data Views in SharePoint Designer. SEF was as usual a great event with a lot of good speakers like Marc D Anderson, Penny Coventry, Todd Klindt, Dan Holme, CA Callahan, Göran Husman, Wictor Wilén and many more.
I talked about theoretical aspects of branding like importance, decision points, tools and how to plan for a branding in SharePoint in general in the branding session and I showed how to brand the SharePoint user interface piece by piece, not by how to make dramatic changes to the interface; more about where to start and which classes you can modify per element like:
- Header area, faded background and height
- Logo
- Breadcrumbs
- Social icons, smaller icons and the added title text with jQuery
- Global navigation with dropdown
- Searchbox, custom button, background color and jQuery for replace the default text
/* --- Global Navigation Green --- */
/* Navigation list */
.s4-tn{
background-color:#16922d;
border-bottom:1px solid #555;
}
/* Border to right and left*/
.menu-horizontal{
margin-left:10px;
border-right:1px solid #0E5C1C;
border-left:1px solid #1aac33;
}
/* Global navigation */
.s4-tn li.static > .menu-item{
color:#fff; white-space:nowrap;
padding-left:12px;
padding-right:12px;
line-height:26px;
height:26px;
border-right:1px solid #1AAC33;
border-left:1px solid #0E5C1C;
font-size:11px;
font-weight:bold
}
/* Hover */
.s4-tn li.static > a:hover{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color:green;
color:#fff!important; text-decoration:none;
}
/* Selected */
.s4-toplinks .s4-tn a.selected{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color: green;
color:#fff!important; text-decoration:none;
border:1px transparent solid;
border-right:1px solid #138226;
border-left:1px solid #0E5C1C;
padding-right:15px;
margin:0px;
}
/* Dropdowns */
/* No arrows applies two levels */
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background {
background-image:none;
padding-right:0px;
}
UL.dynamic {
margin-top:1px!important
}
.s4-tn ul.dynamic {
/* UL wrap */
background-image:none;
border-top:0px #ccc solid; border-right:1px transparent solid ;
border-bottom:1px #ccc solid; border-left:1px #ccc solid ;
margin:0px;
}
/* LIs */
.s4-tn li.dynamic {
background-image:none;
border-top:1px #ccc solid; border-right:1px #ccc solid;
border-bottom:1px #fff solid; border-left:1px #fff solid;
}
/* LI menu items */
.s4-tn li.dynamic > .menu-item {
padding:7px 10px;
height:16px;
color:#333;
background-color:#f7f7f7; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));
background: -moz-linear-gradient(top, #ffffff, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)";
}
/* LI menu items hover */
.s4-tn li.dynamic > a:hover {
color:#00557B;
background-color:#fff; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
background: -moz-linear-gradient(top, #ffffff, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
}
/* Position for a third level */
.dynamic > li.dynamic-children > ul.dynamic {
margin-left:-2px!important;
margin-top:0px!important;
}
/* Remove dotted outlines */
a:hover, a:active, a:focus {outline:none}
/* --- Search Box --- */
/* Position for search */
.s4-search{
margin-top:-8px;
margin-right:0px!important;
padding:0px!important;
}
#s4-searcharea, .s4-rp {
margin-right:0px!important;
padding:0px!important;
}
.s4-search input.ms-sbplain{
width:180px!important;
height:15px;
padding:4px 4px 4px 4px;
margin:12px 4px 4px 4px;
margin-right:0px;
background-color:#eee;
border-top:1px #aaa solid!important;
border-right:1px #ddd solid!important;
border-bottom:1px #ddd solid!important;
border-left:1px #ddd solid!important;
color:#333;
font-size:11px;
margin-left:38px!important;
}
.s4-search .ms-sbgo{
padding-top:5px; padding:0; margin:0;
}
.s4-search .ms-sbgo a{
background-image:url('/Style%20Library/SEFbranding/Images/SearchBtn.png');
background-repeat:no-repeat;
margin-top:8px;
width:37px; height:25px;
display:block;
}
.s4-search .srch-gosearchimg{
display:none;
}
.ms-sbscopes{
display:none;
}
/* --- Header Title --- */
.s4-titletext H1, .s4-titletext H2, .s4-titletext Span, .s4-pagedescription {display:none}
/* --- Header area --- */
.s4-title{
height:50px;
min-height:50px;
overflow:hidden; /* FF & GC*/
background-color:#D6DBE0; /* fallback */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D6DBE0));
background: -moz-linear-gradient(top, #ffffff, #D6DBE0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#D6DBE0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#D6DBE0)";
}
/* --- Logo --- */
.s4-titlelogo {
vertical-align: middle;
padding-top:0px;
}
.s4-titlelogo IMG {
margin-left:7px
}
.s4-lp {
padding-left:0px;
}
/* --- Help icon --- */
.s4-help {
display:none
}
/* --- Social Icons --- */
.ms-mini-socialNotif-Container{white-space: nowrap; margin-top:-25px; margin-right:12px}
/* --- Custom breadcrumb --- */
.BreadCrumbWrap {
margin:10px 0px 20px 0px;
}
.BreadCrumbStyle {
padding-left:10px;
font-size:10px;border-bottom:0px #ebebeb dotted;
padding-bottom:5px;
}
.BreadCrumbStyle a:link, .BreadCrumbStyle a:visited {
color:#128E29;
}
.BreadCrumbStyle a:hover{
color:#0072bc; text-decoration:underline
}
.BreadCurrentNode {color:#0072bc}
.BreadPathSeparator{
color:#ccc; padding:0px 5px 0px 5px;
}
/* --- Web Parts --- */
/* All TDs in the table row */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-top:1px #ccc solid!important;
border-bottom:1px #ccc solid!important;
padding:3px;
}
/* Border to the sides */
.ms-WPHeader td:first-child {
border-left:1px #ccc solid;
border-right:0px!important;
}
.ms-wpTdSpace {
border-right:1px #ccc solid!important;
}
/* Web part title */
.ms-WPTitle {
color: #333;
font-weight:bold;
}
/* linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #333!important;
text-decoration:none!important;
}
/* hover */
.ms-WPTitle a:hover {
color:green!important;
}/* --- Global Navigation Green --- */
/* Navigation list */
.s4-tn{
background-color:#16922d;
border-bottom:1px solid #555;
}
/* Border to right and left*/
.menu-horizontal{
margin-left:10px;
border-right:1px solid #0E5C1C;
border-left:1px solid #1aac33;
}
/* Global navigation */
.s4-tn li.static > .menu-item{
color:#fff; white-space:nowrap;
padding-left:12px;
padding-right:12px;
line-height:26px;
height:26px;
border-right:1px solid #1AAC33;
border-left:1px solid #0E5C1C;
font-size:11px;
font-weight:bold
}
/* Hover */
.s4-tn li.static > a:hover{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color:green;
color:#fff!important; text-decoration:none;
}
/* Selected */
.s4-toplinks .s4-tn a.selected{
background:url("/_layouts/Images/selbg.png") repeat-x left top;
background-color: green;
color:#fff!important; text-decoration:none;
border:1px transparent solid;
border-right:1px solid #138226;
border-left:1px solid #0E5C1C;
padding-right:15px;
margin:0px;
}
/* Dropdowns */
/* No arrows applies two levels */
.menu-horizontal a.dynamic-children span.additional-background,
.menu-horizontal ul.dynamic a.dynamic-children span.additional-background {
background-image:none;
padding-right:0px;
}
UL.dynamic {
margin-top:1px!important
}
.s4-tn ul.dynamic {
/* UL wrap */
background-image:none;
border-top:0px #ccc solid; border-right:1px transparent solid ;
border-bottom:1px #ccc solid; border-left:1px #ccc solid ;
margin:0px;
}
/* LIs */
.s4-tn li.dynamic {
background-image:none;
border-top:1px #ccc solid; border-right:1px #ccc solid;
border-bottom:1px #fff solid; border-left:1px #fff solid;
}
/* LI menu items */
.s4-tn li.dynamic > .menu-item {
padding:7px 10px;
height:16px;
color:#333;
background-color:#f7f7f7; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f7f7f7));
background: -moz-linear-gradient(top, #ffffff, #f7f7f7);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#f7f7f7)";
}
/* LI menu items hover */
.s4-tn li.dynamic > a:hover {
color:#00557B;
background-color:#fff; /* fallback */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
background: -moz-linear-gradient(top, #ffffff, #ffffff);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#ffffff)";
}
/* Position for a third level */
.dynamic > li.dynamic-children > ul.dynamic {
margin-left:-2px!important;
margin-top:0px!important;
}
/* Remove dotted outlines */
a:hover, a:active, a:focus {outline:none}
/* --- Search Box --- */
/* Position for search */
.s4-search{
margin-top:-8px;
margin-right:0px!important;
padding:0px!important;
}
#s4-searcharea, .s4-rp {
margin-right:0px!important;
padding:0px!important;
}
.s4-search input.ms-sbplain{
width:180px!important;
height:15px;
padding:4px 4px 4px 4px;
margin:12px 4px 4px 4px;
margin-right:0px;
background-color:#eee;
border-top:1px #aaa solid!important;
border-right:1px #ddd solid!important;
border-bottom:1px #ddd solid!important;
border-left:1px #ddd solid!important;
color:#333;
font-size:11px;
margin-left:38px!important;
}
.s4-search .ms-sbgo{
padding-top:5px; padding:0; margin:0;
}
.s4-search .ms-sbgo a{
background-image:url('/Style%20Library/SEFbranding/Images/SearchBtn.png');
background-repeat:no-repeat;
margin-top:8px;
width:37px; height:25px;
display:block;
}
.s4-search .srch-gosearchimg{
display:none;
}
.ms-sbscopes{
display:none;
}
/* --- Header Title --- */
.s4-titletext H1, .s4-titletext H2, .s4-titletext Span, .s4-pagedescription {display:none}
/* --- Header area --- */
.s4-title{
height:50px;
min-height:50px;
overflow:hidden; /* FF & GC*/
background-color:#D6DBE0; /* fallback */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#D6DBE0));
background: -moz-linear-gradient(top, #ffffff, #D6DBE0);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#D6DBE0);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#D6DBE0)";
}
/* --- Logo --- */
.s4-titlelogo {
vertical-align: middle;
padding-top:0px;
}
.s4-titlelogo IMG {
margin-left:7px
}
.s4-lp {
padding-left:0px;
}
/* --- Help icon --- */
.s4-help {
display:none
}
/* --- Social Icons --- */
.ms-mini-socialNotif-Container{white-space: nowrap; margin-top:-25px; margin-right:12px}
/* --- Custom breadcrumb --- */
.BreadCrumbWrap {
margin:10px 0px 20px 0px;
}
.BreadCrumbStyle {
padding-left:10px;
font-size:10px;border-bottom:0px #ebebeb dotted;
padding-bottom:5px;
}
.BreadCrumbStyle a:link, .BreadCrumbStyle a:visited {
color:#128E29;
}
.BreadCrumbStyle a:hover{
color:#0072bc; text-decoration:underline
}
.BreadCurrentNode {color:#0072bc}
.BreadPathSeparator{
color:#ccc; padding:0px 5px 0px 5px;
}
/* --- Web Parts --- */
/* All TDs in the table row */
.ms-WPHeader TD{
background-color: #f7f7f7;
border-top:1px #ccc solid!important;
border-bottom:1px #ccc solid!important;
padding:3px;
}
/* Border to the sides */
.ms-WPHeader td:first-child {
border-left:1px #ccc solid;
border-right:0px!important;
}
.ms-wpTdSpace {
border-right:1px #ccc solid!important;
}
/* Web part title */
.ms-WPTitle {
color: #333;
font-weight:bold;
}
/* linked title and visited */
.ms-WPTitle a, .ms-WPTitle a:visited {
color: #333!important;
text-decoration:none!important;
}
/* hover */
.ms-WPTitle a:hover {
color:green!important;
}
No comments:
Post a Comment