[css] start using uiprops in cubicweb.css
authorKatia Saurfelt <katia.saurfelt@logilab.fr>
Wed, 05 May 2010 18:19:56 +0200
changeset 5479 6ba3587c5cda
parent 5478 c52124b7a00e
child 5483 1a30c5a56256
[css] start using uiprops in cubicweb.css
i18n/fr.po
web/data/cubicweb.css
web/data/cubicweb.htmlhelpers.js
web/data/cubicweb.manageview.css
web/data/cubicweb.reset.css
web/data/uiprops.py
web/views/basetemplates.py
web/views/startup.py
--- a/i18n/fr.po	Thu Apr 29 08:39:13 2010 +0200
+++ b/i18n/fr.po	Wed May 05 18:19:56 2010 +0200
@@ -534,7 +534,7 @@
 msgstr "Nouvelle transition workflow"
 
 msgid "No result matching query"
-msgstr "aucun résultat"
+msgstr "Aucun résultat ne correspond à la requête"
 
 msgid "Non exhaustive list of views that may apply to entities of this type"
 msgstr "Liste non exhausite des vues s'appliquant à ce type d'entité"
--- a/web/data/cubicweb.css	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.css	Wed May 05 18:19:56 2010 +0200
@@ -10,14 +10,15 @@
 
 /* scale and rhythm cf http://lamb.cc/typograph/ */
 body {
-  font-family:  Verdana,sans-serif;
-  font-size: 12px;
-  line-height: 1.5;
+  font-family:  %(defaultFont)s;
+  font-size: %(defaultSize)s;
+  line-height: %(defaultLineHeight)s;
+  color: %(defaultColor)s;
 }
 h1, h2, h3 { margin-top:0; margin-bottom:0; }
 
 /* got rhythm ? beat of 12*1.25 = 15 px */
-.rhythm_bg { background: url(/data/rhythm18.png) repeat ! important; }
+.rhythm_bg { background: url(/data/%(baseRhythmBg)s) repeat ! important; }
 
 /* scale 3:5 stranded */
 /* h1 { font-size:2em; } */
@@ -30,29 +31,29 @@
 /* h3 { font-size:1.30769em; } */
 
 /* scale traditional */
-h1 { font-size: 1.5em; }
-h2 { font-size: 1.33333em; }
-h3 { font-size: 1.16667em; }
+h1 { font-size: %(h1FontSize)s; }
+h2 { font-size: %(h2FontSize)s; }
+h3 { font-size: %(h3FontSize)s; }
 
 /* paddings */
 h1 {
-    border-bottom: 0.06em solid black;
-    padding-top: 0.9em;
-    margin-bottom: 0.44em;
+    border-bottom: %(h1BorderBottomStyle)s;
+    padding: %(h1Padding)s;
+    margin: %(h1Margin)s;
 }
-h2 { padding: 0.4em 0 0.25em 0; }
-h3 { padding: 0.5em 0 0.57em 0; }
+h2 { padding: %(h2Padding)s; }
+h3 { padding: %(h3Padding)s; }
 
 html, body {
   background: #e2e2e2;
 }
 
 a, a:active, a:visited, a:link {
-  color: #ff4500; /*  XXX make this configurable */
+  color: %(aColor)s;
   text-decoration: none;
 }
 
-a:hover{
+a:hover {
   text-decoration: underline;
 }
 
@@ -64,10 +65,6 @@
   vertical-align: top;
 }
 
-input:focus {
-  border: 1px inset #ff7700;
-}
-
 label, .label {
   font-weight: bold;
 }
@@ -78,38 +75,50 @@
   letter-spacing: 0.015em;
   padding: 0.5em;
   margin: 0 1.5em 1.5em;
-  background-color: #F0F0F0;
-  border: 1px solid #CCBCA7;
+  background-color: #f0f0f0;
+  border: 1px solid #ccbca7;
 }
 
 p {
   text-align: justify;
-  margin-bottom: 1.5em;
+  margin-bottom: %(defaultLineHeightEm)s;
 }
 
 ol, ul {
   list-style-type: disc;
-  margin-bottom: 1.25em;
+  margin-bottom: %(defaultLineHeightEm)s;
+}
+
+ol ol,
+ul ul{
+  margin-left: 8px;
+  margin-bottom : 0px;
 }
 
 p + ul {
-  margin-top: -1.5em;
+  margin-top: -%(defaultLineHeightEm)s;
 }
 
 li {
   margin-left: 1.5em;
 }
 
