... Maybe I am wrong, but I think Custom CSS isn’t suppose to show the site css code but a blank editor to write my own custom CSS?

Hi,

• The theme used a Theme Panel about 3 years ago but we changed it to the Customizer which is much better and doesn’t add extra bloat and customers were requesting the switch on a daily basis. Most people prefer the Customizer.

Using a custom panel actually causes more slowness on the actual site due to loading extra functionality that is already available in core WP.

If the Customizer is slow, you may want to consider switching to a better hosting solution or try disabling plugins to see if things are slowing you down. Where is your site hosted?

Also if you are using the customizer and you have a very large homepage, just create a new empty page call it whatever you want and use that to open the customizer – https://cl.ly/po5A (this test site is actually on crappy hosting so it is a bit slow, but I can show you a video if you want on our WPEngine host showing how fast the customizer is).

• The header is transparent by default, unless you add a custom color. So I’m not sure what you mean.

• I don’t have any articles showing how to add buttons to the menu using a shortcode, can you share the link? If you want a button in your main menu this is the easiest way – https://wpexplorer-themes.com/total/docs/header-one-menu-button/

• Yes the Custom CSS panel should be blank by default like this – https://cl.ly/pn91 – nothing should be in there except your custom code. However, on some demos we’ve added a little CSS to tweak some things specifically for that demo so if you imported a demo you may have some CSS in there which you can remove if you want. Normally it’s only a very small amount like 1-10 lines.

- AJ

Hello AJ,

Contrary, it is the WP customizer that becomes slow when it has to load the Revoluton slider along side site content just to effect site wide customization, I want to believe this is not a live page builder scenario so better to have the theme’s own customizer like other wordpress themes do.

- I use a premium shared hosting so that could not be the problem.

- From your base demo, I can see a menu with white background, so I don’t know what you mean that by default it comes with a transparent background – check buildfire.com and messagegears.com for what I mean.

- In Customizer > Sticky menu does not have option to select menu color. Eg I specify header menu color white, when switching to sticky, no option to change menu color resulting in not seeing the menus.

- In Customizer > Menu > Styling Menu, option to set menu opacity not there but its available in sticky menu (this won’t allow to have such effect like seen on buildfire.com) unless hardcode into Custom CSS. No option to also apply opacity to dropdown menus and contrary to the screenshot you sent of a blank CSS page this is what I have after installing Total theme – https://prnt.sc/itu46b

- When opacity is applied to sticky menu, it seems to move the menu to back making the Button to have an overlay on it and makes it move to the back of the opacity color used.

- On page design, under “Slider option” at the bottom, would be best to have a drop down to select already created sliders.

- Opacity only works when slider is active.

- No option to set font-weight.

I found myself moving back and forth the Custom CSS and Customizer screen. In my opinion, I think more needs to be done to the customizer options and also better to have it standalone, loading a page with revolution slider in customizer is a very fustration experience. Live preview is best for page design and not entire site customization. in Total theme, I saw a very fantastic theme with good layout but my experience so far is not fun at all.

• You can always open the Customizer while viewing a blank page from the user toolbar so it loads faster. I’ve been developing themes for over 10 years and I know my way around code and optimization and using the WP customizer is the best way to setup theme options.

Of course, I could consider adding a secondary panel in the dashboard for those that don’t like the customizer but every customer I’ve asked said it’s not needed. I have a slack group with customers that have purchased over 25 licenses and none of the top customers like the idea and no other customer has requested it lately so I don’t believe it’s worth it at this point. Also WordPress makes improvements to the Customizer on almost every update so when WP updates themes using the Customizer get instant benefits

• The header in Total by default is transparent, but there is nothing behind it. What you are looking to do is to have the header placed on top of your content. You can do that with the Overlay Header function – https://wpexplorer-themes.com/total/docs/overlay-header/

• I’m not sure what you mean by:

 In Customizer > Sticky menu does not have option to select menu color. Eg I specify header menu color white, when switching to sticky, no option to change menu color resulting in not seeing the menus.

