Hi James,

When you download your font and convert it for use with @font-face (web font – aka woff2 format) you should have a file for each font weight (unless it’s a variable font – but that’s not yet supported in Total).

So you would basically upload a file for each font weight you are going to use on your site with that font family. Example: https://a.cl.ly/xQukmkmy

If what you are confused about is that I used numerical values of the dropdown 400 is “normal”, 500 is “medium”, 600 is “semibold” and 700 is “bold” – I will update the select to have the names next to them so it’s less confusing.

- AJ

Thanks AJ, this is not a variable font, I just bought one, called “Regular”. So should I choose “normal” (400) or “medium” (600)?

Regular would be “normal (400).

Hi,

This is related to the fact that by default the masonry script tries to keep items in their correct “placement”, in your example there is a big white space because if the following image was added inside the white space it wouldn’t follow the correct “order” assignment. Here is a video to show you what I mean: https://a.cl.ly/E0uNBlnB – in the video I click on the different images in the HTML and they highlight in blue. As you can see the second image comes after in the HTML so the masonry script wants to show it after, if it were to be placed inside the white space it would technically display before it – so the order would be incorrect.

This issue can happens because the order of your images happens to leave a gap as you have 2 tall images on the sides.

If you don’t care where the images are placed you can add this snippet to your site: https://totalwptheme.com/docs/snippets/prevent-white-space-in-masonry-layouts-ignore-order/

Hope that makes sense…I will look at adding an option to the Image Grid element in a future update. In your case though a setting isn’t helpful because your portfolio posts are all manually created so it would take a long time to update them all (a snippet is best). But for cases where the site is using a dynamic template it would be very helpful as you can just edit the dynamic template to affect all posts – https://totalwptheme.com/docs/dynamic-templates/

- AJ

ps: I recreated your gallery and tested the snippet and confirmed it works, but if you still have issues let me know!

I added a new setting in upcoming Total 6.1, here is a video showing it in action: https://a.cl.ly/RBub2Pj7 – but again, for your site it may be best to use a snippet than manually editing every portfolio item.

Thank you for bringing this issue to my attention! I’m sure many will appreciate this new option

- AJ

Perfect, thank you !

Glad it was an easy fix, thank you for letting me know!

A follow-up question, I keep getting an error message that WooCommerce files are out of date in the theme. Is this something that should be part of the updates? :

Your theme (Total Child) contains outdated copies of some WooCommerce template files. These files may need updating to ensure they are compatible with the current version of WooCommerce. Suggestions to fix this:
   Update your theme to the latest version. If no update is available contact your theme author asking about compatibility with the current WooCommerce version.
   If you copied over a template file to change something, then you will need to copy the new version of the template and apply your changes again.

Here’s the detailed message:

Your theme has a woocommerce.php file, you will not be able to override the woocommerce/archive-product.php custom template since woocommerce.php has priority over archive-product.php. This is intended to prevent display issues. Overrides Total/woocommerce/archive-product.php, Total/woocommerce/checkout/form-checkout.php, Total/woocommerce/loop/loop-start.php, Total/woocommerce/loop/orderby.php version 3.6.0 is out of date. The core version is 9.7.0, Total/woocommerce/myaccount/my-account.php, Total/woocommerce/single-product/meta.php version 3.0.0 is out of date. The core version is 9.7.0, Total/woocommerce/single-product/rating.php, Total/woocommerce/single-product/tabs/tabs.php version 3.8.0 is out of date. The core version is 9.6.0, Total/woocommerce/single-product/title.php

Hi,

You can usually ignore these notices, if there is a crucial update for a WooCommerce template file that the theme is overriding, I will release the update immediately. Otherwise, I will patch it in the next official theme update as to not bother customers with frequent tiny updates. So, I always keep an eye on the WooCommerce file changes and update the theme accordingly.

Total 6.1 will be released today with the updates to these files: https://totalwptheme.com/docs/upcoming-update-changelog/

- AJ

Hi,

This is AJ the theme author.

If you are working with a page builder like WPBakery you can make any element in the theme sticky by simple adding the classname “wpex-sticky” to the element’s Extra classname field (General tab). You can learn more about the theme’s utility classes if you want here: https://totalwptheme.com/css-framework/position/

Make sure you have enabled the “Equal Height” option for the parent row, to ensure the column with the form is the same height as the column with the column next to it. This is important because CSS sticky is based on the parent container height.

If you want to make the default theme Sidebar widget area sticky, there is a setting under Appearance > Customize > Sidebar > Sticky Sidebar.

You can view an example on this demo: https://totalwpthemedemo.com/publisher/

