By jwill on Wednesday, 18 October 2023
Replies 8
Likes 0
Views 482
Votes 0
Is there away to increase the display size of the toolbar (month, week, day, jump to, etc.)?
Yes using CSS - what is the URL where you have the calendar?
·
1 year ago
·
0 Likes
·
0 Votes
·
0 Comments
·
https://www.riversidesnowbirds.com/activities/calendar. While making the whole toolbar larger would be nice, it's mainly the forward and back arrows that I would like bigger.
·
1 year ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Try adding this to your JEvents custom CSS file


#jevents_body td.iconic_td {
width: 110px !important;
}
#jevents_body td.iconic_td > div
#jevents_body td.iconic_td > div a {
width: 110px !important;
}

#jevents_body td.iconic_td div {
background-size: 100% 100%;
}
·
1 year ago
·
0 Likes
·
0 Votes
·
0 Comments
·
The CSS above spaced the toolbar items farther apart, but did not increase the size of anything. jeventstoolbar.png
·
1 year ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Sorry part of the change wasn't included in my last post


#jevents_body div.nav_bar_cal {
width:100px;
height:62px;
}


that should give you enough to get you going on other styling you may need
·
1 year ago
·
0 Likes
·
0 Votes
·
0 Comments
·
This increased the month, week, day and Jump Icons, but it didn't increase the forward/back arrows. The small ones are very hard for users to see.

jeventstoolbar2.png
·
1 year ago
·
0 Likes
·
0 Votes
·
0 Comments
·


div.ev_navigation td:not(.iconic_td) {
width: 40px;
}
div.ev_navigation td:not(.iconic_td) img {
width:30px;
}
·
1 year ago
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you, this solved the problem and will make it much easier for users to move around.
·
1 year ago
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post