A lot of Businesses these days love a SharePoint Site to look good before considering functionality. This is something that has changed since I began doing IT and SharePoint however its considered a huge part of SharePoint now if you have already notice the Design Packages available now within SharePoint 2013.
So today what im going to give you is some basic CSS Styles that you will want to apply to your SharePoint Site as a good Starting Point. Later on in 2015 its my goal to Publish a complete CSS Style Sheet for Office 365 and SharePoint Server 2013 which is fully commented and can simply be applied to the OTB Seattle.Master so watch this Space.
The few things to consider before you start:
1) Use colours like Blue,Red,Yellow for example to help you better understand each of the IDs and Classes better within the SharePoint Seattle MasterPage.
2) Do not modify the OTB Style sheet unless you know what your doing!!
3) The !Important Tag is used in our Style sheet to simply overwrite the OTB Stylesheet so you can easily and quickly start to Brand SharePoint
Office 365 Style Sheet
/* Office 365 Top Ribbon */
.o365cs-nav-header16 .o365cs-nav-bposLogoHorizontalPadding
{
background-color:black !important
}
/* Office 365 Top Ribbon */
.o365spo.o365cst.o365cs-base .o365cs-topnavBGColor, .o365cs-topnavBGColor.o365spo.o365cst.o365cs-base
{
background-color:black !important
}
/* Office 365 Top Ribbon Logo Colour */
.o365spo.o365cst.o365cs-base .o365cs-o365logo
{
color:Red !important
}
/* Office 365 Top Ribbon Hover Over Colours */
.o365spo.o365cst.o365cs-base .ms-bgc-td, .o365spo.o365cst.o365cs-base .ms-bgc-td-h:hover
{
background-color:black !important;
color:red !important
}
/* Office 365 Top Ribbon Admin Drop Down Hover*/
.o365cs-nav-contextMenu.o365spo .o365cs-contextMenu.o365cst.o365cs-base .o365cs-contextMenuItemHover
{
color:red !important;
background-color:transparent !important
}
/* Office 365 Top Ribbon Admin Drop Down Active Button*/
.o365spo.o365cst.o365cs-base button.o365cs-spo-topbarMenuOpen, .o365spo.o365cst.o365cs-base button.o365cs-spo-topbarHover, .o365spo.o365cst.o365cs-base a.o365cs-spo-topbarMenuOpen, .o365spo.o365cst.o365cs-base a.o365cs-spo-topbarHover
{
background-color:black !important;
color:red !important
}
/* Office 365 Top Ribbon Admin Drop Down background Colour*/
.o365cs-nav-contextMenu.o365spo .o365cs-contextMenu.o365cst.o365cs-base
{
background-color:black !important;
color:red !important
}
/* Office 365 Top Ribbon Admin Drop Down Font Colour*/
.o365cs-nav-contextMenu.o365spo .o365cs-contextMenuItem
{
color:white !important
}
/* Office 365 Top Ribbon Settings and Help */
.o365button
{
background-color:black !important;
color:white !important
}
/* Office 365 Top Ribbon Profile Text 1 */
.o365cs-base .ms-fcl-ns, .ms-fcl-np .o365cs-base .ms-fcl-ns-h:hover
{
color:white !Important
}
/* Office 365 Top Ribbon Profile Text 2 */
.o365cs-base .ms-fcl-np, .o365cs-base .ms-fcl-np-h:hover
{
color:white !Important
}
/* [ReplaceBGImage] */
.ms-backgroundImage
{
background-image:url(‘Enter Your File URL for an Image.Jpeg’) !Important ;
}
/* Main Body of Contents */
#s4-bodyContainer
{
margin-left:70px !important;
background-color:rgba( 239,239,239,0.78 ) !important ;
width:90% !important;
min-height:700px !important;
}
/* Background image color, this goes over the background image*/
.ms-core-overlay
{
background-color: transparent !Important
}
/* Due to the Content Width some List/Libraries may go off the page so need to add the overflow Y to auto */
#contentBox
{
-ms-overflow-y:auto !Important;
height:auto !important;
min-height:600px;
}*/
