Design Cloud Modern Mosaic Background

[mxone]

Hey Folks,

i was wondering how I can do the same background as used in the “Modern Mosaic” template. I don’t get how you have done this. Especially I want to know how to recreate this white vertical lines in the background.

thank you guys

[ruenel]

Hello @mxone,

Thanks for posting in! I just checked our Design Cloud and I could not find the “Modern Mosaic” template. Can you please provide us the URL of the demo page of this template? By the way, some of our templates were featured in our video tutorials. Please check out our Youtube Channel here:

• https://www.youtube.com/channel/UCgY5E3tOI83kBEahh9Y3uRg/

Creative Column series:

Creative Contact Forms

Hope this helps.

[mxone]

thx for the vids. Here is the demosite: https://demo.theme.co/designcloud/content/modern-mosaic/

I hope you can figure out how to get this background done.

[jade]

Hello @mxone,

Our apologies for the confusion. You can actually find the modern mosaic template in the Design Cloud:

You can install it and use it on your pages. The lines are added through some custom CSS. After you install the Modern Mosaic on your page, you can click on the Grid settings then you can see that there is a class has-lines add to it.

The Modern Mosaic template is using Grids and we also have a video series on our channel regarding the topic:

Hope this helps.

[mxone]

Hey Jade, i know thats using “Grids”. I just wanted to know have u doin that great background. I allready figured out that is none basic background and you used custom css to archive that. I rly would love to replicate that sort of a background to my other site without using the grid everytime. the verical lines which seperate the bg.

[lely]

Hi @mxone,

Yes, the custom CSS for that background can be found on GRID > Customize Tab > Element CSS. This part:

/* Matching Grid Lines
// ------------------- */

$el.x-grid.has-lines {
  overflow: hidden;
}


$el.x-grid.has-lines:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  top: 0;
  left: -1px;
  bottom: 0;
  width: 1px;
  color: #f0f0f0;
  background-color: currentColor;
  pointer-events: none;
  box-shadow:
    calc((100vw / 4) * 1 + 1px) 0 0 0,
    calc((100vw / 4) * 2 + 1px) 0 0 0,
    calc((100vw / 4) * 3 + 1px) 0 0 0,
    calc((100vw / 4) * 4 + 1px) 0 0 0;
}


@media (min-width: 481px) {
  $el.x-grid.has-lines:before {
    box-shadow:
      calc((100vw / 6) * 1 + 1px) 0 0 0,
      calc((100vw / 6) * 2 + 1px) 0 0 0,
      calc((100vw / 6) * 3 + 1px) 0 0 0,
      calc((100vw / 6) * 4 + 1px) 0 0 0,
      calc((100vw / 6) * 5 + 1px) 0 0 0,
      calc((100vw / 6) * 6 + 1px) 0 0 0;
  }
}


@media (min-width: 980px) {
  $el.x-grid.has-lines:before {
    box-shadow:
      calc((100vw / 8) * 1 + 1px) 0 0 0,
      calc((100vw / 8) * 2 + 1px) 0 0 0,
      calc((100vw / 8) * 3 + 1px) 0 0 0,
      calc((100vw / 8) * 4 + 1px) 0 0 0,
      calc((100vw / 8) * 5 + 1px) 0 0 0,
      calc((100vw / 8) * 6 + 1px) 0 0 0,
      calc((100vw / 8) * 7 + 1px) 0 0 0,
      calc((100vw / 8) * 8 + 1px) 0 0 0;
  }
}

On normal section using ROW(v2 ROW not classic ROW), for that to work, you can add the same CSS on ROW > Customize Tab > Element CSS. Change existence of x-grid to x-row from that custom CSS. Then on that same ROW > Customize Tab > CLASS field: add has-lines.

Further customization from here is unfortunately outside the scope of our support. Thank you for understanding.

[mxone]

You very welcome. Thx for your support.

[rad]

You’re most welcome!