Adding a text box over


#1

Is it possible to change the configuration of the widget title to be

  1. positioned to the left.
  2. To apply a background colour
  3. To include some summary text directly below the .h3 text

I am really trying to get as close as I can to replicating this page:


#2

1&2) Something like this would do it:


.panel.widget .widget-title {
   text-align: left;
   background-color: #333;
   display: table;
   padding: 10px 20px;
}

display: table; is added to make the title background only as wide as the actual text, not full width. You can remove it if that’s not what you want.
3) That’s not possible at the moment.


#3

Is there a way to reduce the size of the table? Ideally I would like it to be around 60% of the current width.


#4

Yeap:


.panel.widget .widget-title {
     width: 60%;
}


#5

Many thanks for your help.