1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Define New Style Property

Discussion in 'XenForo Development Discussions' started by AndyB, Dec 27, 2013.

  1. AndyB

    AndyB Well-Known Member

    It was suggested that I use a color palette in my add-on called Calendar. I have never used the Color Palette or Style Properties in XenForo, so I'm not at all sure what to do.

    Currently my Calendar add-on has a template called andy_calendar.css which contains the following CSS.

    Code:
    /* calendar */
    
    .calendar {
        border-left:1px solid #A5CAE4;
        width:100%;
    }
    
    .calendar_day_head {
        background: url("styles/default/xenforo/gradients/form-button-white-25px.png") repeat-x scroll center top #A5CAE4;
        color:#141414 !important;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-style: normal;   
        text-align:center;
        width:120px;
        padding:5px;
        border-top:1px solid #A5CAE4;
        border-right:1px solid #A5CAE4;
    }
    
    .day_number {
        background:#f0f0f0;
        color:#141414;
        padding:5px;
        float:right;
        margin:-5px -5px 0 0;
        width:20px;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-style: normal;    
        text-align:center;
        border-left:1px solid #A5CAE4;
        border-bottom:1px solid #A5CAE4;
    }
    
    .day_number_today {
        background:#176093;
        color:#ffffff;
        padding:5px;
        float:right;
        margin:-5px -5px 0 0;
        width:20px;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-style: normal;
        text-align:center;
    }
    
    .calendar_day {
        background-color:#fcfcff;
        vertical-align:top;
        height:160px;
        width:160px;
        padding:5px;
        border-bottom:1px solid #A5CAE4;
        border-right:1px solid #A5CAE4;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-style: normal;
    }
    
    .calendar_day_today {
        background-color:#f0f0f0;
        vertical-align:top;
        height:160px;
        width:160px;
        padding:5px;
        border-bottom:1px solid #A5CAE4;
        border-right:1px solid #A5CAE4;
    }
    
    .calendar_day_np {
        background:#f0f0f0;
        height:160px;
        width:160px;
        padding:5px;
        border-bottom:1px solid #A5CAE4;
        border-right:1px solid #A5CAE4;
    }
    
    .calendar_holiday_color {
        color:#ff0000;
    }
    
    /* calendar events */
    
    .dataTable a:link {
        font-size: 11pt;
    }
    
    .calendar_avatarContainer {
        display: block;
        position: relative;
        padding:5px 5px 5px 5px;
        background: url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #F0F7FC;  
    }
    
    .calendar_avatar img {
        display: block;
        height: 36px;
        width: 36px;
        background-color: #ffffff;
        border: 1px solid #a5cae4;
        border-radius: 4px 4px 4px 4px;
        padding: 2px;
    }
    
    .calendar_miniMe img {
        max-width:20px;
        max-height:20px;
        margin: 0px 0px 1px 5px;
        position: absolute;
        border:none;
        border-radius: 0px 0px 0px 0px;
        bottom: 1px;
        left: 29px;
        padding:none;
        z-index: 10;
    }
    
    .calendar_miniMe img {
        border: 1px none #000000;
        border-radius: 2px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
        height: 20px;
        padding: 1px;
        width: 20px;
    }
    
    .calendar_title_unread a:link {
        font-weight:bold;
        font-size:12pt;
    }
    
    .calendar_responsive {
        display: inline;
    }
    
    @media (max-width:@maxResponsiveWideWidth){
        .calendar_responsive {
            display: none;
        }
    } 
    
     
    Last edited: Dec 27, 2013
  2. AndyB

    AndyB Well-Known Member

    What I would like to know are the steps required to incorporate the Color Palette or Style Properties into my add-on. I assume I need to do the following:

    1) Admin CP -> Appearance -> Styles -> Master Style -> Create New Group
    2) Define New Style Property

    This is page has many options that I need help with:

    pic001.jpg
     
  3. Steve F

    Steve F Well-Known Member

    Property Name: calendarDayHead
    Add-On: Calendar
    Title (What the end user sees) : Day Heading
    Description: Your description

    Property Type: CSS with components
    Select what you want for that class, I generally use the full components list as you might want to add more styling later or give end users more control.

    So here is what your class should look like

    Code:
    .calendar_day_head {
        @property "calendarDayHead";
        background: url("styles/default/xenforo/gradients/form-button-white-25px.png") repeat-x scroll center top #A5CAE4;
        color:#141414 !important;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-style: normal; 
        text-align:center;
        width:120px;
        padding:5px;
        border-top:1px solid #A5CAE4;
        border-right:1px solid #A5CAE4;
        @property "/calendarDayHead";
    }
     
    AndyB and xf_phantom like this.
  4. AndyB

    AndyB Well-Known Member

    Hi Steve,

    Thank you kindly for the information.

    I was wondering the background data wasn't put into the correct field, it was just entered as Miscellaneous. Is there anything I can do to correct this?

    pic001.jpg
     
  5. AndyB

    AndyB Well-Known Member

    Got it.

    pic001.jpg
     
  6. Steve F

    Steve F Well-Known Member

    The format caused it, 'scroll' is not a component so it placed it in the misc section I'm assuming.

    As for the Color Palette, I would stick with the default palettes to be honest.
     
    AndyB likes this.
  7. AndyB

    AndyB Well-Known Member

    Yes that was it. Wasn't needed anyway so I removed it.

    Could you elaborate on this. What do you mean by "stick with the default palettes" ?
     
  8. Steve F

    Steve F Well-Known Member

    Code:
    border-right:1px solid #A5CAE4;
    #A5CAE4 is the same as the Primary Lighter default palette, so you just need to replace the #A5CAE4 with

    Code:
    border-right: 1px solid @primaryLighter;
     
    xf_phantom and AndyB like this.
  9. AndyB

    AndyB Well-Known Member

    Excellent. Now I finally understand. Thank you, Steve.
     
    Steve F likes this.
  10. AndyB

    AndyB Well-Known Member

    I changed all the colors to use the Style Properties Color Pallet code:

    Code:
    /* calendar */
    
    .calendar {
        border-left: 1px solid @primaryLighter;
        width: 100%;
    }
    
    .calendar_day_head {
        font-size: 12px;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        color: @contentText;
        background: @primaryLighter url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x;
        padding: 5px;
        border-top: 1px solid @primaryLighter;
        border-right: 1px solid @primaryLighter;
        text-align: center;
        width: 120px;
    }
    
    .day_number {
        background: @pageBackground;
        color: @contentText;
        padding: 5px;
        float: right;
        margin: -5px -5px 0 0;
        width: 20px;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-style: normal;   
        text-align: center;
        border-left: 1px solid @primaryLighter;
        border-bottom: 1px solid @primaryLighter;
    }
    
    .day_number_today {
        background: @primaryMedium;
        color: @contentBackground;
        padding: 5px;
        float: right;
        margin: -5px -5px 0 0;
        width: 20px;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-style: normal;
        text-align: center;
    }
    
    .calendar_day {
        background-color: @textCtrlBackground;
        vertical-align: top;
        height: 160px;
        width: 160px;
        padding: 5px;
        border-bottom: 1px solid @primaryLighter;
        border-right: 1px solid @primaryLighter;
        font-family: Calibri,'Trebuchet MS',Verdana,Geneva,Arial,Helvetica,sans-serif;
        font-size: 12px;
        font-style: normal;
    }
    
    .calendar_day_today {
        background-color: @faintTextColor;
        vertical-align: top;
        height: 160px;
        width: 160px;
        padding: 5px;
        border-bottom: 1px solid @primaryLighter;
        border-right: 1px solid @primaryLighter;
    }
    
    .calendar_day_np {
        background: #f0f0f0;
        height: 160px;
        width: 160px;
        padding: 5px;
        border-bottom: 1px solid @primaryLighter;
        border-right: 1px solid @primaryLighter;
    }
    
    .calendar_holiday_color {
        color: #ff0000;
    }
    
    /* calendar events */
    
    .dataTable a:link {
        font-size: 11pt;
    }
    
    .calendar_avatarContainer {
        display: block;
        position: relative;
        padding:5px 5px 5px 5px;
        background: @contentBackground url("styles/default/xenforo/gradients/category-23px-light.png") repeat-x; 
    }
    
    .calendar_avatar img {
        display: block;
        height: 36px;
        width: 36px;
        background-color: @contentBackground;
        border: 1px solid @primaryLighter;
        border-radius: 4px 4px 4px 4px;
        padding: 2px;
    }
    
    .calendar_miniMe img {
        max-width: 20px;
        max-height: 20px;
        margin: 0px 0px 1px 5px;
        position: absolute;
        border: none;
        border-radius: 0px 0px 0px 0px;
        bottom: 1px;
        left: 29px;
        padding: none;
        z-index: 10;
    }
    
    .calendar_miniMe img {
        border: 1px none @tooltipBackground;
        border-radius: 2px;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
        height: 20px;
        padding: 1px;
        width: 20px;
    }
    
    .calendar_title_unread a:link {
        font-weight: bold;
        font-size: 12pt;
    }
    
    .calendar_responsive {
        display: inline;
    }
    
    @media (max-width:@maxResponsiveWideWidth){
        .calendar_responsive {
            display: none;
        }
    }
    
     
    Last edited: Dec 30, 2013
  11. AndyB

    AndyB Well-Known Member

    Is it normal for admins that have custom styles to update the Style Properties: Color Palette as shown here?

    pic001.jpg
     
  12. AndyB

    AndyB Well-Known Member

    Is it enough to use the @ codes as shown in post #10 or should I also include a Property Group and include Property Styles as shown in post #3.
     
  13. Steve F

    Steve F Well-Known Member

    Use property groups also. Seeing how the calendar is it will need more than just the color palette to make it easy to customize for custom styles.

    You should not need to do anything to the color palette unless you really want add some custom colors. If you have custom colors the style properties should suffice.
     
    AndyB likes this.
  14. AndyB

    AndyB Well-Known Member

    Looks like creating property groups is the best way to go.

    Looks like using the @primaryLighter and similar codes are not the way to go if creating property groups, I assume it's better to use the #A5CAE4 values instead.
     
    Last edited: Dec 30, 2013
  15. Steve F

    Steve F Well-Known Member

    No, the color palette can be used inside groups. Just take a look at a default css template for examples. If you used #A5CAE4 then users would have to change each one individually instead of simply changing one color palette for all.
     
    AndyB likes this.
  16. Steve F

    Steve F Well-Known Member

    AndyB likes this.
  17. AndyB

    AndyB Well-Known Member

    I sure appreciate the clarification. Yes using both works perfect.
     
  18. AndyB

    AndyB Well-Known Member

    When creating a new style property, one must do it in this sequence.

    1) Create the new Style Property and click Save Property Definition
    2) Update the CSS template and click Save all Changes
    3) Reload the Style Property

    Only then will you see the Style Property showing the proper values.
     
    Last edited: Dec 30, 2013

Share This Page