Move sidebar to left for all pages

Hey,

That CSS should work:

@media (min-width: 992px) {
body .main.col-lg-9 {float:right;}
}

Just add to Theme Options> Advanced Settings, and you should be set.

-Kevin

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!

I’m not really sure what javascript you’re referring to. I don’t see if on the page.

With the free theme, there is no place to add custom scripts to your header or footer though.

You would have to use this plugin:
https://www.ads-software.com/plugins/header-and-footer-scripts/

Does that work for you?

-Kevin

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

Add the first script to your header once you get the plugin installed.

Then, the second bit will need to be placed within any text editor on your site that you want it to appear in.

Let me know how it works out for you.

-Kevni

(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?

Looks like I missed that last time I updated the documentation. That image is for premium. My apologies for the false information. I’ll update that page so it accurately reflects the settings.

-Kevin

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.)

I should be able to give you some CSS to fix this. Can you share a link to your home page so that I can see your current configuration?

-Kevin

@tracycoach Please do not offer anyone access to your site. Had Kevin taken you up on that offer he would risk getting banned in these forums. It’s that serious.

https://www.ads-software.com/support/guidelines/#the-bad-stuff

There are many ways for Kevin to get information needed and accessing the user’s site is not one of them. That’s going too far.

• Ask for a link to the https://pastebin.com/ log of the user’s web server error log.
• Ask the user to create and post a link to their phpinfo(); output.
• Ask the user to install the Health Check plugin and get the data that way.
• Walk the user through enabling WP_DEBUG and how to log that output to a file and how to share that file.
• Walk the user through basic troubleshooting steps such and disabling all other plugins, clear their cache and cookies and try again.
• Ask the user for the step-by-step on how they can reproduce the problem.

You get the idea.

Volunteer support is not easy. But these forums need to a safe place for all users, experienced or new. Accessing their system that way is a short cut that will get you into real trouble in these forums.

• This reply was modified 7 years ago by Jan Dembowski.

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.

You can send me some screenshots of your icon menu and point to the padding that you’d like to change.

Then I can give it my best shot. You can host screenshots here:
https://postimages.org/

-Kevin

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!

Try adding this CSS to Theme Options> Advanced Settings, and let me know if it works for you:

.home-iconmenu a:hover {
    background: transparent;
}

.home-iconmenu a {
    background: transparent;
}

-Kevin

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.