It is very common for websites to have a company logo near the top left corner of the page that links to the home page of the site. We’ll look at how to use CSS to create this element on all MOSS pages of a site. The best part about this method is that the master pages do not need to be modified. You can make the code changes once in a CSS file and all the pages, even admin pages, will contain the logo and link.
This works because it only uses elements that are already on all of the master pages and just changes their appearance. The logo is added as a background to the main table, and the first anchor from the top left breadcrumb is used to create the link to the home page.
Here is how the site looks before any custom styling is added:
MOSS pages have a main table with several rows. The first row contains links on top of a background color. In order to style the site with a logo, we will remove these elements and add the logo as the background of the main table with CSS. The second row contains a Title Image and Global Title. The first step is to [A] remove the background color from the top row, [B] hide the Title Image and Site Title in the second row, and [C] increase the height of the second row to create more room for an average-sized logo. All of that can be accomplished by placing these three lines of code in an alternate CSS file.
.ms-globalbreadcrumb {
background-color:transparent;}
h1.ms-sitetitle, td.ms-titleimagearea {
display:none;
}
.ms-globalTitleArea {
height:65px;
vertical-align:top;
}
How it works: “ms-globalbreadcrumb” is the CSS style class that SharePoint has given to the top-row cell of the main table on all pages. The default CSS file (core.css) for SharePoint defines this class as having a light blue background color. The first line of CSS in the code given above will over-ride that style definition by setting the background color to “transparent.” This will allow the logo to show through once it is placed as the background image of the main table.
MOSS sites have a Site Title and Title Image. The second line of CSS in the code above tells the browser to not display those two elements. Notice that you can group CSS classes by separating them with a comma.
The third line of CSS code gives a height to the second row cell of the main table. Also, it styles the cell so that any elements inside of it will align to the top. By default, elements are middle aligned in table cells. Here is how the site looks after the above code is applied:
Next up is the code to place a logo as the background image of the main table. SharePoint has many pages that use the same CSS classes to style them. In order to add the new styling to only the desired pages, the Descendant Selector technique will be used. With this technique CSS code can make the same element appear differently on two different pages. As long as there is something unique about the element, CSS can style the item differently. Sometimes the only thing different about an element from one page to another is the container it is in. In this case, the CSS should place a background image on pages that have a FORM element with an ID of “aspnetForm” that also contains a table with a class of “ms-main.” Pages that do not have this exact HTML structure should not display the logo.
form#aspnetForm table.ms-main {
background-image: url(https://i.msdn.microsoft.com/ms916826.office_sharepointhowtoapplybrand_fig3(en-us,MSDN.10).gif);
background-position: left 10px;
background-repeat: no-repeat;
}
form#aspnetForm table#mainTable {
background-image: none;
}
How it works: The first class in the above CSS code targets the table that has a class of “ms-main” and provides the URL of the background image. Note: For this example logo is an image that is available online, allowing the sample code to work for any system that is connected to the web. Note that a pound sign is used when styling an element with an ID name. A period is used when styling a element with a class name.
In the second line, the position of the background image is determined. The class specifies that the logo is aligned to the left and is ten pixels from the top. This adds some “White Space” between the top of the page and the top of the logo.
The second class in the code above removes the background image on any page that has the FORM of ID “aspnetForm” but contains a table with an ID of “mainTable.” This is for pages such as this Rich HTML Editor pop-up and other pages where the logo is not desirable.
The MOSS page now looks like this:
Next we’ll make the Logo a clickable link. The first link in the top left global breadcrumb will be used to make the logo a clickable link. The trick is to make the anchor a block element with the same height and width as the logo. This will make the anchor as large as the logo so that any click on the logo will be a click on the anchor. The next step is to hide the text of the anchor as well as the rest of the breadcrumb. It is necessary to hide the text above the page because the visibility cannot be set to hidden or display to none without making the link un-clickable. Also, the anchor text color cannot be set to transparent; IE does not support this. Another attempt might be to set the text size to zero; some browsers support this and some do not.
It is necessary to use Descendant Selectors technique so that only a very specific element is targeted and styled.
td.ms-globalbreadcrumb table.ms-globalleft td.ms-globallinks a.ms-sitemapdirectional{
display:block;
height:99px;
width:222px;
}
Notice how four element classes are separated by spaces in the first line of CSS. The result is one style class that targets any anchor tag with the class of “ms-sitemapdirectional” that is in a cell with the class of "ms-globallinks”, that is also in a table that has a class of "ms-globalleft”, that is also in a cell with a class of “ms-globalbreadcrumb.” Only the anchors in the top left breadcrumb meet those requirements, so no other elements will be effected.
Here is how it looks after the above code is added and applied:
How it works: At this point the structure falls apart a little bit, but it can be corrected. By default the anchor element is an in-line element and not a block element. Since we want to control the width and height of the anchor we start by changing to a block element with display:block. If the style class did not change the display from inline to block then the anchor would not obey any height or width setting.
The image above shows that all of the anchors in the breadcrumb became block level elements. As block level elements they stack up and no longer line up like they did as inline elements. To get the desired effect the rest of the breadcrumb beyond the first anchor will need to be hidden. The anchors are contained by a div. The height and width of that div will be set to the same size of the logo and any overflow will be hidden.
td.ms-globalbreadcrumb table.ms-globalleft td.ms-globallinks div{
height:99px;
width:222px;
overflow:hidden;
position:absolute;}
The last thing to do is move the whole thing up so that the text of the anchor does not show and so that the logo can seem like the element that is a link. The code already specifies that the div should be positioned absolutely. This takes the element and its contents out of the normal flow of the document. Without this the div and breadcrumb anchors would cause the top row that they are in to be 99 pixels high.
So all the code needs at this point is a negative top value of 15 pixels.
td.ms-globalbreadcrumb table.ms-globalleft td.ms-globallinks div{
height:99px;
width:222px;
overflow:hidden;
position:absolute;
top:-15px;
}
Below is the complete set of CSS code that will style any default master pages in the MOSS site. I have linked the images to content on the web so that it should work for you as you test it out with an internet connection. I have wrapped in a style tag so that you can copy and paste it into a CEWP to try it out on a single page.
<style type="text/css">
.ms-globalbreadcrumb {
background-color:transparent;
}
h1.ms-sitetitle,td.ms-titleimagearea {
display:none;}
.ms-globalTitleArea {
height:65px;
vertical-align:top;
}
form#aspnetForm table.ms-main{
background-image:url(https://i.msdn.microsoft.com/ms916826.office_sharepointhowtoapplybrand_fig3(en-us,MSDN.10).gif);
background-position:left 10px;
background-repeat:no-repeat;
}
form#aspnetForm table#mainTable{background-image:none;
}
td.ms-globalbreadcrumb table.ms-globalleft td.ms-globallinks a.ms-sitemapdirectional{
display:block;
height:99px;
width:222px;
}
td.ms-globalbreadcrumb table.ms-globalleft td.ms-globallinks div{
height:99px;
width:222px;
overflow:hidden;
position:absolute;
top:-15px;
}
</style>