-fieldset {
-  border: none;
-}
-
 h2 a, h2 a:active, h2 a:visited, h2 a:link,
 h3 a, h3 a:active, h3 a:visited, h3 a:link {
   color: inherit;
   text-decoration: none;
 }
 
+input, textarea {
+  border: 1px solid %(pageContentBorderColor)s;
+  padding: 0.1em;
+  vertical-align: middle;
+}
+
+input:focus {
+  border: 1px inset %(headerBgColor)s;
+}
+
 /***************************************/
 /* generic classes                     */
 /***************************************/
@@ -123,8 +132,8 @@
 }
 
 .hr {
-  border-bottom: 1px dotted #ccc;
-  margin: 19px 0px 20px 0px;
+  border-bottom: 1px dotted %(pageContentBorderColor)s;
+  height: 17px;
 }
 
 .left {
@@ -154,7 +163,6 @@
   display: inline;
 }
 
-
 /***************************************/
 /*   LAYOUT                            */
 /***************************************/
@@ -162,9 +170,9 @@
 /* header */
 
 table#header {
-  background: #ff7700 url("banner.png") left top repeat-x;
+  background: %(headerBgColor)s url("banner.png") left top repeat-x;
+  height: 45px;
   text-align: left;
-  height: 45px; /* height counts in font-size -> 2.5*16 = 40 */
 }
 
 table#header td {
@@ -172,7 +180,7 @@
 }
 
 table#header a {
-  color: #000;
+  color: %(defaultColor)s;
 }
 
 table#header img#logo{
@@ -181,7 +189,7 @@
 
 span#appliName {
   font-weight: bold;
-  color: #000;
+  color: %(defaultColor)s;
   white-space: nowrap;
 }
 
@@ -198,14 +206,14 @@
 div.popup {
   position: absolute;
   background: #fff;
-  border: 1px solid black;
+  border: 1px solid #fff;
   text-align: left;
   z-index: 400;
 }
 
 div.popup ul li a {
   text-decoration: none;
-  color: black;
+  color: #000;
 }
 
 /* FIXME appear with 4px width in IE6 */
@@ -216,49 +224,50 @@
 /* main zone */
 
 div#page {
-  min-height: 800px;
-  margin: 8px;
+  min-height: %(pageMinHeight)s;
+  margin: %(defaultLayoutMargin)s;
 }
 
 table#mainLayout #navColumnLeft {
   width: 16em;
-  padding-right: 8px;
+  padding-right: %(defaultLayoutMargin)s;
 }
 
 table#mainLayout #navColumnRight {
   width: 16em;
-  padding-left: 8px;
+  padding-left: %(defaultLayoutMargin)s;
 }
 
 div#pageContent {
   clear: both;
 /*  margin-top:-1px; /* enable when testing rhythm */
-  background: #ffffff;
-  border: 1px solid #ccc;
+  background: %(pageContentBgColor)s;
+  border: 1px solid %(pageContentBorderColor)s;
+  padding: 0px %(pageContentPadding)s %(pageContentPadding)s;
 }
 
-/* */
+
+div#breadcrumbs {
+  padding: %(pageContentPadding)s 0 0 0;
+}
+
+/*FIXME */
 #contentheader {
   margin: 0px;
   padding: 0.2em 0.5em 0.5em 0.5em;
-  border:2px solid blue;
 }
 
 #contentheader a {
-  color: #000;
-}
-
-div#contentmain {
-  padding: 0 1em 1em;
+  color: %(defaultColor)s;
 }
 
 /* rql bar */
 
 div#rqlinput {
-  border: 1px solid #cfceb7;
   margin-bottom: 8px;
   padding: 3px;
-  background: #cfceb7;
+  background: %(actionBoxTitleBgColor)s;
+  border: 1px solid %(actionBoxTitleBgColor)s;
 }
 
 input#rql{
