Support » Plugin: Shortcodes Ultimate » Problem with columns

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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]

    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?

    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]
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Problem with columns’ is closed to new replies.