Docs

[Maarten]

LS,

I want to create a similar setup as on the Themeco community page (screenshot). I want to create a responsive grid with large squares. In the squares I want a big central icon, a short header and sometimes extra explanation text below the header.

Can you explain to me how to recreate the grid setup for my personal need?

1 Do you use a normal Cornerstone Block Grid?
2 What are the .x-shortcodenames-etc to address changing the layout (font, size and outline of the body etc) of the block grid.
3 How do you make the whole square also a button?

Is there a downloadable template to adjust for personal needs?

Please advise me further.

Thanks

[Lely]

Hi There,

Please use Sections and Columns instead.
See this video screencast on how to achieve this:http://screencast-o-matic.com/watch/cDftfQ1Jwq

1. Add a section > Choose 3 columns.
2. Inspect element Row set Marginless Column to OFF.
3. On each of those 3 columns add RAW CONTENT element. Then add some content like this:

<a href="#"><h2 class="man">[x_icon type="adjust"]</h2><h2 class="man">Knowledge Base</h2><span>Articles & Video Tutorials</span></a>

4. On each of those RAW CONTENT element class field add center-text custom-block-grid
5. On Settings Tab > Custom CSS add the following code to make the entire block clickable:

.custom-block-grid a{
  
  display:block;
  border: 1px solid #eee;
  padding:20px 0;
}

Hope this helps.

[Maarten]

Hi Lely,

super. Thanks for your elaborate and very clear reply.