@@ -272,17 +281,11 @@
 }
 
 div.boxTitle {
-  padding-top: 0px;
-  padding-bottom: 0.2em;
+  overflow: hidden;
   font: bold 100% Georgia;
-  overflow: hidden;
   color: #fff;
-  background: #ff9900 url("search.png") left bottom repeat-x;
-}
-
-div.searchBoxFrame div.boxTitle,
-div.greyBoxFrame div.boxTitle {
-  background: #cfceb7;
+  padding: 0px 0px 0.2em;
+  background: %(headerBgColor)s url("search.png") left bottom repeat-x;
 }
 
 div.boxTitle span,
@@ -291,14 +294,19 @@
   white-space: nowrap;
 }
 
+div.searchBoxFrame div.boxTitle,
+div.greyBoxFrame div.boxTitle {
+  background: %(actionBoxTitleBgColor)s;
+}
+
 div.sideBoxTitle span,
 div.searchBoxFrame div.boxTitle span,
 div.greyBoxFrame div.boxTitle span {
-  color: #222211;
+  color: %(defaultColor)s;
 }
 
 .boxFrame a {
-  color: #000;
+  color: %(defaultColor)s;
 }
 
 div.boxContent {
@@ -307,6 +315,21 @@
   border-top: none;
 }
 
+a.boxMenu {
+  display: block;
+  padding: 1px 9px 1px 3px;
+  background: transparent url("puce_down.png") 98% 6px no-repeat;
+}
+a.boxMenu:hover {
+  background: %(sideBoxBodyBgColor)s url("puce_down.png") 98% 6px no-repeat;
+  cursor: pointer;
+}
+
+a.popupMenu {
+  background: transparent url("puce_down_black.png") 2% 6px no-repeat;
+  padding-left: 2em;
+}
+
 ul.boxListing {
   margin: 0px;
   padding: 0px 3px;
@@ -314,65 +337,47 @@
 
 ul.boxListing li,
 ul.boxListing ul li {
-  display: inline;
+  list-style-type: none;
   margin: 0px;
   padding: 0px;
   background-image: none;
 }
 
 ul.boxListing ul {
-  margin: 0px 0px 0px 7px;
   padding: 1px 3px;
 }
 
 ul.boxListing a {
-  color: #000;
-  display: block;
+  color: %(defaultColor)s;
   padding: 1px 9px 1px 3px;
 }
 
 ul.boxListing .selected {
-  color: #FF4500;
+  color: %(aColor)s;
   font-weight: bold;
 }
 
 ul.boxListing a.boxBookmark:hover,
 ul.boxListing a:hover,
 ul.boxListing ul li a:hover {
+  color: #111100;
   text-decoration: none;
-  background: #eeedd9;
-  color: #111100;
+  background: %(sideBoxBodyBgColor)s;
 }
 
 ul.boxListing a.boxMenu:hover {
-  background: #eeedd9 url(puce_down.png) no-repeat scroll 98% 6px;
-  cursor:pointer;
-  border-top:medium none;
-}
-
-a.boxMenu {
-  background: transparent url("puce_down.png") 98% 6px no-repeat;
-  display: block;
-  padding: 1px 9px 1px 3px;
-}
-
-a.popupMenu {
-  background: transparent url("puce_down_black.png") 2% 6px no-repeat;
-  padding-left: 2em;
+  cursor: pointer;
+  border-top: medium none;
+  background: %(sideBoxBodyBgColor)s url(puce_down.png) no-repeat scroll 98% 6px;
 }
 
 ul.boxListing ul li a:hover {
-  background: #eeedd9  url("bullet_orange.png") 0% 6px no-repeat;
-}
-
-a.boxMenu:hover {
-  background: #eeedd9 url("puce_down.png") 98% 6px no-repeat;
-  cursor: pointer;
+  background: %(sideBoxBodyBgColor)s  url("bullet_orange.png") 0% 6px no-repeat;
 }
 
 ul.boxListing a.boxBookmark {
   padding-left: 3px;
-  background-image:none;
+  background-image: none;
   background:#fff;
 }
 
@@ -392,7 +397,7 @@
 }
 
 div.sideBoxTitle {
-  background: #cfceb7;
+  background: %(actionBoxTitleBgColor)s;
   display: block;
   font: bold 100% Georgia;
 }
@@ -402,15 +407,20 @@
   margin-bottom: 0.5em;
 }
 
