Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How can I get lines separating each post in my grid blog?


Question

  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

6 answers to this question

Recommended Posts

  • 0

Add the following to Design > Custom CSS.

/*

  begin blog grid item outline
  
  Version       : 1.0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  #collection-61492bcc660b1e207c51c3ec {
  
    .blog-basic-grid {
    
      --outline-width : 1px;
      
      /* do not change anything below, there be the borg here */
      
      gap : var( --outline-width );
      
      .blog-basic-grid--container {
      
        outline : solid var( --outline-width );
        padding : 17.5px 10px;
        
        }
        
      }
      
    }
    
  /* end blog grid item outline */

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
3 hours ago, creedon said:

Add the following to Design > Custom CSS.

/*

  begin blog grid item outline
  
  Version       : 1.0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  #collection-61492bcc660b1e207c51c3ec {
  
    .blog-basic-grid {
    
      --outline-width : 1px;
      
      /* do not change anything below, there be the borg here */
      
      gap : var( --outline-width );
      
      .blog-basic-grid--container {
      
        outline : solid var( --outline-width );
        padding : 17.5px 10px;
        
        }
        
      }
      
    }
    
  /* end blog grid item outline */

This is for v7.1 and specific to the poster's need.

Let us know how it goes.

Works well! Thanks! Is there any way to make it stylized like the 2nd picture? Where there's no outside border and also gaps between the vertical lines and horizontal lines?

Link to comment
  • 0

I think achieving the second effect may not be possible with CSS alone. It is possible to get closer with CSS alone but you have to leave out horizontal or vertical lines.

2056918637_ScreenShot2021-10-16at11_47_14PM.png.6e92c5efdfa2fdcb6ff38fc8b6c435d4.png

The other option might be to use Javascript to restructure the grid so that a continuous horizontal line might be inserted between rows. It wouldn't be easy, if possible.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
3 hours ago, creedon said:

I think achieving the second effect may not be possible with CSS alone. It is possible to get closer with CSS alone but you have to leave out horizontal or vertical lines.

2056918637_ScreenShot2021-10-16at11_47_14PM.png.6e92c5efdfa2fdcb6ff38fc8b6c435d4.png

The other option might be to use Javascript to restructure the grid so that a continuous horizontal line might be inserted between rows. It wouldn't be easy, if possible.

Got it, thanks. I actually really like what you did in that picture. Do you mind sharing the code for those alterations?

Link to comment
  • 0
Quote

Do you mind sharing the code for those alterations?

 

/*

  begin blog grid item vertical divider
  
  Version       : 1.0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @media screen and ( min-width : 768px ) {
  
    #collection-61492bcc660b1e207c51c3ec {
    
      .blog-basic-grid {
      
        @columns : ~"5n";
        @outline-width : 1px;
        
        // do not change anything below, there be the borg here
        
        column-gap : @outline-width;
        
        .blog-basic-grid--container {
        
          border-right : solid @outline-width;
          padding-left : 15px;
          padding-right : 15px;
          
          &:nth-child( @columns ) {
          
            border-right : unset;
            
            }
            
          }
          
        }
        
      }
      
    }
    
  // end blog grid item vertical divider

 

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...