DarthTater

Thank you. Making progress on the small calendar styling. I’ll see what I can do with the hover, maybe I can set up a small popup window to show the events for a particular day in a smaller list format.

I’m wanting something like this: https://www.micaflatsgrange.org

I’d love to keep using that calendar but not sure I can style it for WordPress, and InstantCal dropped support for it a number of years ago.

Thank you very much, Anmari. I think I can do that.

Is there a way to have the pop-up box one mouseover in the small calendar widget, display a little bit more?

Ye, that’s pretty much what I had done before. I’ll put back my prior css so you can take a look.

I still need to tinker with the sidebar box calendar styling.

Thank you again for the help.

Hi Aisha,

Most of the time you should be able to set up a child theme. The child theme consists of 2 files, functions.php and style.css that are loaded after any of the regular theme files. So anything you fix or customize in a child theme, should not be affected by updates of the parent.

If all you need is style changes, you can also use JetPack’s “Edit CSS”, which apparently has the style.css without the functions.php of a full child theme.

Some people copy the entire *.css file of the parent into a child style.css, so their look never changes. I haven’t done that so the recent Evolve theme update messed up my menu.

At this point, you could
1) Find an older copy of the Evolve theme and upload that

or

2) Keep the update and use a browser (Chrome & Firefox have this) to track down the css element to restyle your menu. On your webpage, right click on any element and choose “inspect” from the right mouse menu.

What that yielded me — after banging my head against the wall for several hours since I didn’t know css as well as I thought, was the code I posted above.

The css elements that seem to have been affected by the gradient theme change were:

#search-text-box, .menu-header {
}

and

.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-item.page_item,
.current-menu-item {
}

If you click on the permalink in the code I posted, it will take you to a website that helps you choose colors for the gradient that you want.

You should also try FieldDraft’s solution and see if that works for you.

Good luck!

It was really nice of you to try to help. You can look at the css gradient code above, it worked well for me. The permalink site has a nice tool where you can visualize all sorts of gradients and it will generate the code for you.

Not a problem, I just made a backup of the css file then commented out my custom css for the menu bar gradient.

Here’s the site: https://wp.interiorhorsecouncil.com/

Yes, it looks normal because I overrode the theme css. If you had had a chance to look at things 5 days ago, there would have been no gradient; the menu bar looked like a light stripe with a dark stripe under it. I can take the css off for an hour or so if that would help.

Aisha is going to have to post; I worked around things by messing with the css (JetPack’s “Edit CSS”.

You can see my current (work in progress) site here; css is as above.

So, here’s what I have on the page:

——————————————————-
<div id=”event_nav”>
<<>>
</div>

[iCal https://calendar.google.com/calendar/ical/admin%40interiorhorsecouncil.com/public/basic.ics https://calendar.google.com/calendar/ical/en.usa%23holiday%40group.v.calendar.google.com/public/basic.ics https://calendar.google.com/ical/admin%40micaflatsgrange.org/public/basic.ics months=1 show_month_nav=1 pagination=0 listtype=2]
——————————————————–

If you click on the “<<” to move to the previous month, it will bring up the previous month, but if you click again, it will stay on that month. So you seemingly can’t just click thru the months with the html code as shown. Perhaps there’s a global variable that’s not being reset with each month change?

I’ll leave the example page link up for a day or two. If I don’t hear back I’ll stick with the bubble gum / bailing wire css that I had working.

Hah, tried to include a link in last post above, and the entire remainder of the post turned into a link. Sorry about that. No ability to edit comments, so will just leave this addendum.

Hi Anmari,

I’ll give the “next” & “prev” a try linking back to the same page, it would be cleaner that what is working now. “next” & “prev” as you described seemed to be working before, but the month name (for the month’s activities displaying) didn’t update. I’ll try that again, though.

I didn’t use “::before or :: after”, but appreciate the caution.

I do really like the look, it’s clean & very readable:

This week’s task – getting different displays calendars working on the same page (event list & mini-calendar), and a smaller version of the list display for yet another page. ??

I’ll be doing chores today, but will post another update in a few days to let you know how things are going.

I appreciate all the help & feedback. I thought I knew html & css pretty well but things have changed a lot since I last used them seriously, 16 years ago.

Have a great rest of the weekend.

I was able to use some more duct tape, spit, and bailing wire on the css and things are looking pretty good now.

I will therefore mark this as “resolved” even thought the solutions(s) were pretty kludgy.

Thank you again for the nice plugin, and the help.

Thank you, anmari, for the quick reply. Yes, I am grouping by the month which helped, but was unable to figure out how to add the next/prev html that would update the central month header name.

I put in some fairly torturous & clunky css and it looks pretty sharp now, and works.

New problem, though. I wanted to make the “summarY” field text a little bigger, but every time I try to add some html <style></style> tags into the fields for html before / html after, it won’t save or update.

I also found the “gradient” too much like just 2 colors with no gradient. Played around for several hours, and this is working for me:

/********** Decrease menu container height, smooth out gradients ************/
#search-text-box, .menu-header {
/* Permalink – use to edit and share this gradient:
https://colorzilla.com/gradient-editor/#e1e1e1+0,ececec+46,d4d4d4+71,d4d4d4+71,c7c7c7+94,d9d9d9+100 */
background: #e1e1e1 !important; /* Old browsers */
background: -moz-linear-gradient(top, #e1e1e1 0%, #ececec 46%, #d4d4d4 71%, #d4d4d4 71%, #c7c7c7 94%,
#d9d9d9 100%) !important; /* FF3.6-15 */
background: -webkit-linear-gradient(top, #e1e1e1 0%,#ececec 46%,#d4d4d4 71%,#d4d4d4 71%,#c7c7c7 94%,
#d9d9d9 100%) !important; /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #e1e1e1 0%,#ececec 46%,#d4d4d4 71%,#d4d4d4 71%,#c7c7c7 94%,
#d9d9d9 100%) !important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#e1e1e1′,
endColorstr=’#d9d9d9′,GradientType=0 ) !important; /* IE6-9 */
}

/************** Reverse the gradient for the active page menu item ********************/
.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-item.page_item,
.current-menu-item {
/* Permalink – use to edit and share this gradient:
https://colorzilla.com/gradient-editor/#d9d9d9+0,c7c7c7+6,d4d4d4+29,d4d4d4+29,ececec+54,e1e1e1+100 */
background: #d9d9d9; /* Old browsers */
background: -moz-linear-gradient(top, #d9d9d9 0%, #c7c7c7 6%, #d4d4d4 29%, #d4d4d4 29%,
#ececec 54%, #e1e1e1 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #d9d9d9 0%,#c7c7c7 6%,#d4d4d4 29%,#d4d4d4 29%,
#ececec 54%,#e1e1e1 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #d9d9d9 0%,#c7c7c7 6%,#d4d4d4 29%,#d4d4d4 29%,
#ececec 54%,#e1e1e1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#d9d9d9′,
endColorstr=’#e1e1e1′,GradientType=0 ); /* IE6-9 */
}
/*********************** Done styling menu bar ***************************************/

I’d like the shortcode in shortcodes too, trying to setup a modal popup from within Caldera forms.