+ul.sideBox,
+ul.sideBox ul{
+  margin-bottom: 0px;
+}
+
 ul.sideBox li{
- list-style: none;
- background: none;
+ list-style-type : none;
  padding: 0px 0px 1px 1px;
- }
+ margin: 1px 0 1px 4px;
+}
 
 div.sideBoxBody {
   padding: 0.2em 5px;
-  background: #eeedd9;
+  background: %(sideBoxBodyBgColor)s;
 }
 
 div.sideBoxBody a {
@@ -426,10 +436,10 @@
 }
 
 input.rqlsubmit{
-  background: #fffff8 url("go.png") 50% 50% no-repeat;
+  margin: 0px;
   width: 20px;
   height: 20px;
-  margin: 0px;
+  background: %(buttonBgColor)s url("go.png") 50% 50% no-repeat;
 }
 
 input#norql{
@@ -449,7 +459,7 @@
 }
 
 div#userActionsBox a.popupMenu {
-  color: black;
+  color: #000;
   text-decoration: underline;
   padding-right: 2em;
 }
@@ -473,7 +483,7 @@
 /**************/
 div#etyperestriction {
   margin-bottom: 1ex;
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid %(pageContentBorderColor)s;
 }
 
 span.slice a:visited,
@@ -483,7 +493,7 @@
 
 span.selectedSlice a:visited,
 span.selectedSlice a {
-  color: #000;
+  color: %(defaultColor)s;
 }
 
 /* FIXME should be moved to cubes/folder */
@@ -498,7 +508,7 @@
 }
 
 div.prevnext a {
-  color: #000;
+  color: %(defaultColor)s;
 }
 
 /***************************************/
@@ -557,50 +567,44 @@
 
 .warning,
 .message,
-.errorMessage ,
-.searchMessage{
+.errorMessage{
   padding: 0.3em 0.3em 0.3em 1em;
   font-weight: bold;
 }
 
-.simpleMessage {
-  margin: 4px 0px;
-  font-weight: bold;
-  color: #ff7700;
+.searchMessage{
+ padding-top: %(defaultLayoutMargin)s;
 }
 
-div#appMsg, div.appMsg {
-  border: 1px solid #cfceb7;
-  margin-bottom: 8px;
-  padding: 3px;
-  background: #f8f8ee;
+.loginMessage {
+  margin: 4px 0px;
+  font-weight: bold;
+  color: %(headerBgColor)s;
+}
+
+div#appMsg {
+  border: 1px solid %(actionBoxTitleBgColor)s;
+  margin-bottom: %(defaultLayoutMargin)s;
 }
 
 .message {
   margin: 0px;
-  background: #f8f8ee url("information.png") 5px center no-repeat;
+  background: #fff url("information.png") 5px center no-repeat;
   padding-left: 15px;
 }
 
 .errorMessage {
   margin: 10px 0px;
   padding-left: 25px;
-  background: #f7f6f1 url("critical.png") 2px center no-repeat;
+  background: #fff url("critical.png") 2px center no-repeat;
   color: #ed0d0d;
-  border: 1px solid #cfceb7;
-}
-
-.searchMessage {
-  margin-top: 0.5em;
-  border-top: 1px solid #cfceb7;
-  background: #eeedd9 url("information.png") 0% 50% no-repeat; /*dcdbc7*/
+  border: 1px solid %(actionBoxTitleBgColor)s;
 }
 
 .stateMessage {
-  border: 1px solid #ccc;
-  background: #f8f8ee url("information.png") 10px 50% no-repeat;
+  border: 1px solid %(pageContentBorderColor)s;
+  background: #fff url("information.png") 10px 50% no-repeat;
   padding:4px 0px 4px 20px;
-  border-width: 1px 0px 1px 0px;
 }
 
 /* warning messages like "There are too many results ..." */
@@ -614,8 +618,8 @@
   position: fixed;
   right: 5px;
   top: 0px;
-  background: #222211;
-  color: white;
+  background: %(defaultColor)s;
+  color: #fff;
   font-weight: bold;
   display: none;
 }
@@ -625,61 +629,55 @@
 /***************************************/
 
 table.listing {
+ width: 100%;
  padding: 10px 0em;
- color: #000;
- width: 100%;
- border-right: 1px solid #dfdfdf;
+ color: %(defaultColor)s;
+ border: 1px solid %(listingBorderColor)s;
+}
+
+table.listing tr th {
+  font-weight: bold;
+  background: #dfdfdf;
+  font-size: 8pt;
+  padding: 3px 0px 3px 5px;
+}
+
+table.listing thead tr {
+/*  border: 1px solid #dfdfdf; */
 }
 
 
 table.listing thead th.over {
-  background-color: #746B6B;
+  background-color: #746b6b;
   cursor: pointer;
 }
 
