[Resolved] CSS/Layout questions regarding accordion

[Author]

Posts

[A. Ku]

Tell us what you are trying to do?
I'm trying to style my accordion
Is there any documentation that you are following?
yes
Is there a similar example that we can see?
no
What is the link to your site?
hidden link

My questions are:

How to style:

1. How to get accordion title preceded with font awesome icon?
2. How to remove box of panel-heading accordion specifically of the first panel?
3. How to change background of specific panel-body?
4. How to list the values of the entries of a Checkboxes field with multiple entries on seperate lines when displayed on front end?

1. How to get accordion title preceded with font awesome icon?

I made a selector but it doesn’t work on the first panel.
Selector First Panel-heading of accordion:
Layouts>Edit accordion panel>panel classes added in this example named biospeciaal

.panel-heading.biospeciaal a:before {
font-family: FontAwesome;
content: "\f005"!important;
display: inline-block;
padding-right: 10px;
vertical-align: middle;
}

2. How to remove box of panel-heading accordion specifically of the first panel?

This isn’t a border? How can I remove the lines of the first panel-heading only?

3. How to change background of specific panel-body?

I know the selector for all panel-bodies is:
.panel-body {
background: green;
}

I tried adding a selector for the specific panel-body of Panel 2:
Layouts>Edit accordion panel>Cell HTML Tag>Tag classes added named qualitybody

.qualitybody {
background: yellow!important;
}

But this only seems to apply to part of the body. I want to change the background of complete area of this specific panel-body. How can I specify this?

4. How to list the values of the entries of a Checkboxes field with multiple entries on seperate lines when displayed on front end?

I made a Field Group (Qualities) which is a checkboxes field.
So I can have multiple entries on this. Know they are displayed as a comma seperated list where the entries follow each other on one line. How can I display the entries on seperate lines?

[Noman]

Hi,

Thank you for contacting Toolset support.

1. Please use this custom CSS to set the Font Awesome icon

   .panel-title a:before {
    font-family: FontAwesome;
    content: "\f005"!important;
    display: inline-block;
    padding-right: 10px;
    vertical-align: middle;
}

2. Please use this custom CSS to remove the broder:

.panel a {
    outline: medium none !important;
}

3. Please use this custom CSS to set the background color of the second accordin:

#ddl-panel_161_5a27d6a4cde92 .panel-body {
    background-color: yellow !important;
}

4. We have another client who had the similar issue and luckily was also able to solve it, this may help in your case:
https://toolset.com/forums/topic/display-checkbox-titlelabel-instead-of-checkbox-value/#post-429133

Please use the tag <br> instead of comma "," as shown in the screenshot.

Thank you

[A. Ku]

I still have some questions.

Thank you for contacting Toolset support.

1. Please use this custom CSS to set the Font Awesome icon
Works very nice. Thanks.

2. Please use this custom CSS to remove the broder:
Doesn't work. I attached a screenshot (border.png) to clarify which border/outline I want to remove.

3. Please use this custom CSS to set the background color of the second accordin:
Background css is not working. I attached a screenshot (background) to clarify what I mean.

4. We have another client who had the similar issue and luckily was also able to solve it, this may help in your case:
https://toolset.com/forums/topic/display-checkbox-titlelabel-instead-of-checkbox-value/#post-429133
So neat. Impressive.

[Noman]

Hello,

You can remove border (as in screenshot - border.png) by using following css:

.panel-group .panel {
border:none !important;
}

For background, you can use following css to achieve similar result as in attached screenshot background.png:

.panel-body {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.panel-body > div {
    padding-bottom: 20px !important;
    padding-top: 20px !important;
}

Thank you

[A. Ku]

How can I specify it so it only removes border from span 1.

I tried something like #biocellid.panel-group .panel {
border:none !important;
}

And with background I wanted to change the background color for a specific panel-body. How do I do that?

[Noman]

Hello,

>> How can I specify it so it only removes border from span 1.
By using following CSS you can specify:

.panel-group .panel:first-child {
    border: medium none !important;
}

Here is more details:
hidden link

>> And with background I wanted to change the background color for a specific panel-body. How do I do that?

You can use similar HTML structure as you are using in panel 1 and panel 2 (see screenshot) and apply background color to ID (#qualitiescell) or Class (.qualitybody).

Or you can make some general CSS classes for background colors like: bg-yellow, bg-brown and add those classes with panel-body so that HTML will be like this:

<div class="panel-body bg-yellow">

And CSS will be like this:

.bg-yellow {
Background: yellow !important;
}

I hope it helps.
Thank you

[A. Ku]

>> How can I specify it so it only removes border from span 1.
thanks

>> And with background I wanted to change the background color for a specific panel-body. How do I do that?
I applied it to Class (.qualitybody) (see attachment class qualitybody).

I used this css:
.qualitybody {
Background: yellow !important;
}
But there is still a white padding (see attachment white padding). I want to keep the padding but this should also have the background color. How do I do that?

[Noman]

Hello,

>> I want to keep the padding but this should also have the background color. How do I do that?

I can’t see following CSS in source that I sent yesterday. Please make sure you added properly. After adding following CSS it looks as you want (see attached screenshot):

.panel-body {
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}
 
.panel-body > div {
    padding-bottom: 20px !important;
    padding-top: 20px !important;
}

Thank you

[A. Ku]

Trying to do three more things:
1. Change color of background of panel headings. Tried this unsuccesfully:
.panel-heading {
background-color: #88764E!important;
}

2. Tried to change the background color of the first panel heading:

.panel-heading.biospeciaal {
background-color: none!important;
}

3. How can I change the color of the font used in the panel heading?

.panel-title > a {
color: #363636 !important:
}

[Noman]

Hello,

>> 1. Change color of background of panel headings. Tried this unsuccessfully:
Some existing CSS overriding your CSS as in attached screenshot. You need to add some prefix to your CSS and add your CSS after the existing css. Here is an example of prefix:

body .panel-heading {
background-color: #88764E!important;
}

>> 2. Tried to change the background color of the first panel heading:
If you want to remove background color then you can use following CSS:

.panel-heading.biospeciaal {
	background-color: transparent !important;
}

>> 3. How can I change the color of the font used in the panel heading?
You can change heading color by using following CSS:

body .panel-title a {
    color: #363636 !important;
}

Please kindly open a new ticket for new issues and we would be happy to help. This will help other users with similar problems to find solutions when searching the forum, We do not handle multiple issues in the same ticket as per support policy. https://toolset.com/toolset-support-policy/

Kindly mark this current ticket as resolved if all is good now.

Thank you

[A. Ku]

Thank you very much for your help.