Ook komen de spoilers dan dichter bij elkaar te liggen. Zie het verschil met de test-spoilers onderaan.
Je kan de accordion een stijl meegeven.
bijv.
class=”accordionoranje”
.accordionoranje {border-left:3px orange solid}
Mogelijkheden in de gratis versie:
De items in rood horen bij de Proversie.
Handige support pagina op: https://getshortcodes.com/docs/#troubleshooting
Voor de spoiler (een openklappend item] krijg je deze opties om uit te kiezen:
Bij de proversie krijg je meer stijlen te zien.
NB: Aanpassing inhoudsdeel; .su-spoiler-content {background:#fff; border:1px solid #000}
Voor een opvallender layout kan je gebruik maken van het veld Extra CSS Klasse. Zie onderaan.
Je kan een template kiezen en aanpassen:
het template van de berichten aanpassen.
De templates staan in dit pad: shortcodes-ultimate/includes/partials/shortcodes/posts/templates
Plaats het template in je child theme.
De shortcode (moet tussen vierkante haken: su_posts of su_posts template=”templates/teaser-loop.php” tax_term=”74″ order=”desc. Het resultaat van de laatste is: 10 berichten van de categorie 74 (plugins) in aflopende volgorde van publicatiedatum.
Nu 4 berichten op oplopende volgorde van titel: su_posts template=”templates/teaser-loop.php” posts_per_page=”4″ tax_term=”74″ order=”asc” orderby=”title”
Aanpassingen mbv CSS. Kies dan voor Class bij de shortcode. NB: het hangt blijkbaar af van de gekozen stijl: Standaard, Fancy of Simpel wat er verder nog mogelijk is.
In de shortcode wordt het dan:
su_spoiler title=”Test 1 (stijl:standaard en icon: plus-circkel en stijl spoilerstandaard)” icon=”plus-circle” anchor=”spoiler” anchor_in_url=”yes” class=”spoilerstandaard”
.spoilerstandaard {background-color: #CDE9FF!important;}
Je hoeft nu geen naam te geven aan de stijl. De code wordt:
su_spoiler title=”test2 (stijl: fancy en icon: caret-square)” style=”fancy” icon=”caret-square” anchor=”test2″ anchor_in_url=”yes”
.su-spoiler-style-fancy>.su-spoiler-title {background:#CDE9FF!important}
.su-spoiler-style-simple>.su-spoiler-title{background:#CDE9FF!important;}
su_spoiler title="Test3b (stijl: simpel; icon:chevron-circle; klasse:spoilersimpel)" style="simple" icon="chevron-circle" anchor="testsimpelb" anchor_in_url="yes" class="spoilersimpel"
.su-spoiler-style-simple.spoilersimpel {border: 3px solid red!important; color:red!important}
su_spoiler title="test4 : toevallige ontdekking met modern-light" style="modern-light" icon="arrow" anchor="test4" anchor_in_url="yes"
.su-spoiler-style-modern-light>.su-spoiler-title {padding: 7px 34px 7px 10px;background: #D9E9F3; color: #545A5E;}
.su-spoiler-style-modern-light>.su-spoiler-title>.su-spoiler-icon {right: 7px;left: auto;}
Of houd het pijltje links met:
.su-spoiler-style-modern-light>.su-spoiler-title {background: #D9E9F3 0 50%;}
Vergelijkbaar:
- *Shortcodes ultimate Pro
onder andere shortcodes voor kolommen