0
Welcome Guest! Login
0 items Join Now

SOLVED How to create horizontal or vertical lines using Gantry 5 particle

Last Post
Search Topic

  • SOLVED How to create horizontal or vertical lines using Gantry 5 particle

    Posted 7 years 10 months ago
    • I needed a 1.5 pixel high horizontal line in my template header. I used the logo/image particle and deleted any text, images, or css classes. Then I created the following class in the custom.scss file, and put the class title in the particle block's CSS Classes field.

      .template-header-line-below-images
      {
      border-style: solid;
      border-width: 0.75px;
      border-color: #cce6ff;
      height: 1.5px;
      }

      The border property created a rectangular outline, so I collapsed the rectangle into just the top line and bottom line together (0.75px each), which then equaled the height of the 1.5px line that I needed.

      Using border properties, you could create a two colored line, by giving the top line a different color than the bottom line of the collapsed rectangle. Or you could create a vertical line by collapsing the rectangle in the other direction.

      Maybe this will help someone, or someone will suggest an alternative method.
    • Last Edit: 7 years 10 months ago by Pinto Buck.

    • The following users have thanked you: DanG

    #1298153
    • DanG's Avatar
    • DanG
    • Preeminent Rocketeer
    • Posts: 36750
    • Thanks: 3229
    • Custom work done

    Re: SOLVED How to create horizontal or vertical lines using Gantry 5 particle

    Posted 7 years 10 months ago
    • Pinto Buck wrote:
      Maybe this will help someone, or someone will suggest an alternative method.

      This might be an acceptable alternate method using the CSS "before or after" pseudo-class placed on your element.
      .kpost-post-header h4:after {
    content: "";
    display: block;
    border: 0;
    border-top: 3px solid #ccc !important;
    margin: .25rem 0;
    padding: 0;
}
.kpost-post-header h4:before {
    content: "";
    display: block;
    border: 0;
    border-top: 3px solid #ccc !important;
    margin: .25rem 0;
    padding: 0;
}

      gets me this:
      This image is hidden for guests.
      Please log in or register to see it.
    #1298168

Time to create page: 0.039 seconds