-table.listing tr th {
-  border: 1px solid #dfdfdf;
-  border-right:none;
-  font-size: 8pt;
-  padding: 4px;
-}
-
 table.listing tr .header {
-  border-right: 1px solid #dfdfdf;
+  border-right: 1px solid %(listingBorderColor)s;
   cursor: pointer;
 }
 
 table.listing td {
-  color: #3D3D3D;
   padding: 4px;
-  background-color: #FFF;
+  padding: 3px 0px 3px 5px;
   vertical-align: top;
-}
-
-table.listing th,
-table.listing td {
-  padding: 3px 0px 3px 5px;
-  border: 1px solid #dfdfdf;
+  border: 1px solid %(listingBorderColor)s;
   border-right: none;
-}
-
-table.listing th {
-  font-weight: bold;
-  background: #ebe8d9 url("button.png") repeat-x;
+  background-color: #fff;
 }
 
 table.listing td a,
 table.listing td a:visited {
-  color: #666;
+  color: %(defaultColor)s;
 }
 
 table.listing a:hover,
 table.listing tr.highlighted td a {
-  color:#000;
+  color:%(defaultColor)s;
 }
 
 table.listing td.top {
-  border: 1px solid white;
+  border: 1px solid #fff;
   border-bottom: none;
   text-align: right ! important;
   /* insane IE row bug workraound */
@@ -736,7 +734,7 @@
  }
 
 #add_newopt{
- background: #fffff8 url("go.png") 50% 50% no-repeat;
+ background: %(buttonBgColor)s url("go.png") 50% 50% no-repeat;
  width: 20px;
  line-height: 20px;
  display:block;
@@ -749,9 +747,9 @@
 
 input.button{
   margin: 1em 1em 0px 0px;
-  border: 1px solid #edecd2;
-  border-color:#edecd2 #cfceb7 #cfceb7  #edecd2;
-  background: #fffff8 url("button.png") bottom left repeat-x;
+  border: 1px solid %(buttonBorderColor)s;
+  border-color: %(buttonBorderColor)s %(actionBoxTitleBgColor)s %(actionBoxTitleBgColor)s %(buttonBorderColor)s;
+  background: %(buttonBgColor)s url("button.png") bottom left repeat-x;
 }
 
 /* FileItemInnerView  jquery.treeview.css */
@@ -768,7 +766,7 @@
   text-align: center;
 }
 div#footer a {
-  color: #000;
+  color: %(defaultColor)s;
   text-decoration: none;
 }
 
@@ -787,15 +785,15 @@
 /***************************************/
 .title {
   text-align: left;
-  font-size:  large;
+  font-size: large;
   font-weight: bold;
 }
 
 .validateButton {
   margin: 1em 1em 0px 0px;
-  border: 1px solid #edecd2;
-  border-color:#edecd2 #cfceb7 #cfceb7  #edecd2;
-  background: #fffff8 url("button.png") bottom left repeat-x;
+  border: 1px solid %(buttonBorderColor)s;
+  border-color: %(buttonBorderColor)s %(actionBoxTitleBgColor)s %(actionBoxTitleBgColor)s %(buttonBorderColor)s;
+  background: %(buttonBgColor)s url("button.png") bottom left repeat-x;
 }
 
 /********************************/
@@ -805,3 +803,14 @@
 .otherView {
   float: right;
 }
+
+/********************************/
+/* overwite other css here */
+/********************************/
+
+/* ui.tabs.css */
+ul .ui-tabs-nav,
+ul .ui-tabs-panel {
+  font-family: %(defaultFont)s;
+  font-size: %(defaultSize)s;
+}
\ No newline at end of file
--- a/web/data/cubicweb.htmlhelpers.js	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.htmlhelpers.js	Wed May 05 18:19:56 2010 +0200
@@ -164,7 +164,7 @@
     }
 }
 
-//jQuery(document).ready(function () {roundedCorners(this.body);});
+jQuery(document).ready(function () {roundedCorners(this.body);});
 
 CubicWeb.provide('corners.js');
 
