Site logo

Archived topic

Separator help needed for underneath WP show posts

12 replies · Started by Devin on February 20, 2022

Viewing posts 1–13 of 13

I tried the new code but for some reason the separator isn't showing up. I don't have any caching or optimization settings enabled so I'm not sure why.
This is the correct code right?

.wp-container-62130f9c6807c.wp-block-group {
border-bottom: 2px double #D3D3D3;
}

Hi Devin,

I see. Can you try adding a custom CSS class to the container/group and we can use that as a selector?

See this for reference: https://share.getcloudapp.com/p9uXDkAO

Then, you can add a code like this:

.add-bottom-border {
	border-bottom: 2px double #D3D3D3;
}

Kindly change .add-bottom-border to the CSS class name you’ll input.

Alternatively, you may also you this code, but this will only work if the WPSP parent container/group is the second group/div in the page.

body.home > div.wp-block-group:nth-of-type(2) {
    border-bottom: 2px double #D3D3D3;
}

Hope this helps! :)

Great, I think we may be getting somewhere with it. The only thing though is that when adding in the code after adding the CSS class name into the block, nothing changed. In fact, without the code and just the CSS class name I'm still getting the black bar straight across. Other than that, the color didn't change or the height. For reference, I'm looking for something the size of the separator in the site linked. Thanks Fernando!

https://i2.paste.pics/3aac477e94d834420d9572069b83da96.png
https://i2.paste.pics/9e01f441e527a1447ba3d23fc4914c4a.png

Btw, I only set the px that high just to see if I could spot a significant change in the size of the separator, but nothing.

I can see that you were able to add a separator that extends from end to end: https://share.getcloudapp.com/yAukE0jO/annotate

I you wish to change the color of this, a code like this would work:

hr {
    background-color: rgb(0,0,0);
}

You can change the rgb values to your preferred color equivalent.

https://www.w3schools.com/colors/colors_picker.asp

With regards to additional CSS, it should just be my-custom-divider and nothing else.

In any case, please be mindful of what we can support though as this is no longer part of our product:
https://generatepress.com/what-support-includes/

Upwork.com and Freelancer.com are two websites you may go to for further assistance with custom code. Be weary though in choosing a developer as they may break your site, and we don’t guarantee outside services.

Another place you may go to for help is our official Facebook Group: https://www.facebook.com/groups/generatepress.

Hope this helps! :)

I understand. I've been working on trying to figure that out all day so I figured I'd run it by you guys and see if you could help, and you did! It's finally set the way I've been wanting it :) Thanks again Fernando.

I have about five more issues that I've been struggling with so I'm just going to post the two smaller ones here and create a new topic for the other ones if need be. Once those are out of the way, that should be it for support for now, so thank you for your patience.

The first is getting "All Articles" text aligned with the first blog post on the upper left corner, like how it is in the screenshot below, along with example site attached. I've been trying to achieve this without altering the containment of the site but haven't been successful.

The second is containing the text in my footer widget a little more like, again, the screenshot below. I've sent a screenshot of how my text looks and a screenshot of the look I'm trying to achieve. If I need to open a new topic for these, please let me know.

All Articles Text: https://i2.paste.pics/0f3f4a9e15c9d385f78d2bc507ccebb5.png

Widget text alignment my site: https://i2.paste.pics/11daa9b53d1c32f560107b2698a2d622.png

Widget text alignment example site:https://i2.paste.pics/f7a98f61a0401c8a6d44dd1c4bc34816.png

My site is the one without a page hero.

My site linked in the private section.

These elements appear to be Gutenberg Blocks. To modify the alignment of the Heading Block, you may refer to this: https://share.getcloudapp.com/JruGJGyz

Moreover, the footer paragraph in you reference site has a max width of 800. To achieve that, you may refer to this: https://share.getcloudapp.com/xQuzXzNN

Lastly, for more assistance with regards to WordPress core blocks, here is an article you may refer to: https://wordpress.com/support/wordpress-editor/blocks/

Hope this helps! :)

Thank you! That did the trick for the footer. As for the "all articles" alignment, I haven't been having as much luck. I've gotten the alignment close to the reference site by putting the header in its own block, putting it in a group of its own and then changing a few settings in the customizer but after saving the settings, the alignment turns out differently than what's in the customizer before saving. I've also tried grouping the header with the short code block for WP show posts but had even worse results.

Block settings: https://i2.paste.pics/7ce38d32083be8264ff2ec4815e2691f.png

Yes it has. I stated in a previous message that I would open a new topic for my other issues if I needed to but was never told to, but I will.

Sounds good :)

Thanks Leo!

No problem :)

This archived topic is closed to new replies.