Define New Style Property

AndyB · Dec 27, 2013

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;
    }
}

AndyB · Dec 27, 2013

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:

Steve F · Dec 30, 2013

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

Rich (BB 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 · Dec 30, 2013

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?

AndyB · Dec 30, 2013

Got it.

Steve F · Dec 30, 2013

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 · Dec 30, 2013

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

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

Steve F said:
As for the Color Palette, I would stick with the default palettes to be honest.

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

Steve F · Dec 30, 2013

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;

AndyB · Dec 30, 2013

Excellent. Now I finally understand. Thank you, Steve.

AndyB · Dec 30, 2013

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;
    }
}

AndyB · Dec 30, 2013

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

AndyB · Dec 30, 2013

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.

Steve F · Dec 30, 2013

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 · Dec 30, 2013

Steve F said:
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.

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.

Steve F · Dec 30, 2013

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.

Steve F · Dec 30, 2013

If you want download my addon and see how the style properties are done.

http://xenforo.com/community/resources/forum-statistics-pixelexit-com.2577/

AndyB · Dec 30, 2013

Steve F said:
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.

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

AndyB · Dec 30, 2013

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.

Define New Style Property

AndyB

Well-known member

AndyB

Well-known member

Steve F

Well-known member

AndyB

Well-known member

AndyB

Well-known member

Steve F

Well-known member

AndyB

Well-known member

Steve F

Well-known member

AndyB

Well-known member

AndyB

Well-known member

AndyB

Well-known member

AndyB

Well-known member

Steve F

Well-known member

AndyB

Well-known member

Steve F

Well-known member

Steve F

Well-known member

AndyB

Well-known member

AndyB

Well-known member

Similar threads

We value your privacy