Make sure your theme is up to date though – https://totalwptheme.com/docs/changelog/ – because Total 6.0 has some big improvements for the wpex-sticky class to ensure it automatically offsets the sticky header/topbar/menu.

- AJ

Hi,

This element was originally created when the theme was released over a decade ago – back then, most newsletter forms didn’t have their own form builders or embed code.

These days, pretty much every newsletter service offers it’s own form builder / embed code you can copy and paste into your website. I would highly recommend using your newsletter’s method for inserting their form onto your site. If your newsletter service offers this ability you really should use it as that’s how the newsletter is intended to work.

But to answer your question, the form will work with any service that supports creating a custom form via an action URL and/or hidden fields. You would need to look at the newsletter’s docs to see if it’s supported.

It would be possible for me to update the newsletter form element to work differently by adding API integration for the various newsletter services. But that would require extra setting panels, saving sensitive data on your server, extra scripts…etc. It’s way more efficient and secure to use the embedded code provided by your newsletter service.

- AJ

Hi,

There is no built-in method to do exactly what you want. As you can imagine, it would be very complicated to have some sort of built-in option for this. This would require a method of assigning a column width to each post (probably via a custom field). Which is quite a lot of bloat, plus it would be very complicated to support responsively. This would require quite a lot of extra settings and functionality that is not needed by most.

Now, if you are only displaying images you can use the Justified Image grid via the Image Grid element like the last example here: https://totalwptheme.com/elements/image-grid/ – this is done via advanced javascript that is able to look at all the image sizes and place them in such a way (something not possible to do with text based cards).

Or, if you are only displaying a hand full of posts like your example you can use the Post Cards “Featured” functionality to create some fun layouts with a larger item on the side. Example: https://a.cl.ly/wbuOOwWd – you could also insert multiple grids and use the “offset” field in the Query tab to offset the posts displayed in the previous grid.

And of course you can target the Post Cards with custom CSS to modify the column widths to your exact liking and do what you want. This is very easy using nth-child: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

- AJ

ok, AJ. Many thanks!

You can use the {{card_icon}} dynamic variable – https://totalwptheme.com/docs/dynamic-variables/

Via the Icon element like such: https://a.cl.ly/JruQQ41x

Hi,

All you need to do is add link_target=”_blank” to the shortcode like such:

