[Support request] How can i create below like post in generatepress

Home Forums Support [Support request] How can i create below like post in generatepress

Home Forums Support How can i create below like post in generatepress

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #2066183
    anurag

    dear generatepress support team
    i want to know how can i create a post in generatepress like below link post
    specially the table of content and long underline below h1/h2/… etc. plaese guide me
    post

    #2066343
    David
    Staff
    Customer Support

    Hi there,

    you can add an underline to each of your headings using CSS:

    h1, .entry-content h2 {
        border-bottom: 2px solid #000;
    }

    That Table of Contents looks very simple and could be manually created in the editor using Blocks. I would suggest using GenerateBlocks:

    https://generateblocks.com

    You can use a Container Block the Background color and round corners, and within a GB Headline Block for adding the links.

    #2066689
    anurag

    Listen i want to manually create table of content ,
    i have 2 query
    first- below is my HTML code and CSS code. i want to give anchor link to cofee/tea/milk but when i fetch html from guttenberg i am not able to give anchor link to my content of table.
    2nd: i want round rectangle corner shady background like above link in post
    here is link of my code https://codepen.io/minoshw-the-pen/pen/PoJRxpB , help me to put shady round rectangle background and anchor link in it.
    HTML CODE

    1. Coffee
    2. Tea
    3. Milk

    here is CSS CODE
    ol li::before {
    top: 1em;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    margin-right: 10px;
    font-size: 16px;
    line-height: 20px;
    color: #fff;
    background-color: #28BEFF;
    border-radius: 100%;
    content: counter(li);
    counter-increment: li;
    text-align: center;
    }
    ol {
    counter-reset: li;
    }
    ol li {
    position: relative;
    padding: 0 0 10px 10px;
    line-height: 1.6;
    list-style: none;
    }

    #2066697
    Ying
    Staff
    Customer Support

    Hi there,

    Your question is not theme related, it’s a general HTML and CSS question.

    We are happy to point you to the right direction, but we can’t help with too much customization on this, thanks for your understanding!

    To add link to li element, try change your HTML to this:

    <ol>
      <li><a href="#">Coffee</a></li>
      <li><a href="#">Tea</a></li>
      <li><a href="#">Milk</a></li>
    </ol>

    Change the # to the related HTML anchor 🙂

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.