Changing the massage in the "the grid" on hover

Support
#1

Hi X Team,

I have a website that is using the grid to show off my work:

It’s about half way down, when people are going over the my projects it has a broken icon image (in FF) and some txt that says Read More. I would like to find a way to get the icon working and have it say: Read more about this project.

Any ideas on how to do this?

Thx

John

#2

And one extra question about the gid, and formatting. On another page:

If you notice all my recent project are displayed on the grid, one the final row only has 2 entries instead of 3 and thats creating some strange spacing issues:

I would like the bottom project to follow the alignment of the above rows.

Thx for the extra help X Team,

John

#3

Hello John,

Thanks for asking. :slight_smile:

  1. Please take a look at the solution mentioned in following ticket to edit read more text:


2. You can add following CSS under X > Theme Options > CSS to adjust spacing:

article.tg-item.sofia:last-child {
    left: 394px !important;
}

I have found the proper CSS code selector using the Chrome browser Developer Toolbar:

https://www.youtube.com/watch?v=wcFnnxfA70g

For the CSS code itself, I suggest that you get started with this tutorial:

https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#4

My X interface looks entirely different from the one pictured in the video:

Here is a screen cap of what I’m seeing - https://prnt.sc/klofc9

Most notably absent is the wrench that allows me to make changes to the skin, Any thoughts on what the problem might be. I’m thinking different versions, but WP isn’t telling me the grid needs an update. Could be be a premium feature for full licensed users?

Thx for all the help,

John

#5

Hello John,

Thanks for updating the thread.

I checked your website and it seems that you are using The Grid plugin version 1.4.0. Please update The Grid to version 2.6.60. For more information on plugin version, please take a look at following article.

To update plugin, you can take a look at our update guide.

Thanks.

#6

I got it, it was as simple and deactivating it and then turning it back on.

#7

Glad we could helps.

Cheers!

#8

Hi Friends,

I hate to say this but when I installed the new version of the grid it got kind of strange on my CSS, alot of this I can handle on my own but one that was stumping me was the questions that I mentioned in this tread up above:
]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]
And one extra question about the gid, and formatting. On another page:

If you notice all my recent project are displayed on the grid, one the final row only has 2 entries instead of 3 and thats creating some strange spacing issues:

I would like the bottom project to follow the alignment of the above rows.
]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]

It’s kind of back but weird; whats going on is that when there is a gird with only 2 rows it looks good but when there is a grid with 3 items on the bottom the 3ed box is perfectly over-lapping on top of the second item; hence making it look like there are only 2 items on the bottom row.

Any chance I could get you guys to help me with this CSS so that way if there is one with 3 all three items are up there and spaced evenly (example: http://www.purposefulmarketinggroup.com/).

And when there are only 2 items on the bottom row like on my portfolio page (http://www.purposefulmarketinggroup.com/portfolio/) the are spaced evenly with the columns, thx for the extra help on this one.

John

#9

Hello There,

Thanks for updating in!

To resolve the alignment when there are only two items in the row of the grid, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

article.tg-item.sofia:last-child {
    left: 394px !important;
}

And because Sofia skin that you are using is not editable, you can change the “Read more” text by adding the following code in your child theme’s functions.php file

// Translate texts
// =============================================================================
function translate_texts($translated) { 
  $translated = str_ireplace('Read More', 'Read More about this project', $translated);
  return $translated; 
}
add_filter('gettext', 'translate_texts' );
// =============================================================================

Because what you are trying to accomplish requires a template customization, you will need to install a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. Once it is installed, you can add the code above in the child theme’s functions.php file in Appearance > Editor.

Hope this helps.

#10

First of all thank you for the function.php code; it worked like a charm! That’s one little piggy.

Now with the with the spacing on the final element on the on the grid on the home page and the portfolio page:

When there is only 2 posts, the problem that I’m continuing to have is it looks llike when the grid has a increment of 3 (or a full row) what its doing is taking the final post and the overlapping it on top of the second, take a look at the following screen shots plz:

But I feel like we are more then half way there because when I go on the portfolio page and there are 2 entries on the final row the spacing looks great:

So I guess the only problem I’m having at this point is getting that third element in the right place when there are girds of 3.

Thank you so much for all the continued help X team!

John

#11

Hey John,

It’s caused by a custom CSS in your Global CSS. Please remove it for a moment.

Once I remove that, I see this:

That looks like a Justified grid type. Please try other grid types because The Grid should calculates the size based on your settings so the fix to your issue should be there.

Please give us WordPress Admin access in a Secure Note so we could check your grid setup.

Thanks.

#12

Hummmmmm… Did you read the thread above this?

So yes I do know that the over lap is being caused by CSS, and ther resason that this is happening I’ve been working with the X Team to try and get rows of 2 on the grid to follow the vertical spacing of the column its in:

This css rule, give to me by the x team causing the overlap:

article.tg-item.sofia:last-child {
left: 394px !important;
}

So with that being said is there a way around that so that way when there are rows of 2 they follow vertical column based alignments, just like there if a full row of three?

Also FYI I’m not trying for a for a justified style. I would like my elements to be in a grid and keep the same vertical spacing as the column that its in.

Thanks for the continued help,

John

#13

I got it guys. It’s working now thanks for the help I woudn’t have been able to get it working with your help.

Consider this ticket closed. Thanks a lot

John

#14

You’re welcome! :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.