Now let's get back to the project and activate the firebug again.
For say, we are now wanting to change the background color of input type text elements
only.
But the text area, or this input type email or this password or anything, those will be
left unchanged.
All we need to do, click the left arrow, select it,
input ID..
This one.
Now we can see that here, if we look into background we can see that this is the same
background property that is going to take place.
Change the color and you can see that all those color
changes are taking place over here.
So we need to do another modification here such as we need to copy this
form-control.
Now this is another trick that I am about to show you here.
Get back here, banner 7, now this time you don't want any change to take over in all
of your form elements.
This is not the desired output that we are looking for, we are looking for this red color
is practically appeared only this input type text.
Here we are mentioning input...
If we just change the background, for say this one, or you may choose this color code
that you have recently made over here.
For say this one.
If you want to choose this color code get back here and paste it over here.
Now get back to your project, reload and...
We are undone.
So I think first of all we should change this one, this .form-control we don't have a need
of this.
Practically every kind of input type which is text in format that
will be having this background color.
So this is the format.
Now we can try our luck with it.
So let's...
Press control + s, get back to our project and reload and now we can see that the background
of this input type text has been successfully changed.
So now lets move on to our next item.
We can see that the enter address field, it is also executing the same background property
as we can see here in this enter address field.
So the thing is both of them are practical using the same input type and that is text.
Now if we look into this label here, we see that it is a little bit of congested.
So now let's concentrate to customize this label condition.
That is why we will be now activating our firebug element, now let's
select this enter name and we can see that the label enter name here..
It has a different separate class which has a
display of inline-block and a Max-width of hundred percent.
Now what if we are providing a background color here.
All we need to do we need to see the result.
And we can see that this is the output.
And here if we provide a margin-bottom of 10px, now we can see that
it is practically leaving a margin-bottom of 10px but on the other hand this glyphicon
of right one it is not lying exact vertical middle position as it was in its
previous cases.
So it is obvious that we need to make some changes over here too.
So that is why first of all we are copying this class name we are getting back to our
custom.css and here hundred this Banner7..
No we are not practically creating any class here you are just customizing the
label element, just stay cautious here about it.
Now, what was the property..
Margin-bottom actually so we are now making it permanent.
So we have made this modification in our custom.css and here,
press control + s, when you get back to your project and reload.
And now we can see that this change has been taken place.
Now let's see it over here.
Here it is.
Margin-bottom 10px.
Now another thing, on the other hand we can see that this glyph icons those are practically
shifting into a little bit of top position.
So we need to fix such they lye in the exact vertical middle position.
So that is why now we are coming back to our glyphicons here..
Glyphicon ok or glyph icon class as a whole, it is
practically using thug glyphicon class.
You can see that this is the glyph icon class.
Just copy it.
Get back to our custom.css and here.
Again you need to create another...
This time we are providing a margin-top..
I think it is more.
So all we need to do we need to change it to 10px.
Make it to a 5px one, reload, and now we can see
that it is exactly in the position in the exact vertical middle position as it should
have been in a previous case.
So if you just enter into mobile responsive preview, here it is..
It is maintaining the same exact vertical middle position in case of mobile preview.
Just now got it and you can see that this thing is
executing exact property as we can see here.
Rotate again, you see..
Under any condition, under any dimension or definition it is practically executing the
same exact thing.
So there's nothing problem with it.
Press control + shift + m, and get back to your original preview.
So we have successfully customized all those things, all those glyphicons, all those labels.
If you want to change the color here, and you can see that the color of
this label has been changed.
So this is how you can make all those changes over here.
Get back to your project.
Activate firebug.
Now this time we are going to make some changes over here, on hovering those
table properties such that the background color will be changed only.
So first of all, let's get back to our index HTML and
just about here, we have used table-bordered, now we are using a table-hover condition here.
Press control + s, get back to your project and you can see that on
hovering this things, those are practically getting changed.
The background color is practically getting changed.
Just get back to your bootstrap.min.css.
we are practically using table-hover condition, right?
And it was a class.
Just type it.
Here you can see that in this first selection we can see that .table-hover
all of its tbody, all of its rows, under hover condition will be executing this background
color.
Just copy this whole class name along with all of its properties
into custom.css, and this is practically coming under banner9.
So all we need to do we need to get back to banner9 here.
Always remember to classify all of those things accordingly and synchronized.
You have to synchronize them.
You are practically using here banner9, that is why you are customizing all those attributes
over here, under this Banner9 segment.
Here is the class banner9, control + v, this one, press control + s,
get back to your project and reload and you can see, now if you just hover your mouse
you can see that we have successfully changed this background color property under
hover condition.
If you are not satisfied yes, then just get back to your project, and here you may
enter... or you may enter this one..
Reload, and you can see that the green background color is being generated on hovering this
individual table rows.
The first thing is we are never going to make any kind of changes here in this bootstrap.min.css,
second thing is, We Will first detect every, each and every single
properties from here we will be clicking any of these properties and will be looking for
that particular class over here.
If it is present here, then it is alright, if it is not present here then we will be
looking for the same class here in this bootstrap.min.css.
You need to make those changes over here, into this firebug
control panel and then you have to look for those classes inside this bootstrap.min.css
and if found all you need to do you need to copy all of them and then you
need to get back to your custom.css and you need to place them over here.
In the next tutorial we are about to make these changes on custom upload, that means
on this position.
We are about to make customization of this and this will be
the final part of this form element series.
If you have liked our tutorial then do not hesitate hit that red subscribe button down
below.
Stay tuned for more.
Hope to see you guys in the next tutorial, till
then, bye.
Không có nhận xét nào:
Đăng nhận xét