The sticky menu is exactly the same as your standard menu which you can customize at Appearance > Customize > Header > Menu. If you set your menu links to black here they should still be black when the menu is sticky. If you made your menu links white then they will be white on sticky.

• To have a layout like buildfire.com – you need to use the Overlay Header as mentioned above so that your header goes over your content which is what you want. Simply making the header transparent doesn’t automatically make the content below it go under the header, the header must be set absolutely over the content.

• Sorry I don’t understand what you mean by:

When opacity is applied to sticky menu, it seems to move the menu to back making the Button to have an overlay on it and makes it move to the back of the opacity color used.

• Regarding:

On page design, under “Slider option” at the bottom, would be best to have a drop down to select already created sliders.

The issue is if a customer wants to use a 3rd party slider plugin (not included with the theme) or add a shortcode that is NOT a plugin it won’t allow it. Having a simple fields allows more options. You could add HTML to this field if you want or any shortcode. A dropdown is more limited.

No option to also apply opacity to dropdown menus and contrary to the screenshot you sent of a blank CSS page this is what I have after installing Total theme – https://prnt.sc/itu46b

This looks like a bug that was fixed many versions ago and was only around for like 2 days before it was patched, looks like you got unlucky You can just remove this code and save the Custom CSS.

• “Opacity only works when slider is active.” – What opacity are you referring to?

• “No option to set font-weight.” – For what? There are font weight options for many functions in the theme, what are you looking for exactly? If you are looking to tweak your menu font weight go to Customize > Typography

• I found myself moving back and forth the Custom CSS and Customizer screen

You don’t have to do this because you can alter your custom CSS at Customize > Additional CSS.

Also if your homepage is very slow to load instead create a blank page with nothing so you can launch the customizer from there

- AJ

Hello AJ,

Thanks for the help, most are clear to me now … but for others they say a picture says a thousand and one words

- Sticky Header settings without option to set color: https://prnt.sc/iu3s2z

- Menu without option to set opacity: https://prnt.sc/iu3r79 I had to use custom CSS #site-header{background-color: rgba(255,255,255,0.0); font-weight:700;} to achieve it https://prnt.sc/iu3vk7

You can also see the button as shown, that is Adding Menu Class menu-button https://wpexplorer-themes.com/total/docs/header-one-menu-button/ but if I need this https://prnt.sc/iu3wmd what class should be called? I tried the method you suggested sometime ago, Create a page, Add button and copy the code but it did not work, all I got was a messed up button.

Hi,

The Overlay Header by default makes your links white if you select the white style – https://cl.ly/qJ9P – the overlay header always overrides the default colors set for the header menu so if in the customizer you made the menu links black but enable white text for the Overlay header it will be white but then on sticky it will show black. Example:

So your customizer shouldn’t have white links unless you set your default header to a solid color as well, otherwise your pages without the Overlay (404, search, archives…etc) you won’t be able to see your white links. So if you set your links to white here – https://prnt.sc/iu3r79 – then under Customize > header > general add a background color.

There isn’t a built-in classname for this – https://prnt.sc/iu3wmd – but you can just create your own classname like “menu-outline-button-thin” and then add some CSS for that. If you need help with the custom CSS let me know, I can provide it

- AJ

The link color when sticky is whatever you enter at Customize > header > Menu. Here – https://prnt.sc/iu3r79 – it has nothing to do with the “opacity”.

The way the Overlay Header works (I assume you are using it since you haven’t share the live URL for me to look) it places a dynamic classname that is added/removed so when the header is sticky it uses the styling settings defined here – https://prnt.sc/iu3r79 – as opposed to the styles for the Overlay.

Video example: https://cl.ly/qJej

Make sense now?

- AJ

It would be great if you can assist with the outline button CSS.

Example code:

.menu-outline-button-thin > a > span.link-inner {
    border: 1px solid #fff;
    border-radius: 0;
}

Result: https://cl.ly/qLcR

- AJ

Hello AJ, Thanks a lot. A quick one here… https://cl.ly/2X3v1x3E2K20 from the screen recording It shows when on sticky no option to change the link color from the default white as seen here https://cl.ly/3g0R1g3A0l15 . Am I getting it wrong? Because the default menu link is set to white and background in sticky is white but no where to state that when moving to sticky link color should change.

