WordPress.org

Ready to get started?Download WordPress

Forums

Shortcodes Ultimate
[resolved] Uniform Button Size (12 posts)

  1. zooguy
    Member
    Posted 9 months ago #

    I would like a grid of buttons and I want all the buttons to be the same size (height and width). I would like the column width to change with the page width. I'm looking for a grid of 3 columns by 9 rows.

    How do I do this?

    I'm sure this is a common question but I didn't see it in this forum.

    http://wordpress.org/plugins/shortcodes-ultimate/

  2. Vladimir Anokhin
    Member
    Plugin Author

    Posted 9 months ago #

    Just try to explore shortcode parameters.

    [row]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [/row]
  3. zooguy
    Member
    Posted 9 months ago #

    Thanks for the quick response. I've done what you've said but it doesn't look right. Here is what I've got:
    My Web Site
    and here is what I did:

    To locate the fact sheet by zoo location, click on this link.
    
    Otherwise, select a link on this page for a particular area of the zoo to find the fact sheet.
    
    [row]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [/row]
    
    [row]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [/row]
    
    [row]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [column size="1/3"] [button wide="yes"] ... [/button] [/column]
     [/row]
    
    [row]
     [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=123" background="#65a366"]Treehouse and Education Department[/button] [/column]
     [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=126" background="#65a366"]Gorilla House[/button] [/column]
     [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=134" background="#65a366"]Vanishing Animals South[/button][/column]
     [/row]
    
    [row]
     [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=134" background="#65a366"]Ecostation[/button] [/column]
     [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=132" background="#65a366"]Vanishing Animals North[/button][/column]
     [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=139" background="#65a366"]Reptile House[/button][/column]
     [/row]

    What am I doing wrong?

  4. Vladimir Anokhin
    Member
    Plugin Author

    Posted 9 months ago #

    You're insert the code in a visual editor instead of HTML. Switch editor mode to HTML and then paste this code. If it not helps, try to enable custom formatting at plugin settings page.

  5. zooguy
    Member
    Posted 9 months ago #

    Okay.. Done that now but it still doesn't look right. Looks more like a two column table rather than three columns.

  6. Vladimir Anokhin
    Member
    Plugin Author

    Posted 9 months ago #

    Do you have enabled custom formatting?

  7. zooguy
    Member
    Posted 9 months ago #

    Custom formatting is enabled in my Settings tab in Shortcodes Ultimate settings.

    I'm using the Skeleton theme. When I switch to the Freedom theme, it looks better but the buttons don't span the cell. But, I'd prefer to be using the Skeleton them.

  8. Vladimir Anokhin
    Member
    Plugin Author

    Posted 9 months ago #

    Try to remove all blank lines in HTML mode and do not switch to visual.

  9. zooguy
    Member
    Posted 9 months ago #

    That didn't seem to help. I've changed my theme to Freedom. How do I get the buttons to span the width and height of the cell?

    Here is what I have in my "Text" window:

    To locate the fact sheet by zoo location, <a title="Animal Fact Sheets by Zoo Location" href="http://www.buffalozoodocents.org/wordpress/?page_id=16">click on this link</a>.
    
    Otherwise, select a link on this page for a particular area of the zoo to find the fact sheet.
    
    [row]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [/row]
    [row]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [/row]
    [row]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [column size="1/3"] [button wide="yes"] ... [/button] [/column]
    [/row]
    [row]
    [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=123" background="#65a366"]Treehouse and Education Department[/button] [/column]
    [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=126" background="#65a366"]Gorilla House[/button] [/column]
    [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=134" background="#65a366"]Vanishing Animals South[/button][/column]
    [/row]
    [row]
    [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=134" background="#65a366"]Ecostation[/button] [/column]
    [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=132" background="#65a366"]Vanishing Animals North[/button][/column]
    [column size="1/3"] [button wide="yes" url="http://www.buffalozoodocents.org/wordpress/?page_id=139" background="#65a366"]Reptile House[/button][/column]
    [/row]
  10. Vladimir Anokhin
    Member
    Plugin Author

    Posted 9 months ago #

    Update to 4.1.7. It was a bug that is fixed now.

  11. zooguy
    Member
    Posted 9 months ago #

    Thanks.. That's better.

    Any recommendation on how to get the buttons to fill vertically so that all buttons on the same row have the same height?

  12. Vladimir Anokhin
    Member
    Plugin Author

    Posted 9 months ago #

    You need to learn CSS =)

Reply

You must log in to post.

About this Plugin

About this Topic