Archived topic
Embedded Google Calendar ignores Generate Press' stylings
7 replies · Started by Andi on February 25, 2018
Hello Tom,
I am sorry to bother you and this might be out of your support's responsibility, but maybe you can help or provide a link to a tutorial (or even tell me that it is simply impossible so I don't waste more time).
I am building my Blues Band's website with your theme and I still love all the styling options you make available with the Pro version! I also added your light social icons - very easy and still flexible, another great solution from you. (Right now it's a local installation, so there is no link.)
But I can't figure out one thing:
Is there a way to match the styling of an embedded Google Calender to the GeneratePress theme's styling?
The functionality of the calendar is amazing, and there are some styling options. Also I managed to change the embed code to match the color of the event titles. But after 5 hours of tearing out my hairs I still can't change the following 3 stylings, that destroy my sites design.
Here is a screenshot:
1) Change the color and delete the underline of the earlier & later events links (the google calendar seems to override GeneratePress theme's stylings?).
2) The color of the table.
3) Is there a way to get rid of the "more details" link? All the infos are already shown and I don't want people to leave my site to go to google calendar site.
Do you have an idea? Even if it's just for the link styling, I'd be very happy! :-)
Thanks so much,
Andi
Hi there,
This type of question is basically impossible without seeing the site.
If you can show us the actual site with the specific element, we will try our best to help with the CSS part :)
Or you could try asking Google Calendar's support (not sure if they have one), they should be more familiar with their elements and perhaps already solutions from similar questions.
Hi Leo,
thanks for your reply.
I published an early version of the website with the calendar embedded:
http://www.professorsnakeoil.com/termine/
Thanks a lot for checking!
Andi
1) I only see: Termine werden angezeigt bis 4.30.
.agenda-more {
color: #000;
text-decoration: none;
}2) Try
.agenda .date-label, .view-cap, .view-container-border {
background-color: #fff;
}3) I don't see see that element in the example site you linked.
Hi Leo,
thanks a lot for your effort!
1) & 2) I added both code snippets into the custom CSS field of my page builder (Thrive Architect), but nothing happened. I also tried adding the code with the Siteorigin CSS Plugin, also no result.
3) You have to click on one of the events to open the additional info. There is the "More Info" link I'd like to hide.
Thanks again,
Andi
I don't see any of the CSS being added.
Can you try using Simple CSS or Additional CSS? https://docs.generatepress.com/article/adding-css/
And make sure you clear caching plugin too if you are using one.
Hi Leo,
I added Simple CSS and I added the code in the customizer in Simple CSS. No change.
I added the code in the Simpel CSS meta box of the page. No change.
I have no cache plugin. I also tried to uncheck the option "cache dynamic CSS" in the customizer (whatever that means). No change.
Do you see the CSS now, have I added it now correctly?
https://professorsnakeoil.com/termine/
Thanks,
Andi
Still no unfortunately.
I just saw that the style for the calendar is loading directly from calendar.google.com so I think it's best to ask them how to add your own CSS to their style.
