Linking CSS in Rails Bookmark project


#1

Hi,
my web app runs properly but I haven't managed it to look like https://bookmarks-rails-2633.herokuapp.com/books.
The css seems to be there but not linked in to my app.
how can I achieve this?
thanks
Zin


#2

Hi Zin,

Could you please post the code you have for app/views/layouts/application.html.erb, then tell me what files show are in app/assets/stylesheets?

Thanks :slight_smile:


#3

Hi,

here you go:

<!DOCTYPE html>
<html>
<head>
  <title>Bookmarks</title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

application.css, bookmark.css, books.css.scss, bootstrap.min.css, domine.css, merry weather.css

thanks
zin


#4

@zinyosrim Are you trying to include all of those CSS files, or are there a specific few CSS files among those you listed which you want to load?

One problem is that you can't have a space in a filename like you do with merry weather.css, so try removing the space or replacing it with a dash (-) or underscore (_), and see if that helps :slight_smile:


#5

Well, The files were already there, I didn't add any css. I saw that relevant code is in bookmark.css but am wondering why it's not being taken into account


#6

@zinyosrim Do you have a comment that looks like this in application.css?

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */

The = require_self and = require_tree . parts are the important parts there :slight_smile:


#7

included the lines, but the issue still is there

this is how it should look like


#8

@zinyosrim OK, that looks fine now. Could you post your app/views/books/index.html.erb code now please?

Sorry this is taking so long :confused:


#9

thanks for helping me

<% @books.each do |book| %>




<%= book.rank_this_week %>




<%= book.title %>


by <%= book.author %>


(<%= book.publisher %> )


<%= book.description %>


<%= link_to 'See all Editorial Reviews', book %>


<%= book.weeks_on_list %> weeks on list





<% end %>

#10

easier to read this


#11

@zinyosrim Can you try adding the container class to the <div> with the book class? Like this:

<div class="container book">
  <!-- ... -->
</div>

#12

looks much better now. I still have some styling issues but will do first the css course
thanks for your help and patience


#13

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.