Overwrite a CSS selector

Questions
#1

I am trying to overwrite a Bootstrap Selector called ROOT with some color values of my own.

My css-file is called “global_new.css”

The problem is Bootstap seems to be assigned a higher priority than the same rule inside of my css-file. And I do not see why.

You might be able to help me better understand:

See screenshot here:

2CbTPV.jpg3838×2159 965 KB

See Mod here

At the bottom of my webpage You will find a Facebook-Icon.

I would expect that Facebook-Icon to be colored the way MY root-Values are defined, as I drop in my css AFTER the bootstrap-file. But this is not the way it is: instead bootstrap is coloring the variable-Value. And I do not see why.

What am I missing here?

My global_new.css is loaded BELOW the bootstrap-css-file. So I would expect mine to have higher priority.

What am I missing here? Any Idea?

#2

Hi Stefan, I’m seeing global_new.css above the bootstrap tag when I load the page. Dragging it below as you suggested will cause the color to change to your blue.

#3

Hi Tyler, that is interesting indeed. If I call the source-code of my page I see global_new.css below the bootstrap css-tag when I load the page. so we do not see the same thing. I will try to investigate further.

#4

I was not yet aware I can indeed simply drag and drop tags within the crome-inspector. That is an interesting additional learning for me! Nice side-effect of our talk! I did drag&drop the css and I can thus confirm the following: A: the global_new.css is indeed unwantedly loaded ABOVE the bootstrap-tag on pageload. B: Once I drag my CSS-file below the bootstrap.css I can also confirm my Elements color changes to blue as desired. BUT: I can also confirm inside my Local HTML file, the order will be DIFFERENT! While we both see bootstrap loaded below my css-file (after the page has finished loading inside the chrome-Webbrowser!) this is not the case if you look at the source-code of my html-file!! Please take a look into the source-code and let me know if you can confirm the global_new.css to be located BELOW the bootstrap inside my html-file. If you can confirm on this , then my question remains as to “IF & WHY” anymod is responsible for the replacement of those files. The oder of the css Files seems to be modified while the page gets loaded. Can you confirm? watch for the location of the global_new.css

#5

okay, here is further feedback on this:

I realized there is no recommendation anymore within the console, to add Libaries to the head of my page.

But at the same time, I missed to have the bootstrap css added to the head section , thus anymod dynamically added the bootstrap BELOW my global_news.css. Thus , that css error ocurred

That leaves me with two assumptions regarding errors inside your anymod code:

One: The recommendations inside the console seem to no longer work as they used to

two: missing libaries will be injected dynamically on pageload and they seem to be injected pretty much at the bottom of the head-section. Which is too far down in my case, as I need my own css files to come last.

I described my assumptions within 10 posts ( see above ). Please let me know if you can confirm the assumtions I concluded.

#6

Hi Stefan, you are correct that libraries are loaded at the bottom of the head, unless they are already on the page. That lets you place them wherever you need them in special instances like this one.

I’m not 100% sure why the console messages aren’t showing for you. They are still showing in our test cases, so we will investigate. It may be related to the long delay before the page loads, but we will check!

#7

Hmmm… If anymod css libaries are loaded at the bottom of the head, (unless they are already on the page) then that means their values will have more priority than my personal css. So I will be forced to define the Selectors more specifically and am on a higher risk of beeing outruled than I was if the CSS was added at the top of the Head-section. Cannot judge about this. But to me it spontaneously feels counterintuitive to add the anymod css files to the bottom of the Head section. I did not understand the following sentence within your reply “That lets you place them wherever you need them in special instances like this one.” How can I place those added libaries wherever I need them? Can I influende the place where those libaries will be added to the head?

#8

Yes, if you add the style & script tags to the head yourself, they will not be moved.

#9

I feel it is not ideal for anymod to add libaries at the bottom of the head. If you added them to the top of the head section dynamically on pageload, you could make sure any Customly defined selectors ( inside custom css files) will not get overwritten accidentially , if they have the same importance than the anymod-bootstrap.css selecors

Secondly: I tested the <!-- Anymod assets recommendation --> again and those console-recommendations seem to still not work as they used to. This is just a reminder because inside our ticket we dealt with several issues. I was not sure if this side-topic might eventually have dropped off the table.

#10

Hi Stefan, you have a fair point about the placement of the CSS tags. Rather than placing at the top of the head, we are thinking it could make sense to place just below wherever the Anymod script is placed. That way you could still but your own styling tags either above or below. Would that cover your needs?

For the asset recommendation issue, do you have a URL where it isn’t working? We haven’t been able to replicate the issue yet.

#11

So it will only suggest that you add the assets for those priority mods"

You probably refer to the V2 Script-Tag inside the head-section : priority: [‘nkdabn’, ‘albmmm’],

Okay, so would you want me to test if your assumtion is true ?

yes, your assumption is true. Let me now if I need to decide between Priority-Mods versus Asset-Notifications.

ps: I merely tested on localhost

#12

We ran a similar test to verify that was the behavior, but if you want to run a test on your own site that would be great

You still receive the asset notifications, but only for the priority mods

#13

Ah, interesting! The asset notifications only refer to the priority-mods solely, as soon as a priority-mod is defined.

Let me now if I need to decide between Priority-Mods versus Asset-Notifications.

#14

Yes, that is to ensure that the priority mods are loaded as fast as possible

#15

I cannot see why the Asset-Notifications inside of the console would cause the page-load-time to increase, but maybe it does. Never mind. IF I can only either have priority loading OR Notifications, I would go for the notifications, at least for the moment.

#16

It is not the asset notification that causes the page load to increase – it would be adding the additional assets for the other mods that would do so.

If you added the assets for non-priority mods, the browser would download them before the priority mods are rendered. This would cause the priority mods to load later.

The page load time is the roughly same either way, but with priority mods set you are loading the priority mods and their assets before everything else.

#17

I see. so anymods recommedation is to only load those libaries in the head which are needed for prio-Mods. All other mods-ibaries are recommended to better be rnderes into the head dynamically via anymod. Hmm… Okay… This will make it even more important to make sure the anymod.non.priority.CSS.Files are located at the right place inside the head. If I understood you correctly they will be added the very place where the V2 Script is located, am I right?

#18

Yes, you are correct

#19

thank you for your support

:wink:

1 Like