Karuna Theme: Full Width Footer Not Full Width for Google Calendar

  • Unknown's avatar

    Trying to get Karuna theme to work properly. I am trying to put a Google Calendar into the Full Width Footer in Karuna theme using this code in the Custom HTML widget (it is a public calendar):

    [googleapps domain="calendar" dir="calendar/embed" query="showTabs=0&showCalendars=0&height=800&wkst=1&bgcolor=%23FFFFFF&src=1ng7g1u971td6ci4crqadup750%40group.calendar.google.com&color=%2329527A&ctz=America%2FDenver" width="1024" height="800" /]

    The proper width is included as shown above but it will not display wider than 800 pixels no matter how big a monitor you use, other widgets work fine in the Full Width Footer. Using Firefox’s Inspector I found that Karuna is enclosing it in an iFrame of 800 pixels width:

    https://calendar.google.com/calendar/embed?showTabs=0&showCalendars=0&height=800&wkst=1&bgcolor=%23FFFFFF&src=1ng7g1u971td6ci4crqadup750%40group.calendar.google.com&color=%2329527A&ctz=America%2FDenver

    It does this with the Text widget I used to use for HTML also. This problem is why I am considering moving away from wordpress.com to my own server but if we can get this figured out, I will stay.

    Is this a bug?
    Isn’t everything in the Full Width Footer supposed to be ‘full width’?

    Thanks so much to KathrynWP for the help on the last problem, similar help here would make this site work for this non-profit!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Of course, just after posting this I figure out the Google Calendar link I am using is an iFrame, which is not allowed on wordpress.com. It works on my local install of WordPress so back to the drawing board.

    Unfortunately, I know enough HTML to be more dangerous than productive…

  • Unknown's avatar

    After testing it looks like
    <link>
    <object>
    and
    <embed>

    are blocked by wordpress.com too. Any ideas what else to try or are ALL embedding functions blocked by wordpress.com?

  • Unknown's avatar

    Been working on this all day, still no answers, for some reason Karuna or wordpress limits the width of the HTML or text widgets to 685 pixels even in a full width footer:
    <iframe src="https://calendar.google.com/calendar/embed?height=800&wkst=1&bgcolor=%23FFFFFF&src=1ng7g1u971td6ci4crqadup750%40group.calendar.google.com&color=%2329527A&ctz=America%2FDenver" marginheight="0" marginwidth="0" width="685" height="800" frameborder="0"></iframe>
    But allows it in the Gallery widget in the Full Width Footer:

    <div class="tiled-gallery type-rectangular" data-original-width="1040" data-carousel-extra="{&quot;blog_id&quot;:128352757,&quot;permalink&quot;:&quot;https://gemrecovery.wordpress.com/&quot;,&quot;likes_blog_id&quot;:128352757}">
    		<div class="gallery-row" style="width: 1040px; height: 588px;" data-original-width="1040" data-original-height="588">

    Not sure why this is but this seems to be the problem…

    Can anyone tell me why this width limitation in these widgets?

    I can set the width to 1024 but it is changed back when I press save…

  • Hi there –

    In terms of the calendar widget, have you tried the WordPress.com Google calendar widget?

    Embed a Google Calendar

    Karuna’s “content width” is 685px, that’s set in the theme itself. With custom CSS that can be overwritten, there’s a special box in the Customizer’s Custom CSS panel where you can set a new content width.

    Could you provide a link to the site you’re working on so I can take a look directly?

    Thanks so much to KathrynWP for the help on the last problem, similar help here would make this site work for this non-profit!

    You’re welcome! Hopefully we can get this last issue sorted!

  • Unknown's avatar

    What is shown on the Google calendar page is basically what I am doing, just in the full-width footer so I can get the full width calendar.

    The non-profit I work for is not in a position to pay to upgrade to use plugins so I have to work with what is available in the standard WordPress.com package. I am also working on a version that is independently hosted, it is currently not live, just on the local network, just in case I need more than the standard WordPress.com package allows.

    I understand Karuna’s content width is 685px but this is the full width footer, the gallery is full width, why not the text and HTML widgets?

    I have the exact same install on my local machine and the calendar displays at full 1024px width, I don’t know why one works and not the other…

    For some reason the thread is showing my personal blog as the one I am working on, it is actually my work website:

    http://gemrecovery.wordpress.com

    At the bottom of any page I left the three test calendars up.

  • Looks like the width on the embed codes needs to be set to 100% instead of a pixel value. I changed that for you in one of the widgets and on the separate calendar page so you can see how it looks. Let me know if this works!

  • Unknown's avatar

    That did the trick! Thanks!

  • Awesome, glad that did it!

  • The topic ‘Karuna Theme: Full Width Footer Not Full Width for Google Calendar’ is closed to new replies.