Top of the Month view Calendar styling (buttons and whatnot)???
Permalink Browser Info Environment
I figured out how to style the grid of the calendar easily enough. But, where in god's name can I control the appearance of the month and buttons at the top? I have gone into calendar/blocks/view_month.php and made changes, but there are a lot of styles just will not budge.
• The thing wants to be text-aligned LEFT no matter what I do.
• I can't change the input types from "button" to "image," either (though that would be the correct way to do this so it doesn't break in IE). It seems the inputs MUST remain as "button" or else the next/previous navigation breaks.
I just want to have arrow images for buttons and center the top Month (see attached).
I have been mucking around with this for 2 hours. Can not be found through Firebug or Inspect Element. Really frustrating. Why isn't the style a little more self-contained here?
• The thing wants to be text-aligned LEFT no matter what I do.
• I can't change the input types from "button" to "image," either (though that would be the correct way to do this so it doesn't break in IE). It seems the inputs MUST remain as "button" or else the next/previous navigation breaks.
I just want to have arrow images for buttons and center the top Month (see attached).
I have been mucking around with this for 2 hours. Can not be found through Firebug or Inspect Element. Really frustrating. Why isn't the style a little more self-contained here?
| Type: | Discussion |
|---|---|
| Status: | Archived |
Changing the buttons to images seems to work fine for me, what steps are you taking to change it?
I changed the monthly view template blocks folder, changed the calendar.css in the css folder. I got the buttons to have an image, too, but it's not the right way (type should be "image" not "button" due to an IE quirk unless you are using it in a particularly buttony way (background with text over it). Since I just wanted to replace the << and >> buttons with big image triangles, "image" was the right way to do it. (see the screenshot in the post above, you can see I got the images in there)
But, the more serious problem wasn't the buttons.
The more serious problem was that once I removed all the buttons, I couldn't get the month name (JUNE) to center. Everything in that box forced itself to the left... No matter what I did, it was pulling a style from somewhere untraceable that was forcing it to the left. (notice the screenshot attached above, the top section is flushed left). THIS is what took the most time (and I never figured out where it was coming from). I couldn't override it in any style sheet or remove it.
But, the more serious problem wasn't the buttons.
The more serious problem was that once I removed all the buttons, I couldn't get the month name (JUNE) to center. Everything in that box forced itself to the left... No matter what I did, it was pulling a style from somewhere untraceable that was forcing it to the left. (notice the screenshot attached above, the top section is flushed left). THIS is what took the most time (and I never figured out where it was coming from). I couldn't override it in any style sheet or remove it.
Hey Zoinks,
I like your take on the calender, looks very clean.
You should also alter the view to match your requirements, like changing <input type="button" to <input type="image" and adding a container around that month name to allow you to more easily grab it with CSS.
Best wishes,
Korvin
I like your take on the calender, looks very clean.
You should also alter the view to match your requirements, like changing <input type="button" to <input type="image" and adding a container around that month name to allow you to more easily grab it with CSS.
Best wishes,
Korvin
Thanks, but like I said (post 1), I already did that and it broke the functionality. Try it. You'll see. Simply changing it back from "image" to "button" type restored the functionality. As "image" type, the buttons don't work when you click them.
Also, do you have any idea how I can center that top part? Like I said, I tried every possible place to center that thing and it will NOT work. I definitely stuck it in a div and everything else I could think of. It's really quite amazing how resistant it is. That's why it's so frustrating.
Also, do you have any idea how I can center that top part? Like I said, I tried every possible place to center that thing and it will NOT work. I definitely stuck it in a div and everything else I could think of. It's really quite amazing how resistant it is. That's why it's so frustrating.
Hey, accidentally marked as best answer instead of replying. (Not that it was a bad answer, mind you ;)) Anyhoo, the top stuff is in a table, so you'd want to apply your styles to the table in your overridden view. I was just going fast and loose with inline styles for expedience sake, but you can target the class or whatnot:
I often forget that margin: 0 auto doesn't work without a height so don't forget that either. I'll look into the image issue now.
<table style="width: 50%; white-space: nowrap; margin: 0 auto;" class="calendar-top" cellspacing="1" cellpadding="0" border="0">
I often forget that margin: 0 auto doesn't work without a height so don't forget that either. I'll look into the image issue now.
Thank you!
Btw, the improvements to this thing since the 5.4 version are incredible. Clicking the date to add items makes it 500x better, imo.
Btw, the improvements to this thing since the 5.4 version are incredible. Clicking the date to add items makes it 500x better, imo.
I also put the month name and the buttons in the same table cell in that example, btw, for what it's worth.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.