Home>Support>Theme child and accordion css

Theme child and accordion css

Hi !

I’m using the (so nice ^^) accordion widget on my site www.titanscity.com to display informations.

I’m using a child theme and i modified the style.css like this to modify the accordion header shape to fit with the general ambiance of the website.

.sow-accordion-panel-header{
	padding: 0px 10px 8px 20px;
	margin-bottom: 5px;
	border-radius: 15px;
	border-color: #ddd;
	border-width: 1px;
	background-color: #fff;
    margin-bottom: 10px;
}
/*position du titre de l'accordeon*/
.sow-accordion-title {
    display: inline-block;
    padding-left: 15px;
}
/*position du +/- du header de l'accordeon*/
.sow-accordion-open-close-button {
    float: right;
    position: absolute;
    left: 20px;
    top: 10px;
    z-index: 1;	
}
/*ombre sous le contenu de l'accordeon*/
.sow-accordion-panel-content .sow-accordion-panel-border {
    box-shadow: 1px 10px 10px 1px #d8d8d8;
	border-color: #d6d6d6;
	border-width: 1px;
	padding: 15px 30px 15px 30px;
	border-radius: 15px;
	background-color: #fff;
	border-style: dashed;
}

The padding of the header is important since there is lots of panels/page and i need to gain some space to not have a too much long page.

But, it doesn’t work… the theme child style is not taken in account.. When i look at the code, i have a weird name of style which prevent my theme child to change the settings of the header panel

.so-widget-sow-accordion-default-<strong>c103d019a08c</strong> .sow-accordion .sow-accordion-panel .sow-accordion-panel-header {
    position: relative;
    cursor: pointer;
    padding: 15px 30px 15px 30px;
    background-color: #ffffff;
    color: #c42d2d;
    text-align: left;
    border-style: solid;
    border-color: #c42d2d;
    border-width: 1px;
}

Those panels are a copy from another panel (resulting of a previous post to know how can i use a content in another article. Alex S told me about the copy row or copy widget function which is reaaly helpful !! ^^)

Does someone could help me find a solution or even a beginning of solution to solve this ?

This is a free community support forum. Replies are not guaranteed. If you need professional email support, please purchase a SiteOrigin Premium license.

  1. 17 days, 2 hours ago titanscity

    i forget to tell : I either modified the css with admin wp -> Appearence -> custom css
    I seems to work for the rounded corner, the shadows, etc. But the high of the panel does not change :/ it’s still too big ^^

  2. 15 days, 1 hour ago Alex S Hi, I Work Here

    Hi Titanscity,

    The “weird” class is a unqiuely generated class that will change when you change your settings so it’s not something that should be replied upon.

    .so-widget-sow-accordion-default-<strong>c103d019a08c</strong>

    Instead, I would replace the unqiue class with the following class instead:

    .widget_sow-accordion .so-widget-sow-accordion

    The issue here with your CSS not being taken into account is that it’s not as specific as the widgets CSS. You can make it as specific as the widget CSS by prepending the above class to your selectors.

  3. 13 days, 18 hours ago titanscity

    Ok ! I wasn’t precise enough in my css selector path. I get it ! It works fine :)

    Really many thanks for your (twice) help Alex ! it’s perfect ^^

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More