Branding Themes and adding a logo

Hi all,

I'm currently investigating creating branded themes (specifically for content that may end up being used externally to the institution).

Duplicating a theme, renaming and changing the CSS in terms of 'approved colours' has been fine, but I've drawn a blank when it comes to adding a logo. My CSS is pretty rusty so reaching out for any helpful tips in how to approach this.

I know that a user can manually add an icon to a header, but how can I do that at a theme level?

You can easily use something like background-image:(url(); if you want to use just css but it depends where you want the logo to appear and how you want to control the display of the logo in relation to other elements at different resolutions etc. You'll probably need to use media queries so there isn't any overlap with header text etc
Alternatively each of the included themes also has a .js file (mostly empty by default) where you can use jquery to add additional elements. Have a look at the btnTopPurple theme and btnTopPurple.js as an example. In that case not adding a logo but how to add/move elements around.
HTH
Ron

Hi Martin

I haven't done this myself so someone might come along with a better answer.

You can include a js file in the theme folder to make changes to the interface that can't be done with just css (you can see an example in the theme 'btnTopPurple' where there's a js file used to move the buttons from the footer bar to the header). You could use javascript/jquery in this file to insert a div or img tag into the header and then put the image in there. You would need to save your icon image in the theme folder and the file path to the image would have to use this format:

I hope this helps

Oh, didn't notice Ron giving similar advice!