How to change left- and right margins/padding
-
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?
-
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
You’re right – Colinear doesn’t have per-page templates.
That could be done by adding a new template through a child theme:
https://developer.wordpress.org/themes/template-files-section/page-template-files/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/39023468Feel 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 workwhat 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.phpMaybe that was too simply thought?
Is there any other parameter that can be set to make the
text to appear really full-width?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!
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
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
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:
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
- The topic ‘How to change left- and right margins/padding’ is closed to new replies.