--- a/web/data/cubicweb.manageview.css	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.manageview.css	Wed May 05 18:19:56 2010 +0200
@@ -12,11 +12,9 @@
 
 table.startup td.addcol {
   text-align: right;
-/*   width: 0.5em; */
+  width: 0.5em;
 }
 
-/* table.startup th{ */
-/*   padding-top: 3px; */
-/*   padding-bottom: 3px; */
-/*   text-align: left; */
-/* } */
+table.startup th{
+  text-align: left;
+}
--- a/web/data/cubicweb.reset.css	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/cubicweb.reset.css	Wed May 05 18:19:56 2010 +0200
@@ -51,3 +51,12 @@
 	border-collapse: collapse;
 	border-spacing: 0;
 }
+
+/* Logilab */
+img{
+ border: none;
+}
+
+fieldset {
+  border: none;
+}
--- a/web/data/uiprops.py	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/data/uiprops.py	Wed May 05 18:19:56 2010 +0200
@@ -55,3 +55,55 @@
 UPLOAD_ICON = data('upload.gif')
 GMARKER_ICON = data('gmap_blue_marker.png')
 UP_ICON = data('up.gif')
+
+# colors, fonts, etc
+
+# default (body, html)
+defaultColor = '#000'
+defaultFont = 'Verdana,sans-serif'
+defaultSize = '12px'
+defaultLineHeight = '1.5'
+defaultLineHeightEm = defaultLineHeight + 'em'
+baseRhythmBg = 'rhythm18.png'
+
+# XXX
+defaultLayoutMargin = '8px'
+
+# header
+headerBgColor = '#ff7700'
+
+# h
+h1FontSize = '1.5em'
+h1BorderBottomStyle = '0.06em solid black'
+h1Padding = '0 0 0.14em 0 '
+h1Margin = '0.8em 0 0.5em'
+
+h2FontSize = '1.33333em'
+h2Padding = '0.4em 0 0.35em 0'
+h2Margin = '0'
+
+h3FontSize = '1.16667em'
+h3Padding = '0.5em 0 0.57em 0'
+h3Margin = '0'
+
+# links
+aColor = '#ff4500'
+aActiveColor = aVisitedColor = aLinkColor = aColor
+
+# page frame
+pageContentBorderColor = '#ccc'
+pageContentBgColor = '#fff'
+pageContentPadding = '1em'
+pageMinHeight = '800px'
+
+# button
+buttonBorderColor = '#edecd2'
+buttonBgColor = '#fffff8'
+
+# action, search, sideBoxes
+actionBoxTitleBgColor = '#cfceb7'
+sideBoxBodyBgColor = '#eeedd9'
+
+
+# table listing
+listingBorderColor = '#878787'
--- a/web/views/basetemplates.py	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/basetemplates.py	Wed May 05 18:19:56 2010 +0200
@@ -470,7 +470,7 @@
             self.w(u'<div id="loginTitle">%s</div>' % stitle)
         self.w(u'<div id="loginContent">\n')
         if showmessage and self._cw.message:
-            self.w(u'<div class="simpleMessage">%s</div>\n' % self._cw.message)
+            self.w(u'<div class="loginMessage">%s</div>\n' % self._cw.message)
         if self._cw.vreg.config['auth-mode'] != 'http':
             # Cookie authentication
             self.login_form(id)
--- a/web/views/startup.py	Thu Apr 29 08:39:13 2010 +0200
+++ b/web/views/startup.py	Wed May 05 18:19:56 2010 +0200
@@ -96,11 +96,16 @@
         self.startupviews_table()
 
     def startupviews_table(self):
-        for v in self._cw.vreg['views'].possible_views(self._cw, None):
+        views = self._cw.vreg['views'].possible_views(self._cw, None)
+        if not views:
+            return
+        self.w(u'<ul>')
+        for v in views:
             if v.category != 'startupview' or v.__regid__ in ('index', 'tree', 'manage'):
                 continue
-            self.w('<p><a href="%s">%s</a></p>' % (
+            self.w('<li><a href="%s">%s</a></li>' % (
                 xml_escape(v.url()), xml_escape(self._cw._(v.title).capitalize())))
+        self.w(u'</ul>')
 
     def entities(self):
         schema = self._cw.vreg.schema