WordPress.org

Ready to get started?Download WordPress

Forums

Tiny Forge
[resolved] Custom post divider (5 posts)

  1. cflam
    Member
    Posted 5 months ago #

    I would like to change the two line post divider into a custom design I created in Photoshop. I found this css:

    .site-content article {
    	border-bottom: 4px double #ed6958;
    	margin-bottom: 72px;
    	margin-bottom: 5.142857143rem;
    	padding-bottom: 24px;
    	padding-bottom: 1.714285714rem;
    	word-wrap: break-word;
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	-ms-hyphens: auto;
    	hyphens: auto;
    }

    Right now, and I may be wrong, it seems the divider is just created from a border. To create a custom divider, I'd have to create a new div, correct? Can you tell me where it would be best to place this? Thank you!

  2. Tomas Mackevicius
    Member
    Theme Author

    Posted 5 months ago #

    Right, but also remember that I'm using the radial gradient to style it (right before section 5):

    .archive .site-content article,
    .category .site-content article,
    .single .site-content article,
    .blog .site-content article,
    .search-results .site-content article {
      background: #fff;
      /* Old browsers */
    
      /* IE10 Consumer Preview */
      background-image: -ms-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
      /* Mozilla Firefox */
      background-image: -moz-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
      /* Opera */
      background-image: -o-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
      /* Webkit (Safari/Chrome 10) */
      background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 487, color-stop(0, #fbfbfb), color-stop(1, #ffffff));
      /* Webkit (Chrome 11+) */
      background-image: -webkit-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
      /* W3C Markup, IE10 Release Preview */
      background-image: radial-gradient(circle closest-corner at center bottom, #fbfbfb 0%, #ffffff 100%);
    }

    So you have to remove this one and then you could just do the background:

    .site-content article {
    	border-bottom: 0;
    	background-image: url('images/background.gif');
    
    	margin-bottom: 72px;
    	margin-bottom: 5.142857143rem;
    	padding-bottom: 24px;
    	padding-bottom: 1.714285714rem;
    	word-wrap: break-word;
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	-ms-hyphens: auto;
    	hyphens: auto;
    }

    So you don't need div, you can achieve this only via CSS ;)

    Don't forget to share the results of your work!

  3. cflam
    Member
    Posted 5 months ago #

    When I remove the radial gradients and place a background image instead, I don't get a single divider. Instead, the entire background of the post now has the background of the divider I created and it's repeated. I tried "no-repeat," but it's still there. This is what I have in my code:

    .archive .site-content article,
    .category .site-content article,
    .single .site-content article,
    .blog .site-content article,
    .search-results .site-content article {
      border-bottom: 0;
      background-image: url('http://localhost/followtheflammias/wp-content/uploads/sites/3/2014/01/divider.png');
      background-repeat: no repeat;
      margin-bottom: 72px;
    	margin-bottom: 5.142857143rem;
    	padding-bottom: 24px;
    	padding-bottom: 1.714285714rem;
    	word-wrap: break-word;
    	-webkit-hyphens: auto;
    	-moz-hyphens: auto;
    	-ms-hyphens: auto;
    	hyphens: auto;
    }

    I also tried just putting the code under .site-content article, but then my divider doesn't show up at all. Any thoughts? It's probably something simple I'm overlooking.

    By the way, I really like the ease of this theme and your tips are incredibly helpful. I'll share my work when I get it completed. Thanks again.

  4. Tomas Mackevicius
    Member
    Theme Author

    Posted 5 months ago #

    Sorry, I forgot to add to the rules:

    background-repeat: no-repeat;
    background-position: center;

    you can also try for the position:

    background-position: center bottom;

  5. cflam
    Member
    Posted 5 months ago #

    Thanks again.
    background-position: center bottom; It worked.

Reply

You must log in to post.

About this Theme

About this Topic