Forum Replies Created
-
Posts
-
Hi Mike,
So, how would you limit the character count, I tried the above but it didn’t change anything.
In my case I have a post with a long title, which is a child page – so the title runs over the breadcrumb trail.
It’d be super handy to be able to do this is the title… as opposed to this is the title in its full length if you see what i mean.
any suggestions for that sort of solution?
thanks,
Jasoncool, thanks Victoria – just one more question if i may, what template file should i be modifying please?
i should add, i’m happy to customise a template file as i’m using a child theme, just let me know which one to look for.
i should add, i’m happy to customise a template file as i’m using a child theme, just let me know which one to look for.
i should add, i’m happy to customise a template file as i’m using a child theme, just let me know which one to look for.
no, i’m wrong – didn’t work. it seems there’s a pseudo class which handles the display of the title, & the change of background color.
.grid-entry a:hover::before { content: attr(title); position: absolute; width: 100%; z-index: 1000; text-align: center; opacity: 1; font-size: 18px; color: #fff !important; transform: translateY(-50%); animation: avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275) !important; top: 50%; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; }this is showing the title on mobile – but not changing the background color. i’ve been trying unsuccessfully to sort this, can I use :active with :before ?
can’t seem to get this to work no matter what i do – help?i’ve even tried this
#top a .grid-image.avia-hover-fx:active {background:#1d2553!important;}
while i’m here should the rule go inside, or outside of a media query – given this is only mobile we’re targeting, i’d have thought inside – is that correct?hi Ismael,
almost…
here are the styles i’ve used to get the overlay (i added a custom class – .thoughts).thoughts span.image-overlay:hover {background:#1d2553;} .thoughts span.image-overlay-inside {display:none;} #top .thoughts h3 a {font-weight:normal;color:#ffffff;}if you hover over the image, only the top 30% triggers the background color, the bottom 70% triggers the title – but no background color change.
also, is there any way to center the title vertically better?
i works well with 2 lines, but not so great with just a single line. not a biggie, but i know the client will ask – so it’d be good to let them know it’s not simple to do so.
thanks heaps,
Jasonhi there,
bnewburger’s solution would do the trick, but his code throws me an error.
can someone please check it (i’m not a programmer) or, if there is a better solution out there now, can someone please let me know?
many thanks,
JasonOk, so I’ve tried various approaches mentioned here, but I’m still having no luck (I’m obviously an amateur). I’m going to see if a friend with a little more PHP knowledge can help me out. Guenni007 – if you’re still interested in taking a look I’ll happily give you admin access.
Apologies for the lack of response, I’ve been flat out on other projects. I’ll revisit today & report back.
Hi Victoria,
Yes, odd how the excerpt isn’t in the HTML, I’ll revisit that other thread & look a little closely at it.
Will report back.
Thanks,
JasonHi Victoria,
I’ve kind of already got this, as you can see above i’m not displaying anything below the grid image – but on top of it, on hover. i already have the title appearing, & have title & excerpt selected via the grid options, plus I have added an excerpt to the post, but it’s not displaying the excerpt – only the title.
here’s the css i’ve used (found on another thread here):/* Portfolio overlay with title - disable default animation */ #top .grid-entry a:hover .image-overlay .image-overlay-inside { animation:none; } /* Portfolio overlay with title - overlay */ #top .grid-entry .image-overlay .image-overlay-inside:before { content:''; position:absolute; background:#1d2553; /* blue */ height:100%; width:100%; border-radius:0; top:0; left:0; margin:0; } /* Portfolio overlay with title - remove default title below */ .grid-content .avia-arrow,#top .grid-entry .grid-content { display:none; } /* Portfolio overlay with title - display title on hover*/ .grid-entry a:hover:before { content:attr(title); position:absolute; width:100%; z-index:1000; text-align:center; opacity:1; font-size:18px; color:#fff!important; transform:translateY(-50%); animation:avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275)!important; top:50%; padding:0!important; display:flex!important; align-items:center; justify-content:center; } .avia_transform a:hover .image-overlay { opacity:1!important; }so i want the excerpt to appear below the title.
Hi Victoria, this just seems to hide part of the existing left/right arrows.
I want to completely remove them & have them as plain text links below the post – as explained above.
Can you help me with that?
