[proximomktgParticipant]

I am trying to change the colors of the accordion header and background color. Here is what I put into the custom CSS:

.x-accordion-heading .x-accordion-toggle {
color: #fff;
background-color: rgba(43, 78, 101, 0.478431) !important;
}

This is not the only time that adding styles to the custom CSS has not resulted in a change for my site.

The site is http://homeloans4troops.com

Using WordPress 4.0 and X-Shortcodes 2.3.5

I tried looking for this in the CSS file, but could not find it there either…

[Nabeel AModerator]

Hey Will,

Please try this CSS code via Appearance > Customize > Custom > CSS instead:

.x-accordion .x-accordion-group .x-accordion-heading a {
color: #fff !important;
background-color: rgba(43, 78, 101, 0.478431) !important;
}

Let us know if this works!

[proximomktgParticipant]

That’s what I tried.

[proximomktgParticipant]

That’s where I have the CSS code placed currently.

[RadModerator]

This is kind of weird. Using the same css pasted at console works, but using the same css at customizer won’t work. Would you mind providing an admin login?

Thanks!

[proximomktgParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Will,

You are using an old version of X theme.
Please upgrade theme and plugins using the guide below.

http://theme.co/x/member/kb/updating-your-theme-and-plugins/

Thanks

[proximomktgParticipant]

Thank you, but this did not solve my problem. Please let me know how to fix this. Like I said, this is not the first time I have had this problem.

[ChristopherModerator]

Hi there,

Now it works,there was a syntax mistake in CSS code,I fixed it:)

[MaParticipant]

Hi there,

I’m following this thread and adjusted the css you provided to make my text black. The only thing remaining is the accordian toggle, it’s still white. What do I need to add into the css to make the toggle/collapse arrow white? I tried entering .x-accordion-toggle into the css and it didn’t work. I’m probably just entering it in the wrong place I just can’t figure out where. This is what I have so far. Can you please advice on adjustment to make this possible? Thank you soo much.

.x-accordion .x-accordion-group  .x-accordion-heading a .x-accordion-toggle {
color: black!important;
}

[ChristianModerator]

Hey Maasha,

Please add the code below in your Appearance > Customize > Custom > CSS

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

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

I’ve exaggerated the colors so you see the effect and change the color accordingly.

Hope that helps. 🙂

[MaParticipant]

Works perfect thank you!!

[proximomktgParticipant]

I noticed a few more problems with the spacing issues caused by the slider in masthead.

1. The social buttons I have placed on the homepage are not clickable in IE or Safari. Work fine in Firefox and Chrome.

2. The portfolio filter is not clickable on Safari or IE or on my mobile device.

For these two issues, it seems that the top 100 pixels or so are not clickable on the pages in IE and Safari.

3. There is a flash of a white box over the social icons every time the slider transitions.

4. In Firefox, the slider stops at the logo.

Here is my CSS:

.x-navbar {
border-bottom: none;
box-shadow: none;
background-image: url(http://williamsburgfarmersmarket.com/wp-content/uploads/2015/05/WFM-Header1.png);
background-repeat: no-repeat;
min-height: 400px;
}
.x-slider-container.below {
border-bottom: none;
}
.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: none;
}
a.x-img>img {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: 2px 2px 5px rgba(0,0,0,.4);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin: .2em 0 0.2em;
}
.supercarousel div {
text-align: center;
}
.supercontentdata img {
width: auto;
max-height: 75px;
margin: 0;
}
.supercrsl .pagination {
  text-align: center;
  max-height: 1px;
}
.tribe-mini-calendar-event .list-info h2 {
  font-size: 24px;
  font-weight: 400;
}
.hentry {
margin-top: 1em;
}
#tribe-bar-form .tribe-bar-submit input[type=submit] {
background: #becd2b;
}
.tribe-events-calendar thead th {
background-color: #becd2b !important;
border-left: 1px solid #075850;
border-right: 1px solid #075850;
}
#tribe-events-content .tribe-events-calendar td {
  border: 1px solid #075850;
}
#tribe-events .tribe-events-button, #tribe-events .tribe-events-button:hover, #tribe_events_filters_wrapper input[type=submit], .tribe-events-button, .tribe-events-button.tribe-active:hover, .tribe-events-button.tribe-inactive, .tribe-events-button:hover, .tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-], .tribe-events-calendar td.tribe-events-present div[id*=tribe-events-daynum-]>a {
  background-color: #becd2b;
}
.tribe-mini-calendar-event .list-date {
  background: #becd2b;
}
.widget {
  text-shadow: none;
}
.wpb_content_element {
  margin-top: -19px;
}
.volunteer-spot {
  margin-top: -17px;
}
.tribe-mini-calendar-event .list-info h2 {
  line-height: 1.2em;
  font-size: 22px;
}
.x-main .widget:first-child {
  list-style: none;
}
.widget ul, .widget ol {
  border: none;
  box-shadow: none;
}
.widget ul li, .widget ol li {
border: none;
  box-shadow: none;
}
.circle-text {
  height: 20%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
.circle-text a {
color: #fff;
text-shadow: 2px 2px 2px rgba(0,0,0,.5)
}
.circle-image {
position: relative;
}
@media (max-width: 767px){
    .x-custom-header-widget {
        display:none;
}}
.x-nav-wrap.mobile.collapse.in {
  display: block;
  background-color: #fff;
  border-radius: 3px;
  padding: 5px 5px 5px;
}
.events-archive .entry-content, .events-archive .entry-header {
  width: 100% !important;
}
@media screen {  
  .x-slider-container.above {
  top: -210px;
  }
  .x-main{
    top:-190px;
  }
  .x-sidebar.right{
    margin-top:-190px;
  }
}

@media screen9 {
    .x-slider-container.above {
  top: -210px;
  }
  .x-main{
    top:-190px;
  }
  .x-sidebar.right{
    margin-top:-190px;
  }
}
.x-colophon.top {
    top: -188px;
}
.x-colophon.bottom {
    margin-top: -188px;
}
h3, .h3 {
  font-size: 175%;
}
@media screen {
.blog .x-main,
.blog .x-sidebar.right,
.page-template-template-layout-portfolio .x-main,
.page-template-template-layout-portfolio .x-sidebar.right, .archive .x-sidebar.right {
margin-top: 0;
top: 0;
}
.blog .x-header-landmark, .page-template-template-layout-portfolio  .x-header-landmark {
margin-top: -190px;
}
.archive .x-header-landmark {
margin-top: -175px;
}
.archive .x-iso-container {
top: 190px;
}
.blog .x-colophon.top {
margin-top: 0px;
}
.blog .x-colophon.bottom {
margin-top: 0px;
}
.archive .x-colophon.top {
margin-top: 0px !important;
top: 0px !important;
}
.archive .x-colophon.bottom {
margin-top: 0px !important;
top: 0px !important;
}
.page-template-template-layout-portfolio .x-colophon.top {
margin-top: 0px !important;
top: 0px !important;
}
.page-template-template-layout-portfolio .x-colophon.bottom{
margin-top: 0px !important;
top: 0px !important;
}
}

[proximomktgParticipant]

I figure out the problem with the filter and the social buttons and flashing white box. I had a min height set for the nav bar. Changed the min height and added margin. That fixed the problem. Still have issue with the slider on Firefox.

[LelyModerator]

Hello Will,

Glad that you figured it out.
About the slider issue being cut, please add the following CSS:

@-moz-document url-prefix() { 
  .x-brand img  {
     position: absolute;
     z-index: 999;
  }
}

Hope this helps.

[Author]

Posts