[Resolved] Blog layout customisation – Awaken theme

Home Forums Support Blog layout customisation – Awaken theme

Viewing 15 posts - 1 through 15 (of 35 total)
  • Author
    Posts
  • #938346
    Morgan

    Following on from previous.

    ARCHIVES
    1. Masonry randomly breaks 2 cols to 1
    Strange – suddenly breaks and shows only 1 left aligned column, turn off Masonry and layout returns to 2 cols, then on refresh *sometimes* breaks again. At the moment it’s broke, turn off masonry and 2 cols return. UPDATE: Oh wait, masonry working again.

    2. At random screen sizes, title has no padding-right
    Attempts to add any padding hasn’t worked.

    View post on imgur.com


    UPDATE: I think I’ve sorted most of it, for nearly all Archive screen sizes (though Single Posts still busted, see 4), except for this bg gap which *only shows below 768 breakpoint*

    View post on imgur.com


    Adding bg colour to either .entry-summary or <p> doesn’t work.

    3. Weird big titles *just above* breakpoint:

    View post on imgur.com

    SINGLE POSTS
    4. Layout below is as I want (showing below 1024, but breaks above).

    View post on imgur.com

    5. Want metadata alongside the date (for both Archive and Singles).
    I.e.
    June 21, 2019, By: m0rg5, Categories: Fun, Tags: blaa, blaa

    6. Can I get the Posts Sidebar at top right, as as per Archives?

    #938525
    David
    Staff
    Customer Support

    Hi there,

    may be better to make a clean start as the current method you’re trying is going to be ‘tricky’ to achieve the result.

    If you want to put the Blog and Post customizations back to default ( aside of typography and colors ) and set it so the Featured images are Above Title for archives and posts i can take a look at solution to achieve what you need. Let me know.

    #938647
    Morgan

    Can do, but to clarify – this a continuation of thread – Tom asked to create new for clarity. The only (non customizer) changes is the CSS above that Tom started to which I’ve made minimal, obvious, changes (mainly to illustrate what I want) .
    Obviously it’s not there yet, but it’s pretty close.

    Considering that, could u review and let me know?

    #938702
    Tom
    Lead Developer
    Lead Developer

    David is actually much better at CSS stuff like this – he might have a better method in mind 🙂

    #938756
    David
    Staff
    Customer Support

    ( that’s awfully flattering coming from Tom ) – apologies i paid no attention to “following on from previous”

    So for the single post my approach would be this for the single post. The set-up is the standard blog settings, for the featured image on single i have put the image above title and removed the padding around image.

    Then this CSS:

    @media (min-width: 420px) {
        
        .single .inside-article {
            display: grid;
            grid-template-rows: auto auto auto auto;
        }
    
        .single .inside-article>* {
            grid-column: 1;
        }
    
        .single .featured-image {
            grid-row: 1 / 3;
            margin-bottom: 0 !important;
        }
    
        .single .entry-header {
            grid-row: 1 / 3;
            align-self: end;
            padding: 40px;
            background-color: #fff;
            width: 60%;
            margin-left: -40px
        }
    
    }

    The result is this:

    https://mic.assemblewp.com/my-latest-post/

    It only applies to desktop and tablet as there isn’t a lot of image left visible on smaller devices.

    #938992
    Morgan

    Very cool,
    I tweaked

    @media (min-width: 480px) 
    . . . . . . .  
    .single .entry-header {
            grid-row: 1 / 3;
            align-self: end;
            padding: 40px 40px 0px;
            background-color: #fff;
            width: 60%;
            margin-left: -40px;
    

    Weird behaviour, at different sizing (see below) that I’m thinking could easily be fixed by having:
    – 1 col around 1000px
    – Change .single .entry-header Width 60% to 80% at smaller sizes (before min-width 480px)

    Also this is showing Single Post as i’d like, but breaking elsewhere, don’t know what it should be:

    /* Page Padding */
    .page-content, .entry-content, .entry-summary {
      padding-top: 30px;
      padding-right: 5%;
    } 

    View post on imgur.com

    View post on imgur.com

    View post on imgur.com

    #939291
    David
    Staff
    Customer Support

    The CSS should only apply to the Single Post but to be sure you can change the .single selector to .single-post

    To stack the sidebar and content at 1000px you can do this:

    @media (max-width: 1000px) {
        .single-post #primary, .single-post #right-sidebar {
            float: none;
            width: 100%;
        }
    }
    #940678
    Morgan

    Thanks.

     /* Page Padding */
    .single-post #primary {
      padding-top: 30px;
    	padding: 0 1% 0 2%;
    }

    Is working.

    #940779
    David
    Staff
    Customer Support

    Sorry i missed that part in part 🙂 Glad to hear you got it resolved.

    #941115
    Morgan

    Made a lot of progress @David , and couldn’t have done it without u, but there’s more where that come from!

    Onto the unresolved stuff:

    BLOG
    1. Get Metadata alongside the date (for both Archive and Singles)?
    I.e. June 21, 2019, By: m0rg5, Categories: Fun, Tags: blaa, blaa

    2. Masonry still randomly breaking 2 cols into 1, now *not working again*. Seems a bug.
    Can I get a fix pls?

    MOBILE
    3. Only just noticed that Mobile on-scroll sticky *does not* swap logo, can I actually keep the logo swap on Mob as per desktop?
    While on that subject – I got the effect I wanted on scroll-down (asked on prior post) by creating an animated gif – hit refresh, scroll down. Right now *it’s not* a looping gif, so it doesn’t work on returning to top and scrolling down again (already loaded). Is it possible to make the gif reload (call cached file?) on every scroll-down/logo swap so it shows animation?

    4. EDIT: I’m trying to customise the various breakpoints that’s causing things like below, only a few pixels apart (from generate-style-inline-css , it seems a mess! Any tips?):

    View post on imgur.com

    View post on imgur.com

    5. To top button VERY slow scroll up on mobile.

    6. Advise re CSS to style the Mobile Menu (ul#menu-menu, not working), no option to just use overlay, as per off-canvas? (seems an easy add!)

    #941590
    David
    Staff
    Customer Support

    1. So we can use the new filter:

    https://docs.generatepress.com/article/generate_header_entry_meta_items/

    So your filter would look like:

    add_filter( 'generate_header_entry_meta_items', function() {
        return array(
            'author',
            'date',
            'categories',
    		'tags',
        );
    } );

    2. Masonry – not able to replicate the issue, the problem may be dependent on screens size and using the negative margins on the entry header that is causing the problem.

    3. You would need to disable the Mobile Header to keep the sticky logo on mobile. Not sure about the looping Gif not something i have come across but would need JS to do that.

    4. The mobile font size is working – it drops to 25px on mobile devices. To add additional breakpoints then you would need to add some CSS using media queries and set your various breakpoints:

    https://docs.generatepress.com/article/responsive-display/

    Or you can use some fluid typography CSS like this:

    h2.entry-title {
        font-size: calc(25px + (36 - 25)*(100vw - 400px)/(1600 - 400)) !important;
    }

    This will create a fluid scale between 25px at the smallest screen size and max out at to 36px when the screen is at 1600px width.

    5. You can change the back to top speed using the filter provided here:

    https://docs.generatepress.com/article/generate_back_to_top_scroll_speed/

    6. Not sure what you mean? So you want the Mobile Menu to cover the entire screen?

    #941603
    Morgan

    Thank you,
    Quick replies first.

    6. Yes, was thinking it’s already there/easy (given off-canvas has it, and I wont use for off-canvas).

    #941606
    Morgan

    5. To-top is only (very) slow *on mobile*.

    2. Doesn’t work on any screen size, and the clincher is it sometimes works *with same css*, no change suddenly works. Other times doesn’t.

    #941625
    David
    Staff
    Customer Support

    2. Its hard to diagnose the issue without being able to replicate the problem. The adjustment to the article layout could be the problem, and therefore masonry may not be a good option.

    5. Didn’t originally notice any difference when checking out the site – did you add the filter as it now rockets to the top on desktop and mobile.

    6. Hmmm… could try some CSS like this – not sure would need testing:

    .mobile-menu-open #mobile-header.toggled .main-nav>ul {
        height: 100vh; 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #941647
    Morgan

    Ok, onto all this for as many hours as it takes, will keep you posted!

Viewing 15 posts - 1 through 15 (of 35 total)
  • You must be logged in to reply to this topic.