I am trying to implement custom CSS onto my webpage. Currently, I have a webpage which contains a single web block which is inherited from another module, which contains all my form data. It looks like this on service studio:
However, when I open this page on a web screen, all the custom formatting disappears:
Any idea why this might be happening? I have applied the same style sheet to both the web page and the web block it inherits from and it still has no formatting.
Hi Jason,
Can you please attach the css you applied?
Thanks,
Chris
Christopher Bautista wrote:
Jason Zhao wrote:
Hey Jason,
Try to replace the double quotes with single.
No luck unfortunately.
Hey jason,
Can you please attach a OML?
Hello just a couple of questions
Did you refresh your browser cach after change css?
Are you WebBlock css distinct from the base theme and screen css since in outssytems the css are loaded in the follow order webblock > Theme > Screen So there is a change that you CSS are being overlapped
The file you send us is just common stylling did you replicate this in webblock or are this the styles you find on the screen?
BR
Carlos Gonçalves wrote:
I tried the refresh and it didn't work.
I don't think the css is being overlapped because the fonts and colours I've set are custom and they show on the screen - it's just the margin formatting/positioning of the elements that aren't working.
When you right click->inspect any of the elements in your browser, can you see the CSS that is supposed to be applied?
This is the Firefox UI but other browsers will be very similar. Whatever is crossed out is being overriden by another CSS statement. Something is most likely overriding your styles, and this will be the quickest way to see what is responsible.
@jason Your css file is not called so that you are facing this issue, In the Ui flow mention which theme you placed that css, else you can copy and paste the css inside that webblock , For adding the css in the webblock , I have attached a screenshot for your reference.
@Jason Initially Need to check default theme on module and after that check theme on UI flow.
Set the theme in which you have your related CSS.
in another way you can put your CSS on the screen in which web block is called. No need to put CSS on web block.
Thanks
Ankit