Re: Blazor css overrides

[Greg Keogh via ozdotnet]

>
> I recall doing something similar in the past but I believe I gave each
> client their own entire css. So app.css by default OR use the client’s css
> if the config value is passed (via querystring or whatever).
>

I was thinking of that as the best choice. If t=company is specified then
I'll insert a link to a complete css file in their storage, falling back to
a local app.css. They have complete control of the styling that way.
EXCEPT... if we invent new styles, which is quite possible, foreign copies
will need to be synchronised, which is fragile. Maybe not the best choice
after all.

I don’t see a problem with using !important if it guarantees it and they do
> it always. If they don’t want to then the alternative above may suit.
>

Articles tell you to never use !important in public shared css files, but
since the customer's overrides are the top of the food chain, then maybe
it's acceptable.


> I’ve never bothered going down the rabbit hole of css to be honest.
>

That's putting it politely. If I bothered to learn all about css then it
would certainly displace other knowledge from my brain that is more
valuable.

*Greg*


>
>
> On Fri, 1 Dec 2023 at 15:53, Greg Keogh via ozdotnet <
> ozdotnet@ozdotnet.com> wrote:
>
>> Folks, TGIF
>>
>> Our Blazor app has a simple classic shape with a local wwwroot/app.css
>> file containing all the styles for the app. I had to allow people to
>> customise the appearance, and my way of doing that works, but not as
>> smoothly as I hoped and I think someone might be able to suggest a better
>> more elegant technique.
>>
>> If someone starts the app with query parameter ?t=contoso then the
>> startup code appends a line like this into the 
>>
>> https://*somecompany*.
>> blob.core.windows.net/*myapp*/*contoso.css*">
>>
>> They can edit this external css file and override selectors without
>> touching the original app's files. Firstly ... is this sensible? It works,
>> but there is a problem.
>>
>> To override a certain colour they have to code something like this:
>>
>> .HeadLinkSel { background-color: BlueViolet !important; }
>>
>> Note how the !important is needed, sometimes. I can't figure out why
>> yet, but !important needs to be added to the overrides most of the time. I
>> thought that the last selector override all previous identical ones, and
>> it's really irritating and confuses people settings the overrides. Can
>> anyone explain this?
>>
>> Maybe my whole technique is flawed and naïve. I'm keen for suggestions or
>> links to recommended techniques for doing this sort of thing.
>>
>> Cheers,
>> *Greg Keogh*
>> --
>> ozdotnet mailing list
>> To manage your subscription, access archives:
>> https://codify.mailman3.com/
>
> --
> ozdotnet mailing list
> To manage your subscription, access archives: https://codify.mailman3.com/
-- 
ozdotnet mailing list 
To manage your subscription, access archives: https://codify.mailman3.com/ 

Re: Blazor css overrides

[Tony McGee via ozdotnet]

It's not always the last selector that overrides previous ones.
You're probably running into specificity issues from the original 
stylesheet, and the !important is nuking them from orbit, to be sure. 
Using !important isn't a great solution in general terms, but for this 
use case is probably fine.


https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity


On 1/12/2023 14:50, Greg Keogh via ozdotnet wrote:

Folks, TGIF

Our Blazor app has a simple classic shape with a local wwwroot/app.css 
file containing all the styles for the app. I had to allow people to 
customise the appearance, and my way of doing that works, but not as 
smoothly as I hoped and I think someone might be able to suggest a 
better more elegant technique.


If someone starts the app with query parameter ?t=contoso then the 
startup code appends a line like this into the 


href="https:///somecompany/.blob.core.windows.net/ 
/myapp//_contoso.css_">


They can edit this external css file and override selectors without 
touching the original app's files. Firstly ... is this sensible? It 
works, but there is a problem.


To override a certain colour they have to code something like this:

.HeadLinkSel { background-color: BlueViolet !important; }

Note how the !important is needed, sometimes. I can't figure out why 
yet, but !important needs to be added to the overrides most of the 
time. I thought that the last selector override all previous identical 
ones, and it's really irritating and confuses people settings the 
overrides. Can anyone explain this?


Maybe my whole technique is flawed and naïve. I'm keen for suggestions 
or links to recommended techniques for doing this sort of thing.


Cheers,
/Greg Keogh/

-- 
ozdotnet mailing list 
To manage your subscription, access archives: https://codify.mailman3.com/ 

Re: Blazor css overrides

[DotNet Dude via ozdotnet]

I recall doing something similar in the past but I believe I gave each
client their own entire css. So app.css by default OR use the client’s css
if the config value is passed (via querystring or whatever).