I have added everything on my site. It looks great (until I remove some href links from the raw content 🙂

I strive for perfect though 🙂

So couple more questions:

1. How do I get an mouseover hover effect to emphasize that a block is linked to another page?
2. I want 1 of my blocks to be linked with a href. The rest will not have a link. How can I make sure the not linked boxes look the exact same as the linked box
   • Same position inside the box
   • except they will NOT have the mouseover hover effect 😉
3. How can I customize in the css code the layout of the header and text in the raw element box. Fontsize, font family etc?
4. How can I make sure that the size of the boxes and the position of the text in the boxes is ALWAYS equal for all the six boxes. Regardless whether a box a link or if the text covers 1 or 2 lines inside the box?

In the attached screenshot I took away 5 hrefs and created a longer subline

Thanks already for your support. I cant imagine any other theme have such a great support team 😉

Maarten

[Maarten]

This reply has been marked as private.

[Paul R]

Hi,

For 1, 2, 3 & 4 – Please replace the css code given above with this.

.custom-block-grid,
.custom-block-grid a {  
  display:block;
  border: 1px solid #eee;
  padding:20px 0;
  color:#8e8e8e;
  font-size: 14px;
  width:212px;
  height:191px;
}

.custom-block-grid a:hover {  
   background-color: rgba(0,0,0,0.1);
}

.custom-block-grid h2 {
    color:red;
    font-size: 40px;
}

You may change the values like color and font size to achieve your desired result.

Hope that helps.

[Maarten]

Thanks! Great. Another big step towards perfect 🙂

What happens now though is

1. that the block WITH the a link in the raw content reacts differently on the 20px padding and the border. See screenshot. I think it gets both the padding and the border twice because the content is BOTH a ‘.custom-block-grid’ AND a ‘.custom-block-grid a’ at the same time…is this a possible explanation?
2. The box content is fixed now (for example width:212px; height:212px;) Which makes it visual nice. But now I loose the responsiveness that depending on the screen size and the space for 1,2 or 3 columns the full width of the screen is used… (see screenshot)

So how can I solve the padding and border issue for the block grids WITH an href in the RAW content?

And what I want with the blocks size and layout is:

• ALL the boxes (both with and without a link) to be the same size…AT the same moment. The size does not have to be fixed forever.
• My boxes to be responsive. Big screens 3 columns using the full column container width. Smaller screens 2 columns using the full column container width. Small mobile screens 1 column using the full column container width.
• The “minimum” size of all the boxes has to be big enough that a text can contain 2 lines….But if any of my requirements have to go this is the one I am least concerned about…since I am able to create similar length of text lines if necessary

Hope my explanation is clear enough… 🙂

Thanks already for your help!

regards Maarten

[Rue Nel]

Hello There,

Based on these condition:
And what I want with the blocks size and layout is:

ALL the boxes (both with and without a link) to be the same size…AT the same moment. The size does not have to be fixed forever.
My boxes to be responsive. Big screens 3 columns using the full column container width. Smaller screens 2 columns using the full column container width. Small mobile screens 1 column using the full column container width.
The “minimum” size of all the boxes has to be big enough that a text can contain 2 lines….But if any of my requirements have to go this is the one I am least concerned about…since I am able to create similar length of text lines if necessary

The given suggestion doesn’t meet these conditions. I would suggest a different approach by using a Block Grid element. That is because only the block grid element has the ability to have different number of columns in different screen sizes. Comparing the marginless columns, once the screen is smaller it will eventually becomes just one single column.

To know more about the block grid element, please check it out here: http://theme.co/x/demo/integrity/1/shortcodes/block-grid/

[Maarten]

Hi Rue Nel/Themeco staff,

thanks.

1. What setup do you use on the Themeco community page? A block-grid OR RAW content in marginless columns? Cause on the Themeco community page the blocks and columns ARE responsive 🙂 And that is the setup I wanted to recreate.

I will look into the current option a little further. Since marginless columns have some benefit for my setup as well.

I will post my current questions on this setup in my next reply

Thanks

[Maarten]

Hi Themeco staff,

If I stick with the current setup I want the 1 column in smaller screens to be centralized. I managed that with changing the class of the RAW content to:
center-text custom-block-grid center-block

Other users who might look into the same want that solution as well so this remark is for them…

I would prefer to have the option of two columns as well for middle sized screens and I still have a technical lay out problem. Therefore two more question hopefully explained clear enough below.

QUESTION 1:
Is there any way to work with @media or something to decide the number of columns depending on the screensize? With a fixed size of the boxes this could be a safe option. For example:

• Fixed boxes of 212 px width 212 px height
• Screens where column container is 636 px or bigger: 3 columns
• Screens with column container smaller than 424 px: 1 column
• Screens with column container between 424 px and 636 px: 2 columns
• Columns to be centered like the class solution I have found above

Or is a similar solution not possible?

SITUATION AND QUESTION 2:
When I use this css code:

.custom-block-grid,
.custom-block-grid a {
  display:block;
  border: 1px solid #eee;
  padding:20px 0;
  color:#8e8e8e;
  font-size: 14px;
  width:212px;
  height:212px;
}

.custom-block-grid a:hover {
   background-color: rgba(0,0,0,0.1);
}

.custom-block-grid h2 {
    color:red;
    font-size: 40px;
}

The problem is that a block grid a gets twice the padding and twice the border AND the block hover a starts where the text starts… and is therefore shifted downwards…See screenshot 1.

I have playing around with the css and managed to fix the double padding and double border like this:

.custom-block-grid {
  display:block;
  border: 1px solid #eee;
  padding:20px 0;
  width:212px;
  height:212px;
  font-size: 14px;}
.custom-block-grid a {  
  display:block;
  color:#8e8e8e;
  }
.custom-block-grid a:hover {  
  background-color: rgba(0,0,0,0.1);
}

Only now the hover block is as big as the part with icon and text. And it does not fit the whole 212 px by 212 px block… See screenshot 2

What I want but can’t get to work is:

• QUESTION 2: The background hover to fill the whole block inside the existing 212px 212px borders

What I think possible solutions might be:

• Create a 212 x 212 hover block but let it start top:-20px (the padding that have to be corrected) WITHOUT moving the text also up (I managed to create that setup with text moving up;)
• Remove the padding 20 px in all the blocks. Instead use some class or css code to centralize the RAW content in the vertical middle. I could not find the right configuration for this online…:(

Looking forward to your reply.

regards

[Rue Nel]

This reply has been marked as private.

[Maarten]

Hi Rue Nel,

big thanks for creating the test page. I have played around with this setup and totally agree. Block grid is the way to go 🙂

I have created some customizer css for both the block grid as the block grid h2 to equal the style of the rest of the website.

What I would like to improve now:

1. add a small border around the 6 individual blocks. Similar to the marginless columns solution and the Themeco community page. Cause this screenshot looks terrible…:)
2. Have the icon, header and text outlined also in the vertical middle of each block. Off course I want ALL the icons and headers outlined similar. So maybe I just need to add some top padding
3. How can I influence with css the size and padding of the blocks to create the desired space and layout. (Especially minimum sizes which prevents the blocks from becoming too small)
4. Make the full block of the MBTI grid block 1 clickable link. With the current setup the icon, header and text are three different links (to the same page)
5. Create the hover effect where the full block becomes grey to illustrate the block is a link (similar to the Themeco community page)
6. Change the color of the textlink in the MBTI block to normal grey. (the hover function should emphasize the link.

Thanks already for your reply.

regards Maarten

[Lely]

Hello Maarten,

1.) Please add class custom-block-grid on the block grid element class field. Then add the following CSS:

.custom-block-grid>li {
    border: 1px solid red; /* Change border width and color accordingly*/
    height: 175px; /* Since the content height will be different we need to set height to make it uniform. Adjust this also to your preferred height*/
}

2.) To add padding or spacing between the elements, please try removing the man class. This man class removes all default margins.
(m) – margin (a) – all (n) – none.
If the spacing is not enough, please replace man with other class:https://community.theme.co/kb/css-class-index/
For example use class mam -> (m) – margin (a) – all (m) – medium.
I am not sure what kind of outline you want to implement. In case you want some line to separate icons and headings, you may use line shortcode : [x_line]

