WordPress.org

Support

Support » Plugins and Hacks » [Resolved] Uniform Button Size

[Resolved] Uniform Button Size

  • 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/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Vladimir Anokhin

    @gn_themes

    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]

    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?

    Plugin Author Vladimir Anokhin

    @gn_themes

    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.

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

    Plugin Author Vladimir Anokhin

    @gn_themes

    Do you have enabled custom formatting?

    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.

    Plugin Author Vladimir Anokhin

    @gn_themes

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

    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]

    Plugin Author Vladimir Anokhin

    @gn_themes

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

    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?

    Plugin Author Vladimir Anokhin

    @gn_themes

    You need to learn CSS =)

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘[Resolved] Uniform Button Size’ is closed to new replies.