New to the community? Start here

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.

[attachments are only viewable by logged-in members] [attachments are only viewable by logged-in members]

Sat, 13 Dec 2014 8:05:47
More Branda Pro discussions
Branda Pro
  • aristath
    • Recruit

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

    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