Changing The CSS Of Your Curatr

Whilst it is possible (and very easy) to change the look of your Curatr site, sometimes you may wish to go a step further by changing the CSS of your site.

.........

[ !-- DISCLAIMER --!] Only use the CSS section of the Curatr admin if you're confident in your CSS knowledge as errors can lead to unwanted results in the Curatr Front End. 

Here are a few things you are able to change in Curatr using the CSS in the Services section of the Admin. (see steps 1-3 in the screenshot below to access your CSS settings)

 

Banners 

For banners in Curatr you can use the class name .banner.hidden-phone which refers to the banner on the home page. With this you can change the way the banner behaves e.g making it a fixed width as opposed to 100%.

The class name for Level and Objects is #the-stage .banner-list .banner As with the class above you can alter the behaviour of the banner.

Finally you can do the same to the banners within the course boxes on the homepage of Curatr using .section .image-header .banner

 

Course Level Buttons (Curatr Homepage)

The level buttons appear on the homepage on create and are the small circles at the bottom of each course object. The class reference for these are:

.list-content .items .list-item .level-buttons a.current this refers to the state of a level when it's available but hasn't been completed.

.list-content .items .list-item .level-buttons a.complete this refers to the state of a level when it's completed. You should only change the colours of these items as any other alterations will disrupt the UI that Curatr is build upon. 

These may need a !important value when changing the colours for the change to take effect.

 

Level & Object Complete/Incomplete

To change the colours of the level complete/incomplete bar at the bottom of the cards .level-item.unlocked .card for incomplete and .level-item.completed .card for complete.

To change the colours of the level complete/incomplete bar at the bottom of the cards .list-content .items .object-item .card for incomplete and .list-content .items .object-item .card.complete for complete.

 

[!-- It's important to keep in mind when altering colours relating to completion; you make sure that the end user makes the connection that the colour you are choosing relates to the completion of the level. For example using red as a completion colour may not be advisable as this is a colour that is widely used to symbolise stop/error/warning which may cause confusion. --!]

 

[ !-- DISCLAIMER --!] Only use the CSS section of the Curatr admin if you're confident in your CSS knowledge as errors can lead to unwanted results in the Curatr Front End. 

 

Have more questions? Submit a request

Comments

Powered by Zendesk