Symptoms
How to color or separate Views with color.
Diagnoses
It's not possible out of the box to line up Views horizontally the same way you can vertically. However, below are some JavaScript workarounds that may be useful.
Resolution
One successful way to target views and controls with JavaScript is by name or title. For Item Views with titles set to 'titleA', 'titleB', and 'titleC', this jQuery script will set their background color:
<script>
function colorViewBG(title, color) {
var body = $('spanpdata-sf-title=' title ']').parents('.panel-header').parent().children('.panel-body')
body.css('background-color', color)
}
colorViewBG('titleA', '_8da2dd')
colorViewBG('titleB', '_8da2dd')
colorViewBG('titleC', '_dd8d8d')
</script>
It finds the title element, traverses up to the parent it shares, then down to the background DIV element of the view. This is only really effective with Item Views, because List Views don't have much background real estate.
As an alternate solution, I found that increasing the padding surrounding views and coloring that is effective for dealing with List Views. Here's a script for that:
<script>
function colorViewPadding(title, color){
var row = $('spanpdata-sf-title=' title ']').parents('divdclass="view"]').parents('.row')
row.css('background-color', color)
row.css('padding','15px')
}
colorViewPadding('titleA', '_8da2dd')
colorViewPadding('titleB', '_8da2dd')
colorViewPadding('titleC', '_dd8d8d')
</script>
Using both of these functions together looks good as well. Please see the following K2 Community article regarding implementing this via SmartForm rules: http://community.k2.com/t5/K2-blackpearl/SmartForms-How-to-execute-JavaScript-via-rules/ta-p/90846
