emunoz

Modules / portlets

Blog Post created by emunoz on Mar 7, 2017

This is how you can change the way modules look in your module pages.

/*upper part for modules and portlets, blue background and white text, round borders (up)*/

.portlet h2, #moduleTitle {text-shadow: none !important; -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; background-color: #006DCC !important; color: #FFFFFF !important; text-decoration: none; border: none !important; -moz-box-shadow: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; font-weight: bold; width: auto;}

/*text on the content area, headers in bold, background in light gray, round borders (down)*/

.portlet h3 {font-weight: bold;}

.portlet {-moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border: none !important; background-color: #EDEDED !important;}

.collapsible {-moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;}

/*empty portlets show the text aligned left and not centered*/

.noItems {-moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; text-align: left !important;}

Captura de pantalla_2017-03-07_13-31-02.png

Another example:

/*LIs in a module with a dark red square*/

.portletList a {background: url("images/li-arrow.gif") no-repeat scroll left center rgba (0,0,0,0) !important; padding: 0 0 0 15px; }

/*title in dark red over transparent background*/

#moduleTitle, .portlet h2, .portlet h2 span.reorder{text-shadow: none !important; color: #881536 !important; background-color: transparent !important; text-decoration: none; border: none !important; border-bottom: 2px solid #CCCCCC; padding: 5px 10px; text-align: center; -moz-box-shadow:none!important; -webkit-box-shadow:none!important; box-shadow: none !important;}

/*content area without shadows*/

.collapsible, .portlet{-moz-box-shadow:none!important; -webkit-box-shadow:none!important; box-shadow: none !important;}

Captura de pantalla_2017-03-07_13-40-29.png

Outcomes