I have a drupal 8 site.
I have created a subtheme and altered the css of this subtheme.
My modification are showing and working fine in chrome and firefox but in internet explorer 11 and Edge it doesn work.
for instance this css code:
a,
a:hover,
a:active,
a:visited {
color: #f4512c;
}
When I inspect the given element, i see the css properties of style.css being applied, but they are overridde by scaffolding.less..
How comes?
When I use !Important it is applied, but I would rather not use that !Important...
The code is fine, and should work on IE11 and Edge.
If you have opened the page with Edge before, the old stylesheet might still be cached in the browser.
To make sure you dont get cached contents do the following:
In Edge press F12 -> Go to Network tab -> Check "always reload from server" (4th icon to the left) -> Reload the page
You can also inspect the in the "elements" tab, and search for the stylesheet. You can open the stylesheet itselt and look for your new styles. This way you can see if you the correct stylesheet is being loaded.
Edit:
The styling from Bootstrap is overwriting the code because it uses more specific selectors. You can add a class to your element, and use that selector, or you prepend it like so: body a { ... } Here is more about specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/specificity
Related
The :not pseudo-class is used to append an svg icon to all linked elements in a website which link to external sites. I need help disabling the :not pseudo-class declaration on linked social icons generated by a page builder.
The website is comprised of my own HTML, CSS and script for the homepage and the rest of the website is generated by Elementor; a WordPress page builder. The page builder is configured to use my style.css file which contains the :not pseudo-class implementation and I can target whatever the page builder generates using script.
The page builder generates the HTML and CSS for linked social icons. When the page is constructed in the browser the :not pseudo-class appends the svg icon to the linked social icons generated by the page builder and the social icons are visually mangled by the appended svg icon.
Everybody knows Facebook and LinkedIn are external sites and the social icon links do not need the svg iconography which I've been unable to disable hence coming here for help.
I can successfully target the social icons in the page using my CSS and/or my jQuery but the CSS and jQuery I have tried has been unsuccessful to selectivley disable the :not pseudo class.
I have used !important which causes the social icon(s) to disappear in the page.
I have tried to use another transparent svg icon to replace the external link icon but that has not worked out likely because I may be using incorrect CSS.
I've searched stackoverflow and read similar questions as well as having searched the WWW and have not discovered a way to selectively apply the CSS :not pseudo-class declaration.
Noting the proxy href values this snippet is the functioning :not pseudo-class as declared in my style.css file:
/* functional as expected */
a[href ^="https"]:not([href *="the-deployed-website-tld"]):not([href *="the-local-server-tld"]) {
background: transparent url(assets/svg/layout/svg_link-external-11px.svg) no-repeat center right;
padding-right: 16px; }
CSS and the use of attribute selectors can change properties of the social icons but all iterations I have tried have been unsuccessful when attempting to disable or hack the display of the svg icon out of existence:
/* non-functional */
li.eael-team-member-social-link > a[href ^="https://facebook.com"] {
background: none; }
// non-functional
$( "li.eael-team-member-social-link > a[href ^='https://facebook.com']" ).css( "background", "none" );
Can the :not pseudo-class be selectively disabled such that it need not affect the social icons generated by the page builder while still serving its purpose to indicate links in the page go to external websites? If so how?
Sometimes I (we) overthink a problem and the solution is staring me (us) in the face. I realized that this afternoon and now provide an answer to my own question.
The :not pseudo-class supports chaining as my snippet example above shows so what I realized is all one needs to do to prevent the external icons from being appended to social icons linking to external sites (or any other external site) is add those TLDs to the chain as follows:
a[href ^="https"]:not([href *="the-deployed-website-tld"]):not([href *="the-local-server-tld"]):not([href *="facebook.com"]):not([href *="linkedin.com"])
NOTE: I googled and checked the FAQ about marking my own answer to my own question. When my answer was submitted a notification told me I can return tomorrow to mark it as a correct answer. Which I will do.
I load a page in internet explorer 7 (with compatibility mode). The css is loading correctly as i see from the inspect element feature. The problem is that some rules (like for example float:left ) are not applied immediately to the page But they are applied in case I change Anything on the developer tools. For example if i disable and re-enable any rule in the css throught the inspect element, the css gets applied correctly!! Is there anything i can do for that?
For example, an anchor tag, if not explicitly given a style, already has a style. It is blue, it goes purple when visited, and changes the cursor on hover.
Where does Chrome load these styles from?
Is there a Google Chrome style-sheet on my computer, or accessed by chrome through a rel link that has entries like :
...
a.visited {
color:purple; /* just because */
}
a.hover {
cursor:pointer;
}
... /* dozens of other CSS styles */
Where can I find this Google Chrome style-sheet file, or online resource?
Ideally, something like : chrome://internals/styles
Or something like : http://cdn.google.com/chrome/html.css
All browsers have a user agent stylesheet. This is essentially the default styles that they decide to apply, there are no requirements or official standards, though browsers will always try to behave as you would expect (blue hyperlinks, purple once clicked, etc).
The webkit one can be found here
Other browsers can be found here
When you inspect element you will notice certain styles. For example, Inspect any element on a webpage then click the <head> tag. You will notice the following:
A head is just like any other element so it would normally appear on your web page. Obviously this isn't what developers want, and they certainly don't want to have to hide the head in every stylesheet so the user agent does it for them, as default.
Take a look at these two links.
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Browsers' default CSS for HTML elements
They should help you out a little.
It's easy enough in Chrome Developer Tools to inspect an element and edit an existing CSS rule applying to that element but what if you want to create a whole new style rule?
In my case what I wanted to do was apply the following style rules:
br {display: none}
hr {margin-top: 20px}
font {font-size: 18px}
To the Principles behind the Agile Manifesto so that I could print it out on one A4 sheet of paper directly from the browser.
The official document on Chrome Developer Tools that I've already linked to does have a section on Adding New Rules and Properties but it's out of date and doesn't work like that in the latest version of Chrome.
There is now a dedicated button in the Styles pane for "New Style Rule". It looks like a plus (+):
This will create a new style block which will allow you to define the selector yourself:
This is handy for little amendments on the fly, however it doesn't work well for CSS3 media queries that need extra curly brackets, or for pasting whole sections of CSS in to test.
The solution to that is to first click on the + button to add a new style, then hit enter (or click in the adjacent whitespace).
This will now show a link to the inspector stylesheet called inspector-stylesheet:1
If you click that link, it opens a whole live stylesheet that you can write complex rules in, as well as paste a whole external stylesheet into for testing.
Try using CSS Brush, a chrome plugin to create CSS live. You can create selectors from the page. You can have the complete CSS path or filter it up to make a shorter one. The context-sensitive menu is quite helpful while editing CSS properties live. You can even switch on/off properties or selectors.
I have created a link and when I try to set the style;
a:visited {
text-decoration: underline;
color: #FF0000;
}
It doesnt seem to work. It works fine in IE. I have also followed the order; link, visited, hover, active.
Is this a known issue, or am I making any mistake?
It might have to do with specificity and the order that you have your selectors in. In general, when specifying link states, you should follow the "love/hate" principal:
:link
:visited
:hover
:active
Maybe you have the :hover or :active selector before :visited?
Download the Firebug or WebDeveloper plugin for Firefox and use it to examine the style of the link, say using Inspect, to see where the style is being set. You should be able to see what styles are being applied and from where.
i have heard it is to do with the security - so something under the firefox hood disables visited links from showing so that other software cannot inspect the active styles and figure out where a user has been.
that does sort of make sense, but they should make it an option, and they should also EXPLAIN TO PEOPLE THAT THAT IS WHAT THEY HAVE DONE and save us all some time.....
Go to Tools -> Options and check if Firefox is remembering your browsing history. If this option is unchecked then the browser cannot show you which links you have visited because you denied the browser that information, hence the reason why your visited links do not change color.
Because of security issues that Google/Bing/etc. will be glad to tell you about, only a short list of properties can be styled with the :visited pseudoclass. Text-decoration isn't one of them, though color ought to work.
Depending on what IE version the OP was using when s/he posted this question, the issue there may be incompatibility of IE, especially before IE8, with standards and with other browsers.
More information here (among other places): https://www.w3schools.com/cssref/sel_visited.asp
It's likely being overridden by another style. If you have the Web Developer toolbar installed you can see what CSS styles are in affect and where they came from by selecting "View style Information" from the CSS menu.