Most Common CSS Codes to Customize Thrive Luxe Theme

Most Common CSS Codes to Customize Thrive Luxe Theme

Luxe Theme is another good theme from Thrive. Here are some of the CSS codes that you can use to customize the look of your site using Luxe Theme. I will keep updating this post every time I will receive CSS-related questions.


Please note that these codes are using placeholder values. For instance, you can change the hex colors and the sizes. Also, if the code doesn't work, try adding !important before the semi-colon.

Where to put these CSS codes? For overall theme changes, just go to your Thrive Dashboard -- Theme Options -- Style & Layout Settings -- Custom CSS. Any codes you put here won't affect the landing pages because they are standalone. So for landing pages, just click the Settings (gear icon) on the top-left side of your Thrive Architect panel, then Custom CSS.

Changing Footer Copyright Background Color

footer .copy {
    background: #232323;
}

Changing Footer Menu Background Color

footer .fmn {
    background: #efefef;

}

Changing Footer Copyright Text Color & Size

footer .copy p {
    color: #efcdff;
    font-size: 15px;
}

Changing Footer Menu Font Settings

footer .fmn ul li a {
    color: #f59715;
    font-family: Oxygen;
    font-size: 15px;
}

Changing Footer Menu Hover Color

footer .fmn ul li a:hover {
     color: #efefef;
}

Changing Footer Widget Area Color

footer .ftw {
    background: #fd5f60;
}

Changing Active Menu Color

header nav>ul.menu>li.current-menu-item>a {
    color: #ff8a00;
}

Adjusting Header Height

header .h-i {
    height: 120px;
}

Changing Navigation Menu Font Settings

header nav ul li a {
    font-family: 'Montserrat';
    color: #6e252c;
    font-weight: 600;
    font-size: 20px;

​}

Adjusting Logo Size in Mobile View

@media only screen and (max-width: 940px) {
    header.side #logo img {
    max-width: 220px !important;
  }
}

Aligning Header Menu with the Logo

header .side_logo #nav_right {
    vertical-align: middle;
}

Changing Mobile Hamburger Menu Color

header .hmn .rmn {
    color: #547b07;
}

Changing Sidebar Widget Background Color

.cnt .sAs .awr {
    background: #efefef;
}

Adjusting Sidebar Width

.cnt .sAs {
    width: 25%;
}

Adjusting Content Area Width

.cnt .bSe.left {
    width: 70%;
}

Changing Blog Title Font Settings in Main Blog Page

.cnt .entry-title a {
    color: #fd5e60;
    font-size: 20px;
    font-family: 'montserrat';
}

Changing Blog Title Hover Color in Main Blog Page

.cnt .entry-title a:hover {
    color: #6e6e6e;
}

About the Author Kaila Sharlene

I am a freelance web designer, web developer and SEO specialist - one of the “Top Rated” web designers on Upwork. Living a digital nomad lifestyle, I love to explore the outdoors while doing some freelance jobs in between.

follow me on:
>