Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design How to insert symbol as a page break?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #249518
    yinandyolk
    Participant

    Hi all,

    Im new here and very new to coding. Im determined to redesign my blog using the little html and css I have taught myself in the past month. Surprisingly, I have just one thing I can’t figure out.

    Id like to add a symbol like the one that my current theme uses between each post summary on my homepage. I took a screenshot of it for you guys to see here:

    http://yinandyolk.com/wp-content/uploads/2016/12/page-break-symbol.png

    How do I recreate this symbol? Is it with css or html? There is no html for it as far as I can see, at least not in that location. And I don’t know what to call it so I don’t know what to look for in css.

    Thanks guys!

    #249520
    Atelierbram
    Participant

    There is no html for it as far as I can see, at least not in that location.

    There is, look for .hentry (try using “inspect element” – Developer Tools) line 578 of your WordPress theme’s style.css

    .hentry {
      background: url("images/ornament.png") no-repeat 50% bottom;
      background-size: 154px;
      margin: 0 0 3.25em;
      padding: 0 0 4.35em 0;
    }
    

    So recreating this pattern with the same image (which is quite subtle BTW), one can take hints from the CSS above. If you mean recreating this, like making a variation of it with – say a different color – , that could be done in any reliable vector drawing software application.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design’ is closed to new topics and replies.