For this post, I just wanted to pass along some CSS tidbits I have been using lately on SharePoint Online sites. See below. I have also included a brief explanation in parenthesis next to each comment. Hope you find these helpful.
/* Hide Global Navigation */ (Hide the global, or top level, navigation bar)
#zz11_TopNavigationMenu {
display: none !important;
}
#zz12_TopNavigationMenu {
display: none !important;
}
/* Hide Page Title */ (Hide the page title next to the site logo)
#pageTitle {
display:none;
}
/* Header Banner */ (Use an image to act as the site header banner, and size it as needed)
#s4-titlerow {
background-image: url('/sites/sitename/PublishingImages/image.jpg') !important;
width: 100% !important;
height: 53px !important;
background-repeat: repeat !important;
}
/* Site Logo Size */ (Increase the size of the logo on the site)
.ms-siteicon-img {
max-width: 281px;
max-height: 60px;
}
/* Search Bar */ (Change the background color of the search bar on the site)
.ms-srch-sb {
background-color: white;
}
/* Web Part Headers */ (Change the background color of the web part headers, and the font size, color, and weight (bold) of the web part titles)
.ms-webpart-titleText.ms-webpart-titleText, .ms-webpart-titleText > a {
background-color: #BEBEBE;
font-size: 18px;
font-weight: bold;
color: #0072c6;
padding: 5px 5px;
}
Note: I recommend you use these styles in an external style sheet on your site and reference it in your master page.
