• Resolved rnmartinez

    (@rnmartinez)


    Hi

    I am looking to change the post separator from the default line with dashes to dots. How can I do this using css?

    Thanks for any help

    Rodolfo

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @rnmartinez – feel free to give this a try:

    /* Post separator - undo theme styles */
    .entry-content hr::before, 
    .entry-content hr::after, 
    hr.styled-separator::before, 
    hr.styled-separator::after,
    .entry-content hr, 
    hr.styled-separator {
      background: transparent;
    }
    /* Post separator - add new styles */
    .entry-content hr, 
    hr.styled-separator {
      border: 1px dotted #6d6d6d;
    }
    Thread Starter rnmartinez

    (@rnmartinez)

    Hi Kathryn

    Thanks so much for your reply; unfortunately, this just turns the line into a series of dots, and not into the three dot style that is selectable from the seperator block in the theme

    Moderator Kathryn Presner

    (@zoonini)

    @rnmartinez Ah, I see! Thanks for clarifying what you’re trying to do, I didn’t realize you were trying to match a specific block style!

    You can give this a try and let me know if it accomplishes what you’re after:

    /* Post separator - undo theme styles */
    hr.styled-separator::before, 
    hr.styled-separator::after,
    hr.styled-separator {
      background: transparent;
      content: "";
      display: block;
      position: inherit;
      top: inherit;
      transform: none;
    }
    /* Post separator - add new styles */
    hr.styled-separator {
      background: none !important;
      border: none;
      text-align: center;
      line-height: 1;
      height: auto;
    }
    hr.styled-separator::before {
      content: "···";
      color: currentColor;
      font-family: serif;
      font-size: 3.2rem;
      font-weight: 700;
      height: auto;
      letter-spacing: 1em;
      padding-left: 1em;
      position: static;
      transform: none;
      width: auto;
    }

    It should look like this:

    News Lucha Comics

    Let me know how it goes!

    • This reply was modified 2 years, 2 months ago by Kathryn Presner. Reason: added screenshot
    Thread Starter rnmartinez

    (@rnmartinez)

    Thank you – it was giving blanks but changed it to a hex value and it worked! Really appreciate your help here ??

    If you’re a comic book person at all free to signup on my email list and I will be sure that you get a bunch of free digital comics (more than what normal signups get!)

    Moderator Kathryn Presner

    (@zoonini)

    Yay! It looks great in orange.

    Thank you so much for the kind offer re: the comics, that’s truly nice! I am indeed a comics and graphics novel person, but I’ve discovered through the pandemic that I only get around to reading paper ones, the digital ones get forgotten on whatever device I’ve tried. ??

    Thread Starter rnmartinez

    (@rnmartinez)

    OK sign up so I have your contact info – I will make sure you get some physical books ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Change Post Separator Style to Dots?’ is closed to new replies.