- This topic has 3 replies, 2 voices, and was last updated 1 year, 7 months ago by David.
January 8, 2021 at 9:29 pm #1611721Callum
Thanks for the awesome theme and also for generateblocks.
I’m using Generatepress v3.0.2
Along with GP premium v1.12.3
And Generateblocks v1.2.0
And pods 2.7.25
Simple CSS v1.1.1
I have a custom post type created using PODS called “Portfolio”.
I’m trying to replace the standard archive single page for the portfolio post type with html generated by the wordpress page builder and generateblocks, in combination with pods templates, however I’m running into a small styling issue.
Here’s what I’ve done so far:
1. Created a normal page using the gutenberg editor (including using some generateblocks blocks)
This is a static version of my eventual single page which I want to adapt into a pods template.
2. From the chrome inspector:
-I copied the html of div.gb-container-25a6cede and all it’s child elements (the first GB blocks container on the page).
-Copied style-177.css contents (the css stylesheet the generateblocks seems to be creating)
Adapted the html and css that I copied in step 2.
Copied the parts of the CSS file that apply to the unique classes of the copied html elements (eg everything containing 25a6cede and the other unique IDs of child elements).
Renamed the classes in both the CSS and HTML to new unique names, preserving the functionality of the original CSS just with new class names.
4. Copied the adapted html into the pod template (I’ve left all text and images static for now)
Also copied the adapted css (just the applicable unique classes) to the simple CSS editor
5. In pods settings I’ve set the pods template containing the copied html as the singular template for the portfolio post type, replacing the_content
Therefore this single archive page (or any other archive page since it’s all static right now) should match the above normal page built in the gutenberg builder:
It’s mostly worked, however according to “sources” in the chrome inspector, some generic styling is missing (eg rules that apply to .gb-grid-wrapper class, like display:flex). It seems that style-177.css is not being loaded by the archive page and since I only copied the unique classes (not the whole stylesheet) my copied CSS does not contain those rules.
I’d hoped this would be an easy way to quickly generate the html for a pods template, however it’s getting complicated.
My questions are:
1. Is there a way to get style-177.css (the generateblocks stylesheet) to load on archive pages
2. Is there a easier / tidier way to do what I’m trying to achieve with other GP tools? Eg could I use a GP block element to replace the content of the single archive page instead of pods templates or something else?
Note that I’ve looked at the WP Show Posts plugin and it was great, but I didn’t see it giving me as much control over the exact layout and design of the single page.
Elementor used to achieve what I’m trying to do, however I didn’t like the bloat and am rebuilding without such a large plugin.
Thanks in advance, and I hope that all makes sense and is within the scope of support 🙂
CallumJanuary 9, 2021 at 5:31 am #1611995DavidStaffCustomer Support
GB dynamically generates all the CSS required for the blocks that are displayed on that page. So you should simply need to copy ALL of the CSS generated in the dynamic styles e.g
style-177.cssinto your archives style sheet.January 10, 2021 at 1:15 am #1612800Callum
Thanks so much, that worked well.
I ended up copying all the CSS as you suggested, but I copied the CSS it into the pods template inside a <style> tag, instead of to the css area of the Simple CSS plugin.
Even though inline CSS in a style tag this isn’t ideal it at least means that I won’t add the CSS to every page like if I put it in simple CSS.
I’m sure there’s a different way to load certain CSS on certain pages, but this solution was simple and it works.
Cheers!January 10, 2021 at 4:55 am #1612936DavidStaffCustomer Support
Awesome – glad to hear that works.
Inlining the CSS not a real issue if the CSS is relatively small ( not 100’s of lines ).
Aside of saving the Style sheet to a child theme and using the WP Enqueue styles function you can use a Hook Element to insert your inline style using the
The elements module has display rules, so you can set it to load only on those archive pages.
- You must be logged in to reply to this topic.