Docs

[ggoudey]

The titles of my accordian elements are now greyed out. Not sure what happened? How do I fix this, and is possible to change the font size and color of the titles?

[ggoudey]

http://www.peacelocalfood.info

[ggoudey]

Ok. The titles are white again? But am still interested in changing the font size and color of the titles.

http://www.peacelocalfood.info

[Nico]

Hi There,

Thanks for writing in.

Add this in your Customizer > Custom > CSS:

.x-accordion-heading .x-accordion-toggle{
color:#000;
font-size:114.2%
}

Adjust the #000 and 114.2% to achieve the best color and size you want on your accordion titles.

Hope it helps.

Let us know how it goes.

Thanks.

[ggoudey]

Thank you. This worked very well.

[Friech]

We’re delighted to assist you with this.

Cheers!

[ggoudey]

Cheers to you to!

[ggoudey]

A further request… how do I control the color of the tabs and the arrow? If the font size, font color, tab color and arrow color could be provided to me, as a complete css… I could edit it… that would be great. The overall look of the site is progressing very well. Thank you!

[Rue Nel]

Hello There,

Thanks for updating in! To control the tab color and the arrow, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-accordion-heading .x-accordion-toggle {
    background-color: #e5e5e5;
}

.x-accordion-heading .x-accordion-toggle:hover {
    background-color: #000;
}

.x-accordion-heading .x-accordion-toggle:before {
    color: green;
}

.x-accordion-heading .x-accordion-toggle:hover:before,
.x-accordion-heading .x-accordion-toggle.collapsed:hover:before {
    color: red;
}

Hope this helps.

[ggoudey]

Thanx this is helping already.

[Prasant Rai]

You are most welcome. 🙂

[ggoudey]

You have given me two css codes related to the accordion styles. Is the second mean to replace the first… or in addition to the first ?

[ggoudey]

Ok… looking more at this… If i’m not wrong the second batch you gave to me is in addition to the first…

What I don’t see, and need, is a way to adjust the bg color of the accordion fields. They are now a dark grey and I want to bring them down to a lighter grey… a few degrees above the bg value of the section. I would change the text color to accommodate this.

Thank you in advance…

[Rue Nel]

Hello There,

The second batch of code is an addition to the first given code.

I have inspected your custom css and it seems that you have inserted an invalid code. Please check this out; http://prntscr.com/e80x0v

You have to resolve this so that other custom css would not be affected. The best css practice should be like this layout:

.element {
  // your styling
}

@media(max-width: XX){
  .element {
    // your styling
  }
}

In your case it looks like that you will have something like this:

.ubermenu-main {
  float: right;
  margin-top: -50px;
}
.x-brand.text {
  margin-top: 15px;
}
.menu-item.x-menu-item.x-menu-item-search {
  display: inline-block;
}
.x-btn-navbar-search {
  line-height: 85px;
}

.x-topbar .p-info {
  color: #fff;
}

.x-colophon.bottom .x-colophon-content, .x-colophon.bottom .x-colophon-content a {
  color: #fff;
}

.x-colophon.bottom .x-nav li a {
  color: #fff;
}
.ubermenu-responsive-toggle, .ubermenu-sticky-toggle-wrapper {
  float: right;
}

.x-search-shortcode {
    border: 2px solid #9a9a9a;
}
.x-accordion-heading .x-accordion-toggle{ color:#EE9F29; font-size:95% }
  
.x-accordion-heading .x-accordion-toggle {
    background-color: #000;
}

.x-accordion-heading .x-accordion-toggle:hover {
    background-color: #A0A0A0;
}

.x-accordion-heading .x-accordion-toggle:before {
    color: green;
}

.x-accordion-heading .x-accordion-toggle:hover:before,
.x-accordion-heading .x-accordion-toggle.collapsed:hover:before {
    color: red;
}
  
 
.x-navbar {
    background-color: rgba(0,0,0,0.9);
}

@media (min-width:979px){
  .home div#x-section-1 {
    margin-top: -75px !important;
  }
}

@media (min-width:767px){
  div#nf-form-13-cont {
    margin-top: -41px;
  }
}

Back to the issue, you can always change the background color as what I have suggested here: https://community.theme.co/forums/topic/accordian-titles/#post-1365592

Hope this helps.

[ggoudey]

I fixed the missing closing brace… but there is still a gap between the navbar and the post carousel.

Also it seems that I can change all the colors of the accordion element except when it is not toggled or hovered over. In your provided code I don’t see anything for this.

This css stuff is quite new to me and, maybe I am blind?

[Author]

Posts