|
| Index | Recent Threads | Register | |
|
Forums » List all forums » Forum: General Discussion » Thread: Reduce Header Height, and Event font color change |
|
Total posts in this thread: 9 |
[Change thread status]
[Delete this Thread]
[Move this Thread] [Add To My Favorites] [Watch this Thread] [Post new Thread] |
| Author |
|
|
OPwebmaster
localendar Expert
|
I own the Premium version of Localendar. Two items today: 1. To save space, and to make the Month and Week/Day calendar headers look more similar, I would like to reduce the height of the Month header. Look at #1 (top image) at: http://www.ottawapark.org/reference/images/Localendar_eventspacing.jpg There is 77px of space (red text & arrow) between the blue header bar and the gray date bar in the Month view. There is also 38px of white space (green text & arrow) between 'March 2015' and the individual months. Now look at #2. There is only 61px of space (red text & arrow) between the blue header bar and the day bar on the Week view. So the blue arrows have plenty of space, as shown in this Week view. So is there code I can use to reduce the 38px white space in the Month view as shown in #1? 2. By adding CSS .m-usr to the Calendar Footer field, I can change the font family, the font size, and make it bold. But I can't get the font COLOR to change. I have tried using the generic name (i.e., 'red'), or the code (i.e., #ff0000), but nothing works. [I am able to change the Event title color by putting the information in the Calender Title field, but I want to change the event hours also.] What am I doing wrong here? Thanks, Harry |
|||
|
|
support
localendar Expert  Joined: Aug 9, 2022 Posts: 6395 Status: Offline |
If you really want to reduce the height, I would suggest choosing a skinnier set of arrows under Options->Colors (select the Arrows tab) or using your own arrows (http://www.localendar.com/docs/display/lc/Using+custom+images+for+the+calendar+forward+and+back+arrows) If you want to change the color for all events, you don't want/need to use custom CSS. Again, go to Options->Colors, and select the Events tab. You can then set the event text color for all events from there. ---------------------------------------- Marc Higgins Support Associate, localendar.com Follow us on Twitter! http://www.twitter.com/localendar_news |
|||
|
|
OPwebmaster
localendar Expert
|
Marc:
I looked at the other arrow choices, but did not like them. I assumed that since the Day & Week views reduce this space with the arrows I use, that the user might be able to manually reduce it in the Month view. But I can live with it as is.
I guess I was so focused on why I could change the color in the Calendar Title field and in the Event Title field, but not in the Calendar footer field, that I completely forgot about the obvious way of making the change. Thanks for reminding me of that. Harry |
|||||||
|
|
support
localendar Expert Joined: Aug 9, 2022 Posts: 6395 Status: Offline |
Don't forget that the page above also explains how to upload and use your own arrow images. You can find tons on the web.  ---------------------------------------- Marc Higgins Support Associate, localendar.com Follow us on Twitter! http://www.twitter.com/localendar_news |
|||
|
|
OPwebmaster
localendar Expert
|
Marc:
I created my own thin blue arrows, but I am having a problem. It works fine on my free Localendar that I run on your server (see: http://www.localendar.com/public/HMWlotest1?rss_link=false ). On my server, I have a Premium Localendar that I run as a fully interactive dynamic calendar. That is where my problem occurs. Before adding the code for the special arrows, My Calendar Footer entry on the General tab looks like this: <style>.mt-usr{font-size:28px;}.wt-usr{font-size:28px;}.dt-usr{font-size:28px;}</style>. Then when I add the special code for my own arrows, the Calendar Footer entry looks like this: <style>.mt-usr{font-size:28px;}.wt-usr{font-size:28px;}.dt-usr{font-size:28px;}</style><script>$(document).ready(function() {$('.mal-usr').attr('src','http://www.localendar.com/upload/OPwebmaster/arrowtest2l.gif');$('.mar-usr').attr('src', 'http://www.localendar.com/upload/OPwebmaster/arrowtest2r.gif');});</script> [On my free Localendar Footer, only the text between the <style> and </style> is different from the above.] The new arrows view just fine on 'My Calendar' after I login to localendar.com, but the old Classic arrows still appear on my website: http://www.ottawapark.org/calendar-ottawa-park-toledo.html. Any idea what the problem is? I use <script>window.scrollTo(50,0);</script> in the Calendar Title line which you gave me, so the script feature works on those entries. Harry |
|||||
|
|
support
localendar Expert Joined: Aug 9, 2022 Posts: 6395 Status: Offline |
I changed the $ in your otherwise perfect JavaScript to jQuery instead. '$' should work; it's a shorthand way to refer to the jQuery library, but sometimes there are conflicts and you need to use jQuery instead (sometimes we actually re-name jQuery completely to avoid conflicts with what a web site may already be doing, but that's another thread for another time )If all this seems like a bit of a hack; well, I can't deny that. It would be nice to provide an easier way for members to switch out their calendar arrows. Perhaps someday... ---------------------------------------- Marc Higgins Support Associate, localendar.com Follow us on Twitter! http://www.twitter.com/localendar_news |
|||
|
|
OPwebmaster
localendar Expert
|
Marc:
Works great for the dynamic Localendar on my website. Go here to see it: http://www.ottawapark.org/calendar-ottawa-park-toledo.html
I agree. And your solution only seems to work for a dynamic calendar. For the SAME calendar, but published on your website: http://www.localendar.com/public/OPwebmaster?rss_link=false when one moves between months, my original arrows (Classic from your Options-> Colors-> Arrow Buttons dropdown arrow choice) displays briefly, and then the new arrows appear. Since my new arrows reduce the header height, Localendar jerks vertically as one moves from month to month. Any idea why this happens (it also happens on my free test Localendar on your website, where I still have the '$' instead of the 'jQuery'). It would be nice if on your long wish list, the Localendar dropdown menu for arrows had a place to add custom arrows or select 'No arrows', which might prevent this. One other related item for your Wish List. On your Options->General page, I use the 'Week Jump' shortcut. Your program is written to make the colored header wider, so the left edge lines up with the left of the 'week jump' shortcut column, but you do not move the arrow (either from your dropdown list or my custom one), so the point of the left arrow is about 10 or so pixels retracted. I was able to solve this by adding this code, which is a modification of an example you give on page 52 of your documentation: jQuery('.mal-usr').css('position','absolute').css('left','11px'); but on my My Calendar setup page, the arrow appears to the left of the mini calendar you have at the left top of that page. So I did not know how stable this fix is, so I am not using it. Any thoughts? Harry |
|||||||
|
|
support
localendar Expert Joined: Aug 9, 2022 Posts: 6395 Status: Offline |
The "blinking" comes down to browser-specific behavior. Some browsers will paint the image, then run the script to replace it (hence the blink or movement) and others will make sure they are completely done before showing the user anything. This will be normal behavior until we add native support for custom arrows. Regarding the arrow alignment; we do that on purpose. Our intended design is that the arrows line up over the main month block. We could turn this off, but I don't think we have any plans to unless a lot of people convince us they like the other look better. So for now, you can feel very comfortable moving the arrow yourself, that's why we put hooks in there (good job, btw!) ---------------------------------------- Marc Higgins Support Associate, localendar.com Follow us on Twitter! http://www.twitter.com/localendar_news |
|||
|
|
OPwebmaster
localendar Expert
|
Marc:
I have 5 browsers which I use for testing my website (Firefox 39, Pale Moon 25, Chrome, IE 10 & Opera 12.15). All display a partly opaque gray screen 'blink' over the complete calendar when transitioning from one month (or week, etc.) to another. You can see that at: http://www.ottawapark.org/calendar-ottawa-park-toledo.html. When I open on your site: http://www.localendar.com/public/OPwebmaster?rss_link=false none show the gray screen. Opera 12.15 moves perfectly between months, so it must process everything before painting the screen. Firefox 39 works fine as long as there are not too many events in the month. The other three blink with the default Classic arrows. I tried a lot of the samples on your website that use arrows from your dropdown list of choices. Some displayed the partly opaque gray screen 'blink', and some did not.
I understand your logic. I was sure you had a purpose for it.  Thanks for all your patience and help on these items. I'll try to stop asking questions for a while. Harry ---------------------------------------- [Edit 1 times, last edit by OPwebmaster at May 12, 2015, 3:13:46 AM] |
|||||||
|
| [Show Thread Printable Version] [Post new Thread] |
Help! | Cobranding | Legal | Privacy Policy | About localendar.com | Contact Us |
