cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
marthazumack
Community Contributor

Theme editor: Watermark

I've used custom CSS to prevent our watermark from being hidden under pages, menus, etc in the past, using the following most recently: 
.ic-Layout-watermark::before {top:45px}

Recently this has stopped working - though if I test out the addition of {top:45px} to the .ic-Layout-watermark block using Chrome developper tools, it works fine. 

Is there something obvious I'm missing? Has anyone else used custom CSS to adjust the Theme editor watermark?

15 Replies
kmeeusen
Community Coach
Community Coach

Hi  @marthazumack ‌

I certainly do not know the answer to this tricksie question, so I will share it with the https://community.canvaslms.com/groups/canvas-developers?sr=search&searchId=60e3550c-a329-400a-8457-...‌ group where there are folks who do know things.

Kelley

marthazumack
Community Contributor

Thanks!

stuart_ryan
Community Coach
Community Coach

Hi  @marthazumack ,

I haven't had a chance to test this, however I was curious, have you tried to test it in isolation at all (for example remove all the other CSS changes on a test server) and just use that one, to see if it works or not.

Also, I am always an advocate of quickly running your custom CSS through something like the The W3C CSS Validation Service. It can let you know if you might have something in there that is invalid (such as not correctly closing something off as an example).

If both of those check out, please let me know and I will try to spend a little time to spin this up in a test instance and see if I can replicate the behaviour.

Look forward to hearing from you.

Stuart

Hi  @stuart_ryan 

I hadn't thought to test the code in isolation, but unfortunately that didn't give any different results.

(I had previously validated the CSS but did so again - good idea! - and it still passed Smiley Happy )

Thanks for taking the time to reply!

stuart_ryan
Community Coach
Community Coach

Hi  @marthazumack ,

I wanted to know, when you say it isn't working, do you mean it lets you submit on the theme editor, and then no changes are apparent, or do you mean that the CSS won't let you submit in the theme editor.

I did some tinkering with this and every time I tried to address the .ic-Layout-watermark class, I was unable to submit the CSS file (the theme editor could not render, and hence would not save).

I am curious if you would be willing to share your CSS file that you are currently using for me to have a play with in our test environment please?

Cheers,

Stuart

Hi  @stuart_ryan 

The file definitely uploaded, it just didn't have any effect. Here's the CSS file I'm using (with all the extra bits still in there). I'll be curious to hear if it even works!

Best wishes

Martha

Hi  @marthazumack ,

I think something is definitely astray and I am looking into this further. Each time I try to upload the file in our environment, the preview editor is simply unable to process the file and I can never submit it (to even test).

I will let you know how I go, I am just checking with support to see if we have any issues on our environment side so I can get to testing this and help with a fix.

Cheers,

Stuart

Hi  @marthazumack ,

All righty, turns out, when I first attempted this, I encountered a bug in the beta environments stopping me from uploading the CSV. With the help of the support team, I managed to overcome that.

Now, I have had a play and I wonder if the following line of code achieves what you want:

.ic-Layout-watermark {top:45px}

I have removed the ::before and it works as I believe you intended? If not please let me know and I can have another look.

Hope that helps,

Stuart

Hi,

Thanks for continuing to look into this!

So you're right that the code does something (it hadn't done anything last week, so I wonder if there was a problem with the beta environments in general?)!

However it doesn't do what I want it to do, or what it use id to do! I want it to add space on top of the watermark so it's not covered up by text. That line does that when using Chrome developer tools, but behaves differently when uploaded to Canvas.

What I want it to look like (what it does with code using Chrome developer tools) [edited to add this link which seems to have disappeared in the posting...]

What it looks like without the CSS

What the CSS does (this is harder to see how the watermark has moved up, due to the pink banner at the bottom...)

I've tried changing the padding but had no luck. Do you have any other ideas of elements or attributes to try?

Again, thank you!

Martha