v4.2.0 css

  • Resolved goldeneagle

    (@goldeneagle)


    3 months, 2 weeks ago

    I continue to love your plugin.
    But v4.2 has some major changes to the plugin’s grid css which break my display. I’m not sure that I fully understand the css, but it seems to be imposing a maximum height to the related posts item (image+title) which is too small, meaning that the post titles are truncated in my site.

    I find that if I manually edit your grid.min.css file thus:
    .crp_related.crp-grid .crp_title {
    display: block;
    margin: 0.5rem 0;
    font-weight: 600;
    line-height: var(–crp-grid-title-line-height);
    overflow: hidden;
    display: -webkit-box; <– delete
    line-clamp: var(–crp-grid-title-line-clamp); <– delete
    -webkit-line-clamp: var(–crp-grid-title-line-clamp); <– delete
    -webkit-box-orient: vertical; <– delete
    max-height: calc(var(–crp-grid-title-line-height) * var(–crp-grid-title-line-clamp)); <– delete
    }
    … then everything displays nicely as it did in v4.1
    I’ve tried putting custom css in your style editor panel, but that doesn’t seem to be incorporated when I click “Save Changes”. I might be mistaken, but previous versions of the plugin allowed use of the theme’s own css files (I’ve certainly got a lot of crp styles integrated into my theme’s css file) giving the user another way to control the css. But with this release it seems the use of /contextual-related-posts/css/grid.min.css?ver=4.2.0 is forced. I can manually edit that file, but that’s a bit messy. Could you let me know if that’s the only solution?

    Thanks again for a great plugin, which I’ve been using now for nearly 5 years.
    I like the new rounded corners on the images btw!

    • This topic was modified 3 months, 2 weeks ago by goldeneagle.

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Ajay

    (@ajay)

    3 months, 2 weeks ago

    Thank you very much for your kind words. Can I tempt you to write a review of the plugin when you have a moment.

    Would you able to try this beta version of the plugin: https://github.com/WebberZone/contextual-related-posts/releases/tag/4.2.1-beta1

    This fixes issues I spotted in the grid amongst other ones. But it doesn’t have what you listed above. In case that still doesn’t work, I’ll look at the changes you suggested above.

    Am I correct to confirm you’re using Grid style and not the Grid with Thumbnails.

    Thread Starter goldeneagle

    (@goldeneagle)

    3 months, 2 weeks ago

    Thanks for the prompt reply. Happy to write a review when I have a moment.

    My dev site is now running 4.2.1-beta1, with no noticeable change to my 4.2.0 display glitch. (I’ve blitzed my cache)

    Yes, I’m using “grid” rather than “rounded thumbnails with CSS grid”.

    [Less important, and every user will be different here, but personally I’d also be looking to tweak by resetting the font-weight to 400 in the title text, and setting a zero bottom margin for images via .crp_related.crp-grid .crp_thumb to reduce the gap between image and title which seems to have grown under 4.2.0 – hence my general question around user flexibility. If henceforth this can only be achieved via manual editing of grid.min.css, so be it, but it’s a bit messy. And note that I’m not an expert in grid css so it may well be that the existing css in 4.2.0 might work just fine for other users.]

    [btw – no rush. I know this is a spare-time gig for you]

    • This reply was modified 3 months, 2 weeks ago by goldeneagle.
    Plugin Author Ajay

    (@ajay)

    3 months, 2 weeks ago

    @goldeneagle

    I should have mentioned that I migrated the CSS to use variables, which means (generally) overriding becomes easier. Is your dev site live and available for me to look at?

    If it’s confidential, I’m happy for you to drop me the link via my contact form on WebberZone.

    What I want to do is study the CSS output on your site and see if it’s a simple tweak or a bigger change. My currently working plan is to push 4.2.1 out over the weekend as it’s the only time I can carefully monitor this with the day job.

    Plugin Author Ajay

    (@ajay)

    3 months, 2 weeks ago

    Separately, @goldeneagle

    I believe this code will help you override the clamping in the grid.

    /* Show full titles in the grid layout */