[vcex_social_links link_target="_blank" ....etc

Couple things though:

• You can also create a template for your aside content for greater control as noted here: https://totalwptheme.com/docs/header-aside/ – this way you can easily edit the aside content via the page builder.

• It’s actually recommended to never force links to open in a new tab for accessibility reasons. This is especially important if you are in Europe (I see the flag of Spain under to your user avatar) and your website needs to comply with the EAA. So I don’t recommend ever setting links to open in a new tab. You should allow the user to choose how links open.

- AJ

Thanks so much!!!!

Hi,

The upcoming 6.1 update includes a new Terms Card element – https://totalwptheme.com/docs/upcoming-update-changelog/ – I actually mentioned this to you in another comment thread.

So to display the term(s) image inside of a custom card you would use the new Terms Card element set to the “Image” style and the query set to display terms from the current post. Here is a sample video: https://a.cl.ly/mXuNNpPP

This new Term Cards element will be useful for so many things. I believe I mentioned to you in a previous reply how you could use it with ACF to display custom data via custom term cards.

No need to bloat up the Post Terms element with extra settings when the new Term Cards can already do it and more

- AJ

ps: The update is technically done by need to update my live site/demos and fully test before releasing the official version. If you want though email me at wpexplorer [at] gmail dot com and I can send the beta version for you to try out before the official release so you can access the new functions.

Yeah you mentioned it! Didn’t realize it would work for that too No need to hurry I can wait for the official release since it was not an actual requirement, but a thought that crossed my mind.

Ok, i’m just a dummy – basically I was allowing the old mime type name but newer apps that convert fonts use the newer mime type. So, my code was just outdated. Either way I’ve fixed it for the next update. Thank you again for reporting the issue.

Thank you SO MUCH for the incredible help! I’ll install that plugin and let you know if I have any questions. And I’ll keep an eye out for the next theme update as well. And so sorry about the wrong account, I bounce back and forth between a couple accounts for clients and I was not paying close enough attention. Thank you for the heads up, I’ll make sure I’m in the right account next time.

Thanks again for the help!

No worries! Let me know if you have any issues with the plugin, thank you again for reporting the bug and the official update will be available shortly.

Hi Bob,

It’s been a while, I hope you are doing well.

This issue has already been reported and fixed for the upcoming update – https://totalwptheme.com/docs/upcoming-update-changelog/

I plan to release 6.1 shortly but if you want the fix now you can add this CSS to your site:

.wpex-woocommerce-product-qty-btn-wrapper:has(input.qty[type=hidden]) .quantity { display: none; }

- AJ

Forgot to mention – you do need to enable the functionality in the Theme Panel. It’s disabled by default because Dark Mode functions require added scripts and functionality most sites won’t require. I’m almost done with the docs so if you search for dark mode in the docs in a bit you should be able to find it.

Thanks! This is very helpful.

Here is the new docs for anyone looking: https://totalwptheme.com/docs/dark-mode/

Hi Alex,

This is Aj the theme author.

I had a look and I can see that my support agent replied to you 4 days ago and never heard back. Here is a screenshot from the HelpScout system: https://a.cl.ly/ApuoqL1g

I checked the SPAM folder and didn’t see any replies in there either. If you replied to the email, I’m not sure what may have happened.

Regarding your issue, because your site redirects to a landing page that doesn’t have a menu I can’t tell how the shop icon is being added on mobile, but there are 2 main things you can check:

- The header aside content: https://totalwptheme.com/docs/header-aside/ - The mobile icons menu: https://totalwptheme.com/docs/creating-mobile-icons-menu/

If you had imported a demo to your site and let me know which demo that is, I can let you know exactly how it was added and how to remove it.

In the future if you don’t hear back from support within 48 hours (weekend excluded) please leave a comment here as you did and I will. look into the issue asap. I’ve had customers in the past that open tickets and when we reply our emails bounce back so they think we aren’t responding but it’s actually an issue with their email provider. And they got pretty upset but there was no way for us to get in touch with them to let them know of the issue.

The comments here are great way to get in touch with me directly (I am the only one that replies to comments) to followup with a ticket or anything else. Also for simple issues you can always just ask me here, no need to open a ticket.

- AJ

ps: I will update the instructions for sharing logins, because there is no need to use our email address. You can always just use a dummy email like support@your-site.com or one of your own emails. Since we only need to log in a single time to check things out, there is no need to use a real email.

Not sure how GenerateBlocks would relate to anything as it’s a completely different builder, functionality and I assume you mean you are just adding the SVG as an image and then modifying the height of the SVG – which I’m guessing generatePress inserts using a specific method so it has control over it completely.

Can you share a URL I can see what’s going on? Thanks.

When you define a height it get’s added as inline CSS like this – https://a.cl.ly/xQukX8G8 – if the height isn’t being added, then there is a bug somewhere. If the height is being added and your SVG looks the same, then most likely your SVG Is coded in a way where changing the height of the SVG doesn’t do anything (perhaps the height is tied to the path element instead).

- AJ

Working now. I downloaded a couple of the SVGs included with the theme and made sure the syntax of the one I uploaded matched exactly. Height and colour can both be set fine.

Awesome!

Hi,

The filters look horizontal to me: https://a.cl.ly/yAugzjmk (I checked in all browsers). Did you already fix the issue?

If you are getting a spinning wheel in the backend, it could just be a caching issue when updating WPBakery – first try clearing your browser cache and see if that fixes things. If not, let me know. I don’t have that issue and no one else has reported it, so there could be a 3rd party conflict with a plugin or a server issue which I can help troubleshoot.

- AJ

Oh I am SO sorry AJ! It is indeed now totally fine! School girl error not to clear my cache after updating the theme! Apologies!

Glad it was an easy fix

Hi,

I tested like this: https://a.cl.ly/geuD7ZyJ – and I have the same issue. I will fix this in the upcoming 6.1 update.

What are you trying to do exactly though?

I’m looking to add a new option to the Button for the upcoming 6.1 update that will allow opening the post content in the same way as you would using the Post Cards modal setting: https://a.cl.ly/12udl5RQ

It’s a bit complicated, but I’ve had a few requests so I will try and add it in the next update. The benefit to this method is that it loads the post inline (not an iFrame) which is much better and doesn’t require th3 3rd party lightbox script so it keeps the page faster as well.

Hoping to release the update in the next 1-2 days if nothing comes up – I’ve been struggling trying to find a way to implement the theme’s color palette into Elementor for people that use Elementor, but that plugin is coded doesn’t have adequate filters so it’s a real pain to come up with a solution that will never break (I don’t know what the plugin developers may change in the future).

- AJ

I am using cards to display product title on the left and add to cart on the right.

I can of course use the ‘Link type – modal’ for the card, but that means the add to cart won’t work.

I initially want the user to be able to click the title and the modal appears with product description (they never need to go to single-product.

When I could get that working I tried a ‘more info button’ with the {{permalink}}.

—

You just reminded me about colours. there is a duplicate background colour option in row css settings. Can the WPB one be killed?

Hi,

• Correct, you can’t use the Link Type modal because than it adds the link around the whole element. I’ve fixed the iFrame {{permalink}} issue for the next update. But this isn’t ideal for what you want because it will open the whole site in the iFrame.

Total has an advanced modal functionality built-in that you may want to use instead: https://totalwptheme.com/docs/modal-dialogs-html/

I just added a section on how to use it inside custom cards.

Let me know if you want to try it out and have any issues or questions.

• The WPB one can be hidden, but I can’t personally do that inside the theme since customers may have previously used it. I wrote a snippet you can use though: https://totalwptheme.com/docs/snippets/hide-wpbakery-extra-color-options/

Unfortunately, I tried modifying the WPBakery color to use my color picker but there are some restrictions in WPBakery that make it not possible. And because customers want to use their color palette colors for rows/columns/etc I decided it’s best to have two fields (it’s more just annoying to see the duplicate one than anything).

Now that I think of it, I may be able to use some custom javascript to check if the WPB color fields are empty and if so move my fields into the position where the WPB fields are and essentially “override” it. This will maintain the default design flow. However, it may cause issues with how WPB saves the settings. It’s going to take 2-3 hours just to code the test though – so I’ve added to my todo list for later as I want to get the 6.1 update out sap.

- AJ

ps: Thank you for the updated rating!

Hi,

I’m not quite sure what you mean, can you share the URL?

This will require some custom javascript so any time you click on a menu item it adds/removes the current menu-item from the menu.

That said, the theme by default will highlight menu items automatically when it’s scrolled to the section, such as this sample demo – https://totalwpthemedemo.com/freelancer/#home-team – it sounds like perhaps this function is disabled on your site (Customize > General Theme Options > Local Scroll Links > Highlight) or perhaps it doesn’t work correctly with tabs.

- AJ

ps: This sounds like an accessibility nightmare, I may want to recommend a different way to set things up if that’s ok. Because, local scroll is already not great for people with disabilities and combining that with tabs is even worse.

Hi AJ, here is the link: https://tinyurl.com/2kptu4vm How would you create a main navigation where you can insert tab links from a content page?

Are you saying you want these dropdown menu items to be highlighted when you got to a local section? – https://a.cl.ly/YEu6boZ5 – if so, I don’t see any point in doing that because it’s a dropdown menu so it’s not going to be open when the user goes to the page. Of course, it’s possible with custom javascript but not something I would ever add to the theme by default.

Honestly, I would highly recommend changing how the site works so they aren’t tabs. The current setup isn’t ideal for many reasons. I decided to write a little article on the docs if interested explaining why: https://totalwptheme.com/docs/why-creating-separate-pages-is-superior-to-tabs/

Especially if you are going to link to the tabs via a menu, you should really consider making separate pages instead of tabs. Generally tabs should never be “linked” to. Tabs should be used in situations where you need extra data for the current page but it’s doesn’t need to be visible always (for example a product that has extra info that not everyone is interested in).

Personally, I would recommend switching away from the tabs and creating a page for each section then adding a standard menu to the side that goes to each page. You could even create a dynamic template for these pages so that they share the same layout and it can be easily modified – https://totalwptheme.com/docs/dynamic-templates/ – if you use pages you would need to select the template on each page. But you could also create a custom post type for these – https://totalwptheme.com/docs/adding-custom-post-types/ – so you can assign the template to all of them via the post type settings and have them separate from standard pages for easier client usage.

All that said, I don’t speak the language so I’m not sure what this page even is about, but if you want to continue using tabs I would highly recommend not linking to tabs from the main menu as that’s very confusing from a user perspective and also bad for accessibility. Which is especially important with the upcoming new EAA regulations.

Sorry I don’t understand the question about inserting tab links from a content page.

Are you asking for how would you create a menu that when you click on the menu instead of going to a page it shows/hides content? Similar to this: https://totalwptheme.com/docs/toggle-elements/ – if so, you could technically add a flex container and a bunch of buttons setup to toggle the content on the page). Here is an example on another customer site: https://genedrivenetwork.org/resources/ (click the blue buttons after the header)

- AJ

Hi James,

I’m not sure why WPBakery doesn’t allow CSS animations on the Inner Rows, but instead of an inner row for a design like this it makes more sense anyway to use a Section and then add a row inside the section. This will allow you to add the animation as well because it will be a row inside a section so it won’t be an “inner row”.

- AJ

Hi,

Please see the docs here: https://totalwptheme.com/docs/highlight-shortcode/

You can also add solid underlines if you prefer like this: https://totalwptheme.com/docs/underline-shortcode/

- AJ