Would have loved sharing the page but you will only see the under construction and I can not post my admin log in here.

Cheers

Hi Michel,

Angle is the fallback – https://cl.ly/pjrw – this code is staying if the Customizer value is empty then fallback to the angle arrow.

And no, you can’t copy this file into your child theme it won’t do anything because it isn’t a template part. You only copy template parts to your child theme and with Total you really shouldn’t be copying anything into your child theme since everything can be overwritten with filters – https://wpexplorer-themes.com/total/docs/use-filters-wordpress/

I don’t see any issues with the option in the code and also testing it – https://cl.ly/pklS – are you sure this isn’t a caching issue? Did you clear your cache after changing the setting in the Customizer and publishing your changes?

- AJ

Thank you AJ.

I’ve cleared caches and even tested with another browser.

And in the Customizer, the caret (or arrow) shows on the right side page when setting it, but no more after having saved and reloaded the Customizer page.

Do you see the caret on your side ? Below the top grid of https://culture-officer.fr

I used the margin -50px in the css design options function in the row edit

update: I went to front-end editor and reset the top margin of my row to -50px this did the trick by merging the content over my slider (not sure why I couldn’t in my back-end editor) but now my background color is not full width even though stretched row is enabled.

update: I believe this may be the problem (parent container has “overflow: hidden” CSS property) Would you think so? What can I do to get the content to overlay my slider and at the same time have the stretched row with color work out?

Hi,

This is AJ the theme developer.

If your row has a parallax background then the overflow must be set to hidden to prevent the parallax image from going outside the row as it moves up/down. That’s the only thing I can guess is to what is happening.

Can you share the URL so I can see exactly how things are setup so I can better assist you? Thanks!

- AJ

Ok thank you. I am in the drafting stage of my site at the moment. nothing published except logo, slider, and contact page.www.tulsafireplacespecialist.com I have the parallax set to none. Its definitely in the edit row, stretched row function You have a note: “may not work properly if parent container has “overflow: hidden” CSS property”. I’m not familiar with a workaround for this. Would my Revolution slider be causing this? I noticed other sites have this layout and they have the content boxed with a stretched row, color in full width and merging over the slider. I’ll keep messing with it and see if I can get my full-width color background to work with the content merging over my slider. Meanwhile, If you know of any workaround or forum that may instruct me around this I’ll appreciate it. Thanks

update: A workaround? maybe not the best way?....Instead of editing a negative pixel in the top margin in my row edit I individually did add a negative pixel in my top margin in each of my four columns within my row. What this solved is stretched row color background went full width at the same time my row with 4 columns merged on top of my slider giving it a nice effect. we will see if any issues occur later on. So simple right.

Hi,

When looking at your site I don’t see any content under the slider. But testing locally it is working for me – https://cl.ly/pmMM – just using the negative margin on the row.

And using a top position could be used as well - https://cl.ly/pmB9

Of course if adding the margins to the columns is working for you that’s fine, the only concern would be on mobile devices when the columns become stacked they may overlap due to negative margins.

- AJ

I see what you mean by the columns each having the negative margin and stacking issues which is a problem now.

The look I am after is on this site www.liftmoore.com

The issue I’m having is I can have the columns content merge over the slider but no background color surrounding it or have just the color background but I cant get the content to merge over the slide without losing my surrounding background color. I cant get both to work together.

Thanks for working with me on this.

Thanks for the link, this really helps me visualize what you are going for

So because the section under the slider has both a gray background and white background I would recommend using a Section and an inner row.

Although when testing it, it seems there is a default overflow hidden on sections which needs to be reset via CSS. I will add that fix in the next update so you don’t need to add that extra code yourself in the future.

Here is a video showing how to do this: https://cl.ly/po8u

This is the CSS used:

.move-row-up {
    overflow: visible !important;
}

.move-row-up .vc_row {
    top: -80px;
    position: relative;
    z-index: 999;
}

It will also work with a negative margin as long as you keep the overlay visible – https://cl.ly/pnZv

