|
| Index | Recent Threads | Register | |
|
Forums » List all forums » Forum: Webmaster's Corner » Thread: Add CSS hooks for M4 and make M4 defaults similar to M0 |
|
Total posts in this thread: 12
|
[Change thread status]
[Delete this Thread]
[Move this Thread] [Add To My Favorites] [Watch this Thread] [Post new Thread] |
| Author |
|
|
autevents
New Member
|
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'> |
|||
|
|
support
localendar Expert  Joined: Aug 9, 2022 Posts: 6397 Status: Offline |
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 |
|||
|
|
autevents
New Member
|
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> |
|||
|
|
OPwebmaster
localendar Expert
|
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 |
|||
|
|
autevents
New Member
|
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. |
|||
|
|
OPwebmaster
localendar Expert
|
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 |
|||
|
|
autevents
New Member
|
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 |
|||
|
|
autevents
New Member
|
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_calwhich is your main calendar table. |
|||||
|
|
OPwebmaster
localendar Expert
|
>>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&dynamic' as W3C recommends? Harry ---------------------------------------- [Edit 1 times, last edit by OPwebmaster at Mar 16, 2015, 3:48:13 AM] |
|||
|
|
OPwebmaster
localendar Expert
|
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.  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 |
|||
|
|
[Show Thread Printable Version] [Post new Thread] |
Help! | Cobranding | Legal | Privacy Policy | About localendar.com | Contact Us |
