Forums - Print Thread - Add CSS hooks for M4 and make M4 defaults similar to M0

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

Print at Apr 25, 2024, 11:29:12 AM

Posted by autevents at Mar 10, 2015, 1:26:24 AM

Add CSS hooks for M4 and make M4 defaults similar to M0
M4 has by default a smaller font and different background than M0. I like the idea of having multiple day events together as one box, but much prefer the M0 style. It would be good for the default for M4 to be the same as M0 as both styles are close to each other.

Also there are no CSS hooks for M4 and styling it for instance to increase the font size is possible but likely brittle. This is the CSS I found works on the pages on which I tested it. Having similar CSS hooks as for M0 would be helpful.

<style type='text/css'>
   #event_b span {font-size: 12px;}
   #event_b0 span {font-size: 12px;}
   #event_b1 span {font-size: 12px;}
   #mevent_b0 span {font-size: 12px;}
   #mevent_b1 span {font-size: 12px;}
</style>

Posted by support at Mar 13, 2015, 12:42:07 AM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0
I believe the equivalent CSS hook for what you mention above on the M0 view is just:

.m-usr

(see http://www.localendar.com/docs/display/lc/Custom+Calendar+CSS)

The M4 view is constructed in a fundamentally different way, which is why the CSS is different. But we should document that on the wiki.
----------------------------------------
Marc Higgins
Support Associate, localendar.com
Follow us on Twitter! http://www.twitter.com/localendar_news

Posted by autevents at Mar 13, 2015, 3:14:59 PM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0
Yes, having .m-usr hooks on the M4 view was what I was expecting and looking for, but the other hooks could be useful to others as well.

If you update the documentation on hooks, you may want to give an example of using the id in the style definition as that seems to be the only way to override the local style definition from the script (when using dynamic calendars). At least that's the valid html way I eventually found. So to change the style of .m-usr for the M0 view, an example that works is:

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

Posted by OPwebmaster at Mar 13, 2015, 4:03:48 PM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0
autevents:

I only know enough coding to get by. You said:

>>So to change the style of .m-usr for the M0 view, an example that works is:
<style>#main_cal .m-usr {font-size: 12px;}</style><<

Whereas the example given on the page Marc referenced is just:
>><style>.m-usr{font-size:32px;}</style><<

Why did you add '#main_cal '?

Also, how did you determine the names of the various pages & parts, such as '#main_cal ', and these you gave in your first post:

>><style type='text/css'>
#event_b span {font-size: 12px;}
#event_b0 span {font-size: 12px;}
#event_b1 span {font-size: 12px;}
#mevent_b0 span {font-size: 12px;}
#mevent_b1 span {font-size: 12px;}
</style><<

Harry

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.

Posted by OPwebmaster at Mar 13, 2015, 11:33:23 PM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0
autevents:

This is strange. I have a dynamic calendar www.ottawapark.org (click on the Calendar tab). I just tested the following code in my Calender Footer line on the General Options tab, and it works just fine.

<style>.mt-usr{font-size:36px;}.wt-usr{font-size:28px;}.dt-usr{font-size:28px;}.mm-usr{display:none;}</style>

Here is what is on the Footer line if you go to the website now:

<style>.mt-usr{font-size:28px;}.wt-usr{font-size:28px;}.dt-usr{font-size:28px;}</style>

I have tried several variations of this also, and they all work. I also have a test calendar on the Localendar site, and these work there also.

I looked at the Page Source for my website's Calendar page. I cannot find any entries for main, or #main.

Hopefully Marc can add some more clarity to all this.

Harry

Posted by autevents at Mar 16, 2015, 12:04:36 AM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0
I do not want to put code via the General Options tab as my calendar is used on at least two web pages and I wanted to change the styling of the calendar on one of these websites.

BTW your page does not validate: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ottawapark.org%2Fcalendar-ottawa-park-toledo.html&charset=(detect+automatically)&doctype=Inline&group=0

Posted by autevents at Mar 16, 2015, 12:16:25 AM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0

I looked at the Page Source for my website's Calendar page. I cannot find any entries for main, or #main.

If you look at the DOM of your calendar page (it's the default in the inspector in Safari), you'll see that the style generated by the Javascript includes:

.localendar_container #main_cal td {text-align:left;}

so you do have a:

table#main_cal

which is your main calendar table.

Posted by OPwebmaster at Mar 16, 2015, 3:47:24 AM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0
>>BTW your page does not validate:<<

That is interesting. All the complaints are about the '&' in the 'Y&dynamic' section of my publishing script. That is exactly how the Localendar documentation specifies it (p 79).

So do you make it 'Y&ampdynamic' as W3C recommends?

Harry

Posted by OPwebmaster at Mar 16, 2015, 3:52:13 AM

Re: Add CSS hooks for M4 and make M4 defaults similar to M0
autevents:

>>If you look at the DOM of your calendar page (it's the default in the inspector in Safari), you'll see that the style generated by the Javascript includes:

.localendar_container #main_cal td {text-align:left;}<<

If you say so. biggrin

I have two DOM Inspector tools, and I cannot find a .localendar or a #main entry anywhere when I look at my website Calendar page.

But of course this DOM inspection is way over my head, and I therefore have no idea what I am doing.

Harry