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

Define New Style Property

AndyB

Well-known member
#1
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:

AndyB

Well-known member
#2
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
 

Steve F

Well-known member
#3
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

Well-known member
#4
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
 

Steve F

Well-known member
#6
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.
 

Steve F

Well-known member
#8
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

Well-known member
#10
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:

AndyB

Well-known member
#12
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

Well-known member
#13
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

Well-known member
#14
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.
 
Last edited:

Steve F

Well-known member
#15
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

Well-known member
#17
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

Well-known member
#18
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: