How to remove rules from css/app.css with my css file? |
How to remove rules from css/app.css with my css file? |
nilovsergey |
Jul 15 2023, 11:46 AM
Post
#1
|
Newbie Group: Members Posts: 10 Joined: 15-July 23 Member No.: 28,988 |
In laravel 8/ coreui 3.4 app page news
CODE <x-layouts.news> <x-slot name="title">{{ trans('News') }}</x-slot> ... <div class="news-content">{!! \Purifier::clean($news->content_shortly) !!}</div> ... </x-layouts.news> is based on common app layout/css with resources/views/layouts/news.blade.php template which has 2 css files include : CODE ... <link rel="stylesheet" href="{{ mix('css/app.css') }}"> <link rel="stylesheet" href="{{ mix('css/news.css') }}"> ... Problem is that when content_shortly of news has <i> and <strong> tags they are not rendered on the form and checking the page in browser I see that these styles are used from parent html * { : https://prnt.sc/tiYMT3I1NFEo I search a way to remove these html * { rules on my page BUT without editing css/app.css, As I encountered this problem when user fills CODE <i> and CODE <strong> tags in ckeditor5 I added at top of my scss CODE strong { font-weight: unset; } i { font-weight: unset; } I tried to add style : CODE html * { font-weight: unset !important; text-decoration: unset !important; font-style: unset !important; } * { font-weight: unset !important; text-decoration: unset !important; font-style: unset !important; } But that also did not help - <i> and <strong> tags are not rendered at all... |
pandy |
Jul 16 2023, 04:44 AM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
I haven't really looked into the unset keyword and don't know how it fairs with inheritance, which would matter in the second example of what you tried. In your first example I think your selector has too low specificity. See if either using a more specific selector or to add !Important helps.
CODE strong { font-weight: unset !Important; } |
Christian J |
Jul 16 2023, 05:07 AM
Post
#3
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
I didn't understand most of the OP (maybe because the screenshots didn't load), but when styling is inherited from a parent element the "unset" keyword may give special results. For example:
CODE h1 {font-weight: normal;} h1 strong {font-weight: unset;} /* Makes STRONG element inherit non-bold styling from parent H1. */ or: CODE p {font-weight: bold;} p strong {font-weight: unset;} /* Makes STRONG element inherit bold styling from parent P. */ See also https://developer.mozilla.org/en-US/docs/Web/CSS/unset |
pandy |
Jul 16 2023, 06:03 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
I figured from one of the OPs tries to override and the screen cap that there are reset rules in play, 'html * ...'. Hence a single element selector wouldn't be enough.
|
nilovsergey |
Jul 16 2023, 09:24 AM
Post
#5
|
Newbie Group: Members Posts: 10 Joined: 15-July 23 Member No.: 28,988 |
I didn't understand most of the OP (maybe because the screenshots didn't load), but when styling is inherited from a parent element the "unset" keyword may give special results. For example: CODE h1 {font-weight: normal;} h1 strong {font-weight: unset;} /* Makes STRONG element inherit non-bold styling from parent H1. */ or: CODE p {font-weight: bold;} p strong {font-weight: unset;} /* Makes STRONG element inherit bold styling from parent P. */ See also https://developer.mozilla.org/en-US/docs/Web/CSS/unset My screenshots are loaded ok. Is my question clear ? |
Christian J |
Jul 16 2023, 09:26 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
I figured from one of the OPs tries to override and the screen cap that there are reset rules in play, 'html * ...'. Hence a single element selector wouldn't be enough. But aren't these (partial) reset styles too: QUOTE CODE html * { font-weight: unset !important; text-decoration: unset !important; font-style: unset !important; } * { font-weight: unset !important; text-decoration: unset !important; font-style: unset !important; } ? Anyway I read now that the STRONG and I elements are not rendered at all: Problem is that when content_shortly of news has <i> and <strong> tags they are not rendered ... But that also did not help - <i> and <strong> tags are not rendered at all... --is that correct? If so "font-weight" or "font-style" should not matter, rather I suppose the CSS to look for would be e.g. "display: none", "visibility: hidden" or using the same text color as the background. |
Christian J |
Jul 16 2023, 09:30 AM
Post
#7
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
|
pandy |
Jul 17 2023, 09:43 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,753 Joined: 9-August 06 Member No.: 6 |
] But aren't these (partial) reset styles too: QUOTE CODE html * { font-weight: unset !important; text-decoration: unset !important; font-style: unset !important; } * { font-weight: unset !important; text-decoration: unset !important; font-style: unset !important; } QUOTE I don't think any value of "font-weight" or "font-style" can prevent text from rendering. Isn't the text showing up at all? I didn't understand that. Sorry. |
Christian J |
Jul 17 2023, 03:43 PM
Post
#9
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
|
Lo-Fi Version | Time is now: 26th September 2024 - 02:08 PM |