Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
The place for more technical questions for those who want to create new pagetypes or bespoke functionality.
  • Page:
  • 1

TOPIC: Branding Themes and adding a logo

Branding Themes and adding a logo 4 years 1 week ago #4134

  • mnutbeem
  • mnutbeem's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 6
  • Thank you received: 0
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?

Please Log in or Create an account to join the conversation.

Branding Themes and adding a logo 4 years 1 week ago #4135

  • ronm
  • ronm's Avatar
  • Offline
  • Administrator
  • Administrator
  • Posts: 639
  • Thank you received: 170
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
Xerte developer & trainer
e-learning & m-learning consultant
mitchellmedia.co.uk | xerteacademy.com | learningapps.co.uk
Need direct commercial support with Xerte? mitchellmedia.co.uk/contact/
The following user(s) said Thank You: mnutbeem

Please Log in or Create an account to join the conversation.

Branding Themes and adding a logo 4 years 1 week ago #4136

  • Fay
  • Fay's Avatar
  • Offline
  • Gold Boarder
  • Gold Boarder
  • Posts: 177
  • Thank you received: 60
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:
'<img src="' + x_themePath + 'btnTopPurple/icon.png">'

I hope this helps
The following user(s) said Thank You: mnutbeem

Please Log in or Create an account to join the conversation.

Branding Themes and adding a logo 4 years 1 week ago #4137

  • Fay
  • Fay's Avatar
  • Offline
  • Gold Boarder
  • Gold Boarder
  • Posts: 177
  • Thank you received: 60
Oh, didn't notice Ron giving similar advice!

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: jjs
Time to create page: 0.044 seconds
Copyright © 2020 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search