Click the Download button and select the Free Download. You\u2019ll see a compressed \u201c.zip\u201d file of the theme land in your Downloads folder (or Desktop if you opted, as we recommended, to set up your computer that way).<\/p>\n\n\n\n
Navigate to your webdev<\/strong> folder and create a new folder. Call it theme-test<\/strong>. Drag your compressed theme folder into your theme-test folder. Unzip (double click) your compressed theme folder to access all the QuickStart theme files. You should see an index.html file and some folders. Explore the assets folder and you\u2019ll find a css folder<\/strong> and an img folder<\/strong>.<\/p>\n\n\n\n Next, Open VS Code > Open Folder > Open Theme Test Folder > index.html. You\u2019ll see a familiar HTML file with lots of standard Bootstrap components. <\/p>\n\n\n\n As you continue scrolling, you\u2019ll see some convenient green-colored comments that define sections of the page. This will come in handy when we start customizing the CSS. With your knowledge of elements and how classes function, you should be able to see how the code translates to the content and layout you see if you preview the homepage in a browser. <\/p>\n\n\n\n Let\u2019s go ahead and do that. Preview the theme in Chrome. We can get a deeper understanding of how the theme\u2019s code is functioning by right-clicking anywhere on the page and selecting Inspector. (Dive more into how to use the Inspector in the Inspector Gadget<\/a> lesson. This might seem a little confusing or complicated at first, but work through the tutorial until you feel comfortable. Again, help is available if you get stuck \u2013 but try this out first!)<\/p>\n\n\n\n Now that you\u2019re familiar with the code, let\u2019s start making this page our own. In VS Code, create a new file and call it custom.css. Save it to the theme\u2019s css folder<\/strong>. You should now have a main.css file and a custom.css file in this folder. Link your new custom.css file in your index.html file.<\/p>\n\n\n\n It\u2019s time to start customizing the theme to our preferred fonts, colors, and other style properties. <\/p>\n\n\n\n Your mission is to use the tools and skills we\u2019ve learned so far to target class selectors and elements in the QuickStart theme to customize the Header and Hero sections of the site to promote your custom gift wrap business, Quick Wrap. <\/p>\n\n\n\n Download this folder<\/a> to get started. It contains Quick Wrap\u2019s brand images, colors, and fonts, which we\u2019ll need to customize our homepage. You will need to add the images to the img folder<\/strong> in the QuickStart theme folder. <\/p>\n\n\n\n As you read earlier, it\u2019s helpful to get a lay of the land. Exploring the theme\u2019s HTML files and assets gives you a lot of useful information to get started with customizing. So first step \u2013 check out your theme\u2019s pages and assets:<\/p>\n\n\n\n First up, the Header section. We\u2019re going to add our own logo and update the site name to our company name QuickWrap. Find this code within the header tags <\/strong>of the theme index file.<\/p>\n\n\n\n Notice that the logo displayed is called logo.png. We simply need to update the link to:<\/p>\n\n\n\n Now change the site name in the <h1> tags below that to Quick Wrap<\/strong>.<\/p>\n\n\n\n Next, we want to change a few things in the navigation bar to match our brand colors \u2013 menu item text & hover color, and the Get Started button. <\/p>\n\n\n\n First, let\u2019s find the <nav> tags to figure out what our nav menu class selector is called. We can see in the first line of code that our navbar has an id called navmenu and a class called navmenu: <\/p>\n\n\n\n Before we make any changes to the style, remember that when we customize a Bootstrap template, we never make changes to the theme\u2019s stylesheet, main.css. We only make changes within our custom stylesheet, custom.css. <\/p>\n\n\n\n So, with the class selector that we want to target in mind, open main.css <\/strong>from the theme\u2019s css folder. <\/p>\n\n\n\n Hit Command-F to search for \u201cnavmenu.\u201d One of the first items we see is a green comment that labels Nav Menu Colors. Well, that sounds promising. When we take a closer look, we see that the theme creators have kindly organized all of the nav bar color styles in one place and labeled the selector as \u201c:root\u201d. Copy the whole declaration that follows:<\/p>\n\n\n\n And paste this declaration into your custom.css file.<\/p>\n\n\n\n Now we can update the colors to match our brand colors, darkred<\/strong> and ghostwhite<\/strong> as follows:<\/p>\n\n\n\n Hit save and preview the change in your browser. The color of the navbar text should now be a dark red color.<\/p>\n\n\n\n Header Button<\/em><\/p>\n\n\n\n Now we need to customize the Get Started button in the header. Let\u2019s look back at the theme\u2019s main styling sheet and explore more of its Header styles. Soon, you\u2019ll see a promising selector \u2013 <\/p>\n\n\n\n This selector is identifying the header section class, and .btn is often how buttons are classed. We\u2019ve found what we need. With more investigation, we find that there are two different declarations that we need to copy over to change the text and background color on our Get Started button:<\/p>\n\n\n\n Ok, now let\u2019s customize the text and background colors to match our Quick Wrap branding, like below:<\/p>\n\n\n\n Ok, now we\u2019ve customized our header to our Quick Wrap branding, and we\u2019re ready to move on.<\/p>\n\n\n\n Next, we\u2019re going to customize our Hero section to change up the background image, button colors, and font styles. Start by scrolling down to the Hero section of the index file. The first thing you\u2019ll notice is that this section has an id and class properties. <\/p>\n\n\n\n This line of code is what allows users to jump to this section using a link, i.e. from the navbar or another part of the page, and the class selector will come in handy when we\u2019re targeting elements within this section.<\/p>\n\n\n\n Words<\/strong><\/em><\/p>\n\n\n\n Let\u2019s first change the text in this section to our brand copy:<\/p>\n\n\n\n We\u2019ll come back to our text after we make a few more visual changes.<\/p>\n\n\n\n Images<\/strong><\/em><\/p>\n\n\n\n Now, let\u2019s take a look at the first div tags. It has a class property called \u201chero-bg.\u201d What do you think this div tag is set up to display? If you thought \u201cthe background of something,\u201d you\u2019d be correct. If you look at the line below it, we see code calling an image to the page, so that tells us that this div element contains our background image. Let\u2019s change it to reflect our QuickWrap brand. There\u2019s an image titled \u201cred-bg\u201d in your folder. Call to this image in your code and give it an alt text:<\/p>\n\n\n\n Note<\/strong>: If you have not moved the QuickWrap images into the theme\u2019s img folder, you will not find this image using the code above.<\/p>\n\n\n\n Hit save and refresh your preview. You should now see your new background image on the page \u2013 but only kinda? It looks like there’s an overlay on our image. To check out its styling, let’s see what properties are declared for our hero-bg class. <\/p>\n\n\n\n After a quick search for “hero-bg” in the main stylesheet, we find this code:<\/p>\n\n\n\n The declaration includes the “hero” class and adds a pseudo-element,<\/strong> “::before” to our “hero-bg” class. This is a common way to add overlays over a background image. We can see that the background property includes a transparency value of 15%. That means the overlay is only 15% transparent. Let’s make it easier to see through by adjusting the value to 50%. <\/p>\n\n\n\n Now let\u2019s change the theme\u2019s graphic \u2013 a large illustration of an office worker \u2013 to our lovely custom wrapped gift product image. The next div element contains a lot more code. We\u2019ll be customizing more of this code in a second, but first, let\u2019s find the code that calls to the theme graphic and change it so that we call to \u201cgift-box-red-ribbon.jpg.\u201d<\/p>\n\n\n\n Button colors<\/strong><\/em><\/p>\n\n\n\n Now, we need to change the colors of our buttons to reflect our brand colors. Just like with our Header section changes, we need to identify the class selector we\u2019ll need to search for in the theme\u2019s stylesheet, main.css. <\/p>\n\n\n\n If we look at this div element, it contains two button elements: We\u2019re going to tackle the Get Started button first, so we\u2019re going to be searching for \u201cbtn-getting-started\u201d within main.css. Let\u2019s do that now. You should find two declaration for our button selector that look like this:<\/p>\n\n\n\n Copy both declarations and paste them into your custom stylesheet. We now have the css code we need to change the button background color, button text, and the background color and button text for when a user hovers over the button.<\/p>\n\n\n\n Let\u2019s change the color values to match our changes from the navbar:<\/p>\n\n\n\n Now, it\u2019s your turn. Use the same method we just practiced to change the button and text colors for the Watch Video button. Remember to copy the full declaration for any class selector you see related to \u201cbtn-watch-video<\/strong>.\u201d<\/p>\n\n\n\n Curious how to change the icon you see in the Watch Now button? Check out Bootstrap\u2019s helpful Icon guide<\/a>. Challenge yourself and practice switching out icons in your code. <\/p>\n\n\n\n We have one final adjustment to make. Our new graphic is aligned right under our buttons with no real breathing room. Let’s add a margin to the bottom of our buttons to give us that space. So you need to add the following declaration to your custom stylesheet for your “btn-get-started” and “btn-watch-video” selectors:<\/p>\n\n\n\n Fonts<\/strong><\/em><\/p>\n\n\n\n Finally, let\u2019s update these font types to support Quick Wrap\u2019s visual brand. For this exercise, we\u2019re going to focus on the <h1> elements, but you will likely want to customize paragraph fonts and other header tags in Project 2 to fully make it your own. You\u2019ll use a similar process to what we\u2019ll do here.<\/p>\n\n\n\n First, we\u2019ll change the font type. We know we want to target the <h1> tag, so head on over to the theme stylesheet and search for \u201ch1.\u201d <\/p>\n\n\n\n You should see 7 results. The first declaration looks kind of interesting:<\/p>\n\n\n\n You scroll up a bit and see that this declaration for all these header elements is part of the theme\u2019s General Styling and Shared Classes, per the stylesheet comments. That tells us a lot. First, it tells us that this text color and font family is the default for headers, sitewide. That\u2019s good to know. Let\u2019s go ahead and copy that declaration over to our custom stylesheet. We\u2019re going to refer to our Quick Wrap brand guide and see that our brand header font is \u201cRadley<\/strong>.\u201d That\u2019s not a font that comes standard in VS Code, so we\u2019ll need to grab the code from Google Fonts. Need a refresher on how to do that? Review our Fonts<\/a> lesson from the HTML & CSS module.<\/p>\n\n\n\n So, once you\u2019ve added the Radley font family link in your <head> tags and added the fonts CSS rules to your custom stylesheet, your code should look like this:<\/p>\n\n\n\n Now, we want to customize these colors a bit. There are three headers in the Header and Hero sections that we should update. Let\u2019s return to main.css to keep looking for any h1 class selectors associated with our Header and Hero sections.<\/p>\n\n\n\n We find a few declarations that look important to our h1 colors:<\/p>\n\n\n\n So, let\u2019s revisit our code, to get a sense of how to apply our color changes. <\/p>\n\n\n\n Take a moment to think about what clues we have now to customize our colors. Now it\u2019s your turn<\/em>.<\/strong> Copy and paste the h1 declarations above in your custom.css file. Change the color values in each declaration so that your Quick Wrap text is darkred<\/strong>, and Welcome to is ghostwhite.<\/strong><\/p>\n\n\n\n Hit save and preview your homepage for the last time. It should look like this.<\/p>\n\n\n\n Nice work! These are the skills you\u2019ll need to customize a Bootstrap theme. If you want to keep practicing, do it! The more you practice now, the easier Project 2 will be.<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" Working with a Bootstrap theme lets us take our box cake mix to the next level. In this lesson, we will practice downloading and customizing a Bootstrap theme so that you\u2019re equipped to build beautiful and responsive websites in no time. Let\u2019s say you\u2019ve just finished shopping for a Bootstrap 5 theme. For the sake […]<\/p>\n","protected":false},"author":24,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6000","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6000","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/users\/24"}],"replies":[{"embeddable":true,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/comments?post=6000"}],"version-history":[{"count":13,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6000\/revisions"}],"predecessor-version":[{"id":6419,"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/pages\/6000\/revisions\/6419"}],"wp:attachment":[{"href":"https:\/\/nmi.cool\/webdev\/wp-json\/wp\/v2\/media?parent=6000"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"Screenshot](\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2025\/05\/Screenshot-2025-05-14-at-1.26.49\u202fPM-1024x502.png\")
<\/figure>\n\n\n\n![\"Screenshot](\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2025\/05\/Screenshot-2025-05-14-at-1.29.57\u202fPM-1024x628.png\")
<\/figure>\n\n\n\nExercise<\/strong><\/h3>\n\n\n\n
![\"Quick](\"https:\/\/nmi.cool\/webdev\/wp-content\/uploads\/sites\/14\/2025\/05\/Screenshot-2025-05-14-at-1.32.04\u202fPM-1024x616.png\")
Getting Started<\/strong><\/h4>\n\n\n\n
\n
Header Customization<\/strong><\/h4>\n\n\n\n
<a href=\"index.html\" class=\"logo d-flex align-items-center me-auto\">\n\n <img src=\"assets\/img\/logo.png\" alt=\"\">\n\n <h1 class=\"sitename\">QuickStart<\/h1>\n\n<\/a><\/code><\/pre>\n\n\n\n<img src=\u201dassets\/img\/quickwrap-logo.png\u201d alt=\u201dlogo\u201d><\/code><\/pre>\n\n\n\n<nav id=\"navmenu\" class=\"navmenu\"><\/code><\/pre>\n\n\n\n:root {\n\n --nav-color: #313336; \/* The default color of the main navmenu links *\/\n\n --nav-hover-color: #77b6ca; \/* Applied to main navmenu links when they are hovered over or active *\/\n\n --nav-mobile-background-color: #ffffff; \/* Used as the background color for mobile navigation menu *\/\n\n --nav-dropdown-background-color: #ffffff; \/* Used as the background color for dropdown items that appear when hovering over primary navigation items *\/\n\n --nav-dropdown-color: #313336; \/* Used for navigation links of the dropdown items in the navigation menu. *\/\n\n --nav-dropdown-hover-color: #77b6ca; \/* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. *\/\n\n}<\/code><\/pre>\n\n\n\n:root {\n\n --nav-color: ghostwhite<\/strong>; \/* The default color of the main navmenu links *\/\n\n --nav-hover-color: darkred<\/strong>; \/* Applied to main navmenu links when they are hovered over or active *\/\n\n --nav-mobile-background-color: #ffffff; \/* Used as the background color for mobile navigation menu *\/\n\n --nav-dropdown-background-color: #ffffff; \/* Used as the background color for dropdown items that appear when hovering over primary navigation items *\/\n\n --nav-dropdown-color: #313336; \/* Used for navigation links of the dropdown items in the navigation menu. *\/\n\n --nav-dropdown-hover-color: darkred<\/strong>; \/* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. *\/\n\n }<\/code><\/pre>\n\n\n\n.header .btn-getstarted<\/code><\/pre>\n\n\n\n.header .btn-getstarted,\n\n.header .btn-getstarted:focus {\n\n\u00a0\u00a0color: var(--contrast-color);\n\n\u00a0\u00a0background: var(--accent-color);\n\n\u00a0\u00a0font-size: 14px;\n\n\u00a0\u00a0padding: 8px 25px;\n\n\u00a0\u00a0margin: 0 0 0 30px;\n\n\u00a0\u00a0border-radius: 50px;\n\n\u00a0\u00a0transition: 0.3s;\n\n}\n\n.header .btn-getstarted:hover,\n\n.header .btn-getstarted:focus:hover {\n\n\u00a0\u00a0color: var(--contrast-color);\n\n\u00a0\u00a0background: color-mix(in srgb, var(--accent-color), transparent 15%);\n\n}<\/code><\/pre>\n\n\n\nheader .btn-getstarted,\n\n.header .btn-getstarted:focus {\n\n\u00a0color: darkred;\n\n\u00a0background: ghostwhite;\n\n\u00a0font-size: 14px;\n\n\u00a0padding: 8px 25px;\n\n\u00a0margin: 0 0 0 30px;\n\n\u00a0border-radius: 50px;\n\n\u00a0transition: 0.3s;\n\n}\n\n.header .btn-getstarted:hover,\n\n.header .btn-getstarted:focus:hover {\n\n\u00a0color: ghostwhite;\n\n\u00a0background: color-mix(in srgb, darkred, transparent 15%);\n\n}<\/code><\/pre>\n\n\n\nHero Section Customization<\/strong><\/h3>\n\n\n\n
<section id =\u201chero\u201d class=\u201dhero section\u201d><\/code><\/pre>\n\n\n\n\n
<img src=\"assets\/img\/red-bg.jpg\" alt=\u201dred wavy background\u201d><\/code><\/pre>\n\n\n\n.hero .hero-bg::before {\n content: \"\";\n background: color-mix(in srgb, var(--background- color), transparent 15%);\n position: absolute;\n inset: 0;\n z-index: 2;\n}<\/code><\/pre>\n\n\n\n
<div class=”d-flex” data-aos=”fade-up” data-aos-delay=”200″><\/p>\n\n\n\n<a href=\"#about\" class=\"btn-get-started\">Get Started<\/a>\n\n <a href=\"https:\/\/www.youtube.com\/watch?v=Y7f98aduVJ8\" class=\"glightbox btn-watch-video d-flex align-items-center\"><i class=\"bi bi-play-circle\"><\/i><span>Watch Video<\/span><\/a>\n\n <\/div><\/code><\/pre>\n\n\n\n.hero .btn-get-started {\n\n color: var(--contrast-color);\n\n background: var(--accent-color);\n\n font-family: var(--heading-font);\n\n font-weight: 500;\n\n font-size: 15px;\n\n letter-spacing: 1px;\n\n display: inline-block;\n\n padding: 10px 28px;\n\n border-radius: 50px;\n\n transition: 0.5s;\n\n box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);\n\n}\n\n.hero .btn-get-started:hover {\n\n color: var(--contrast-color);\n\n background: color-mix(in srgb, var(--accent-color), transparent 15%);\n\n box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);\n\n}<\/code><\/pre>\n\n\n\n.hero .btn-get-started {\n\n color: darkred;\n\n background: ghostwhite;\n\n font-family: var(--heading-font);\n\n font-weight: 500;\n\n font-size: 15px;\n\n letter-spacing: 1px;\n\n display: inline-block;\n\n padding: 10px 28px;\n\n border-radius: 50px;\n\n transition: 0.5s;\n\n box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);\n\n}\n\n.hero .btn-get-started:hover {\n\n color: ghostwhite;\n\n background: color-mix(in srgb, var(--accent-color), transparent 15%);\n\n box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);\n\n}<\/code><\/pre>\n\n\n\nmargin-bottom: 20px;<\/code><\/pre>\n\n\n\nh1,\n\nh2,\n\nh3,\n\nh4,\n\nh5,\n\nh6 {\n\n color: var(--heading-color);\n\n font-family: var(--heading-font);\n\n}<\/code><\/pre>\n\n\n\nh1 {\n\n color: var(--heading-color);\n\n font-family: \"Radley\", serif;\n\n }<\/code><\/pre>\n\n\n\n.header .logo h1 {\n\n font-size: 30px;\n\n margin: 0;\n\n font-weight: 700;\n\n color: var(--heading-color);\n\n }\n\n.hero h1 span {\n\n color: var(--accent-color);\n\n }<\/code><\/pre>\n\n\n\n\n
![\"Quick](\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdZ-ctbfmmmQJ8sEZ2oTVMRyX5Mb9mmaGXZUJBXjsFpZWstC1fIUtJ_sccijWse0GfCKdh41j37dFHhasvVrDdl8X1jmHzAzl0-smtUShT80tj5LluvGfv2wNIv9657vkqTy1g8bQ?key=or1653nP75hhupqG6X5q36Hm\")