Tracy

Hi Hannah, ahh – I’d tried that but there were no formatting options for displaying the grid; I see from your guide you have to save/publish whilst still editing in order for those to appear! Thank-you. That would work – but for one of my two Virtue sites, I’d need to display two out of three portfolio types. Because it’s a dropdown only allowing for selection of 1 type to display, is there a CSS change I can make to either select two types, or to show all except the third type? (Maybe the drop down could be changed to a check box, or an “all types except” field could be added?)

Thanks for your help!
Tracy

Hi Hannah, thanks for the quick response! I haven’t set up a portfolio grid, no – how/where do you do that? Under ‘Portfolio’ I just have the option to create or amend portfolio posts/items, and portfolio types to assign those to. The grid icon appears between the arrows on each portfolio post, without me having done anything further.

I’m just using default settings for permalinks – custom type of /%category%/%postname%/.

Thanks,
Tracy

Yes, that’s perfect! ?? Thanks so much! If I get asked to do another web build I’m going to buy a Kadence membership; your support is just terrific. I’ve a couple of small tweaks left to make but think I can figure those out with online tutorials. Have a great weekend!

Hi Kevin,

Yeah, that’s what I’d done, but the hover effect doesn’t work because it changes the background of the link, which is obscured by the text image itself. When the padding is on, you can see the background colour change on it, but not on the text image since it’s coloured anyway. (If I was using a true icon on a transparent background, I’d see the colour change – but I’ve got white text on different-coloured backgrounds, where those colours correspond to event categories.)

…So I think I would need to add an overlay effect with reduced opacity, rather than a background colour change – it seemed it should be simple so I did find a tutorial on adding overlays and tried to figure out the CSS myself, but it didn’t work. I wasn’t sure how to handle the “.home-iconmenu a” v “.home-iconmenu img”.

The site’s live now in any case! Which should help. ?? https://www.lltca.com. Thanks!

• This reply was modified 7 years ago by Tracy.

(Correction: The hover effect IS a background colour change, nothing to do with padding really. I understand now! ?? So if there’s a way to add an overlay to .home-iconmenu, that would give me what I need – but maybe that’s not a standard attribute or value or whatever?)

• This reply was modified 7 years ago by Tracy.

Oh, I didn’t think of the site itself being cached! D’oh. Am using w3 total cache – have deactivated it for now!

So, setting the padding to 0 also gets rid of the hover effect; the background colour change seems only to apply to that padding. I appreciate you’re working blind here! So here, I’m close to finished with the site anyway – am just trying to iron out a problem with an event plug-in. I can go live without the hover effect and then send you the link – hopefully tomorrow. Thanks so much for your patience, you’re brilliant! ??

(PS https://postimg.org/gallery/meoqtzkm/ )

That worked to get rid of the hover effect completely – but I’m hoping to keep the hover, and just have the overlay match the size of the image (so that a user – particularly lower-vision users – can see which image is being hovered over).

Bizarrely, the CSS change didn’t seem to do anything initially – I tried 3 browsers and 2 laptops after submitting the CSS change. Since it didn’t seem to work, I took a couple of new screenshots of the inspect element info, which show that each item’s image size is 229px x 229px, but the link size (where the “padding” is coming from) is 269px x 249px.

So I went back into Theme Options, deleted the first link just to see if removing the link fixed it, and then all of the icons changed to no hover overlay. I’m not sure if it was removing the link, or just re-saving that section of the Theme Options that made the CSS change actually apply! Will keep an eye on that for future changes.

In any case, the images of course need to link off to the respective pages, so would it work to hard-code the 229px x 229px for the link attribute of the CSS? So that the overlay still works but at the correct dimensions? Or is that bad practice..?

• This reply was modified 7 years ago by Tracy.

Here you go: https://postimg.org/gallery/2ek0havrq/

I initially thought it was just an icon overlay, so I resized my images to match it, thinking that would obscure the overlay and darken on hover as planned. But there was still some padding around the images after I tried that.

Thanks as always for your help!

Hi Jan, no problem – I was going to set up view-only access but will do something else then! Thank-you. Kevin, let me know what’s best.

Hi Stephen, I’m having the same issue – with both the category page and the tag page. All other pages style correctly (e.g. single event, calendar, venue, etc.), it’s only these two that have no styling. Should I open a new thread or add images in here? (The site isn’t published yet so I can’t share a link.) Thanks!

Edit/PS I have theme compatability mode enabled.

• This reply was modified 7 years ago by Tracy.

Ah no problem, thanks Kevin. In that case, is it possible to remove the padding from icon menu items? I’m trying to show a 2×3 grid of squares with text (different activity types available to the community centre’s users) and an icon menu would do it fine, except that the padding shows around the square as the overlay colour, on hover. (I tried a portfolio, but the carousel’s not as intuitive/usable as a grid would be, for some of the centre’s userbase.)

(Sorry for the delayed response – internet access issues this last week.)

Yes, that worked fine thank-you!

I’m hitting another issue with the theme – the documentation for this free version shows the image menu as an option for the home page layout (https://docs.kadencethemes.com/virtue-free/theme-options/home-layout/), but I don’t have that option. Has it been removed in later versions?

Sorry, I should have pasted the code. FB instructions are to:

“Step 2: Include the JavaScript SDK on your page once, ideally right after the opening body tag.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12&appId=116011101839311&autoLogAppEvents=1';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Step 3: Place this code wherever you want the plugin to appear on your page.

<div class="fb-page" data-href="https://www.facebook.com/BeatndrumSambaBand/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/BeatndrumSambaBand/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/BeatndrumSambaBand/">Beatndrum Samba Band</a></blockquote></div> ”

…but I’ll check out that plugin!

Cheers Kevin!

Tracy

Flip, that was quick! ?? Thanks a million!

If it’s okay to tag on another question (if not I can ask in another thread) – for adding a FB page plugin (https://developers.facebook.com/docs/plugins/page-plugin), do I need to use a child theme to add the JavaScript SDK code? I’m trying to avoid a child theme and stick with your built-in additional CSS functionality, because I’m handing this over to a staff member who’ll just be doing basic text updates and maintenance. (Maybe a child theme’s better for that very reason?)

Thanks again!