Grid settings / preview

[Deesign]

Hi Team,

Could one of you assist with some minor settings in The Grid. At the moment the preview that we see in the Skin Builder is different then what is displayed on the blog page. Maybe X is overriding some of the settings?

Right now the front end display includes a small slice of the image at the bottom of the image and the hover link color is not working - but both work perfecting in the admin preview.

Thanks in advance

[jade]

Hello @DeeDesign,

I checked the blog page and the admin preview of The Grid that you are using and they look identical on my end.

Please see this screencast of the frontend view:

Can you please try to clear your site and browser cache then check again?

Thank you.

[Deesign]

Thank you Jade,

I cleared all cache and still do not see the hover color in the title of The Grid settings as it displays in the preview.
I tried 3 devices and 3 browsers without any luck - can you assist further.
(your video test did not include a hover on the title)

This testing also led me down another path - the custom font loaded into the font manager is displaying in CS, in my FF browser but not in your above video (all sidebar titles should be in our custom font + two examples from the home page below) or any of the other devices I tried. Can you help me to find the disconnect for why this custom font would be working for me only?

Desperate for clues on both fronts

[friech]

Hi @DeeDesign,

Sorry but we are not entirely certain of the issue, see on my screencast below, the hover effect of your grid is exactly the same in backend and frontend. Please clarify, perhaps provide us screencast showing the issue.

Regarding the font, I see that on your custom CSS you set the custom font as font-family: 'blackstone'; But that is not how you named the font on Font Manager.

• 

So on your custom CSS, you should use font-family: "Custom Font Family";

I think why this font renders properly on your end is because you have the font blackstone on your local computer, that is why the site still renders the correct font on your end, but not on viewers with no blackstone font installed locally.

Cheers!

[Deesign]

Thank you for trying, apologize for not being more clear.

Please see the screencast below that shows The Grid in the skin builder preview and displays how the title of the blog post is formatted to have a hover color - but this does not display on the front end. We thought maybe the theme or the page was over-riding the formatting?

Thank you for helping with the font - I had started the custom font css exactly as you suggested above and could not get it to work but now the update is working for me and I hope for you too

Is there a method to name the fonts inside of the font manager when uploading or do they always default to Custom Font Family?

[jade]

Hello @DeeDesign,

Thanks for providing the screencast.

Please try adding this CSS to the Global Custom CSS field of the skin:

.tg-item-media-holder:hover .tg-bottom-holder .tg-item-title a {
    color: rgb(255,136,131) !important;
}

.tg-item-media-holder .tg-bottom-holder .tg-item-title a {
    transition: color 1s ease;
    -webkit-transition: color 1s ease;
}

This is a workaround that you have to apply because adding the hover animation seems to mess with the color values set to directly to the title element in the grid.

As for the font name, you may change to any custom font name you want:

To read more about the Font Manager, please check here:

Font Manager | Themeco Docs

Hope this helps.

[Deesign]

Thank you Jade - The Grid code works like a charm, very grateful.

I understand about the font manager and where to find it, I did manage to go through the loading of the .woof file with the extra plugin and got it into the media library successfully, and then loaded into the font manager. But renaming the font where you are suggesting doesn’t seem to affect the css reference. The edited section above in blue is changed but the dropdown just below is where it’s listed as Custom Font Family and this does not seem to be editable. Sorry if I’m missing something obvious.

I’m going to try now - but can you suggest what would happen to the name for css if we upload two custom fonts?

[Deesign]

Ahhh - I found it! It’s further down within the Font Manger - you have to add the custom font name when you first add the new font via the font manager.
The Add to Font Manager button gives me a popup that has a ‘Font Item Name’ field and ADD.

If we follow this and add a custom name here, would that name then be in the css reference?
For example:
font-family: “newly added font name”;

[jade]

Hello @deedesign,

@DeeDesign

If we follow this and add a custom name here, would that name then be in the css reference?
For example:
font-family: “newly added font name”;

That is right but please note that the custom fonts added to the Font Manager are mainly meant to be used for the V2 Elements in Cornerstone/Pro builder and the Font Settings in X/Pro Theme Options so we do not recommend using the fonts through custom CSS.

Hope this helps.