Hi,

The Search Results isn’t a real page so I don’t understand where you added the slider exactly. Can you show me the page with the slider?

- AJ

Sure, you’ll see them here: http://www.trinityproducts.com/?s=pipe

Hi,

WOW. First of all great work on the site, it looks very nice. I should hire you to make me demos if you are available and not too expensive Let me know!

Regarding the image carousel…I do see the issue on your site but I can’t replicate it locally. It looks like the “stage” is being set too small – https://cl.ly/qHbd – so the wrapper around the carousel images is being compressed.

Can you check your module and see if this setting (auto width) has been enabled – https://cl.ly/qGzv – and if so, disable to test? Thanks!

- AJ

Hi AJ. Thanks for the quick reply and compliments, but I cannot take credit for design of the site…I just build what the designers give me. Also, sorry for the double posting. Not sure how that happened.

After reading your comment, tried disabling the auto width and it was, indeed the culprit. Unfortunately, I need that functionality, so I did some additional research and found that the incorrect stage size is a known problem with Owl Carousel, as discussed here: https://github.com/OwlCarousel2/OwlCarousel2/issues/1139.

It’s too late to try any of these fixes tonight, but I may give some of the suggestions a try tomorrow. Do any look particularly promising to you? Thanks, Pete

Quick follow-up…the link absorbed the period at the end, so you get a 404 error. Link should be https://github.com/OwlCarousel2/OwlCarousel2/issues/1139

7) I cant find strings of next and prev addon in Wpml string.

Hi,

First of all the site you are working on looks fantastic! Wow, nice work

1. The issue is that whatsapp by default isn’t in the allowed protocols for the WordPress esc_url function which sanitizes URL’s prior to output for security reasons. I added some code for the next update but you can add this to your child theme for the meantime:

add_filter( 'kses_allowed_protocols' , function( $protocols ) {
    $protocols[] = 'whatsapp';
    return $protocols;
} );

2. If you want to add related items I actually added a new function a few versions ago so you can do it like this: https://cl.ly/qIWO

This will pull items from the same category as the current post so they are truly related. And it will exclude the current post as well.

3. This happens if your parent menu has a custom link. If there is a custom link it needs to get added to the dropdown so you can click on it. I could add a function to exclude items with nav-no-click but it’s best if this link is a simple # symbol like this – https://wpexplorer-themes.com/total/docs/adding-non-clickable-menu-links/ – for accessibility and SEO.

4. There shouldn’t be any spacing under the footer because the fixed vertical share should be here. I just tested and don’t see the issue: https://cl.ly/qHP5

5. The only way would be to stretch the image so it may not look very good, because it would be stretched vertically. And it will require quite a bit of custom CSS to place the image absolutely and set to width 100% and height 100% and then have an overflow hidden for the media wrapper. Since the only way to make the height 100% is via absolute positioning (or making the item a table) Example:

@media only screen and (min-width: 768px) {
.single .entries.left-thumbs .entry {
    position: relative;
}

.single .entries.left-thumbs .entry .entry-media {
    position: absolute;
    overflow: hidden;
    height: 100%;
    top: 0;
    left: 0;
}

.single .entries.left-thumbs .entry .entry-media img {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100%;
}
}

You would need to test this on all browsers though to see if it works well.

6. Pagination should work on the homepage but have you added an offset? Offsets break pagination in WordPress unfortunately – https://cl.ly/qHRY

7. Thanks for the heads up, here is the updated wpml-config.xml file - https://cl.ly/qHKd – you can replace in the main Total folder via FTP it will be updated in the next Total version as well.

Your site looks sooo good, very impressed. Nice work!

- AJ

Thanks for your beautiful review. 5th answer is very great and I also add this CSS and now look well.

.single .entries.left-thumbs .entry .entry-details {
    min-height: 300px;
}

at 4th section I enable social share for pages. Now I disable, and you see this issue.
All solution answers are great. Thank you very much

Thanks for the heads up on the social. Can you try updating this file – https://cl.ly/qJoV – under Total/framework/wp-filters/ – it should fix the problem.

- AJ

Oh actually this file won’t work. I need to create a new function, give me a few minutes so I can send you another required file to update.

No problem man. And sorry I spend your time. My related posts are few by category. Can I display all category posts in advanced query with related=1

Ok…it’s going to take quite a few changes to multiple files. Can you open a private ticket and request it be sent to AJ so I can send you the updated beta to test? Thanks!

- AJ

I open new ticket now.

Hi Pete,

Actually I’m adding a whole font manager system to Total which should be available at the latest by Total 5 but hopefully sooner.

In terms of font weights you can’t just write new CSS to add new font weights, if you want to add new font weights you need to actually design new fonts with those weights. When I google National 2 font it seems like it does have many other font weights available – https://klim.co.nz/retail-fonts/national-2/ – I’m not sure where you purchased your font but maybe you need to request from the seller the other sizes so you can include them.

The CSS is very simple. See an example from a Google font: http://fonts.googleapis.com/css?family=Lato:400,900&subset=latin

Have you tried using a generator? https://transfonter.org/

- AJ

Hello AJ,

I have the weights I want, web fonts bought direct from Klim (those listed above) I just didn’t understand how they should be written in the CSS.

I tried https://transfonter.org and I see it spits out the CSS which is ideal – thank you! But I don’t understand why I need to convert my fonts when they are already .woff .woff2 .eot ? I’m guessing I can use the .woff .woff2 .eot as supplied by the type foundry but also upload the .ttf .svg created by the generator?

As always thanks for your fantastic support,

Pete

Hi Pete,

I haven’t actually tested that site but I sent it to you since it was ranking #1 on Google. You are correct the ttf isn’t required but can be added for very old devices/browsers (which maybe 0.6% of people use) so In my opinion woff should be enough. Just make sure to double check in common browsers when you are done adding the font to make sure it looks good.

If you are using a Custom Font for your whole site I would also recommend going to the main Theme Panel and enable the setting “Remove Google Fonts” to slim things down.

- AJ

FANTASTIC!!! All working great – a custom font first for me! Thanks so much AJ

The transfonter.org site did spit about a bunch of duplicate fonts but they were easily weeded out and the CSS is working.

Pete

Spoke too soon! It’s working in Chrome on my mac but neither Android or iOS mobile browsers?! Something obvious I may have missed? http://uk606.directrouter.com/~oyykjqin/

I am seeing a coming soon page on this link so I can’t properly inspect the site. Can you disable that or setup a test page where the coming soon is disabled? (you can exclude pages in the Total Theme Panel > Under Construction function)

- AJ

Thanks AJ – that’s puzzling. I don’t have an Under Construction page and I can’t see one from computers/devices here – to make sure I have disabled Theme Panel > Features > Under Construction.

At the moment I only have a single page with logo and short line of text so I can test the custom font: http://uk606.directrouter.com/~oyykjqin/

I don’t suppose you can magically see it now?!

Pete

I seem to have fixed the problem! I don’t know how, but I re-wrote the CSS as per your instructions (https://wpexplorer-themes.com/total/docs/add-custom-fonts) and cleared the cache and all seems fine. I can see no difference between what I had before and after!! Thanks for your time anyway AJ Pete

Hi Pete,

I hope you had a nice weekend! Sorry for the confusion, I must have thought the single page was a coming soon page, my bad!

I’m glad it’s working now. And I double checked and it is working beautifully now – https://cl.ly/qIPQ – nice work

- AJ

No problem AJ – thanks very much for checking it again.

Can you see why the sticky header isn’t shrinking in mobile view here can you? http://uk606.directrouter.com/~oyykjqin/home-02/ I have ‘mobile support’ ticked in the customiser.

And is it possible to style the text for Author and Business in testimonials when using the Testimonial Slider?

Thanks Pete

• Header: That is very weird, I uploaded your logo to my test site and tested and it works perfectly for me. Can you go to Theme Panel > Import Export and copy that into a gist – https://gist.github.com/ – so I can test with your exact site settings? Thanks!

My test: https://cl.ly/qIOF

• Yes you can style these a bit via CSS, how do you want to style them?

Very nice and clean site, great work dude!

- Aj

Thanks AJ – and thanks for the encouragement!

* Header Sorry if I’ve not done this right – not used it before – is this what you need: https://gist.github.com/anonymous/4b38f023d678106b510414f29e9c9d06

I’ve only just discovered the Retina image options in the theme and so have been trying to get that working (this site and one other) – perhaps I’ve done something wrong there?

• Testimonial slider (Author and Business) I’d like to align them left and set the font, size and colour

Can I also style the Dot Navigation?

Pete

AJ

*Header – don”t worry about this – in Customiser > Header > Logo I had ‘Apply height’ checked – unchecking that option now shrinks the header on mobile.

Thanks Pete

Hello AJ – can you guide me on that question about styling the author and business labels in the testimonials slider?

Is it also easy to style the ‘related posts’ title in the blog and remove the dividing line that sits next to it?

Thank you Pete

Hello AJ – hope you’re having a good week? I have another question to ask so I’ve consolidated all 3 here:

http://uk606.directrouter.com/~oyykjqin Testimonial slider – how can I style the Author and Business labels? I want to align them left and set the font, size and colour?

Header menu (full and mobile burger) – can I set the distance from the top of page to the top of the menu? I don’t want it to sit in the middle (vertically) of the header space, I want to set it a fixed distance from the top of the screen eg ~20px.

http://uk606.directrouter.com/~oyykjqin/hello-world-2-2-2/ Related posts – Can I style the ‘related posts’ title (font, size, colour) in the blog, and remove the dividing line that sits next to it?

Thanks very much Pete

Hey Pete,

I’m having a good week (working on finishing up a new theme kit framework to give away for free so other people can make better themes). I hope you are having a nice week as well !

Regarding your questions:

1. The CSS for the testimonials slider would be something like this:

body .vcex-testimonials-fullslider-author {
    text-align: left;
    color: #000;
    font-size: 18px !important;
}

2. You just need some CSS to change the default position which by default is a top value of 50% and a negative margin to offset. Example:

body.wpex-mobile-toggle-menu-icon_buttons #mobile-menu {
   top: 20px !important;
   margin: 0 !important;
}

3. You can use CSS to target just this item, however, this is a theme “heading” so you have options to customize them globally at Customize > Typography > Theme Heading (to change the typography) and Customize > General > Theme Heading to modify the default style (like removing the line).

Note: This is a somewhat hidden gem..if you want to create a custom layout for your blog posts you can like this – https://www.youtube.com/watch?v=eGYuBjqkj8Q – and to insert a related section you can use any Total grid module or carousel and use an advanced query like this – https://wpexplorer-themes.com/total/docs/related-items-dynamic-template/

Just a heads up, since some customers do like creating their custom blog post design like this

- AJ

Free theme kit framework sounds amazing AJ! My week’s not bad thanks but I’m trying to finish two Total sites before Mon!!

Thanks so much for your further support – I’m clearly being an idiot with implementing the CSS. I’ve put both examples in my child theme styles.css with no result and so I assume I’m putting them in the wrong place?!

Pete

Hi Pete,

I don’t see the code in the child theme – http://uk606.directrouter.com/~oyykjqin/wp-content/themes/total-child-theme/style.css?ver=4.6.1 – but looks like you added it to the theme panel instead?

When adding to the child theme if it’s not working it could just be cache related if you are using a caching plugin on the site or if you need to clear the browser cache.

- AJ

ps: Are these the only 2 sites you’ve purchased Total for or have you purchased other licenses before? The reason I ask is I like to be extra nice to my repeat customers and I have an exclusive slack group for customers with over 50 licenses.

Thanks AJ – Yes I tried them in the child theme first and got no result so tried via the them panel.

Have put the code back in the child theme and I see that the testimonial slider is now working – thanks – but not the menu in the header?

Thanks for the theme heading instruction by the way – that’s great.

And yes I’m only a new Total fan – 2 licenses so far and 2 more coming soon – I’ll be sure to let you know when I get 50+!

Pete

HI Pete,

It’s showing up and working for me – https://cl.ly/qN20 – just try clearing your browser cache because your stylesheet version number hasn’t changed you are probably just looking at a cached version of the file.

If you are working in Chrome you can also open the developer tools and disable cache under the Network tab so whenever you make changes to the child theme simply open the dev tools and refresh the page – https://cl.ly/qLQV

Or you can add version numbers to your child theme so whenever you change it you can edit the version number at the top and the browser will load the new one – https://wpexplorer-themes.com/total/snippets/child-theme-style-version/

- AJ

Thanks AJ – I’m only a new fan of Total, 2 licenses in and 2 to come! I’ll be sure to let you know when I’m 50+!

I tried the CSS in the child theme first but with no result so moved it to the theme panel. I’ve now put it back in the child theme and the testimonial slider is working – thanks – but the header menu positioning is not?

Thanks also for your theme heading instruction, that’s perfect.

Pete

- so child theme styles.css is where I make all my CSS changes? Eg that’s where I should spec my custom font fallback stack?

Thanks for the dev tools tips AJ – very useful.

I’ve not been clear – sorry – I see now that the mobile menu is working (20px from top) but I also want to do the same for the full menu – what do I add to that code to do that?

Thank you

Hi there,

You won’t be able to get this array working via the module fields because it’s too complex. You would need to use custom code like this – https://wpexplorer-themes.com/total/snippets/total-grid-query-filter/

So here are the steps:

1. Make sure you have a child theme on the site – http://wpexplorer-themes.com/total/docs/child-theme/

2. Add custom ID to your carousel module – https://cl.ly/qG2M (could be any unique name such as homepage-events)

3. Add this code to your child theme’s functions.php file:

add_filter( 'vcex_grid_query', function myprefix_vcex_grid_query( $args, $atts ) {

    if ( isset( $atts['unique_id'] ) && 'example-unique-id' == $atts ) {

        // Add your custom args here

    }

    return $args;

}, 10, 2 );

4. Add your custom arguments where it says ”// Add your custom args here” either by adding custom parameters to the $args array or returning your own custom args.

- AJ

Thanks for the response AJ!

I get this an error when I try to use either filter(https://wpexplorer-themes.com/total/snippets/total-grid-query-filter/):

Parse error: syntax error, unexpected ‘myprefix_vcex_grid_query’ (T_STRING), expecting ‘(‘

I’m not sure what is going on with that.

So I reworked it to look like this:

function myprefix_vcex_grid_query($args, $atts) {
    if ( isset( $atts['unique-id'] ) && 'homepage-events' == $atts ) {
    // Add your custom args here
    $args = array(
    'post_type'=>array(tribe_events)
                );
    }
    return $args;
}
add_filter( 'vcex_grid_query', 'myprefix_vcex_grid_query', 10, 2 );

This doesn’t throw an error but it also won’t target the module with the unique ID set to ‘homepage-events’.

This filter works and returns the tribe events but it overwrites all of the grids/carousels:

function myprefix_vcex_grid_query($args, $atts) {

    // Add your custom args here
    $args = array(
    'post_type'=>array(tribe_events)
                );
    return $args;
}
add_filter( 'vcex_grid_query', 'myprefix_vcex_grid_query', 10, 2 );

So I’m not sure what is wrong with this line:

if ( isset( $atts['unique-id'] ) && 'homepage-events' == $atts ) {

Thanks for the help.