WordPress.org

Forums

Writr
[resolved] center (11 posts)

  1. delikvens
    Member
    Posted 10 months ago #

    Hi!

    How to center-align theme?
    Thanks!

  2. designsimply
    Member
    Posted 10 months ago #

    There isn't an option built in to the theme to center the content container in the Writr theme, but you could make some adjustments on your own.

    I can help you get started if that's something you'd be interested in doing. There are a few different options. One is to use a custom CSS editor plugin and I recommend the one built into the Jetpack plugin. Another option would be to create a child theme.

    Once you've set up one of those ways to add your own CSS, you could do something like this:

    body {
            position: relative;
            width: 940px;
            margin: 0 auto;
            padding-top: 0;
    }
    body:after,
    body:before {
            position: absolute;
            height: 100%;
    }
    #page:before {
            position: absolute;
    }
    #page {
            padding-top: 40px;
    }

    It was a bit more tricky to work that out than I thought it would be! :)

  3. delikvens
    Member
    Posted 10 months ago #

    Thank

  4. designsimply
    Member
    Posted 10 months ago #

    You're welcome. :)

  5. cath8r
    Member
    Posted 10 months ago #

    This works great, but you can't use the "wider content area" setting...at least I can't. Doing so makes the columns shorter and chops text off in the main column. BUT, it IS centered which is what I was looking for.

    I came in to thank you for making my day a lot better!

  6. cath8r
    Member
    Posted 10 months ago #

    Actually it's worse than what I wrote above...it removes the sidebar completely when viewed on an ipad. Just an FYI if nobody has noticed it yet...

  7. esmi
    Forum Moderator
    Posted 10 months ago #

    If you require assistance then, as per the Forum Welcome, please post your own topic instead of tagging onto someone else's topic.

  8. designsimply
    Member
    Posted 10 months ago #

    Actually it's worse than what I wrote above...it removes the sidebar completely when viewed on an ipad. Just an FYI if nobody has noticed it yet...

    Good catch! The simplest solution for smaller devices like an iPad might be to update the earlier example to only apply to larger screens. To do that, you could surround the example with a media query like this:

    @media only screen and (max-width: 1060px) {
    	/* example from earlier goes here */
    }
  9. delikvens
    Member
    Posted 10 months ago #

    Failed: (Input first exactly where you need it.

  10. Kathryn
    Automattic Happiness Engineer
    Posted 10 months ago #

    delikvens - did you still need any help with this? I'm not clear what you mean by this:

    Failed: (Input first exactly where you need it.

  11. designsimply
    Member
    Posted 8 months ago #

    Here's a complete edited version with the change recommended before in case it helps:

    @media only screen and (max-width: 1060px) {
            body {
                    position: relative;
                    width: 940px;
                    margin: 0 auto;
                    padding-top: 0;
            }
            body:after,
            body:before {
                    position: absolute;
                    height: 100%;
            }
            #page:before {
                    position: absolute;
            }
            #page {
                    padding-top: 40px;
            }
    }

Reply

You must log in to post.

About this Theme

About this Topic