Styling text used in the Legacy Hook "before content"

Hi there,

You would do something like this:

<div class="custom-before-content">
    Your before content hook content
</div>

Then style it with CSS:

.custom-before-content {
    font-size: 20px;
    color: #000;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Also any reasons why you are not using the new hooks element module?

Hi Leo,

Thanks for your reply. I tried using the legacy hook, which I guess is different than the New Element hood. However I couldn’t figure out how to target that spot so I could add CSS.

My method above would work in both the legacy hook and hooks element.

Have you tried it?

Leo,

I haven't yet. I just realized I would put the CSS in the "Additional CSS" spot in the customizer - that should work I think. I was thinking the hook page would have a box for CSS since I'm using "Simple CSS."

Mark

Nope there is no SimpleCSS metabox on the hook page.

Additional CSS would work better as it would apply the style globally.

Leo,

Thanks for getting back to me. Since the person adding the content is not technical, I think it is easier for her if I just add the content to the page itself using your original method. That was she can use a visual editor to add/edit content.

Is there some disadvantage to this method, as opposed to using the Before Content hook?

Thanks
Mark

If you use the hook then you only need to add the content once.

If you add it as a page content then you'd need to add it everytime you want the content to show.

Ok, thanks

No problem :)