[Resolved] Button code with CSS in a single post Element

Home Forums Support [Resolved] Button code with CSS in a single post Element

Home Forums Support Button code with CSS in a single post Element

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1566448
    Ben

    Hi,

    I’ve created an Element to place some text and a link after all single posts in a certain category, using the generate_after_content hook. It works fine, but I want to turn the link into a button that has the same CSS styling as buttons on other pages of my site. I imagine I can place CSS for this in my GP child theme but I could do with some help of how to get the same CSS and what to place in the child theme css file – I guess I need the <button> HTML tag in my Element HTML to make the button, and need CSS to colour the button, change hover behaviour etc, so it looks like other buttons I made in blocks with GenerateBlocks e.g. on my store page.

    An example post is here: https://www.notesinspanish.com/2007/06/14/inspired-beginners-podcast-2-vacaciones-en-tailandia/

    The link text I want to turn into a button in the Element is “Buy The Super Pack Here” (the Element starts at “Upgrade and Get Fluent Fast:”)

    The store page buttons I want to emulate can be seen here: https://www.notesinspanish.com/store-home/

    Any pointers you can give me would be wonderful, thank you.

    #1566575
    Leo
    Staff
    Customer Support

    Hi there,

    I see that you are already using the buttons block in GB to create those buttons in the store page.

    In that case, just use a block element instead of a hook element to create the content so you can use GB there as well.

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

    Let me know if this helps πŸ™‚

    #1566809
    Ben

    This is wonderful, thank you. There is one thing though, after I create the block, if it isn’t looking quite right live on the site and I edit it in the same block editing window, updates are not going live. The edits don’t take effect. I’ve tried clearing all caches and that doesn’t work. Is there any reason this is like this? Do I have to get it perfect first time?

    #1566826
    Ben

    Also, sometimes the block isn’t rendering properly. Here’s the editor:

    https://snipboard.io/w9tM4z.jpg

    Here’s the result, the button is coming out as a text link: https://snipboard.io/qH7eKC.jpg

    So that’s two issues, first as described above the edits to the block don’t go live, and second, the button is coming out as text on the site.

    Thanks

    #1566891
    Ben

    Solved after database optimization clean up. Thanks again.

    #1567530
    Leo
    Staff
    Customer Support
    #1567793
    Ben

    Hi Leo,
    Actually it started happening again. The button would render on some posts, and not on others, even if I cleared all the server caches and cloudflare cache. In the end I have just made elements with html and css in the child theme to get the button – it’s a shame as the block element method is very nice. Do you have any idea why this might happen? An mentioned above I kept getting this result, with a link: https://snipboard.io/qH7eKC.jpg

    Instead of this button: https://snipboard.io/w9tM4z.jpg

    And only on some posts, not all. It’s very odd.

    #1567984
    Leo
    Staff
    Customer Support

    Where can I see a block element that’s not working?

    #1568172
    Ben

    Hi Leo, in the end I had to take them off the site, and I went with the hook element with straight HTML and CSS in child-theme route, which works fine. If I try this again in the future and the same problem occurs I’ll let you know. I’m sorry I had to take it down before you could look at it on the site, but I had some time constraints and had to go with the other solution, which is fine.

    #1568674
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.