[Plugin: Shortcodes Ultimate] More than one style of PullQuote

  • Sheila

    (@hoffmangraphics)


    12 years, 9 months ago

    I’m brand new to Ultimate Shortcodes and so far it’s AWESOME. I already have used the pullquote code for a lovely pullquote here: https://dawn.hoffmangraphics.com/mission-vision-plan/.

    Now I’m also using it again but with a menu nested in it and it works! What I’m wondering is if there’s any way to have more than one style setup for the pull quotes. I’d prefer to make the menu slightly different in style than an actual pull-quote. I’m wondering if there’s a CSS way to give them two unique styles? Here’s the secondary menu as a pullquote: https://dawn.hoffmangraphics.com/what-is-domestic-violence/

    I imagine I might be able to add a custom class around the menu shortcode but not being a coder I’m clueless what that might look like or even if it’s possible.

    Here’s what the nested shortcodes look like:
    [pullquote align=”right”] [menu name=”what”][/pullquote]

    Thanks,
    Sheila

    https://www.ads-software.com/extend/plugins/shortcodes-ultimate/

Viewing 1 replies (of 1 total)

  • Hi Sheila,

    With WordPress it’s possible to give any page/post a unique (or secondary) style… as long as the theme you’re using adds a CSS class with the page ID in it. If you know how, then you can use this knowledge to tweak this awesome plugin (or any style!).

    Have a look at the code for your Domestic Violence page, you’ll see that the <body> tag has a class of pageid-86. For your Mission page, the <body> tag class is pageid-35. Each page on your site will have a unique class that you can use to make fine tuning adjustments (or secondary menus using the Shortcodes Ultimate plugin).

    With a bit of CSS magic, it’s possible to now tweak the menu for just one page. Here’s a quick CSS example you can try to change the pull-menu for the Shortcodes Ultimate plugin:

    .pageid-86 .su-pullquote {
border:#7ABFE9 solid 1px;
background-color:#FBE7A0;
margin-top:5px;
padding:10px;
/* Add whatever CSS you want - add this to your custom-code/style.css file */
}

    What this says is basically: “use the su-pullquote on pageid-86”. If you were to change .pageid-86 to .pageid-35, then you’d affect *just* the Mission page (id 35).

    If you want both pages to have this style (but no other), then use:

    .pageid-35 .su-pullquote,
.pageid-86 .su-pullquote {
/*add whatever CSS you want*/
}

    Note the comma after the first line. You can also add more (as long as you have the comma!). The last line *DOESN’T* have a comma.

    Now you can create those secondary styles for the SU plugin.

    Have fun with the CSS! The only limit will be your imagination… ??

    Cheers,

    Zain

Viewing 1 replies (of 1 total)
  • The topic ‘[Plugin: Shortcodes Ultimate] More than one style of PullQuote’ is closed to new replies.