On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Using: MODX Revolution 2.1.3-pl (traditional)

    I have a image list that showing 2 image per row, there is 5 rows (total 10 images). The chunk create for every image a begin < div> and end is < /div> [this is because every images is linked with a title name]
    What I want is a black dotted line divider after a row, Do someone have any solution or can give me the right direction to implement this inside my site, thanks.

    What I want is this: (in the last row will the divider not showing up)
    image image
    image image
    image image
    image image [ed. note: viewsonic last edited this post 7 years, 7 months ago.]
    • There should be a way to indicate the last item with a classname for it in the script you're using to generate the list, then you can use CSS to add the dotted lines (with a border-bottom) and not have the border at all on the "last" item.

      You could also use the CSS pseudo-class :last-child http://www.quirksmode.org/css/firstchild.html
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
      • This is pretty simple actually and works from ie7 up.

        div { General stylings for your div }
        div + div { border-top: 1px dotted black; } 

        This will skip over the first div as it is not next sibling of div smiley And thus makes divider border for you

        Other way is like scottwell mentioned to use :fist-child in pretty similar manner, just reversed logic. Now removing the top border from the first div

        div { border-top: 1px dotted black; }
        div:first-child { border: 0; }
          Almost retired from web-development industry but still randomly writing at Lazylegs.info and on schedule hopefully in near future to finish Oracle and PostgreSQL ports of MODX