separate columns in "custom welcome dashboard"

hi,

when using Ultimate Branding and i enable the "Hide Dashboard Welcome" module,
there appears a "custom welcome dashboard" in the "widgets" tab.

this is a really nice feature for a getting started guide, introduction etc. etc.
i could be wrong but it appears to me to be the same or similar thing used in EduBlogs.

how can i get separate columns as used on EduBlogs dashboard ?
is this done with tables ?
should i install something like TinyMCE Advanced,
design what i want on a test page, then copy and paste the "text" ?

oh and how did they also create the button (choose your theme) to match the buttons that typically appear in the wordpress admin and plugins ? would this involve css ? i simply used <button>button here</button> and it did not look the same.

any kind assistance would be greatly appreciated.
kind regards.

  • aristath

    Hello there @Randall, I hope you're well today!

    This is pure HTML & CSS...
    To have 3 columnss you will have to add 3 divs and their css (you can add the css inline) like this:

    <style>
    .my-panel-column {
      width: 32%;
      min-width: 200px;
      float: left;
    }
    </style>
    <div class="my-panel-column">
      CONTENT
    </div>
    <div class="my-panel-column">
      CONTENT
    </div>
    <div class="my-panel-column">
      CONTENT
    </div>

    As for the buttons, you can add the following classes to your buttons to make them inherit the default button styles:
    button (default button styles)
    button-primary (the blue color)
    button-hero (the size)
    so if you want a big blue button you can do it like this:
    <a class="button button-primary button-hero" href="#">Click me</a>

    I hope that helps!

    Cheers,
    Ari.

  • Tyler Postle

    Hey Randall,

    Hope you're doing well today!

    I just tested this out and I see what you mean. It looks like the editor is adding a line break on each new line. If you place code all on the same line like this:

    <style>
    .my-panel-column {
      width: 32%;
      min-width: 200px;
      float: left;
    }
    </style>
    <div class="my-panel-column">CONTENT</div> <div class="my-panel-column">CONTENT</div> <div class="my-panel-column">CONTENT</div>

    Then it will display correctly :slight_smile:

    Let us know if this does the trick for ya Randall. Have a great rest of your day.

    Cheers,
    Tyler

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.