But using CSS gives you more control if you want to change things for mobile or what not and you can add the CSS in your child theme’s style.css or in the CSS panel for quick access for making tweaks without having to edit the page itself.

If you still have issues let me know, I hope this helps!

- AJ

Hi,

Looks like your site is loading old CSS files so you are missing the code to correctly position the icons.

Make sure to clear your site cache.

Also I see you removed the script versions from all the static assets on the site, I don’t really recommend that, so after you clear your site cache you need to make sure to purge your browser cache as well or you will continue loading the old scripts.

- AJ

So I purged the site cache and cleared browser cache and nothing happened. After I deactivated the plugin that removes scripts (which I’ve been using with this theme for 2 years without a problem), the icons are correctly positioned the left of text, but the formatting is strange. The bullet lists on the site are good now. However, my Ninja Form at https://www.braveport.com/viatical-settlement-calculator/ is messed up.

Do I just need to wait a little longer or any suggestions? Never had this happen to me on an update of your theme before.

Hi,

• The version numbers on the scripts are used to tell your browser to load the correct CSS file, so if the file has been updated it loads the new one. If disabling the plugin fixes the issue, then it means your browser was still trying to load the old scripts and not the new ones.

I know speed testing sites tell you to remove query strings from static resources but that’s because these sites can’t possibly know why the query string is there.

As long as the query string isn’t changing every second, minute or day then they are perfectly harmless and in fact good to keep

• I don’t see any formatting issue: https://cl.ly/pjxlhttps://cl.ly/pjxl

• I don’t see any theme bullets on the Ninja Forms, but I do see broken code coming from the form itself: https://cl.ly/pjHO – I don’t have experience with their plugin so I’m not sure what would cause their form to break, can you double check your form fields to make sure you don’t have any broken HTML in the form editor itself?

Is this what you are referring to?

- AJ

I don’t see anything first link where you said you didn’t see any formatting issues. The issue I see on my end is that icons are appearing diagonally from left to right in alignment, instead of all be aligned left. Is that not what you see? This alignment isn’t correct. The same issue is happening on the form page with the icon list. Those items are supposed to be all aligned left.

The code works fine on the Ninja form when the query string plugin is enabled as it has been for the past couple of years. If I disable the plugin, the form is broken, when I re-enable it, the form works.

I don’t really know what to do at this point to fix this. I kind of wish I didn’t update because it was working fine for a long time .

Hi,

Because Total already has on-the-fly resizing I actually disabled the WooCommerce on-the-fly sizing to prevent duplicate functions from running and keep your site fast. As long as you have Image Resizing enabled under Theme Panel > Image Sizes then you don’t have to regenerate any thumbnails.

And I see your theme is already up to date so you shouldn’t be having any issues. Can you double check to make sure image sizing is enabled and also double check your sizes for WooCommerce? – https://cl.ly/pj6f

If everything is correct there but the images are still not resizing, please let me know.

Also when you updated the theme did you do a complete update? In the past I have spent hours and hours trying to troubleshoot issues and it turned out the customer didn’t actually update their entire theme but only specific files.

Testing locally and on our live site all image cropping should be working and no other customer is having the issue either. So hopefully it’s just the setting is disabled in the panel, please check – thanks!

- AJ

By the way I did notice you are using the products module in the Page builder in various parts, I also tested this function to make sure and the cropping is working when I test.

Thank you for the speedy reply. I will revisit the situation in the morning, re-upload the plugins and do some testing as you suggest. I’ll report back. Many thanks. Jamie

Actually…I do see a bug in a recent WooCommerce update (I kept doing more tests after replying to you). I will be adding the fix in upcoming Total 4.6. If you want a temp fix adding this to your child theme should fix it:

add_filter( 'woocommerce_image_sizes_to_resize', '__return_empty_array' );

Let me know otherwise. And thank you for bringing this to my attention.

- AJ

It looks like WooCommerce has 2 filters now - “woocommerce_regenerate_images_intermediate_image_sizes” and “woocommerce_image_sizes_to_resize” which is a bit confusing so I just needed to add the later to prevent WooCommerce from taking over.

Let me know if that custom code doesn’t work for you.

- AJ