Branding the CMS

Branding the CMS

Adding some elementary 'branding' to the CMS is easy, though there are some issues that are addressed near the bottom of this page. To start just add the following to your mysite/_config.php:

/*
 * The logo in the mainmenubar (upper right corner)
 * the second param adds some extra stylers to the 
 * div with id="Logo"
 */
LeftAndMain::setLogo(
	'mysite/images/MyLogo.png',
	'width: 26px; height:34px;margin-right:10px;'
);

/*
 * param 1: the application name. 
 * param 2: linktext (upper right corner)
 * param 3: link href (upper right corner)
 */
LeftAndMain::setApplicationName(
	'SilverStripe CMS',                
	'Visit us here',  
	'http://www.mywebsite.xx'
);

Note: the application name is somewhat ambiguous: in version 2.3 you can change it, but the way it is referred to from within code makes it clear that it should remain something like SilverStripe CMS, and changing it seems to serve no higher purpose... In version 2.4 it doesn't seem to be used at all, as the first page of the CMS, where it was isplayed, is now all for the SiteConfig..

Bug: the default logo is still visible

If, after all this, the default SilverStripe logo is still visible in the top right corner of the CMS, it is because the default SilverStripe logo is loaded as background image to the link itself. The new custom logo however, becomes the background image to the div that wraps the link, so it is displayed behind the default logo. Quick hack for now: edit the cms layout stylesheet... :(

/cms/css/layout.css (around line 255)

...
#top #Logo a {
  margin: 0;
  display: block;
  font-size: 14px;
  text-decoration: none;
  height: 26px;
  line-height: 22px;
  position: absolute;
  top: 5px;
  right: 8px;
  padding-right: 34px;
  /* Remove the links background image
  background: url(../images/mainmenu/logo.gif) right top no-repeat; */
  color: #fff;
}
/* hovering creates a background color, that doesn't
   work well with the new logo, so let's change it */
#top #Logo a:hover {
  background: transparent;
  color: #f7931e;
}
...

OK, don't hack it...

This should really NOT go into the cms/css/layout.css stylesheet, as Dave pointed out (see his solution using the themes typography in the comment below). I just now remembered lately I added this tweak to my new CMS skin (see Skinning the CMS):

#top #Logo a {
	background: transparent;  /* remove SilverStripe logo obstructing branded logo */
}
#top #Logo a:hover {
	background: transparent; 
	color: #fbb444;
}

Comments

  • Thanks :-) You're right - it shouldn't really go into the layout.css file. I recently added it to my CMS skin stylesheet (see 'skinning the CMS') , and that works quite well too...

    Verstuurd door Martine, 20/10/2011 12:55pm (6 jaar geleden)

  • Good work! This little snippet helped me out a lot. I'm using 2.4.5

    You can remove the logo via css with out editing the core css file.
    In your themes/myTheme folder edit your typography.css add the following at the end of the file:
    #top #Logo a {
    background-image: none;
    }

    I didn't have a hover issue, but you can add this just under what we just added:
    #top #Logo a:hover {
    background: transparent;
    color: #f7931e;
    }

    That way, when you upgrade your core files you don't have to "fix" it again.

    Verstuurd door Dave, 19/10/2011 8:33pm (6 jaar geleden)

Het versturen van reacties is uitgeschakeld.

RSS feed voor reacties op deze pagina