0

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.

Improve this question
3
  • Check your console for errors, check Resources to make sure the CSS file is loaded properly, finally, check that your style window to make sure it's not run over by bootstrap's styles. Commented Apr 24, 2015 at 9:14
  • @odedta Thanks, just realised it has a Status Code: 404 Not Found So i'm obviously not linking to it properly. Commented Apr 24, 2015 at 9:41
  • Validating your code is good practice, I recommend validating your code in every step of the way. Commented Apr 24, 2015 at 9:47

4 Answers 4

Reset to default
1

Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:

#test {
  margin-top: 50px !important;
}

If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:

body > div > img#test {
  margin-top: 50px !important;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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") }
Improve this answer

Comments

0

First You need to understand the hierarchy of CSS You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.

Note: Also avoid adding ID for CSS Styling

Improve this answer

Comments

0

You need to override the bootstrap selector. It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.

Example of Use

.element-class{
    width:50%;
}

.element-class{
    width:100% !important;
}

The element would have the width of 100% here.

Read more about when to use this on the css-tricks article

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.