I don’t see a problem with using !important if it guarantees it and they do
it always. If they don’t want to then the alternative above may suit.

I’ve never bothered going down the rabbit hole of css to be honest.


On Fri, 1 Dec 2023 at 15:53, Greg Keogh via ozdotnet 
wrote:

> Folks, TGIF
>
> Our Blazor app has a simple classic shape with a local wwwroot/app.css
> file containing all the styles for the app. I had to allow people to
> customise the appearance, and my way of doing that works, but not as
> smoothly as I hoped and I think someone might be able to suggest a better
> more elegant technique.
>
> If someone starts the app with query parameter ?t=contoso then the
> startup code appends a line like this into the 
>
> https://*somecompany*.
> blob.core.windows.net/*myapp*/*contoso.css*">
>
> They can edit this external css file and override selectors without
> touching the original app's files. Firstly ... is this sensible? It works,
> but there is a problem.
>
> To override a certain colour they have to code something like this:
>
> .HeadLinkSel { background-color: BlueViolet !important; }
>
> Note how the !important is needed, sometimes. I can't figure out why yet,
> but !important needs to be added to the overrides most of the time. I
> thought that the last selector override all previous identical ones, and
> it's really irritating and confuses people settings the overrides. Can
> anyone explain this?
>
> Maybe my whole technique is flawed and naïve. I'm keen for suggestions or
> links to recommended techniques for doing this sort of thing.
>
> Cheers,
> *Greg Keogh*
> --
> ozdotnet mailing list
> To manage your subscription, access archives: https://codify.mailman3.com/
-- 
ozdotnet mailing list 
To manage your subscription, access archives: https://codify.mailman3.com/ 

RE: Blazor css overrides

[David Kean via ozdotnet]

I just use Chrome's css tools to tell me the order in which things are getting 
evaluated.

From: Greg Keogh via ozdotnet 
Sent: Friday, December 1, 2023 3:51 PM
To: ozDotNet 
Cc: Greg Keogh 
Subject: Blazor css overrides

Folks, TGIF

Our Blazor app has a simple classic shape with a local wwwroot/app.css file 
containing all the styles for the app. I had to allow people to customise the 
appearance, and my way of doing that works, but not as smoothly as I hoped and 
I think someone might be able to suggest a better more elegant technique.

If someone starts the app with query parameter ?t=contoso then the startup code 
appends a line like this into the 

https://somecompany.blob.core.windows.net/<http://blob.core.windows.net/>myapp/contoso.css">

They can edit this external css file and override selectors without touching 
the original app's files. Firstly ... is this sensible? It works, but there is 
a problem.

To override a certain colour they have to code something like this:

.HeadLinkSel { background-color: BlueViolet !important; }

Note how the !important is needed, sometimes. I can't figure out why yet, but 
!important needs to be added to the overrides most of the time. I thought that 
the last selector override all previous identical ones, and it's really 
irritating and confuses people settings the overrides. Can anyone explain this?

Maybe my whole technique is flawed and naïve. I'm keen for suggestions or links 
to recommended techniques for doing this sort of thing.

Cheers,
Greg Keogh
-- 
ozdotnet mailing list 
To manage your subscription, access archives: https://codify.mailman3.com/ 

Blazor css overrides

[Greg Keogh via ozdotnet]

Folks, TGIF

Our Blazor app has a simple classic shape with a local wwwroot/app.css file
containing all the styles for the app. I had to allow people to customise
the appearance, and my way of doing that works, but not as smoothly as I
hoped and I think someone might be able to suggest a better more elegant
technique.

If someone starts the app with query parameter ?t=contoso then the startup
code appends a line like this into the 

https://*somecompany*.
blob.core.windows.net/*myapp*/*contoso.css*">

They can edit this external css file and override selectors without
touching the original app's files. Firstly ... is this sensible? It works,
but there is a problem.

To override a certain colour they have to code something like this:

.HeadLinkSel { background-color: BlueViolet !important; }

Note how the !important is needed, sometimes. I can't figure out why yet,
but !important needs to be added to the overrides most of the time. I
thought that the last selector override all previous identical ones, and
it's really irritating and confuses people settings the overrides. Can
anyone explain this?

Maybe my whole technique is flawed and naïve. I'm keen for suggestions or
links to recommended techniques for doing this sort of thing.

Cheers,
*Greg Keogh*
-- 
ozdotnet mailing list 
To manage your subscription, access archives: https://codify.mailman3.com/