Support » Theme: Coraline » How to change left- and right margins/padding

  • Resolved Michiel Koekkoek

    (@michiel-koekkoek)


    I found this theme yesterday and i like it because it has the option to choose per page for full-page width or not. However,almost half of each page (either with full page-width or not) is occupied by blank left- and right-margins/padding using Chrome on 100% zoom. See: http://www.tcmuiden.nl.
    Is there a way to make this margin/padding-areas smaller for all pages including the header?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Hi Michiel, Coraline is quite an old theme, which is why the content area is so narrow – it was designed in the era of lower-resolution monitors. It’s also not responsive, and doesn’t adapt automatically to mobile devices.

    Before attempting to tweak the layout of Coraline, I’d encourage you to check out Colinear, our recent revamp of Coraline, which has a wider layout and is fully responsive, designed for all devices from large monitors to small phones.

    Demo: https://colineardemo.wordpress.com/

    Download: https://wordpress.org/themes/colinear/

    Hello Kathryn, thanks for your quick reaction! I have installed and activated the Colinear theme and I must say it is a cute theme.I consider to switch to this theme.
    However, unlike Coraline, it looks like there is no option to define the page-template on a per page basis (e.g. full-page width).

    Maybe I overlooked the option. When I change the whole theme layout to no sidebars the body text is not full-page width but centres in the middle.

    Maybe you can clarify how i can have the result i like.

    Kind greetings

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    You’re right – Colinear doesn’t have per-page templates.

    That could be done by adding a new template through a child theme:

    Page Templates

    Making a child theme means your changes won’t be overwritten when you update the theme. If you’re new to child themes, you can explore these guides:

    http://codex.wordpress.org/Child_Themes
    https://www.smashingmagazine.com/2016/01/create-customize-wordpress-child-theme/
    http://op111.net/53/
    http://vimeo.com/39023468

    Feel free to give it a try and let me know if you get stuck somewhere.

    thanks Kathryn, i will try that when the action described herunder
    might not work

    what I tried in the meantime was this: https://premium.wpmudev.org/blog/create-full-width-page/

    I did the steps described and indeed that gave me the option to
    specify the template full-width for a given page and indeed the
    sidebar vanished.
    However the place of the sidebar was not occupied by body-text but blank, although I updated
    <div id=”primary” class=”content-area”>
    to the advised
    <div id=”primary” class=”content-area twenty columns”>
    in the created file full-width.php

    Maybe that was too simply thought?

    Is there any other parameter that can be set to make the
    text to appear really full-width?

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    That tutorial should not be instructing you to modify your theme directly. You will lose all your changes every time you update to the next version of the theme.

    Please first set up a child theme and put your new template file in the child theme.

    Once you’re set up, you can provide a link to a page on your site running the new template and I’ll have a look there.

    ok, Kathryn, will work on that and let you know.

    have a nice day!

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Sounds good, keep me posted!

    hello Kathryn, i have done as you told me. Did the following steps:
    – created directory colinear-child under themes directory
    – created style.css (only header with Template pointing to colinear).
    – created functions.php to enforce enqueueing.
    – created full-width.php template (in fact the colinear page.php minus the
    line : <?php get_sidebar(); ?>

    After activation of the child theme and the selection of the full-width template on the page detail screen of WP, the screen shows as seen on:
    http://www.tcmuiden.nl/index.php/toerverslagen-2016/

    No right sidebar anymore, exactly what I want. I noticed that when the pc-screen is wide enough the content-width is (substantially) smaller than the header-width. When the browser screen is smaller or on a tablet or smartphone the header and content have the same width.

    So my question to you is: what do I have to do (probably in the child style.css) to enforce that the content-width follows the header-width on wider screens.

    Kind greetings

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Good work!

    So my question to you is: what do I have to do (probably in the child style.css) to enforce that the content-width follows the header-width on wider screens.

    Try adding this to your child theme:

    .page-template-full-width .content-area {
      width: 100%;
    }

    Hello Kathryn,

    That did it!! Thanks so much.

    I love the flexibility of WordPress.

    I am going to use Colinear for 2 other websites as well.

    So in the future I might bother you again with nasty questions 🙂

    For now have a nice day and cu.

    Michiel

    Moderator Kathryn

    (@zoonini)

    Automattic Happiness Engineer

    Great! Glad that did the trick and that you’re liking Colinear.

    No problem to ask more questions and I’m sure they won’t be too nasty. 😉

    I’m marking this thread as resolved but feel free to post in the Colinear forum if you have any new questions:

    https://wordpress.org/support/theme/colinear

    hye..
    im had problem in my website.. i dont know what actualy happen. when i change the margin, my website became worse… http://192.168.100.62:8080/wordpress

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘How to change left- and right margins/padding’ is closed to new replies.