Works with shortcodes, but "display: block;" has to be applied for every button

  • I needed a button to work with SiteOrigin’s PageBuilder. PB’s built in button widget does not look or work good at all, and other button plugins were not integrating properly with PB in widget form.

    MaxButtons worked for me as a shortcode, and it looked good (though long buttons will split themselves and overlap in a very ugly manner). Applying “display:block;” fixed this, but there’s a problem: However, each button is generated with its own CSS.

    Hence, the following code:

    a.maxbutton-1 {
display:block;
}

    …will only apply to the very first button you generate, not the second, third, fourth, etc. These additional buttons are generated as a.maxbutton-2, a.maxbutton-3, etc, requiring a new class conditional entry in style.css upon the generation of every button. This is frustrating, not to mention a step that can be easily overlooked.

    I chose to use Standout CSS3 Buttons instead, which look similar – if, unfortunately, not as spiffy – and are generated off one class name which allows “display:block;” to automatically apply to all buttons generated.

    Additionally, the MaxButtons interface has a bug where the button preview does not show the background gradient chosen. This is an additional stumbling block, especially when one has to go to the MaxButtons interface to create every new button – link and all.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author johnbhartley

    (@johnbhartley)

    You could actually take care of the issue you are discussing by using:

    a[class^="maxbutton-"] {
display: block;
}

    which will apply that to any anchor element with a class that starts with maxbutton-

    If you had asked about it in the forums we would have been happy to get back to you and even include it in a next update if it is a plugin-wide bug.

    You make a great point about one overall class and we will look into implementing it as we move forward. Thanks for the suggestions even if it did come with 3/5 stars ??

    Thread Starter kidznc

    (@wsp-kk)

    Honestly, I’ve never seen that form of CSS done before. That is brilliant, even though it is a complex way to get around a problem that shouldn’t be that difficult – but that’s CSS for you.

    At any rate, it definitely makes it easier, and I’ll consider using it, as MaxButtons still looks better than Standout CSS3, and I prefer the customizable gradient.

    Plugin Author johnbhartley

    (@johnbhartley)

    Agreed that there is better way to handle it. We’ll look into the best way to implement it for a future update. If you have any other questions feel free to let us know.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Works with shortcodes, but "display: block;" has to be applied for every button’ is closed to new replies.