james james - 2 months ago 6
CSS Question

External CSS file not working alongside bootstrap

I am trying to add custom styling to my web app. Here is the link to my code:

https://github.com/SammyAbukmeil/rps-challenge

In

layout.erb
I have the following:

<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>


Which should be loading my
custom.css
file.

In
views/index.erb
I have an ID of test:

<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">


and in
css/custom.css
I am calling that ID:

#test {
margin-top: 50px;
}


But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in
layout.erb
and is adding styling to the
.erb
files throughout the project) is working.

I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.

Any advice is greatly appreciated. Thanks!

EDIT: So i checked the console and found this:

...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...


So I guess I'm not linking it right.

Answer

In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.

You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:

set :public_folder, proc { File.join(root, "..", "public") }