[Resolved] Blog layout customisation – Awaken theme

[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?

[David]

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.

[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?

[Tom]

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

[David]

( 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.

[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

[David]

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%;
    }
}

[Morgan]

Thanks.

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

Is working.

[David]

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

[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!)

[David]

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?

[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).

[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.

[David]

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;
}

[Morgan]

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

[Author]

Posts