Library extensions

Anything in Epyk can be customized. The style and the final page layout can be fully changed.

Styles & configurations

Add CSS Inline to a type of components:

page.ui.components_skin = {
    "title": {"css": {"color": "#A89A37"}},
    "layouts.hr": {"css": {"background-color": "#f0db4f", "margin-bottom": "10px"}},
    "button": {"css": {"background": "#323330", "color": "#f0db4f", "border-color": "#323330"}}}

This will automatically add the a TestClass to any component button:

page = pk.Page()
page.ui.components_skin = {
      "button": {"cls": ["TestClass"]}
}
page.ui.button("Test")

Also the framework is using some internal names for the CSS classes based on the internal Python classes.

For example, the below base classes used for button:

class CssButtonBasic(CssStyle.Style):
    _attrs = {'font-weight': 'bold', 'padding': '2px 20px', 'margin': '2px 0 2px 0', 'text-decoration': 'none',
              'border-radius': '4px', 'white-space': 'nowrap', 'display': 'inline-block', 'line-height': '30px',
              '-webkit-appearance': 'none', '-moz-appearance': 'none'}
    _hover = {'text-decoration': 'none', 'cursor': 'pointer'}
    _focus = {'outline': 0}
    _disabled = {'cursor': 'none'}

will be referenced with the below names in the CSS section:

.cssbuttonbasic {font-weight: bold ;padding: 2px 20px ;margin: 2px 0 2px 0 ;text-decoration: none ;border-radius: 4px ;white-space: nowrap ;display: inline-block ;line-height: 30px ;-webkit-appearance: none ;-moz-appearance: none ;border: 1px solid #f4f9fc ;color: inherit ;background-color: #FFFFFF ;}
.cssbuttonbasic:hover {text-decoration: none ;cursor: pointer ;background-color: #f4f9fc !IMPORTANT ;color: #607d8b !IMPORTANT ;border: 1px solid #607d8b !IMPORTANT ;}
.cssbuttonbasic:focus {outline: 0 ;}
.cssbuttonbasic:disabled {cursor: none ;background-color: #263238 ;color: #455a64 ;font-style: italic ;}

It is possible to remove or rename this by using shortcut rename_css_cls as shown below:

pk.rename_css_cls({"cssbuttonbasic": "cssNewName"})

To get more details on CSS configurations and the way it is managed for components and the pages use the below lines.