Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Introduction to Ruby on Rails 7!
You have completed Introduction to Ruby on Rails 7!
Preview
Elevate the design of your core Linktree pages. You’ll refine the scaffolded views for a more modern and engaging user interface.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up