3.)Please check this link:https://community.theme.co/kb/css-class-index/
Choose which class suites your need and add to the specific element.

4.) Please wrap the entire code of block grid in one link tag like below:

<a href="https://www.opp.com/nl-NL/tools/MBTI/MBTI-personality-Types"><h2 class="man">[x_icon type="cogs"]</h2><h2 class="man">MBTI profiel</h2><span>Meer begrip voor jezelf en de ander</span></a>

Then add this CSS:

.custom-block-grid>li>a{
  display:block;
  height:175px;
  color: grey; /* For #6 Change to your preferred color*/
}

5.)

.custom-block-grid>li>a:hover{
  background-color: #fafafa;
}

Hope this helps.

[Maarten]

Thanks a lot!

I have got the feeling that we are nearly there…

I have played around with the configuration. One weird thing that happened:

• The <span>TEXT PART</span> in the “href a link MBTI grid block” reacted on the height px value of the .custom-block-grid>li>a{height:175px;} and was added below the set value.
• My SOLUTION: I have changed all the <span> parts in all the blocks into <h4>.

What I still want and tried but could not manage to configure to satisfaction:

1. Remove the margins between the block grids. I have added .x-block-grid >li {margin: 0;}. BUT 2 things happen that I want to change:
• 1A: I want the block grids to use the full width of the column container. BOTH in 3, 2 or 1 column setup! See screenshot 1
• 1B: In the current setup something goes wrong in the responsiveness when the screen size is too small for 3 columns. See screenshot 2
2. With you solution 4.) Please wrap the entire code of block grid in one link tag…it still changes the layout (top padding inside the block) compared to the other block grids. I used the same classes icon”mts”, h2 “man” and h4 “mas” for all different blocks. See screenshot 3

Please note that in the current setup all the configuration I have done is in the Custom CSS of the single page. I will move all possible CSS code to the customizer Global CSS, when the configuration works the way I want to. For testing purposes this is faster now 🙂

Thanks already for a reply.

regards Maarten

[Christian]

Hey Maarten,

We’re sorry but further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Maarten]

Ok Thnx for all the help

I have managed to create a workaround I can live with for now. Not as nice as the themeco community page setup but close to perfect 🙂

[Author]

Posts