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;
}