Docs

[Sandie]

Hi,

I’ve activated The Grid to my site and I’ve created a grid with which I need some additional help.

1. I want to remove the DATE. I just want the Page name to be displayed.

2. I want to enlarge the font size of the Page name.

3. When hoverd over, is it possible to remove the PAGE NAME?

http://jon-aslund.com/start/

Thanks!

Best Regards
/Sandra

[Nabeel A]

Hi Sandra,

Thanks for writing in!

1. To remove the date, add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

span.tg-item-date {
    display: none !important;
}

2. To enlarge the font size of the Page name, you can add this code:

.tg-item-title a {
    font-size: 32px !important;
}

3. To remove the page name when hovered over, use this code:

.tg-item:hover .tg-item-title {
    display: none !important;
}

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Sandie]

Hi,

Thanks! I added the CSS codes directly to the CSS for the specific grid in GRID SETTINGS. It works fine. Just tell me if I still need to add it to the Customizer CSS.

I got three more questions.

I have made 2 different grids, they look almost the same, the only difference is that one of them is displayed horizontal (computer and large screens) and one is displayed verticaly (for Mobile and Ipads).

1. When displayed verticaly (GRID NAME: LOME MOBILE), the text for “PRIVAT PERSON” melts together to I think I need to adjust the LINE HEIGHT. Where do I do that.

http://prntscr.com/d2fva6

2. I get the LINKS working on the horizontal grid (LOME), but NOT on the vertical grid (LOME MOBILE). I have added the site link to PAGE/EDIT/The Grid – Item Format

http://prntscr.com/d2fvop

This works on one of the grids as I mentioned above, but not on the one (LOME MOBILE) used for mobile and pads.

3. As the GRIDS are the only thing displayed on this page, how do I get it centered verticaly as well? So the GRID in placed in the middle of the screen. Right now it’s placed to high up. Do I just change the Padding och Margins for the SECTION, or how do I do it? And for the whole backgroud of the page to be WHITE, now one part of it is black and I don’t know how to change that.

SITE: http://jon-aslund.com/start/

Please let me know how to proceed to solve this matters.

Thanks you so much for all your help, your team is awesome!

Best Regards
/Sandra

[Rue Nel]

Hey Sandra,

Thanks for getting back to us.

1] Yes you are correct. Since you change the font size, you also need to change the line height. You can use this code:

.lome .tg-item-title, 
.lome .tg-item-title a {
    line-height: 46px !important;
}

2] Could please provide the url with the vertical grid in it?

3] Please go to the row settings and enable the marginless columns. In your column settings, please align it to center and insert an inline css vertical-align: middle;

Hope this helps.

[Sandie]

This reply has been marked as private.

[Rad]

Hi there,

Please add this CSS to Admin > Appearance > Customizer > Custom > CSS

body {
background-color: transparent !important;
}

About the linking on mobile, I tried but no luck since each has structure has a complex structure. Though it can be easily done through The Grid skins, I checked and you don’t have any skin for your grid. Please create one and there, you can easily manage how linking works. https://www.youtube.com/watch?v=CemceZL2UGg

Right now, all of those elements aren’t editable since there is no active skin.

Thanks!

[Sandie]

Hi,

I have found the problem. It’s when I add the CSS code below, that THE LINKS stops working in the grid.

.tg-item:hover .tg-item-title {
display: none !important;
}

I want to use this code as I want the PAGE TITLE to disapear once hoverd over, but right now the link also disapears.

http://jon-aslund.com

If you check the page now the grid looks good and the links are working, so please advise me what to add instead so the PAGE TITLE disapears when hovered over, BUT the LINKS still need to work.

Please let me know what to do.

Thanks!

Best Regards
/Sandra

[Christopher]

Hi there,

It’s not possible without custom development since page titles wrap within <a></a> tags, see the attachment.

Hope it helps.

[Sandie]

Can I make the PAGE TITLE transparent when hovered over, to keep the links? Then the Page Title will still be there.

If its not possible, do you know who I can contact for some custom development?

Thanks!

Best Regards
/Sandra

[Rue Nel]

Hey Sandra,

If you want the title to disappear and want to retain the link, please update the code. So instead of using this;

.tg-item:hover .tg-item-title {
    display: none !important;
}

You can make use of this code:

.tg-item:hover .tg-item-title {
  opacity: 0;
}

Please let us know if this works out for you.

[Sandie]

Hi,

Thanks, that worked so much better.

I want to make the overlay darker, so the Page Title is more visable on in the grids.

http://prntscr.com/d42tyv

But I can’t get it to work. I have tried to change this parameter: “Overlay Background Color” to darker but nothing happens.

http://prntscr.com/d42tyv

Should I change something else?

Thanks!

Best Regards
/Sandra

[Lely]

Hello Sandra,

Please try using this custom CSS:

#grid-1534 .tg-item-overlay {
    background-color: rgba(22,22,22,0.85);
}

Adjust .85 respectively.

Hope this helps.

[Sandie]

This reply has been marked as private.

[Christopher]

Hi there,

Please update your cod to :

#grid-1534 .tg-item-overlay {
    background-color: rgba(22,22,22,0.95) !important;
}

Hope it helps.

[Sandie]

Great, thank you.

Now it works superb!

/Sandra

[Author]

Posts