WordPress.org

Ready to get started?Download WordPress

Forums

Shortcodes Ultimate
Problem with columns (4 posts)

  1. mako2
    Member
    Posted 1 year ago #

    Hello everybody,

    Sorry I know I am probably asking something very basic. I have spend several hours trying to create tow columns and I can't :(

    I know that this created two columns that are 1/2 and 1/2

    [column size="1-2"] Content [/column]
    [column size="1-2" last="1"] Content [/column]

    What is the code to do this?

    1st column = 2/3rd of the screen
    2nd last column = 1/3rd of the screen

    Thank you in advance!

    MK

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

  2. W.P. Ginfo
    Member
    Posted 1 year ago #

    Hi MK,

    To do this you'll need to add some CSS to the following css-file.
    /wp-content/plugins/shortcodes-ultimate/css/style.css
    First make a back-up of this file , so you can restore the old situation should it be required.

    To make these changes, use an EDITOR, NOT a wordprosessor like MSWord, but e.g.'NOTEPAD++'.

    Step 1.
    Open /wp-content/plugins/shortcodes-ultimate/css/style.css
    On line 100 of this file you'll find:

    /* Colums */
    .su-column-1-2 { width: 48% }
    .su-column-1-3 { width: 30.66% }
    .su-column-2-3 { width: 65.33% }
    .su-column-1-4 { width: 22% }
    etc.

    The colums su-column-1-2 { width: 48% }both have a width of 48%.

    Add your own code at the top.
    Example:

    .su-column-1{ width: 60% }
    .su-column-2{ width: 30% }

    You can add more colums...
    Play around with the percentages, but stay within the 100% ad leave room between te columns.
    Result:

    /* Columns */
    .su-column-1{ width: 60% }
    .su-column-2{ width: 30% }
    .su-column-1-2 { width: 48% }
    .su-column-1-3 { width: 30.66% }
    .su-column-2-3 { width: 65.33% }
    etc.

    Save and upload.
    == == ==
    Step 2
    Open the dashboard and edit the page/ article in which you want to include columns.

    Add[column size="1"]at the start of column1.
    add[/column]at the end of column1.
    ==
    Add[column size="2" last="1]at the start of column"2.
    add[/column]at the end of column2.
    Both columns now have the requires sizes.

    == stating the obvious: only the final column has the last="1"] at the end. ==

    Result in dashboard-editor:

    [column size="1"]
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor, lectus eu placerat dictum, erat mauris commodo felis, sed commodo ante augue ut nisl. Ut posuere dapibus libero a pellentesque.
    [/column]
    [column size="2" last="1"]
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor, lectus eu placerat dictum, erat mauris commodo felis, sed commodo ante augue ut nisl. Ut posuere dapibus libero a pellentesque. Pellentesque tristique, felis sed pellentesque egestas, justo felis
    [/column]
  3. mako2
    Member
    Posted 1 year ago #

    Thank you W.P. Ginfo!!! But this is not correct. There is a simple way to do this only with a shortcode, not changing the CSS. Anybody can help?

  4. mako2
    Member
    Posted 1 year ago #

    Aleluya!! I was just able to do it! Here is the shortcode for doing it

    [gn_column size="2-3"] Content left [/gn_column]
    [gn_column size="1-3" last="1"] Content right [/gn_column]

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags