Discussion on Total - Responsive Multi-Purpose WordPress Theme

Discussion on Total - Responsive Multi-Purpose WordPress Theme

Cart 58,068 sales
Recently Updated
Well Documented

WPExplorer supports this item

Supported

22360 comments found.

Hi there! I have two questions regarding Rev Slider + mobile.

(1) in Total’s page settings, it’s possible to replace slider on mobile with a custom (alternate) image. When this setting is paired with “disable slider on mobile” in Revolution Slider settings, there is actually a gap where Rev slider disappears but the mobile alternate has not yet appeared… 961px-1023px.

(2) Is there a way to define two different sizes for this mobile alternate photo—or force it to pull a certain/custom thumbnail size on actual mobile sized screens? I am getting a low GTMetrix mobile score test, because it says the mobile alternate photo is not sized properly (down to 360px wide). Since this alternate photo first appears at 960px, I don’t want to upload a photo that is just mobile sized (360px wide) as it will be stretched and pixellated at the larger size.

Thanks so much for all you do!

P.S. for #1… ideally, the slider would still appear all the way down to 768px before the alternate photo swaps out. I don’t know if you have a relationship with Rev Slider due to the volume license, I have reached out to them to see WHY for them “Mobile” begins at 1024px instead of smaller actual mobile size such as 768px, or even 960px. But no word back yet.

P.S.S. for #1… forgot to mention, i know technically I could leave Rev Slider’s “disable on mobile” setting off and your script swaps out the slider for the alternate photo; however when i tested this combination on my mobile device, the page was actually still loading the slider & scripts, and then hiding it after the slider loaded.

Hi,

1. This is a bug in the last update which has been fixed for upcoming Total 4.6.2. Sorry for the troubles. Here is the fixed file – https://cl.ly/rC5G – which replaces the file currently in Total/assets/CSS and has the fix.

2. There isn’t a built-in way to define multiple sizes but it would be possible via a child theme by using the WordPress dynamic image sizes function and srcset tag or custom CSS. It’s a bit tricky though. Not to mention it won’t look as good on higher definition devices such as retina devices.

To be honest if your image is 960px it’s still small and as long as it’s an optimized jpeg it wouldn’t be much smaller in terms of kilobytes making it instead 360px – is your defined image optimized already?

Also you don’t want to be looking at “scores” pay closer attention to the waterfall. For example if that 1 image is giving you a bad score but it only takes 0.01 second to load there really isn’t any concern.

3. The setting in the Theme for “Disable on Mobile” is a theme setting not a Slider Revolution setting which is why they wouldn’t be able to help you or even know what it is. The way it works is simply via some CSS that shows/hides the slider and alternative images. You can change the breakpoint at which this happens with a little custom CSS if you want.

This setting was actually added in the original theme release because at the time Slider Revolution didn’t have their own settings but now they do. So you may want to instead use their mobile settings:

- AJ

Hi! So, I have decided that I want to use the Elementor page building plug-in rather than the Visual Composer. However, I just activated Elementor (Visual Composer is not and has never been activated) and when I went to edit the Homepage of my site I got this message from Elementor: “Sorry, the content area was not found in your page. You must call the_content function in the current template, in order for Elementor to work on this page.” I was unable to edit any of the pages of my site and kept getting the same message.

It says I need to insert this line into the page’s template: <?php the_content(); ?>

However, I am not exactly sure where to add this and I don’t want to break my site. I am using the Child Total theme that I downloaded when I purchased the theme.

Any help would be greatly appreciated. Thank you!

I think this issue could be larger than I realized as I have done some testing. I submitted an official ticket this morning and would really appreciate some help.

Hi,

This is AJ the theme developer. I see the ticket and you’ve actually added a few more replies to it. I will reply to you via the ticket in a bit.

- AJ

Blog grid padding in box- the title and excerpt inside the grid box is up next to the border. I cannot for the life of me figure out the .css code to add padding. You can see on my home page http://marriageworksforthebetter.org/ under Our Blogs when you scroll down the page a bit.

Hi,

The CSS is very easy. This is the code you’ll want to use:

body .vcex-blog-entry-details {
    padding: 20px 0 0;
    border: 0;
}

But you can also do this by editing the module as such: https://cl.ly/rCbb

- AJ

Possible to add an ID or CLASS to button shortcode? [vcex_button]SCHEDULE A DEMO[/vcex_button]

id=”xyz” in the button tag doesn’t work

Hi,

Yes, there is an ID and class parameter for the button module as you can see when editing it in the builder – https://cl.ly/rCQQ

If you are using a shortcode outside of the builder the correct parameters would be unique_id=”” or classes=””.

- AJ

This may not be possible, but you’ve certainly surprised me before, so I figure I might as well ask! ;) I use an external blog editor (MarsEdit) to post to my site at RepublicTigerSports.com. MarsEdit does not currently support the addition of captions to the featured image, which means I have to log in after posting and add that caption manually.

But MarsEdit does include support for custom fields, so I’m wondering if it might be possible to get around the limitation by creating a custom field in MarsEdit for the caption, which then displays using some sort of shortcode or something in the Total theme. My trouble is that I don’t really understand how these things work, so even though I spent about an hour playing around with different ideas, nothing that I tried worked. Any thoughts on whether this might be possible?

Aha! I think I got it. I believe you may have inadvertently had a mistake in the code you gave me to copy and paste. You had this above:

    return apply_filters( 'wpex_featured_image_caption', get_post_field( 'post_excerpt', get_post_thumbnail_id( $post_id ) ) );
}

On the video I noticed it was this:

    return apply_filters( 'wpex_featured_image_caption', get_post_field( 'post_excerpt', get_post_thumbnail_id( $post_id ) ), $post_id );
}

So I paused the video and hand-typed what I saw, and now it’s showing up!

Thank you so much. Whatever time I had to spend figuring this out will be paid off ten-fold within a few weeks, I’m sure. You’re awesome (and I’ll be buying another license from you for another site soon)!

Oh shoot.Sorry about that…good eyes! I must have typed it out here in the comments but then modified it when actually adding it to the theme.

I hope I didn’t waste too much of your time ;(

Have a nice weekend! If you need anything else let me know.

- AJ

It wasn’t a waste. Normally my attitude is “hey, I learned something from all this!” Unfortunately, I’m so clueless about code that I didn’t even learn anything, except that you are still super helpful. You have a nice weekend, too!

This is my accnt it is purchaseHi, I am using post masonry grid… I am trying to open the redirect items in a new window or tab… Is there a way to target these?

Hi,

Oh, thanks for logging in with the right account ;)

So, there isn’t a built-in way to do this but you can use javascript to target any link that isn’t pointing to your URL so those open in a new tab (target blank).

Here is an example of the code: https://wpexplorer-themes.com/total/snippets/open-entries-redirection-new-tab/

This code would be added to your child theme’s functions.php file. If you have any issues with that please let me know!

- AJ

Hi, I am using post masonry grid… I am trying to open the redirect items in a new window or tab… Is there a way to target these?

Hi,

There is no built-in way to do this, however, it’s very easy to do using a little javascript by targeting any items that have links to 3rd party urls.

In the future please be sure to log in with the correct account used to purchase the theme or if you haven’t yet please purchase the theme to access support, thanks!

- AJ

Hello, I wanna use your theme for a company granting loan and financial services…Can your theme support a third party Loan calculator Plugin? Thanks as I await your feedback.

Hi,

Thank you for your patience. Total is a well coded theme so ANY plugin should work with it, as long as the plugin is also well coded. Since you already own a license of the theme why not give it a test yourself to make sure? If you have any issues let me know what plugin you are using and I can test myself as well.

- AJ

Hello AJ,

I forgot to ask you if in a recent Total version (I’m on 4.5.1) you’ve added a specific class to the Toggle bar button, to style it differently in “when sticky” state.

(when I initially asked, you said “I could add a generic class to the main body tag, something like “header-is-sticky”, that requires javascript edits and re-minifying”)

Otherwise could you please tell me if and in which file I can add it myself ?

Michel

Hi Michel,

Did you try on the fresh installation with the latest version of the theme? I added this recently.

Hello AJ, I’ve just re-tried, Total version 4.6.1.

I send you via ticket the login for this “blank” site.

Michel

Looks like Adrian replied to you, if you are following up from a comment please let my staff know to assign the ticket to me since I know whats going on and he may not know of all the new features added since Total is so large and there is so much code.

I’ll assign it over to me and look.

- AJ

Hi AJ, This may be a simple question – or not… :) I’m using a background image on a number of pages – different for each page. They look fine on desktop, but on a mobile device they appear as W-A-Y too big and the effect is totally lost.

Is there a way to set a different image (or different size) for mobile devices on Total?

Thanks, as always,

Neil

Hi AJ, I was thinking exactly the same thing – how do I specify a solid colour for the background on a mobile? You are talking to a CSS newby here! :)

I would happily give you the URL, but it’s a dev site that is currently in the middle of changing servers.

Many thanks

You just have to use a simple media query – https://www.w3schools.com/css/css_rwd_mediaqueries.asp

So your custom CSS would look something like this:

@media only screen and (max-width: 750px) {
    body { background: #000 !important; }
}

This would make the background a solid black on any device under 750 pixels. Simply edit the 750 to the width you want the background to change at and the #000 to the hex color you want.

- AJ

Got it! Nice and easy…

Thanks again AJ.

Cheers

Hello AJ,

What would be the best way to style the bottom of the menu which currently lies flash and flush against the page content, to give it a shadow or some kind of accent that would “lift” it above the page content? right now, I am looking online for applying shows to he nav bar, but I know that is only part of the answer, because that will only apply a shadow to the straight line that is the bottom of the nav bar: what I really want to achieve is to SHAPE the bottom of the nav bar, and then apply a subtle show to that shape. Perhaps that is not possible and I have to use an image with transparency just underneath the nav bar. I don’t know.

Not sure what the nomenclature is for what I want to achieve. If it’s not clear, i will try to find an example somewhere or do a mock-up.

In he meantime, this is the way it looks at present http://therussiantrilogy.com/home/

Ok, I can’t find a good model but https://plutio.com/ gives you an idea of what I am after, albeit way to extreme. From what I can see online, I think what I am talking about is a non-rectangular header. I don’t know where the shadow comes in. What I see online involves CSS and SVGs. See https://css-tricks.com/creating-non-rectangular-headers/. Not sure if there is a more integrated way of doing it with Total. I guess the question can be extended to non-rectanglar cotent blocs. VC does not cover that as far as I can tell.

Hi,

So basically what you want is to add some sort of shape divider between the header and your content that merges with the menu. Well, for starter your menu is white, were you going to make it a custom color? This sort of thing would only really work well if your header and menu are a solid color.

And in order to add the shape you would need to find the SVG for the shape you want. Example – https://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/ – then you need to place the svg at the bottom of the header which is very easy with the theme hooks – http://wpexplorer-themes.com/total/docs/action-hooks/ – via a child theme.

Then apply the CSS to your site for the shape.

There are plugins you can use for WPBakery Page builder dividers such as this one – https://codecanyon.net/item/row-separators-for-visual-composer/12340266 – but if you want the divider under the header on ALL pages this isn’t what you want to use, if you want something added to every page it wouldn’t make sense to do it manually you would want to add it dynamically.

- AJ

Yes, that’s exactly what I need. It’s a simple decorative bar, black on white, so I think I can make it work with a white header. I’ll play with the hooks. I was not aware of this (yet another) feature.

Thanks a lot AJ.

Hi AJ,

I used one of the snippets to add microblog post type to blog index. Now those do appear at blog page which is https://gauravtiwari.org/blog/ but not at the homepage’s blog loop https://gauravtiwari.org/ which has page template Blog - Content Above.

Why so?

Thanks.

I can see that snippet only works for Posts pages. I guess I’ll have to edit the page template and add a custom post loop.

Hi,

Sorry but I don’t understand what snippet you are using and what you mean by “micro blog”. If you still need some help with this please let me know and explain so I can give you the right code, thanks!

- AJ

Hi AJ, Is there a way to have a sidebar widget reflow to the top of the content block on a mobile device? We are using the sidebar for secondary navigation.

https://www.absolutebikes.net/event/revenge-of-the-flagstaff-enduro/

Or have replace the hamburger menu on a specific page specific?

Thanks! Steph

Hi Steph,

Moving only a specific widget is complex because you would have to use javascript to relocate it. If you want to have the entire sidebar at the top on mobile it’s very easy – https://wpexplorer-themes.com/total/snippets/move-sidebar-up/

If you want to replace the mobile menu on a specific page that is easy to do via a little custom code. Total has a mobile menu alternative location – https://wpexplorer-themes.com/total/docs/create-custom-mobile-menu/ – which has an ID of “mobile_menu_alt”. You can hook into the WordPress filter – https://codex.wordpress.org/Plugin_API/Filter_Reference/wp_nav_menu_args – to display a specific menu on a specific page for this “mobile_menu_alt” menu location. This way you don’t have to define it in the backend if you only need it done on specific pages. Or use this plugin – https://wordpress.org/plugins/conditional-menus/

- AJ

How do you change the theme? When I switch from one theme to another, it keeps both. I want to uninstall one and test another demo.

Hi,

This is AJ the theme developer.

Total is just 1 theme but there are multiple “demos” you could import for a head start, these aren’t separate themes or skins they are full blown demos. If you already imported a demo and don’t want to use that one you would have to reset your installation and import a different demo.

All the different demos are just different content uploaded and different usage of the theme settings – https://wpexplorer-themes.com/total/docs/theme-options/ – the purpose of the demos are just to give you a jump start on your site if you like a specific look or content but it’s 100% optional. Anything you see in any demo can be accomplished with the standalone theme.

Does that make sense?

- AJ

Hi AJ, Yes, I understand now. I will reset it and use as one theme. Thank you.

Let me know if you have any other questions, issues or suggestions I’m here to help ;)

Hi AJ.
Let’s see if you can help me with a simple question: i have a link on one page which sends the user to an ID on another page. These links were inserted via the html element and they all work perfectly except for one thing – they do not offset the height of the header i am using.
I’ve used the “Hash Link Scroll Offset” plugin without any success. How can i achieve this? Here is a link to a working example: https://hcapital.cupido.pt/investees/solzaima/#hc-investees-top
I am using the links for each of the logos you can see under the header “Investees”.
Thanks!

Hi,

So your hash link scroll offset plugin won’t work because Total has a custom functionality built-in for these local scroll links so it runs after site load to prevent any issues. By default Total offsets the sticky header, such as this example: http://totaltheme.wpengine.com/dezignr/#pricing

When looking at your site though the offset is working correctly – https://cl.ly/r6R6

Maybe the issue you are seeing is caused by your browser size. If you notice when I make my browser window taller in the second portion of this video the header doesn’t reach the top of the local scrollTo row because there isn’t enough room to scroll as the whole site is visible on the browser (the browser can only scroll if the height of the browser permits it). Is that perhaps what you are noticing?

- AJ

Hi AJ. I am sorry about having wasted your time – you are right. During several rounds of changes, i accidentaly had the Scroll ID in a different position from what i hd in the beginning.
Once again, great job helping your clients out. Have a great day.

I have a main menu with one of the items being “products” ; if you hover over it a dropdown appears to further select. If you click op “products” the the products page opens: all ok. On a mobile device however the menu looks odd since you cannot hover… when you tap on “products” a submenu appears with again “products” & the other items. Isn’t there a tap & hold option or something or a different style to avoid this behavior ? Thank you!

Hi,

This is AJ the theme developer.

The way the mobile menu works is very standard and a lot of sites do this for menu items that have a link on the parent item. So when you tap/click the link it needs to open the dropdowns so you can view the options. If you add a function so you can visit the site on double tap then you would lose the ability to close the toggle so the only way to be able to access this link is by actually duplicating it below.

If you have a dropdown under products with the categories my recommendation would be to make the top item not have a link – https://wpexplorer-themes.com/total/docs/adding-non-clickable-menu-links/ – then instead have the last item in the dropdown say something like “view all” which is a bit more common. Anyone hovering over the products link will most likely choose a category that fits their needs and if not they can click on view all.

- AJ

AJ I have been thinking about this as my site development is slowly ending because it still disturbs me from a UI point of view. There is actually a very nice solution to it imho; on a mobile device the main products menu is shown as “products >” Whether I tap on “products” or on the ”>” arrow makes no difference right now; you expand the menu and the first thing that appears is again “Products” If however you could expand the menu only if a user taps on the ”>” arrow then we’re all set! Tapping on the main “products” in “products >” would then just open the page /products. What do you think?

Hello!

I cannot find the right combination to be able to show just the “footer bottom” without also showing the custom footer I built. In the Theme Panel > Footer settings, I have it set to use a custom footer page but checked the box to use “Footer Bottom” as well.

On normal pages it shows up correctly, with my custom footer on top and footer bottom below that.

However, on my landing page, I don’t want to show the custom footer, I only want to show the “footer bottom” (e.g. copyright & privacy links). Under page settings > Footer, if I set “Footer” to “disable” then nothing appears (even when i set “Footer bottom” to “enable”). If I set “Footer” to “enable” then the custom footer shows up no matter what other things i turn on/off.

Hi,

This is Aj the theme developer.

This is actually a tricky one because you are correct the option to disable the Footer is for the entire thing (including the bottom area) and the option to enable/disable the footer bottom area will only work when the footer itself is disabled as it’s a part of it.

If you are creating many landing pages there is a good solution. You could create a custom template and put it in your child theme – http://wpexplorer-themes.com/total/docs/child-theme/ – then with some code in your child theme’s functions.php file you can make it so your footer builder is removed whenever you use this template by hooking into the wpex_footer_builder_page_id filter and returning false whenever the template is selected.

I can help with that modification if you want. If you are going to create a lot of landing pages this will be easier to manage.

That said, I need to figure out a way for you to control this in the page settings (so thanks for the heads up). My initial thought is to add a new setting to enable/disable the custom footer if there is one selected in the footer builder panel. This way if you have the footer builder with the widgets and the footer bottom enabled you can control each independently. Thoughts?

Sorry for any confusion and thank you for bringing this to my attention!

- AJ

This is a one-off page so probably not worth a new template. I will just build a fake footer-bottom within the page and copy the info over.

Yes I think long-term, being able to control the footer bottom independently of whatever footer you are using (custom or widgets) would be ideal. Thanks so much!! You’re the best.

Instead of copying it over, you can also just use some code like this in your child theme:

add_filter( 'wpex_footer_builder_page_id', function( $id ) {
    if ( is_page( 'landing-page-slug-or-id' ) ) {
        $id = null;
    }
    return $id;
} );

add_filter( 'wpex_display_footer_widgets', function( $bool ) {
    if ( is_page( 'landing-page-slug-or-id' ) ) {
        $bool = false;
    }
    return $bool;
} );

If you already have a child theme this will be much quicker.

- AJ

Hello,

is there no pagination among the comments? This was very useful and solved some problems for me if I read the comments before. Does anyone know why the numbering’s gone?

Best regards

Hi,

Oh my, it looks like Envato may have broken their site! I am sending them a tweet right now and hopefully they will fix that ASAP.

If you ever need help though please feel free to ask ;)

- AJ

Hi,

how can I change the order of the category/tabs for staff members?

I want the order as here: http://bit.ly/2HmYdzv Is that possible?

Thanks in advance

Hi,

You can use a plugin like this to alter your category order – https://wordpress.org/plugins/taxonomy-terms-order/

Or you can use the Navigation Bar module to create your own custom filter like this – https://www.youtube.com/watch?v=ifhQ7Fb-0lE

- AJ

Hello AJ,

Thanks for your previous help all the issues that I have had on the way to create that website, however, I am still waiting for your reply to help me fix that error. I have emailed you all the details for login into my account.

As you can see your ticket is still marked high priority I was just waiting to hear back from you.

Thanks, AJ

I just replied to your last email

Hi,

I have not received a reply yet, I will give it some time incase there is some sort of delay when sending/receiving the email. I’m keeping the ticket set to “active” and high priority so I can manually check on it’s status.

- AJ

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey