Seasonal Savings: 20% off selected memberships for a limited time. Give now

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Customizing color

From: CSS: Frameworks and Grids

Video: Customizing color

In this exercise I want to cover some of the things that you'll need to consider when customizing your framework's color scheme. Depending upon what type of framework you're working with you are going to have a different level of customization that are going to need to do. Most minimal frameworks use a very neutral colors scheme, it's usually a mixture of black, grey, white, something like that. More comprehensive-- or some of the user interface frameworks--usually have a default color scheme, which is tied to their specific user interface themes. And some cases, such as with the framework we're using Foundation, you're actually able to customize the colors used by the framework before you download the code.

Customizing color

In this exercise I want to cover some of the things that you'll need to consider when customizing your framework's color scheme. Depending upon what type of framework you're working with you are going to have a different level of customization that are going to need to do. Most minimal frameworks use a very neutral colors scheme, it's usually a mixture of black, grey, white, something like that. More comprehensive-- or some of the user interface frameworks--usually have a default color scheme, which is tied to their specific user interface themes. And some cases, such as with the framework we're using Foundation, you're actually able to customize the colors used by the framework before you download the code.

What all this means is that regardless of which framework you use, you'll still need to customize color in some way. And if I preview this page in my browser, I can see that I'm really not too far off from the color scheme that I'm going for. Now I know we have skipped ahead a little bit, there's little bit more done here than there was in the last exercise. Again, remember that the purpose of this course is not to focus on Foundation or how to build this site from Foundation. It's really to focus on what it means to work with a framework and some of the workflows that you need to consider.

So from exercise to exercise, we're going to sort of jump around and maybe skip forward past some steps of building this specific page content itself. If I compare this page with the finished version of the site, I can see that in terms of color schemes we're not really far off at all. The reason for that is because when I went and downloaded the Foundation framework, it allows me to customize the colors before I download it. So I was able to put in the colors that I wanted to use for my color scheme which gives me a huge head start in using the framework. That's something that you really need to consider when you're choosing a framework you need to take a look at how the colors are applied, which colors are being used, so you can determine just how much work you have ahead of you.

And sometimes it's a staggering amount to change colors, because the colors might be baked in to user interface items like buttons and widgets and other things like that. And if you're not able to customize those before you download it, sometimes it really takes a lot of work to go in and replace colors all throughout the framework. So I'm going to go back into my code. Now the first thing I want to do is switch over to custom.css, which you can find in the _css directory, or if you are using a program like Dreamweaver, you can just tab over to it, if you will, and I'm going to just start at the top, and I'm going to concentrate on the top navigation bar.

So above all the rest of the top navigation styles, I'm going to write a selector that targets that top navigation now, I'm going to go ahead and use the class top bar that we have already used, we have already applied to the top navigation bar. Now there's a couple reasons that I'm using this particular class selector. One, it makes sense. Number two, it's what the Foundation framework uses to style the color of that top bar as well. So a lot of times, you have to not only think about what selectors might make sense on your end to write it, but you also need to take a look in the framework's styles to know exactly, what you need to overwrite. So here, I'm just going to do a background.

The background color I'm going to use is #991B1F, and I'm going to use that color a lot. So I'm just going to copy that color, so I don't have to keep typing that in. So if I save that, go back to my page and refresh it. My menu bar is looking almost exactly the way that I want. One thing that I do notice about the menu bar, however, is that when I hover over the text, I'm getting sort of that black background which is nice, that shows people kind of where they're looking at. But if I hover over the search field, I see that I'm getting that same background color, and I really, really don't want that.

I'm going to go back into my code here, and I'm going to add a selector underneath this. At first glance, the selector is going to be really complex, but it's really not. Let's take a look at what we need to write here. So here I'm going to do top-bar ul, and I'm going to use then use a child combinator so with a little greater-than symbol here, and then li.serach:hover. Now I know the selector looks complicated, but it's not really not. Basically what it's doing is it's saying hey, if you find a list item with a class of search applied to it. If that's hovered over, and it's a direct child of an unordered list which is inside the navigation top bar, then go ahead and apply this, and again, if it wasn't for the framework, I wouldn't need to be that specific.

But because the framework uses a similar selector to control the hover states of the list items, then I need to get this specific with it. So a lot of times, you'll do a lot of trial and error, where you write a selector it doesn't quite do what you want, you go into the framework styles, you dig around and find exactly what's controlling that and then you use that selector to kind of target what you need. Here I'm going to do the same thing. I'm just going to give it a background color and the background color I'm going to use is the exact same one that's 991B1F. So if I save that, and now I refresh my page. Now I notice when I hover over it I just get that sort of garnet color again, and once we fix the layout of our search form here.

So that the label isn't showing anymore and these guys are stacked besides each other, and you won't notice it at all, because it won't poke out of the bottom of it, the way it is right now. The very next thing I need to do is go through my site and sort of control the color in areas like this where I have a little custom class applied to it, apply sort of these gray values to some of the headers and obviously these news items down here, right now those are not styled the way I want them to at all. They're just headlines and they don't have that background color, and that sort of thing. So a lot of times you'll go in, and you'll set a lot of these global styles when you're rewriting a color.

So I'm just going to start going down through the page, and I can notice, for example, in the header, that I already have a class there for primate. Now that's not part, obviously of the framework, that's a custom selector that I wrote. So here, I'm just going to do color, and I'm just going to do that same sort of garnet color 991B1F. I'm going to go down to the header H2 or which that selector was already there for typography. So I'm just going to add color to that. So this time I'm going to do the color property, not background, and the color I'm going to use here is #666, which is sort of a neutral gray.

If I go down to the main.h2, I'm going to go ahead and give that one a color of #666 as well. The aside h3, I'm going to give that one a color of #333. And then finally, if I scroll all the way down, I can see that I have this news h2 as well, and that's the one we needed to make it look like a sort of a top bar over those news items. So I'm going to give it a background of that same garnet color that we were using, that 991B1F and then I'm going to set the color of the actual text itself to white.

So if I'm going to save that, go back into my page, and preview that. I can see now my color looks a lot more like the actual page. It's really odd, again, that I'm doing all of this before I tackle layout. I almost always tackle layout first, but in this case, I'm just doing the color of the typography things like that before I tackle layout because we're to be using a Foundations grid to do our layout, and that's going to be a totally separate chapter.

That didn't take us a whole lot of work but I want you to realize that I was very fortunate in the fact that I was able to customize Foundation's color scheme prior to downloading it. So that saves a good bit of work over other frameworks as we don't need to modify our color scheme quite as much as we would, if we were using some of the other frameworks out there. Modifying colors can be really tricky, however. You need to pay especially close attention to UI elements like menu bars, links, buttons, widgets things like that, it's usually in those elements that you'll miss a color declaration or two when overwriting your framework's color scheme.

Show transcript

This video is part of

Image for CSS: Frameworks and Grids
CSS: Frameworks and Grids

30 video lessons · 14306 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Frameworks and Grids.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.