Customizing Post Layout in Canard Theme

  • Unknown's avatar
    dylanmaustin · Member ·

    Hello!

    I have a rudimentary understanding of CSS and have managed to hide/customize various elements, but I am currently stuck on a few things.

    What I am hoping to do on my site’s posts:

    • Wider content area: I’ve tried every div-class adjustment in terms of width and padding adjustments I see in Chrome’s Inspect Page. This must be conditional to nested container behaviors, right?
    • Move entry-footer: I’d love if this can be appended to the bottom of secondary.widget-area instead, which would be a better use of space/inherently open up room for the main content area. Could this be hidden and then each element reproduced in the Widget area somehow?
    • Move aioseo-breadcrumb: this is a short code from the AISEO plugin. Ideally it would go either at the bottom of entry-header-inner or between the entry-header and main.site-main?
    • Not necessary, but would be nice: can any of the drop-downs in menu-categories-container be made to appear “opened” by default?

    Thank you all so much!

    The blog I need help with is: (visible only to logged in users)

  • aleone89 · Staff ·

    Hey there,

    Happy to help you with this.

    Wider content area:….

    So this CSS would work – the entry-footer would also need to be reduced in size also. 

    /* increase content width AL FC */ 
.single .entry-content {
    width: 660px;
}

.entry-footer, .footer-widget-inner .widget {
    width: 195px;
}

    When you say “conditional to nested container behaviors,” – what do you mean exactly?

    Move entry-footer:

    It’s possible to hide this, and expand the content area, but to move this would require developer assistance.

    • Move aioseo-breadcrumb: this is a short code from the AISEO plugin. Ideally it would go either at the bottom of entry-header-inner or between the entry-header and main.site-main?
    • Not necessary, but would be nice: can any of the drop-downs in menu-categories-container be made to appear “opened” by default?

    As above, this would require developer assistance to achieve.

    What’s the main goal of these changes here? Maybe I can offer some workarounds.

  • Unknown's avatar
    dylanmaustin · Member ·

    Hi! Thank you so much — the biggest thing, the main content width, worked and makes a huge difference.

    I assumed moving the entry-footer would require an edit to the code rather than modifications on top. That makes sense.

    The goal is (other than expanding the content area) to consolidate the share buttons, post date, etc over into the widget panel on the right with the other follow icons and categories list. So I assume hiding the entire left side bar that this is in would work? (And then add those elements to the side-bar?)

    I’ve attached two versions of a screenshot of a post with markup — basically, I either want to move those elements all to that side-bar, OR combine the left sidebar content and AISEO breadcrumbs element into a thin bar above the post itself. The latter may be more ideal for mobile anyway?

    Putting everything on the right sidebar/widget area:

    Moving elements to be above (or even at the end of) the post itself?

  • staff-zinnia · Staff ·

    I would suggest focusing on the mobile view of your site. That is how the majority of folks are going to view it.

    Remember that anytime you’re implementing changes to the theme through CSS it’s important to double check how that also looks on the mobile view. Our themes are optimized for mobile view by default. If you like how these items are displayed in mobile view then I wouldn’t worry about changing it on the desktop view of the site.

    Additionally, we have some more details on how you can learn to use CSS:

    WP
    CSS Basics
    in WordPress.com Support
    4 min read
    This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan. CSS, or Cascading Style Sheets, is a way to apply style rules to HTML content. This page will cover a few basics about CSS such as selectors and ordering. You can add custom CSS by going to Appearance → Additional CSS in

    If you do decide to hire somebody for more advanced customization consider using UpWork as a vetted resource.

  • Unknown's avatar
    dylanmaustin · Member ·

    I’ve since added conditions for minimum screen size to the content width adjustment.

    While I understand the importance of mobile, I still want to be able to edit these elements on my desktop layout, and the remaining items like moving the breadcrumbs would apply to mobile as well.

    Thanks!

  • staff-totoro · Staff ·

    While I understand the importance of mobile, I still want to be able to edit these elements on my desktop layout

    This is definitely a classic dilemma for website designers ever since mobile started taking over, so I understand. Unfortunately we’re not trained as designers, so while we are expert in WordPress and understand a lot of basic CSS, working with conditional statements and moving specific elements based on the viewport is something we’re not really able to help with.

    In situations like this we typically recommend working with a designer since it helps (especially for complicated CSS) if it’s authored by an expert who is better able to see all the possible conflicts. We are able to help with small snippets here and there but since it’s different people helping were not always able to see the big picture in that way.

    The Canard theme you are using is an older one, so the only practical way to customize to this degree is via coding, but another option to consider is switching to a newer theme that supports full site editing:

    https://wordpress.com/themes/filter/full-site-editing

    These themes are composed entirely of blocks and offer the ability to customize headers, footers, even create custom page templates for any page on your site, and all the customizations are via blocks and do not need code. For some of the changes you are trying to make the ability to directly edit templates would take the place of the need to use CSS in most cases.

    You may want to check out our recent webinar on custom headers, where we show some of these customization tools in action:

    You can also sign up for your live webinars (which include a Q&A after the presentation) by registering here: https://wordpress.com/webinars

    We also offer a self-guided course on site building (using the new Site Editing tools) here: https://wordpress.com/learn/courses/create-your-site/

    Hope that helps!

  • The topic ‘Customizing Post Layout in Canard Theme’ is closed to new replies.