• Resolved Rickyticky


    I am using theme Twenty Ten.. I import a Google Calendar.. I would like to spread it ot in width some.. The left margin is my problem.. Can I set the left margin to nothing, or at least eual to the header..
    The website is at..
    Look at Calendar menu..

Viewing 13 replies - 1 through 13 (of 13 total)
  • This is because the calender is contained within an iframe. If you alter the margin, it doesn’t know how to increase the content of the iframe.

    Here’s how to fix it:
    set CSS rules for the iframe to be 909px
    If you can’t do that, find the code where it puts the width in the iframe tag:

    <iframe width="909px;" scrolling="no" height="600" frameborder="0" style=" border-width:0 " src="https://www.google.com/calendar/embed?title=Calvary%20Lutheran%20Church&height=600&wkst=1&bgcolor=%23FFFFFF&src=jvillelcms%40gmail.com&color=%23711616&ctz=America%2FNew_York"></iframe>

    then create a rule for:

    .one-column #content {
        margin: 0 auto;
        width: 100%;

    It might need some tweaking depending on where those classes are used, but that should work.

    The calendar is in an iframe and has the height and width attributes inline.

    <iframe src="https://www.google.com/calendar/embed?title=Calvary%20Lutheran%20Church&height=600&wkst=1&bgcolor=%23FFFFFF&src=jvillelcms%40gmail.com&color=%23711616&ctz=America%2FNew_York" style=" border-width:0 " width="700" height="600" frameborder="0" scrolling="no"></iframe>

    Change the width to maybe 900, then:

    Edit CSS:

    .one-column #content {
    	margin: 0 auto;
    	width: 940px;

    Consider a Child Theme for the CSS edits as they will be lost on theme update.

    just for the calendar page, add this to style.css:

    .page-id-70 .one-column #content {
    	margin: 0 auto;
    	width: 100%;

    change 100% to whatever you want – was 680px – max 940px.

    (.page-id-70 makes this specific to the calendar page which has the page ID 70)

    at the same time, change the width of the calendar iframe to 940 (or whatever you have set as the width in style.css)

    I’m sorry to sound so dumb, but how and where do I find the Calendar Page css?

    what you edit is the css file of your theme; i.e. style.css of Twenty Ten

    for instance via:

    dashboard – appearance – editor; make sure your theme is selected in teh top dropdown; then select Stylesheet (style.css)


    if this is your first edit to the styles of your theme, consider to start using a custom css plugin to keep the edits save during an eventual update of the theme; http://wordpress.org/extend/plugins/search.php?q=custom+css

    Not making any headway with this.. The left margin of the calendar still will not fall under the left margin of the header.. It is indented about one inch.. I need that inch to spread the calendar in a landscape type view..

    where did you make what edits?

    right now, I don’t find the suggested new styles anywhere in your site.

    step by step:

    1 – dashboard – appearance – editor: open style.css of Twenty Ten

    2 – scroll down (about 100 lines) to:

    LAYOUT: One column, no sidebar
    DESCRIPTION: One centered column with no sidebar
    .one-column #content {
    	margin: 0 auto;
    	width: 640px;

    3 – after that, add:

    .page-id-70 .one-column #content {
    	margin: 0 auto;
    	width: 100%;

    4 – click ‘update file’;

    5 – view your site; press ‘reload’ or press ‘ctrl f5’ to clear the browser cache so you can see the changed formatting;
    the calendar should start near the left edge.

    6 – edit the content of your page, locate the iframe code, change the width there to 940; save;

    7 – view the page; if you don’t see any change, ‘reload’ or press ‘ctrl f5’;
    the calendar should span the full width of the page.

    4 – edit the content of your page; change the

    Still no luck.. My Header has now moved off to my left and doesn’t cover the complete page.. The calendar continues to have a wide left margin.. Is there a way for me to reload the original style.css, and if so will it effect anything else if I reload it..
    The header off to the left doesn’t look so good.

    you were nearly there with the newly added style; there was just a space character missing after the 70:

    .page-id-70 .one-column #content {
    	margin: 0 auto;
    	width: 100%;

    Is there a way for me to reload the original style.css, and if so will it effect anything else if I reload it..

    reloading the style.css will only effect if you had done any edits before – which will get lost.

    you can get a copy of style.css from http://themes.svn.wordpress.org/twentyten/1.5/style.css

    or, alternatively, you could try and fix it by adding the ‘px’ back here after the 940 (shown how it should be)

    /* The main theme structure */
    #access .menu-header,
    #wrapper {
    	margin: 0 auto;
    	width: 940px;

    for any further css changes, try checking one of the plugins I suggested earlier:

    The changes noted above will note work if you also keep modifying the CSS in other ways (as has been clearly done)…

    When you make an edit in the editor to your stylesheet, it is important to have a backup (a simple sytax error can lead to headaches)…

    Your backup can be restored quickly at any time using FTP or your host’s File Manager.

    All is well and perfect.. Stop in for your free cup of coffee.. Much appreciated..

    Sorry to bother you again.. I have yet another calendar in a sub menu that I would like to do the same thing to.. Where would I put the code, and would it be the same code?

    @alchymyth – great support – your advice suited me perfectly 🙂

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Margins’ is closed to new replies.