the second widget i give you to implement is a widget you can use to make comments, fill out spaces or explain other widgets.
you dont need to change any excisting files.
you need to create a new dir in your widgets dir and give it the name hatext.
then you make a file called hatext.coffee with the following code and save it in the new dir.
class Dashing.Hatext extends Dashing.Widget
ready: ->
if @get('bgcolor')
$(@node).css("background-color", @get('bgcolor'))
else
$(@node).css("background-color", "#444")
with the next code you create the file hatext.html and save it in the same dir.
<h1 class="title" data-bind="title"></h1>
<h3 data-bind="text"></h3>
and the following code you use to create the file hatext.scss and also save it in that dir
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #ec663c;
$title-color: rgba(255, 255, 255, 0.7);
$moreinfo-color: rgba(255, 255, 255, 0.7);
// ----------------------------------------------------------------------------
// Widget-text styles
// ----------------------------------------------------------------------------
.widget-hatext {
background-color: $background-color;
.title {
color: $title-color;
}
.more-info {
color: $moreinfo-color;
}
.updated-at {
color: rgba(255, 255, 255, 0.7);
}
&.large h3 {
font-size: 325%;
}
}
now you are ready to use your new widget in your dashboard like this:
<li data-row="1" data-col="1" data-sizex="6" data-sizey="1">
<div data-text="Here you can write any kind of text you like in your dashboard (for instance for declaring colors, using it as divider or just to fill out spaces)" data-view="Hatext" data-title="any titletext" data-bgcolor="#557700"></div>
</li>
in this picture you see how i used it:
)