I am using the {% gist xyz %} template in my Jekyll generated site but right before the gist on the generated html page, it inserts a link to a stylesheet on GitHub which clashes horribly in colour with a dark themed website. I can't put the style that I want in a stylesheet in <head> for the obvious reason that it will just be overwritten by the inline style. After site generation, this is the relevant section of code:
<link rel="stylesheet" href="https://gist.github.com/assets/embed-8f95cc15c5dcf1117ab18c08ff316641.css">
<div id="gistNUMBER" class="gist">
...
Does anyone have an advice on how I would go about restyling the gist or disabling the addition of this stylesheet?
Solution
If you mark all of the CSS rules with !important, then they won't be over written. Should have thought of this sooner :P
Related
I have free account on CodePen. In my code I use Bootstrap but I also override some Bootstrap classes in the CodePen CSS editor. In the head tag of HTML editor, I defined the loading order:
link rel="stylesheet" type="text/css" href="bootstrap.min.css" <br>
link rel="stylesheet" type="text/css" href="custom.css"
I.e. my custom.css I must override the Bootstrap classes. But it does not work in the CodePen editor. I have to use the !important rule to override Bootstrap classes too many.
The main thing is my code works perfectly in Google Chrome and Firefox without using the !important rule when I open custom.html on my local computer.
Why does not it work in the CodePen editor and why does it make such a big difference?
It seems that the order is :
!important
inline style
<style> in the html part
style in the css part
style in css settings.
If you want to avoid adding !important, you should add your link in the settings.
Go to the Settings -> css-> ->Add External Stylesheets/Pens -> add you css link -> save & close.
(Codepen link)
On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.
I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.
I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.
I appreciate any solutions here.
(Can't show image/gif here due to reputation rule)
Click here for gif
The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed
<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>
// app.js should come first
This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?
I don't know much about ruby, but I know about html and css...
In my Ruby on Rails application I have this tag:
<%= stylesheet_link_tag "admin.css", "jquery.facebox.css", "jquery.tooltip.css" %>
Which has the output of this (i only show the css, i need css only):
<link type="text/css" rel="stylesheet" media="screen" href="/stylesheets/admin.css?1391082652">
But not exist this path "/stylesheets" in my aplication, i found the file admin.css only here:
/home/webserver/app/public/stylesheets
/home/webserver/app/app/stylesheets
when I rename it to "admin.css_", the css styles continues to apper normal in html ruby, even clear cache in browser.
How I can change the css and make work correctly in website?
Do I need to compile anything?
Not only overwrite the file somewhere?
Hi you can add extra css in your application with .css in /home/webserver/app/public/stylesheets
Another is that css are you applying is directly from jQuery I think so
Please inspect the in browser and check the class name
then search in your application with ctr+f
Background: For the website I am on (a roleplay forum) you are allowed to use custom css and html in posts. To do this, you have to use a [dohtml] BBCode tag. Then you can insert any css/html you wish.
Problem: Some users have used linked stylesheets to make theirs show up. And it works. But mine doesn't.
Other: I am unable to use a tag, because it's not a full html document. I am using it in the same manner, but for some reason mine is not working. Can anybody help me with this? Is there something wrong with my CSS?
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/23ktd8q6bdekhi8/scorix.css" />
EDIT: When someone links to this one, it works fine
<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/w2uh6gphwjgmenu/betteralone.css?dl=1" />
The link should be a direct download link. This should work (at least, let's hope so):
https://dl.dropboxusercontent.com/s/23ktd8q6bdekhi8/scorix.css?dl=1&token_hash=AAFS1EYWJejOVo_PQ8c8RSK0rRbKC0kPt0fXEz5T7i5A7Q
Other than that, I don't see anything wrong with your HTML link code and your CSS validates flawlessly.
I'm using twitter bootstrap. My problem is that font-sizes in tables are wrong. For some reason the User Agent stylesheet is overriding the bootstrap table styles.
On the twitter bootstrap page (http://twitter.github.com/bootstrap/base-css.html) everything is of course working correctly.
In my inspector I see the following difference:
My page:
The twitter bootstrap page:
So definitely the problem is that the user agent stylesheet is overriding the bootstrap styles.
I haven't been able to figure out why this is different on my page and the twitter bootstrap page.
Most of the other CSS is working fine.
My css import:
<link href="/media/bootstrap/css/bootstrap.css" rel= "stylesheet">
CSS import on twitter bootstrap page:
<link href="assets/css/bootstrap.css" rel="stylesheet">
I actually figured this out myself. I had the <!DOCTYPE html> tag wrongly written. So if you have this problem make sure the doctype declaration is correct!
Please import the docs.css into your application as well. If I must say so, you must have realized that the Twitter Bootstrap Docs are using bootstrap.css and a custom docs.css. Try doing, which you can download from the github package. Then, try playing around with the table classes in docs. css without messing with the master css. Or try adding DOCTYPE in headers.
<link href="/media/bootstrap/css/docs.css" rel= "stylesheet">
If declaring <!DOCTYPE html> in the very beginning doesn't work, then it's probably not your user-agent style sheet casuing it. It may be Bootstrap's style sheet overriding your styles (I've had this problem). Make sure your style sheet is linked to after Bootstrap's style sheet in your HTML.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/mystylesheet.css" rel="stylesheet"> <!-- Your custom style sheet goes after Bootstrap's -->
I had the same issue as the OP. I wanted lovely small text and some user stylesheet was overiding it and putting:
font-size: medium;
When I wanted:
font-size:8pt;
I placed the following at the top of my HTML page:
<!DOCTYPE html>
All was good then, a bad habit to get into to not declare doctype at the top. All user stylesheets have now gone.
To discover what is overriding what on your CSS it is always a good idea to inspect element (F12) and you can modify and untick attributes on the fly until you get to right, then update your CSS file with it!
However if you do have a user stylesheet issue, these values will be locked.
Check whether your CSS is called or not in browser dev tools (press F12) under network column.
If it is not called, use your style sheets with1 rel="stylesheet" type="text/css".
It worked for me.