WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Margins (14 posts)

  1. Rickyticky
    Member
    Posted 1 year ago #

    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..
    http://calvarylutheranlcms.org/
    Look at Calendar menu..
    Thanks

  2. jholder83864
    Member
    Posted 1 year ago #

    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.

  3. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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.

  4. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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)

  5. Rickyticky
    Member
    Posted 1 year ago #

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

  6. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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)

    http://codex.wordpress.org/Editing_Files

    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

  7. Rickyticky
    Member
    Posted 1 year ago #

    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..

  8. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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

  9. Rickyticky
    Member
    Posted 1 year ago #

    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.

  10. alchymyth
    Forum Moderator
    Posted 1 year ago #

    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,
    div.menu,
    #colophon,
    #branding,
    #main,
    #wrapper {
    	margin: 0 auto;
    	width: 940px;
    }

    for any further css changes, try checking one of the plugins I suggested earlier:
    http://wordpress.org/extend/plugins/search.php?q=custom+css

  11. Pioneer Valley Web Design
    Member
    Posted 1 year ago #

    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.

  12. Rickyticky
    Member
    Posted 1 year ago #

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

  13. Rickyticky
    Member
    Posted 1 year ago #

    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?

  14. bambambiedermann
    Member
    Posted 6 months ago #

    @Alchymyth - great support - your advice suited me perfectly :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.