Welcome Guest   | Login   
  Search  
  Index |  Recent Threads |  Register | 


Quick Go »
Thread Status: Normal
Total posts in this thread: 12
Posts: 12   Pages: 2   [ 1 2 | Next Page ]
[Change thread status] [Delete this Thread] [Move this Thread]
[Add To My Favorites] [Watch this Thread] [Post new Thread]
Author
Previous Thread This topic has been viewed 104 times and has 11 replies Next Thread
autevents
New Member



Joined: Dec 3, 2014
Posts: 15
Status: Offline

Edit this Post   Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Thread]

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>

[Mar 10, 2015, 1:26:24 AM] [81.187.10.144] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
support
localendar Expert
Member's Avatar


Joined: Sep 15, 2004
Posts: 5964
Status: Offline
Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

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
[Mar 13, 2015, 12:42:07 AM] [24.189.166.198] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
autevents
New Member



Joined: Dec 3, 2014
Posts: 15
Status: Offline

Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

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>

[Mar 13, 2015, 3:14:59 PM] [81.187.10.144] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
OPwebmaster
localendar Expert



Joined: Jan 24, 2015
Posts: 280
Status: Offline

Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

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
[Mar 13, 2015, 4:03:48 PM] [72.241.195.138] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
autevents
New Member



Joined: Dec 3, 2014
Posts: 15
Status: Offline

Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

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.
[Mar 13, 2015, 4:39:18 PM] [81.187.10.144] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
OPwebmaster
localendar Expert



Joined: Jan 24, 2015
Posts: 280
Status: Offline

Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

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
[Mar 13, 2015, 11:33:23 PM] [72.241.195.138] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
autevents
New Member



Joined: Dec 3, 2014
Posts: 15
Status: Offline

Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

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
[Mar 16, 2015, 12:04:36 AM] [81.187.10.144] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
autevents
New Member



Joined: Dec 3, 2014
Posts: 15
Status: Offline

Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

 
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.
[Mar 16, 2015, 12:16:25 AM] [81.187.10.144] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
OPwebmaster
localendar Expert



Joined: Jan 24, 2015
Posts: 280
Status: Offline

Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

>>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
----------------------------------------
[Edit 1 times, last edit by OPwebmaster at Mar 16, 2015, 3:48:13 AM]
[Mar 16, 2015, 3:47:24 AM] [First IP: 72.241.195.138 - Last IP: 72.241.195.138] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
OPwebmaster
localendar Expert



Joined: Jan 24, 2015
Posts: 280
Status: Offline

Edit this Post   Re: Add CSS hooks for M4 and make M4 defaults similar to M0 Reply to this Post
Reply with Quote
[Delete this Post]

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
[Mar 16, 2015, 3:52:13 AM] [72.241.195.138] Show Post Printable Version [Link] Report threatening post: please login first  Go to top 
Posts: 12   Pages: 2   [ 1 2 | Next Page ]
[Show Thread Printable Version] [Post new Thread]

Help! | Cobranding | Legal | Privacy Policy | About localendar.com | Contact Us