.crp_related.crp-grid .crp_title {
	display: block;
	overflow: visible;
	line-clamp: unset;
	-webkit-line-clamp: unset;
	-webkit-box-orient: unset;
	max-height: none;
}
    Thread Starter goldeneagle

    (@goldeneagle)

    3 months, 1 week ago

    Sorry to have been silent Ajay. I was expecting this forum to send me an email when there was an update but that didn’t seem to happen this time.
    I pasted your css into the “element style” panel when I right-click “inspect” on the related post titles, in both Edge and Chrome, and your revised css seems to solve the cropping problem.
    Yes, my dev site is live. There’s a link to a typical post that uses the plugin attached to the original post on this thread

    • This reply was modified 3 months, 1 week ago by goldeneagle.
    Thread Starter goldeneagle

    (@goldeneagle)

    3 months, 1 week ago

    Oh, and regarding css flexibility, I’ve now managed to override your css (at least on the private version of the site on my local hard disk) by putting things like

    .crp_related.crp-grid .crp_thumb {margin-bottom: 0 !important; }

    in my theme’s css file. Not quite sure why that didn’t work first time I tried. But anyway that means my earlier comment around forced use of /contextual-related-posts/css/grid.min.css?ver=4.2.0 was misguided. So it looks like if you add your grid-unclamping css into v4.2.1 then I can close off this thread.

    • This reply was modified 3 months, 1 week ago by goldeneagle.
    Plugin Author Ajay

    (@ajay)

    3 months, 1 week ago

    Sory I missed this, I wanted to check if you were able to resolve the issue with the overriding CSS code?

    Thread Starter goldeneagle

    (@goldeneagle)

    3 months, 1 week ago

    Hi Ajay.
    First, nothing I put in the “style” table of the CRP settings admin panel has any effect. Nothing changes when I hit “save changes” – I’d expect the grid css files in your css folder to update but they don’t.
    Second, if I paste the css I want into my own theme’s css files, then everything works OK. And I don’t seem to need !important to override your css. FYI, what I have pasted in my theme’s CSS is:

    .crp_related.crp-grid { // override standard plugin settings
    	--crp-border-radius: 0;
    }
    .crp_related.crp-grid .crp_title { // override standard plugin settings
    	font-size:smaller;
    	text-align:center;
    	padding: $spacer * 0.4 0; // fyi $spacer is a variable in my css
    	font-weight:400;
    	overflow: visible;
    	display: block;
    	line-clamp: unset;
    	-webkit-line-clamp: unset;
    	-webkit-box-orient: unset;
    	max-height: none;
    }

    So basically I’m happy, but you might want to have a look at the custom styling panel in your admin section to see if anyone else is unable to customise.
    Thanks for your help.

    Plugin Author Ajay

    (@ajay)

    3 months, 1 week ago

    @goldeneagle

    I’m not sure what is going on with the custom panel, as this should enqueue the scripts. I assume you don’t have any caching plugins enabled/cache cleared to check?

    The first way to check is to add the CSS code to the custom styles box. When you visit the frontend that shows the related posts and view the page source, you should see the code there. If it isn’t, I’ll need to investigate this more on a staging site.

    However, as you said, the good alternative (and I usually recommend this) is to put this into your theme’s CSS.

    With the migration to CSS variables, it is cleaner/better to implement vs the traditional CSS route of overriding the selectors with the flexibility to do more.

    Thread Starter goldeneagle

    (@goldeneagle)

    3 months, 1 week ago

    Hi Ajay. Yes I tried pasting the CSS code into the custom styles box and saved settings. There was no refresh of the css file (grid.css and grid.min.css – or any of the files in that directory) and no impact on the display or what I could see when using the “inspect” functions in my browser. I tried this on the dev site on my hard disk, with all other plugins deactivated, and which has no caching.

    But I’m going to close this thread now as I’ve got things working how I like. If you want to chat offline about the custom styles box you can contact me via my website https://londonkoreanlinks.net/ (contact form in the footer). Happy to help with debugging if you find that it’s a problem that is not unique to my set-up.

Viewing 10 replies - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.