[Resolved] Sidebar Control and 'A Category'

[Maike]

Hi guys.

I am trying to make more of my GeneratePress dreams happen. 🙂

#01
I’m trying to make the nav bar float in line with the logo. The order would (left to right) logo, nav bar, social icons (3), site search icon.

#02 – Title Length
Controlling the title length in the sidebar’s featured posts and in wp-show-posts-inner. (’17 Best Valentine’s Gifts For Him’ can I make that font size overall smaller).

#03 – Sidebar
Turning the sidebar off on the home page (activating it on category pages and single posts only).

#04 – Category display
Category display alignment. I made the category pages look pretty much the way I wanted to. But I can’t get the title text to align left with the images. (Like here at the recipe category: Recipe Category. )
I would also like to decrease the padding between the images.

#05 – Section Names
Since the skin is set up to display everything as a static page (which I like), how do I rename what is now called ‘a category’ (it’s in the middle of the page).

#06 – Category Meta Description
I’ve created a meta description for some categories (like for the gift guides category) that I would like for them to be displayed. I would also try and control the h2 header and the text size for that description.

I know that’s a long list but I appreciate any help or advice. Thank you!

[David]

Hi there,

1. You could try this – putting the nav search icon after the social icons would require the icons to be removed from the widget and added to menu though.

.inside-header {
    display: flex;
    flex-wrap:wrap;
    align-items: center;
}
.header-widget {
    order: 3;
    margin-bottom: -24px;
}

2. You can change the Title tag from H2 to say H3 or H4 in WP Show Posts list on the Content Tab. Then you can change that heading size in the Customizer.

3. The Layout Element will allow you turn off the sidebar and use the display rules you want that to apply to:

https://docs.generatepress.com/article/layout-element-overview/

4. Better to off to adjust the images so they align with the title and the post container. Go to the Customizer > Additional CSS and find this:

.generate-columns-container article .inside-article img, .wp-show-posts-image img {
    -o-object-fit: cover !important;
    object-fit: cover !important;
}

Add the additional width rule so it looks like this:

.generate-columns-container article .inside-article img, .wp-show-posts-image img {
    -o-object-fit: cover !important;
    object-fit: cover !important;
    width: 100%;
}

5. Edit the Home Page – find the heading and edit it 🙂

6. Leo covers adding category description here:

https://generatepress.com/forums/topic/category-descriptions-not-displaying/#post-613578

[Maike]

Wow. Thank you for the quick reply, David!! That’s amazing. I’m going to try and implement now.
Thank you so much.
Maike

[Maike]

OMG. I just realized #5 (where is that face-palm emoji when you need it)? 😂

[Maike]

Ok, I have a follow up question. I left the additional CSS that came with the skin untouched. But when I try to save add code now it warns me that there are 2 errors which must be fixed before I can save.

When I look at the file it highlights these lines have the error.

229 @media (min-width: 900px) {
230 .wpsp-grid .wp-show-posts {
x 231 grid-template-columns: repeat(8, 1fr);
x 232 grid-template-rows: 1fr auto;
233 }

Thank you.

[David]

Additional CSS doesn’t validate CSS Grid properly so it throws a false error. Just check the box to ignore them and click update.

[Maike]

First of all, I forgot to say thank you earlier. I appreciate all your help and your outstanding responses very much.

re:#02
2. You can change the Title tag from H2 to say H3 or H4 in WP Show Posts list on the Content Tab. Then you can change that heading size in the Customizer.
–> I am sorry. I should have been more specific. I know how to change the h2, h3 etc. But if I make changes to the h2, h3 etc in the customizer, won’t that have a site-wide consequences? I guess what I’m trying to say I want the sidebar h2 to be different than the body h2. Is just don’t know how to give it the right class name or where to add that class name.

Thank you,
Maike

[David]

If you want to keep them as H2 then you can style them like so:

.inside-right-sidebar .wp-show-posts article .wp-show-posts-entry-title {
    font-size: 20px;
}

[Maike]

Thank you, David!

[David]

You’re welcome

[Maike]

Ok, you guys I am really conscious how many questions I’ve been asking. But I hope it’s ok t add another one.

It still pertains to the sidebar.
Thank you for the css code for the h2 for the sidebar

.inside-right-sidebar .wp-show-posts article .wp-show-posts-entry-title {
    font-size: 20px;
}

That worked great! But...
I think I've figured out how to control the meta data (categories) that show up above the h2 header in the sidebar. 

.inside-right-sidebar .wp-show-posts article .wp-show-posts-meta {
font-size: 11px;
}

But, I have recipes that are in multiple categories and I would like the only category that shows up there to be the one I made the primary category.

i.e. Berry Oatmeal recipe is in both ‘gluten free recipes’ and in ‘breakfast’ with ‘breakfast being the primary category. I’d like it to only show ‘breakfast’ and hide all other categories.

Is that possible? Do I need add a filter for that somewhere?

Thank you,
Maike

[Leo]

That’s not currently possible with WP Show Posts – I believe Tom has plan to add this in the pro version.

You could try creating lots of lists and use this plugin to display them in each posts:
https://wordpress.org/plugins/content-aware-sidebars/

It’s untested but worth a shot 🙂

[Maike]

Thank you, Leo! That’s good to know. I have the pro version and yes that would be super exciting!

And since this already on your radar… there could be a way to position the meta data within the image field (top right, top center, bottom left, etc…)

I wonder if I could circumvent this entirely for now.
Is there turn off the categories and just show the title?

Thank you,
Maike

[Maike]

Sorry, follow up question. Is Content Aware Sidebars similar to Custom Sidebars by wpmudev? Is there an advantage of using one of the other?
Thank you, Maike

[Leo]

Not quite sure what you mean.

So you want to remove the widget title?
https://www.screencast.com/t/X6APuuglb

I haven’t tried Custom Sidebars. Might be best to test out both and see if one of them works for you 🙂

[Author]

Posts