Forums - Print Post -

Forums
» List all forums
» » Forum: Webmaster's Corner
» » » Thread: Add CSS hooks for M4 and make M4 defaults similar to M0
» » » » Post: Re: Add CSS hooks for M4 and make M4 defaults similar to M0

Print at Aug 18, 2026, 6:42:45 AM

Posted by autevents at Mar 13, 2015, 4:39:18 PM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0
My knowledge of CSS is also limited, but I eventually found this out by experimenting and searching.

This is about restyling a dynamic calendar embedded as Javascript. The Javascript generated by localendar includes CSS style definitions for the CSS hooks. So if you just try to redefine a style such as:

<style>.m-usr{font-size:32px;}</style>

That will do nothing as your definition in the <head> section of the html page is overridden by the one in the Javascript generated by localendar in the <body> of the page.

Including an id the CSS definition in the head apparently takes precedence. I looked at the source of the page and found, for the M0 view #main_cal to be an id I could use, hence:

<style>#main_cal .m-usr {font-size: 12px;}</style>

Try it and you'll see that this now works.

After luckily experimenting with M0, I changed the style to M4 expecting things would just work, then found out that M4 does not have any CSS hooks and eventually figured out the workaround I mentioned in my original post. However as this is an undocumented workaround, it may not cater for all M4 views entries that can be generated and may also be brittle and stop working if the way the M4 view is generated ever change. It would be much better for the M4 view to have similar hooks as the M0 one.