Title: Change the GUI Last modified: August 22, 2016 --- # Change the GUI * Resolved [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/) * Hello! How can I change the GUI of accordion? I put this in my theme style.css * .accordion { border-bottom: 2px solid #FF0000; margin-bottom: 20px; } .accordion- title { border-top: 1px solid #FF0000; margin: 0; padding: 20px 0; cursor: pointer;}. accordion-title:hover {} .accordion-title:first-child {border: none;} .accordion- title.open {cursor: default;} .accordion-content {padding-bottom: 20px;} * but it’s not working * [https://wordpress.org/plugins/accordion-shortcodes/](https://wordpress.org/plugins/accordion-shortcodes/) Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/change-the-gui/page/2/?output_format=md) [→](https://wordpress.org/support/topic/change-the-gui/page/2/?output_format=md) * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5784926) * And also how can I put an icon in every title? * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785094) * I’m not sure why the styles wouldn’t be working for you. Is it possible for you to provide a link for me to take a look at? * As for the icon, you should be able to add the icon as a background-image in your CSS (assuming we can get that part working) like this: * ``` .accordion-title { background-image: url("path/to/image.png"); background-repeat: no-repeat; background-position: left center; padding-left: 60px; /* You'll have to adjust this for the size of your icon image */ } ``` * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785179) * here [http://66.147.244.92/~homecre1/betasite/1665-2/](http://66.147.244.92/~homecre1/betasite/1665-2/) * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785180) * I’m getting this error when trying to access the page: * `[an error occurred while processing this directive]` * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785182) * please try again, here again [http://www.homecredit.ph/betasite/1665-2/](http://www.homecredit.ph/betasite/1665-2/) * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785197) * I think the issue has to do with a commented block of code in your themes stylesheet. If you look at lines 1698-1701 of the code you’ll see this: * ``` #content { /* padding: 20px 0; background: #FFF; }*/ ``` * That will leave you with just `#content {`. If you don’t want that style, you should comment out the entire declaration block, including the selector. * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785201) * I see. It is possible to have different icon for each accordion? And how to put background only in title? * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785202) * And how to less the space between to accordion? Disregard the second question above (And how to put background only in title?) * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785210) * Each accordion has an ID associated with it, so you could add a different background image for each like this: * ``` #item-1 { background-image: url("path/to/image-1.png"); } #item-2 { background-image: url("path/to/image-2.png"); } ``` * That will only add the background image on the title of the accordions. * As for the spacing, you can use margins and padding to adjust the spacing between items. I should also note that in most cases WordPress adds paragraph `

` and break tags `
` automatically around shortcodes. I usually use something like this code block in my theme’s functions.php file to address that: * ``` function my_the_content_filter($content) { $array = array( '

[' => '[', ']

' => ']', ']
' => ']', ']
' => ']' ); $content = strtr($content, $array); return $content; } add_filter('the_content', 'my_the_content_filter'); ``` * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785230) * I use this * #item-2 { background-image: url(“path/to/image-2.png”); background-repeat: no- repeat; background-position: left center; padding-left: 180px; } * but the image is not displaying * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785231) * never mind my latest question. I resolved already * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785232) * After I add this * #item-1 { background-image: url(“path/to/image-1.png”); } #item-2 { background- image: url(“path/to/image-2.png”); } * the re-design of accordion is lost * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785233) * it’s not possible to have two image in one accordion? Like in right side (logo) then left side (arrow icon) * Thread Starter [UserDG](https://wordpress.org/support/users/tenkepadu/) * (@tenkepadu) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785235) * Sorry, please disregard my questions * Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/) * (@philbuchanan) * [11 years, 4 months ago](https://wordpress.org/support/topic/change-the-gui/#post-5785241) * You got everything working? Viewing 15 replies - 1 through 15 (of 17 total) 1 [2](https://wordpress.org/support/topic/change-the-gui/page/2/?output_format=md) [→](https://wordpress.org/support/topic/change-the-gui/page/2/?output_format=md) The topic ‘Change the GUI’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/accordion-shortcodes.svg) * [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 * [GUI](https://wordpress.org/support/topic-tag/gui/) * 17 replies * 2 participants * Last reply from: [UserDG](https://wordpress.org/support/users/tenkepadu/) * Last activity: [11 years, 3 months ago](https://wordpress.org/support/topic/change-the-gui/page/2/#post-5785254) * Status: resolved