How to best style this usign GeneratePress?

Hi there,

These aren’t really theme-related questions.

There isn’t a “specific” or “best” way to do this using GeneratePress.

The theme does not deal with the product side of things at all – it’s usually handled by WooCommerce.

Thanks for your understanding.

Hi,

Thanks but can I please just ask a hint to what to search for to satisfy my initial request?

Let me explain: I would like to add a class to a container so that the element present in that container inherit from a specific layout.
I’m not a coder. I’m a WordPress beginner, but I have notice that the GeneratePress team has developed specific GenerateBlocks.

I just need to know if I’m on the right way and if what I just explained is something feasible and of regular practice?

Thanks for your understanding

If you are referring to the Container block then yes you can add a custom CSS class under the Advanced settings panel:
https://docs.generateblocks.com/article/container-overview/#advanced

@leohsiang, I’m sorry but I’m still confused.

As I said, there is too many things I don’t know that create confusion since I’m a beginner. Could you please just write 1 or 2 lines of CSS for me to show me the way.

Then, I’ll know what is feasible and how do my homework research to pursue.

For example, let’s image I have a title, a subtitle, a bullet list, a description text and an image within the contained. Can you please tell how I could create a css class that would apply to the subtitle everytime time I add that class name to the container?

Thank you for your understanding and help.

Hi there,

in the Block Editor, any block you select you can add an CSS Class to via the Advanced > Additional Class(es) field.

eg. my-container-class

Inside my container i add a H2 title.

I can style the H2 within that container like so:

.my-container-class h2 {
    /* Styles for the H2 go here */
}

NOTE: If this will only work if your CSS is more specific then ANY other CSS being added to that element.

Thank you so much David.

I addesd this to my CSS:

.fauteuil-wrapper.fauteuil-product {
    padding: 20px 24px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 6%);
    border-radius: 8px;
}

.fauteuil-block-wrapper.fauteuil-block-product .fauteuil-block-product-header .fauteuil-block-product-info .fauteuil-block-product-caption {
    border-radius: 12px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    padding: 4px 12px;
    margin: 0 0 12px;
    display: inline-block;
}

But I am not sure how to apply this to a GeneratePress container block?

Your CSS above doesn’t have anything to do with GenerateBlocks.

David’s example above simply answers your question here:
https://www.ads-software.com/support/topic/how-to-best-style-this-usign-generatepress/#post-15830649

Sounds like you are looking for a CSS course so I’d recommend going through the free lessons in https://www.codecademy.com/catalog/language/html-css

We can only support questions that are directly related to the free GeneratePress theme in this forum.

Hello,

Thanks for the reference, I will need a bit of time to digest your reply.
One question: In WordPress we can select any block to show as HTML so as to edit them in HTML. This is how I type in “class=”myClass” or things like that for my <H2> and others.

Why can’t I edit the container from GenerateBlocks that way? The option just does not show in the menu.

Thanks

You should not edit the Blocks HTML.
To add a class attrribute to a block you should select the Block, and in the sidebar Advanced > Additional CSS Class(es) field add your class there. The editor will do the rest.

Hi @diggeddy

Thanks for the heads-up.
I tried but there is something I don’t understand:

1. I inserted a GeneratePress container in a page. In that contained I added an H2 saying “H2 within a GenerateBlock”.

2. Then, to do like you said and select the block, I searched for the block name in the source like this. Not sure if there is a better way straight from WordPress?

I was not sure how to create the class, if I should have done for gb-inside-container or for gb-container.

3. So this is what I wrote in style.css:

.gb-container .gb-inside-container .h2.vert
{
	color: green;
}

4. Then I added the class name “vert” where you said like here.

Here is the page, is does not work. The H2 remains black.

First off there is no need to use Custom CSS, if you use the GenerateBlocks Headline Block then you can set its color within the Editor.

If you’re using CSS then i recommend you take a course or read some tutorials on this. Its not a theme related support topic.

Quickly revisit my reply here:

https://www.ads-software.com/support/topic/how-to-best-style-this-usign-generatepress/#post-15831120

1, The class was added to the Container Block.
2. The H2 is an element tag, so there is no .

Your CSS would look like this:

.vert h2 {
	color: green;
}