Create a divider like this?

Discussion in 'Web Design and Development' started by bobbydaz, Mar 3, 2016.

  1. bobbydaz macrumors regular

    Joined:
    Jan 24, 2009
    Location:
    UK
    #1
    Any ideas how to create a divider like this within a wordpress theme page? I've tried an em-dash but it's not long enough. thanks.

    Screen Shot 2016-03-03 at 13.22.19.png
     
  2. BillyBobBongo, Mar 3, 2016
    Last edited: Mar 3, 2016

    BillyBobBongo macrumors 68020

    BillyBobBongo

    Joined:
    Jun 21, 2007
    Location:
    On The Interweb Thingy!
    #2
    What you're describing is know as a 'Horizontal Rule'.

    Your page needs to contain the <hr> tag

    You'l also need to add css styling for it to you theme. The page I linked provides this code:

    Code:
    hr {
        display: block;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        margin-left: auto;
        margin-right: auto;
        border-style: inset;
        border-width: 1px;
    }
    
    You can also add a width variable to the css to get the desired effect.
     
  3. bobbydaz thread starter macrumors regular

    Joined:
    Jan 24, 2009
    Location:
    UK
    #3
    thanks so much for your help. I'm using Divi theme in which you can insert a horizontal rule within your text module, but I would like a solid rule exactly as the example image I uploaded. i.e that thickness and length. Is that an easy thing to do in Divi?
     
  4. BillyBobBongo, Mar 3, 2016
    Last edited: Mar 3, 2016

    BillyBobBongo macrumors 68020

    BillyBobBongo

    Joined:
    Jun 21, 2007
    Location:
    On The Interweb Thingy!
    #4
    Divi calls it the 'Divider Module', these sort of options should be available in the 'General Settings' for that particular module. You will need to set some custom CSS to control the width though, as well as setting centre alignment for the rule.

    You can do this by pasting this code in the 'Main Element' field in the 'Custom CSS' tab

    Code:
        margin-left: auto;
        margin-right: auto;
        width: 10%;
    
     
  5. bobbydaz thread starter macrumors regular

    Joined:
    Jan 24, 2009
    Location:
    UK
    #5
    thanks very much, that worked, but how do i fix the spacing before and after the divider? I want equal spacing above and below the dividing line.

    I've attached my divi page set up and it currently displays like this...


    Screen Shot 2016-03-05 at 15.33.31.png Screen Shot 2016-03-05 at 15.30.15.png
     
  6. NutsNGum macrumors 68030

    NutsNGum

    Joined:
    Jul 30, 2010
    Location:
    Glasgow, Scotland
    #6
    Personally, I'd avoid doing this with hr elements, as it means having to add another html element whenever you're replicating the style. Which is just a bit of a faff.

    Do it with a :before or :after pseudo element and you'll be able to create this same effect by just adding a class or by including the element itself.
     
  7. bobbydaz thread starter macrumors regular

    Joined:
    Jan 24, 2009
    Location:
    UK
    #7
    sorry that's gone right over my head, not that familiar with code.
     
  8. olup macrumors 6502

    Joined:
    Oct 11, 2011
    #8
  9. bobbydaz thread starter macrumors regular

    Joined:
    Jan 24, 2009
    Location:
    UK
    #9

Share This Page