Support » Plugin: Custom Sidebars - Dynamic Widget Area Manager » theme 2017: only in pages, sidebar is on the left

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Nastia – WPMU DEV Support

    (@wpmudev-support9)

    Hello @airbjorn,

    Trust you’re doing well!

    There is following CSS code added into your theme

    @media screen and (min-width: 48em) {
    /*other CSS*/
    .has-sidebar:not(.error404) #primary {
        float: left;
        width: 58%;
    }
    }

    Please locate this CSS and change float: left; to float: right;

    @media screen and (min-width: 48em) {
    /*other CSS*/
    .has-sidebar:not(.error404) #primary {
        float: right;
        width: 58%;
    }
    }

    If you can’t find this CSS please add to your child theme style.css file the following, or to Appearance > Custumize > Additinal CSS field:

    @media screen and (min-width: 48em) {
    .has-sidebar:not(.error404) #primary {
        float: right;
    }
    }

    Hope this helps!

    Kind regards,
    Nastia

    Hi Nastia, thanks for your quick reply! However, with this change, the sidebar of the blog entries also gets displayed on the _left_ side.

    So actually the change moved the content to the right, not the sidebar itself. At the same time, the example page looks exactly like before.

    Yet I figured out a solution which looks quite as I wanted it. In my child theme I added the following CSS:

    
    /* Sidebar on pages should appear on the right hand side (default: left) */
    @media screen and (min-width: 48em) {
            body:not(.has-sidebar):not(.page-one-column) .page-header,
            body.has-sidebar.error404 #primary .page-header,
            body.page-two-column:not(.archive) #primary .entry-header,
            body.page-two-column.archive:not(.has-sidebar) #primary .page-header {
                    float: right;
    }
    
    /* wide actual content to 64% (default: 58) */
    blog:not(.has-sidebar) #primary article,
            .archive:not(.page-one-column):not(.has-sidebar) #primary article,
            .search:not(.has-sidebar) #primary article,
            .error404:not(.has-sidebar) #primary .page-content,
            .error404.has-sidebar #primary .page-content,
            body.page-two-column:not(.archive) #primary .entry-content,
            body.page-two-column #comments {
                    width: 64%;
            }
    }
    

    Have a look at https://forum.dcb.org/flatlands-gs/ now (although I’m a bit confused there is no gap between content and sidebar).

    Yet I tested with Safari @macos.
    Now I see, Firefox @windows renders the page differently, the sidebar continues to show up on the left.

    Therefore to assure the proper side, I added
    float: left;
    to the lower content code.

    Is there anything more I should take care of when changing the CSS code?

    Hello @airbjorn

    This seems a fair approach! 🙂

    although I’m a bit confused there is no gap between content and sidebar

    With 64% content and 33% sidebar, there’s a 3% gap between them (for the 100%).
    You should further lower down any one of them in order to create more space between them.

    Warm regards,
    Dimitris

    Thanks a lot Dimitris – the 64% vs 33% already is my solution. I’m happy that you confirm my changes are at the proper place. Because at the same time I’m a bit afraid modifying things at the wrong place, which break the design in other configurations I might get faced to later on.

    Warm regards – Björn

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.