Title: Need help with the css
Last modified: August 24, 2016
---
# Need help with the css
* Resolved [Dario Sinozic](https://wordpress.org/support/users/dsinozic/)
* (@dsinozic)
* [11 years, 1 month ago](https://wordpress.org/support/topic/need-help-with-the-css/)
* Hi,
I must say that I’m really satisfied with your wonderful plugin!!!
* I just need some help setting the css for my website. I need to set the accordion
with 2 items like on this [photo](http://greenway.lin44.host25.com/wp-content/uploads/2015/05/ACCCORDION.jpg)
* ps: I’m testing it on this [link](http://greenway.lin44.host25.com/1test/) on
the bottom of the page
* Thank you in advance for your help.
Regards, Dario
* [https://wordpress.org/plugins/accordion-shortcodes/](https://wordpress.org/plugins/accordion-shortcodes/)
Viewing 7 replies - 1 through 7 (of 7 total)
* Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
* (@philbuchanan)
* [11 years, 1 month ago](https://wordpress.org/support/topic/need-help-with-the-css/#post-6149691)
* You probably won’t be able to achieve the two column layout with the title on
the left and the content on the right. If you are ok with keeping the title above
the content, this should help get you started:
* ```
.accordion-title {
color: #fff;
margin: 0;
padding: 20px;
cursor: pointer;
}
.accordion-title.open {
cursor: default;
}
.accordion-content {
padding: 20px;
}
#accordion-1-t1,
#accordion-1-c1 {
background-color: #1562a8;
}
#accordion-1-t2,
#accordion-1-c2 {
background-color: #eccb0c;
}
```
* You’ll also probably want to add something like this to your theme’s `functions.
php` file:
* ```
/**
* Fixes empty and
tags showing before and after shortcodes in the
* output content.
*/
function pb_the_content_shortcode_fix($content) {
$array = array(
'
[' => '[',
']
' => ']',
']
' => ']',
']
' => ']'
);
return strtr($content, $array);
}
add_filter('the_content', 'pb_the_content_shortcode_fix');
```
* As the comment mentions, it fixes the empty paragraph and break tags that show
up around shortcodes by default. It should help fix your spacing issues.
* **Always make sure you back everything up before editing either of those files
though!**
* Thread Starter [Dario Sinozic](https://wordpress.org/support/users/dsinozic/)
* (@dsinozic)
* [11 years, 1 month ago](https://wordpress.org/support/topic/need-help-with-the-css/#post-6149719)
* Hi Phil,
You’re a STAR!!! Thank you so so much!
* I placed your codes as you said and it works almost perfect [link](http://greenway.lin44.host25.com/rent-a-car/fleet/)
* I have an idea hove to make this look like two coloumns, but i need an aditional
little bit of your help 😉
* If i can use pictures instead title text, i mean if i place a 1st picture in
a **closed** accordion title (with background color and title in a picc), and
the 2nd picture in a open/expanded accordion title (onli background color on
a pic without the title), then i can place a photo in a accordion content before
the scripts with same background color as acc.title and the title on it.
* So all i need from you is if you can help me placing photos in a closed and opened
accordion title places (if it’s possible)
* Thank you so much in advance.
Regards, Dario
* Thread Starter [Dario Sinozic](https://wordpress.org/support/users/dsinozic/)
* (@dsinozic)
* [11 years, 1 month ago](https://wordpress.org/support/topic/need-help-with-the-css/#post-6149722)
* By the way i’ve wrote a review and gave you 5 stars for your amazing work!
* Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
* (@philbuchanan)
* [11 years, 1 month ago](https://wordpress.org/support/topic/need-help-with-the-css/#post-6149771)
* You could use background images on the titles:
* ```
.accordion-title {
background-image: url("path/to/closed/image.jpg");
}
.accordion-title.open {
background-image: url("path/to/open/image.jpg");
}
```
* You might also have to hide the text of the title itself:
* ```
.accordion-title {
text-indent: -9999px;
}
```
* Thread Starter [Dario Sinozic](https://wordpress.org/support/users/dsinozic/)
* (@dsinozic)
* [11 years ago](https://wordpress.org/support/topic/need-help-with-the-css/#post-6149780)
* Hi,
Thank you again for your help. We are almost there.
* Can we divide the css for the titles for the 1st and the 2nd accordion?
I need
2 different photos for 2 titles, i mean the **1st title** will use form_rent_closed_large.
jpg and form_rent_open_bar.jpg, the **2nd title** will use form_tr_closed_large.
jpg and form_tr_open_bar.jpg as background pictures.
* I know I’m annoying you, but I know you’re the BEST!
Regards, Dario
* Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
* (@philbuchanan)
* [11 years ago](https://wordpress.org/support/topic/need-help-with-the-css/#post-6149781)
* You can use the unique ID’s for each title:
* ```
/* First title (see t1) */
#accordion-1-t1 {
background-image: url("path/to/closed/form_rent_closed_large.jpg");
}
#accordion-1-t1.open {
background-image: url("path/to/closed/form_rent_open_bar.jpg");
}
/* Second title (see t2) */
#accordion-1-t2 {
background-image: url("path/to/closed/form_tr_closed_large.jpg");
}
#accordion-1-t2.open {
background-image: url("path/to/closed/form_tr_open_bar.jpg");
}
```
* Make sure you update the path to the actual image.
* Thread Starter [Dario Sinozic](https://wordpress.org/support/users/dsinozic/)
* (@dsinozic)
* [11 years ago](https://wordpress.org/support/topic/need-help-with-the-css/#post-6149783)
* Thank you again.
You made my day, again 😉 I’ve also putted the “display: none;”
under accordion.open and now I need to play a little around the form alignment
and it would be [perfect](http://greenway.lin44.host25.com/rent-a-car/fleet/).
Thank you again so so much for your quick and professional support. Kind regards,
Dario
Viewing 7 replies - 1 through 7 (of 7 total)
The topic ‘Need help with the css’ is closed to new replies.
* 
* [Accordion Shortcodes](https://wordpress.org/plugins/accordion-shortcodes/)
* [Frequently Asked Questions](https://wordpress.org/plugins/accordion-shortcodes/#faq)
* [Support Threads](https://wordpress.org/support/plugin/accordion-shortcodes/)
* [Active Topics](https://wordpress.org/support/plugin/accordion-shortcodes/active/)
* [Unresolved Topics](https://wordpress.org/support/plugin/accordion-shortcodes/unresolved/)
* [Reviews](https://wordpress.org/support/plugin/accordion-shortcodes/reviews/)
## Tags
* [css](https://wordpress.org/support/topic-tag/css/)
* 7 replies
* 2 participants
* Last reply from: [Dario Sinozic](https://wordpress.org/support/users/dsinozic/)
* Last activity: [11 years ago](https://wordpress.org/support/topic/need-help-with-the-css/#post-6149783)
* Status: resolved