GitHub Page loading Bootstrap CSS, but not my custom stylesheet? - css

I am trying to host my website for free using GitHub (and I'm new to GitHub so sorry if this is a dumb question), but it just is not using the stylesheet I created and uploaded with all my files. It also is not loading images from my images folder. So from what I can tell, it doesn't like using local files, but it is fine using linked stylesheets like Bootstrap and images linked from somewhere online.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="_css/bootstrapOverride.css">
<link rel="stylesheet" type="text/css" href="_css/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
It refuses to use my bootstrapOverride.css and the animate.css.
How can I make it use local files like these? Same question with images as well?

I figured out the problem. The issue was my folder names in linking to my stylesheets. GitHub pages uses Jekyll and Jekyll ignores anything after an underscore. Since the folder I had my CSS in was "_css" it would see the underscore and stop there. I took the underscores out of the folder names, updated my links to the CSS and now we are all good!

Related

How to load correctly my css asp.net Visual Basic

Yesterday I was working on my college project, everything was running smooth so I decided to upload it to github where my partner could access it. Today I opened the local repo and suddenly my CSS wasn't displaying correctly. I'm using Bootstrap 4.
This is how it looks now:
This is how it should look:
I've been using a Bootstrap template. I already tried making a new CSS file but it doesn't change. Also using this post ASP.Net website - doesn't load css file correctly
How I was calling my css
<link rel="stylesheet" href="css/style.css">
I tried
<link rel="stylesheet" href="~/css/style.css">
Even
<head runat="server">
<link rel="stylesheet" href="~/css/style.css" runat="server">
</head>
Css folder is located in asp default folder
Well, after a little attempt, it looks like the project had been corrupted when it was loaded. Since I had finished it on time, I created a new project and include the previous files.
It works like a charm.

Removing CSS file that doesn’t exist in WordPress

I tried to install a plugin for divi icons, But it wasn’t installed successfully.
There is a CSS file added to the homepage https://www.example.com/wp-content/uploads/aspengrove-icons/multicolor.css?ver=1.1.1
That CSS file doesn’t exist and I want to remove it, But I don’t know where it’s added.
How to remove this from homepage:
<link rel="stylesheet" id="ags-divi-icons-multicolor-css" href="https://www.example.com/wp-content/uploads/aspengrove-icons/multicolor.css?ver=1.1.1" type="text/css" media="all">
check your wp-content/plugins folder for the folder names as your extension, if there remove it.

Angular css files not loading when controlling two Partials with a single Controller

I'm working on a web-application built upon the MEAN stack.
I use bootstrap as css lib, and have some css override in two files of mine "app.css" and "mio.css"
the app works just fine until I hit refresh in a controller that handles two partials, than everything gets reloaded except for my 2 css files.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/mio.css">
If I inspect them they contain the index.html data (head body dcc)
could you suggest what's happening??
Try using full file paths to the css files. For example..
<link rel="stylesheet" href="/assets/css/app.css">
The issue might be on the server side. Since angular apps are single page ajax applications, the server has to redirect all requests to the index.html page EXCEPT for assets. Your server might be returning the index.html page instead of your css files.

Extending a CSS stylesheet?

An interesting problem but maybe it has already been solved. I have a collection of CSS style sheets that apply to multiple domains. The way it has been architected, both domains share the same CSS files and add their own definitions and rules to the stylesheets. Our system is as such that anytime a developer makes a change to a CSS file that belongs to a particular domain, then that very same change needs to be done in another domain's style sheet as well.
For instance if I have two domains: Main, SubMain. BOth of these share a stylesheet called global.css and a developer working on the SubMain domain changes this stylesheet by adding a new rule. To ensure that things do not break in the Main domain, the developer needs to go ahead and add the same rule to global.css to the main domain's global.css stylesheet.
Why this does not have the same shared location is beyond me since this is a shared engineering project. My understanding is that the reason being that the changes were to be applied immediately and unfortunately the only option was to use the same stylesheet + directory structure across all the domains.
But this problem does exist and it is tremendous overhead. Is there anyway to extend CSS stylesheets such that domain specific CSS can be added to the extended stylesheets.
If not, what other solutions can be proposed ?
If you have the same code in two places, why have two files (and this goes for coding as well - methods or variables or whatever)? If you use something more than, keep it in one place and reference to it everywhere else.
What you need to do is to have the Main website point at a local copy of the CSS file (like so):
<link rel=stylesheet type=text/css href="/global.css">
... and then on the SubMain website, include in your headers a link to the Main website's CSS file (like so):
<link rel=stylesheet type=text/css href="http://mainwebsite.com/css/global.css">
To solve your problem, only have the editable CSS file/files on one domain (the Main one), and then link to them using absolute URLs in the other (SubMain) website.
I dont understand you. I dont know where your problem is. Do you want to add 2 css style sheets?
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="style2.css" type="text/css" rel="stylesheet" />
Or do you want that 2 domains using 1 style sheet?
<link href="http://url.com/style.css" type="text/css" rel="stylesheet" />
Both of the domains can use this. You are not linking in the directory of the style sheet. You put the link of your style in it. This will solve your problem.
Both domains can use one CSS file.
<link rel="stylesheet" type="text/css" href="http://myotherdomain.com/css/global.css">
Just link to one CSS file.
Or if you really want to "sync" them you could create a rsync script but that doesn't make sense.
It's apparent that you know you can include stylesheets across domains:
<link rel=stylesheet type=text/css href="http://example.com/global.css">
But did you know that you can include multiple stylesheets? Create a single stylesheet that has all of the "master" styles and put it in global.css on one of the domains (your choice). The styles unique to each domain can be in a stylesheet specific to that domain.
<link rel=stylesheet type=text/css href="http://example.com/css/global.css">
<link rel=stylesheet type=text/css href="/css/specific.css">

How to display CSS files in Django blog?

i'm very confused about how to add css files to a blog a made on django following this tutorial: http://www.programmersbook.com/page/21/Django-Beginner-Tutorial-Part-I/
Basically, i want to add a css style sheet to my blog. I've looked around a bit and seen somethings about static and media files and urls. I read a bit about them on Django's website but coulnd't fully understand them.
So, could anyone kindly tell me how i should display:
<link rel="stylesheet" type="text/css" href="style.css" />
They styles work when i do it internally, but how do i show external stylesheets?
It's right in the Django docs, check here. Follow the instructions there and you will be able to use something like that:
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}style.css" />
EDIT:
You should sepearate you "static" files from your templates. So move all your .css, .js and images to one directory in your app (it's default name is /static). Honestly, everything is written in the link provided.

Resources