Navigation
Archive / 8531&lang=en / accordion design
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 7, 2016 at 2:26 am #1120680
    bak
    Participant

    Hi

    I have the following custom CSS applied to a page. What is the correct syntax if I want to apply it to an additional page?

    .page-id-2479 .x-accordion-heading .x-accordion-toggle.collapsed {
    background-color: #e2e2e2 !important;
    }
    .page-id-2479 .x-accordion-heading .x-accordion-toggle {
    background-color: #e2e2e2 !important;
    }

    .page-id-2479 .x-accordion-heading .x-accordion-toggle.collapsed:before {
    color: #DE0224;
    }
    .page-id-2479 #x-section-6 .x-column.x-1-3 .x-accordion {
    position: relative;
    }
    .page-id-2479 #x-section-6 .x-column.x-1-3 .x-accordion:before {
    content: “”;
    width: 2px;
    height: 113px;
    position: absolute;
    right: -25px;
    top: 0;
    background-color: #ccc;
    }

    .page-id-2479 #x-section-6 .x-column.x-1-3:last-child .x-accordion:before {
    display: none;
    }

    August 7, 2016 at 7:19 am #1120843
    Thai
    Moderator

    Hi There,

    Please try with this CSS:

    .page-id-2479 .x-accordion-heading .x-accordion-toggle.collapsed,
.page-id-8531 .x-accordion-heading .x-accordion-toggle.collapsed {
	background-color: #e2e2e2 !important;
}
.page-id-2479 .x-accordion-heading .x-accordion-toggle,
.page-id-8531 .x-accordion-heading .x-accordion-toggle {
	background-color: #e2e2e2 !important;
}

.page-id-2479 .x-accordion-heading .x-accordion-toggle.collapsed:before,
.page-id-8531 .x-accordion-heading .x-accordion-toggle.collapsed:before {
	color: #DE0224;
}
.page-id-2479 #x-section-6 .x-column.x-1-3 .x-accordion,
.page-id-8531 #x-section-4 .x-column.x-1-3 .x-accordion {
	position: relative;
}
.page-id-2479 #x-section-6 .x-column.x-1-3 .x-accordion:before,
.page-id-8531 #x-section-4 .x-column.x-1-3 .x-accordion:before {
	content: "";
	width: 2px;
	height: 113px;
	position: absolute;
	right: -25px;
	top: 0;
	background-color: #ccc;
}

.page-id-2479 #x-section-6 .x-column.x-1-3:last-child .x-accordion:before,
.page-id-8531 #x-section-4 .x-column.x-1-3:last-child .x-accordion:before {
	display: none;
}

    Hope it helps 🙂

    August 7, 2016 at 7:27 am #1120856
    bak
    Participant

    Great, many thanks

    August 7, 2016 at 7:30 am #1120857
    bak
    Participant
    This reply has been marked as private.
    August 7, 2016 at 9:55 am #1120940
    Thai
    Moderator

    Please update the previous CSS a bit:

    .page-id-2479 .x-accordion-heading .x-accordion-toggle.collapsed,
.page-id-8531 .x-accordion-heading .x-accordion-toggle.collapsed {
	background-color: #e2e2e2 !important;
}
.page-id-2479 .x-accordion-heading .x-accordion-toggle,
.page-id-8531 .x-accordion-heading .x-accordion-toggle {
	background-color: #e2e2e2 !important;
}

.page-id-2479 .x-accordion-heading .x-accordion-toggle.collapsed:before,
.page-id-8531 .x-accordion-heading .x-accordion-toggle.collapsed:before {
	color: #DE0224;
}
.page-id-2479 #x-section-4 .x-column.x-1-3 .x-accordion,
.page-id-8531 #x-section-4 .x-column.x-1-3 .x-accordion {
	position: relative;
}
.page-id-2479 #x-section-4 .x-column.x-1-3 .x-accordion:before,
.page-id-8531 #x-section-4 .x-column.x-1-3 .x-accordion:before {
	content: "";
	width: 2px;
	height: 113px;
	position: absolute;
	right: -25px;
	top: 0;
	background-color: #ccc;
}

.page-id-2479 #x-section-4 .x-column.x-1-3:last-child .x-accordion:before,
.page-id-8531 #x-section-4 .x-column.x-1-3:last-child .x-accordion:before {
	display: none;
}

    Let us know how it goes!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1120680 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>