How to Change Accordian Style to Your Education Theme Demo Style

[badarkwk]

i am using ethos theme on edcons.edu.pk. i want to change ethos accordian style to education accordian style, kindly follow the image.

[ruenel]

Hello There,

Thanks for writing in! The Education demo site is using renew stack. To resolve your issue, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-ethos .x-accordion-group {
    margin: 0 0 4px;
    border: 2px solid #e5e5e5;
    -webkit-transition: border-color 0.3s ease;
    transition: border-color 0.3s ease;
}

.x-ethos .x-accordion-heading {
    border-bottom: 0;
}

.x-ethos .x-accordion-heading .x-accordion-toggle.collapsed {
    background-color: #fff;
}

.x-ethos .x-accordion-heading .x-accordion-toggle {
    display: block;
    padding: 10px 15px;
    font-size: 124.8%;
    color: #2c3e50;
    background-color: #fafafa;
    cursor: pointer;
}

.x-ethos .x-accordion-heading .x-accordion-toggle,
.x-ethos .x-accordion-heading .x-accordion-toggle:hover{
    color: #162536;
}


.x-ethos .x-accordion-heading .x-accordion-toggle:before {
    content: "\f067";
    color: #162536 !important;
    position: relative;
    display: inline-block;
    bottom: 0.1em;
    margin-right: 10px;
    font-size: 74%;
    -webkit-font-smoothing: antialiased;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-family: "FontAwesome" !important;
    font-style: normal !important;
    font-weight: normal !important;
    text-decoration: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.x-ethos .x-accordion-heading .x-accordion-toggle.collapsed:before {
    color: #d3d3d3;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
}

.x-ethos .x-accordion-inner {
    padding: 15px;
    border: none;
    border-top: 2px solid #e5e5e5;
}

We would loved to know if this has work for you. Thank you.

[badarkwk]

thank - now kindly provide me the coding for the “Button” used in education demo

[christopher]

Hi there,

You do not need a CSS code for the button to be like the Education demo. Just use the Button Element and use the options there to recreate the same look and feel.

The primary color is: #38255d
Hover Color is: #211d40

Use the same color codes for the Box Shadow and the Radius option should be 0.25em

Thank you.