How to create css class for addon

[Mr Lucky]

I had presumed this would be easy but is not working whatever I try.

I am testing with an obvious simple red border for a div container. I had presumed I could either:

• Create a style property, configure the red border, assign it to the addon and use the Property name as either a css class or id.

or

• Create a custom template, e.g. lucky.css, add my css in there, assign it to the addon.

Neither of these seems to work

Is either of these correct (and so should be displaying the border) or am I missing something?

 

[Nudaii]

1 and 2 would be used together, style properties need a css template with them
have you used a template modification to hook the css into the page_container?

https://xenforo.com/help/css-templates/

Where
</head>

Replace

</head>
<xen:require css="lucky.css" />

 

[Mr Lucky]

have you used a template modification to hook the css into the page_container?

No, didn't realise I had to do that. I presume I just add a link to the css template I created (in master style)

<link rel="stylesheet" href="lucky.css" />

 

[Chris D]

Use the syntax mentioned in @Nudaii's post.

 

[Mr Lucky]

Use the syntax mentioned in @Nudaii's post.

Aha, Not sure how I missed that.

 

[Mr Lucky]

1 and 2 would be used together, style properties need a css template with them
have you used a template modification to hook the css into the page_container?

https://xenforo.com/help/css-templates/

Where
</head>

Replace

</head>
<xen:require css="lucky.css" />

OK, I have got it working with the css template, thanks.

But I don't understand how a .css template and a style property work together.

I have created a .css template and I can see that working via being hooked into PAGE_CONTAINER, but this works fine without any Style property.

However I want to have the style property Instead, ie so the user can easily modify the settings.

How do I do this? do I hook the style property into PAGE_CONTAINER or should it just work when linked to the addon?

The manual is not very helpful: