Canvas styling

Canvas Canvas Questions
1

What the best way to change the Canvas default styling.

Currently I’m just changing the app.css file. Is this best practice, or should I be building my own style sheet and using that.

As an example I can change the colour of the main page by adding a background colour to the #wrapper style in app.css.

#wrapper {
    width: 100%;
    background-color: #262931;
}

I am seeing that on some copies of Chrome, it is ignoring this background attribute.

Brian

2

Hi @bknott,

You can utilize built-in Bootstrap themes in there via Canvas’ admin page:

Pasted image753×330 12.1 KB

Or on what you were updating in the above, it should be in the css\style.css file and not on the app.css as this will be overwritten during upgrade.

You can also append your own css file if you want to.

Then regarding the CSS, there might be other styles in there for that ID, so try to put !important on the target style.

So the above would look like this:

#wrapper {
    width: 100% !important;
    background-color: #262931 !important;
}

Checkout CSS topics too regarding Specificity or CSS rule style priorities for more information on these.

Cheers!

–
Paul

3

Thanks @plim. I created my own bootstrap CSS folder and file. it now appears as a Canvas theme. Will upgrades remove this extra directory.

Brian

4

Hi @bknott,

Everything under assets folder will be refreshed on each upgrade.

We will take a note of this. In the meanwhile, just copy your bootstrap folder/file into where it is currently at on the next upgrade.

–
Paul