CSS styling examples-Fabrik3.0

  • Views Views: 15,792
  • Last updated Last updated:
Page

  • Contents

    These examples are for Fabrik3.0 only

    Styling a single form element​

    Elements which are single DOM objects (fields, dropdowns for example) have ids which correspond to the element full name, so we could style a field with this css:
    CSS: 
    #{$view}_$c #listname___elementname {
    
    border:1px solid red;
    
}

    Element's which have mutliple DOM objects (link Elements, radio Lists etc) wrap all their content inside a div whose id is the element full name, so to style all the fields in a Link element we would use:
    CSS: 
    #{$view}_$c #listname___elementname input {
    
    border: 1px solid red;
    
}

    Styling an individual group​

    You can also style an individual group, for example if you wanted to change the top padding of one group but not another, you could add this to your Forms template_css.php
    CSS: 
    #{$view}_$c #groupX > ul {
    
    margin-top: -40px
    
}
    where: X is your group id


    Changing the label column width in the default template​

    By default, the labels for Elements have a width of 130px. To increase it to 200 you would add this to your override css file:
    CSS: 
    #{$view}_$c .leftCol {
    
    width: 200px;
    
}


    Setting the position of an element within a group​

    You can access Elements with the css n-th child propertySo if you want to absolutely postition the 4th element in group (id 6), to the top right of the group, your css might look like this:
    CSS: 
    #{$view}_$c #group6 li:nth-child(4) {
    
    position: absolute;
    
    right: 0;
    
    top: 0;
    
}
Back
Top