Modal Toggle Button Styling

Good afternoon,

I am trying to change the alignment of my toggle button for the Modal Element.
Its default is a right alignment, but I’d like to left align it.

The alternative – maybe even preferred – is to place the function code in a button I create.

I would be deeply appreciative if you would help me understand how to do this.

Thank you,

Dan R

Hello @Racimo,

Thanks for writing in! :slight_smile:

Instead of Modal Element, I would suggest we use the [button] and [lightbox] shortcodes to achieve this.

Button shortcode info: https://theme.co/apex/forum/t/shortcodes-button/151
Modal shortcode info: https://theme.co/apex/forum/t/shortcodes-lightbox/165

Please add this code in your page.

<!-- This is where you can add your content for your modal -->
<div id="my-content">
 Content Here...
</div>

<!-- This is the button shortcode -->
<div style="text-align: left;">
   <a href="#my-content" class="lightbox-selector x-btn" data-type="inline">Click Me</a>
</div>

<!-- This is the modal element shortcode -->
[lightbox selector=".lightbox-selector"]

Kindly read the notes in the code above enclosed by <!-- NOTES HERE --> on what each line of code pertains.

Hope this helps.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.