Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introduction to Ruby on Rails 7

Well done!

You have completed Introduction to Ruby on Rails 7!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Styling Tree Pages

2:12 with Malachi Rails

Elevate the design of your core Linktree pages. You’ll refine the scaffolded views for a more modern and engaging user interface.

Okay, so in this video, we're going to be styling the trees. 0:00
The new form, we're gonna style that. 0:04
We're gonna style this page, and really, I think that's about it, and 0:05
we're also gonna style this page, the show page. 0:10
Not only that, but after this, we're going to add a user ID. 0:13
So what we're gonna make it happen is that you see this form, 0:18
if we destroy and then we go New tree. 0:21
You see this user ID form, this user ID text input, 0:23
we're gonna fill that with the current user ID. 0:26
And then with the current user ID, we can figure out who actually owns the tree. 0:29
And whoever owns the tree can be the only person to actually destroy it. 0:36
Currently, anyone who signed in can destroy this tree, but we don't want that. 0:40
We want the person who actually made it to be able to destroy it. 0:44
But first of all, let's style this. 0:47
So I'm gonna just make go into my folder, and here we go. 0:49
And so it's in trees and form, and so this is the form right here. 0:55
As you can see, we have all of the text fields right here. 0:59
So in order not to waste time with styling, 1:04
as this is a Ruby on Rails course, I'm just gonna copy and paste my styles. 1:06
But again, the process is pretty much the same as the device. 1:09
We're gonna create a CSS file, we're gonna call it trees.css, then all in here, 1:12
all you have to do is add all the styling. 1:17
You have to add a style tag inside of the htmlerb files, and then, 1:19
yeah, everything will work and your styling will apply to these files. 1:23
If you've got the source code and isn't working, make sure to add jQuery. 1:27
I add it in the application.htmlerb, so just go to layouts, application.htmlerb, 1:31
take this script tag, and then put it here inside of the head. 1:37
And now, as you can see, this part is styled, but this part is not. 1:41
So I'm gonna do that now. 1:45
And as you can see now, this works, it's successfully styled. 1:47
I can edit it, and the form works, and this works as well, and 1:50
I can change the mode, the style. 1:55
All right, so the trees are successfully styled. 1:58
Un the next video, I'm gonna show you how to change the URL up here. 2:01
So what we wanted to say is the name of the tree, but currently it says four, but 2:04
next video we're gonna change it to the name of the tree. 2:08