CMS Development

fbroder
Participant

Changing the color of just the title of an FAQ accordion

I cannot for the life of me figure out how to change just the color of just the text on the header of an FAQ accordion module.

 

Anyone help out? I feel like its really small and stupid. haha

 

This is what I have with CSS

 

/*============================= FAQ SECTION ========================== */

.faq-section .accordion_group.expanded .accordion_header:before {
background: url(https://cdn2.hubspot.net/hubfs/2142820/Assets%20%5BMarch-2017%5D/icon-plus.svg);
}

.faq-section .accordion_header:before {
position: absolute;
right: 20px;
top: 14px;
transition: all .3s ease-in;
-webkit-transition: all .3s ease-in;
background: url(https://cdn2.hubspot.net/hubfs/2142820/Assets%20%5BMarch-2017%5D/icon-plus.svg);
width: 21px;
height: 21px;
content: '';
}

.accordion_header:focus {
outline: none;
}

.accordion_header {
color: #fff;
}

.faq-section img.close-desc {
position: absolute;
right: 4px;
top: 13px;
padding: 14px;
cursor:pointer;
}

.faq-section .accordion .accordion_group h4, .faq-section .accordion p {
margin: 0;
}

.faq-section .accordion_content {
margin: 0;
padding: 16px 40px 30px 20px;
position: relative;
}

body .container-fluid .row-fluid .faq-section {
max-width: 800px;
margin: 0 auto;
float: none;
text-align: center;
padding: 40px 0;
}
.accordion_header {
background-color: #006caf;
margin-bottom: 10px;
position: relative;
padding: 15px 20px 15px;
cursor: pointer;
}

.faq-section .accordion .accordion_group h4 {
font-size: 16px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
text-align: left;
}

.faq-section .accordion p {
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.62;
letter-spacing: normal;
color: #383838;
text-align:left;
}


@media(max-width:1024px) and (min-width:767px){

body .container-fluid .row-fluid .faq-section {
padding: 80px 20px 70px;
}

.faq-section .accordion_content {

padding: 16px 83px 30px 20px;

}

.faq-section .accordion p {

font-size: 16px;
}

}


@media(max-width:767px){
body .container-fluid .row-fluid .faq-section {
padding: 80px 20px 70px;
}
body .container-fluid .row-fluid .faq-section {
padding: 20px 0 16px;
}


body .border-heading h2 {
width: auto;
position: relative;
padding-bottom: 13px;
margin-bottom: 21px;
text-transform: uppercase;
font-size: 24px;
}
body .border-heading p {
letter-spacing: 0.1px;
padding-bottom: 10px;
}

body .faq-section .accordion_content {
margin: 0;
padding: 11px 45px 30px 10px;
}
body .accordion_header {
padding: 15px 43px 15px 15px;
}

body .faq-section .accordion p {
font-size: 16px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.62;
letter-spacing: normal;
color: #383838;
}

}

0 Upvotes
3 Replies 3
fbroder
Participant

Changing the color of just the title of an FAQ accordion

solved.

0 Upvotes
benvanlooy
Top Contributor | Platinum Partner
Top Contributor | Platinum Partner

Changing the color of just the title of an FAQ accordion

Great that it's solved.

 

In the future, if you use the browsers "inspect element" feature, you will easily find which class it is that has to be updated 🙂

0 Upvotes
jessebeginbound
Participant | Platinum Partner
Participant | Platinum Partner

Changing the color of just the title of an FAQ accordion

@fbroder I'm glad you got this solved! If you ever run into this again, we created a universal FAQ Module for HubSpot that has a ton of color, branding, and style options to make this easier for you in the future. You can add it to any HubSpot CMS Template or page as you see fit. Check it out here next time: https://marketplace.hubspot.com/products/begin-bound/beginbound-ultimate-faq-module-live

 

Happy HubSpotting!

Jesse

0 Upvotes