Created a new ticket here.

OK, my code started working when I added the !important to the CSS. For some reason, I had not been using that before.

You’ll want to look into translating WordPress. I know it sounds a bit strange, but the way WooCommerce works, you need to “translate” certain phrases and words. You don’t want to hack into WooCommerce to do this, since when you update WooCommerce, it will overwrite your changes.

Maybe start here?

https://docs.woothemes.com/document/woocommerce-localization/

Kriesi team may have more tips.

Sorry. No idea. The classes need to match, that’s all I can think of. Plus don’t put the period in front of the class when entering the class into the Custom CSS Class.

Take a very close look at the code I provided. That line should be…
add_theme_support('avia_template_builder_custom_css');
Note that what you’ve provided has two slashes before the code, so my guess is it is being ignored.

Please take a look at the instructions I provided again. Everything is there. Sorry, not much more I can add. The new Custom Css Class is showing up for my installations. As an example, go to a page with a Special Heading element, open that element (edit it) and scroll down to the bottom and you’ll see the field.

Also, make sure you are updating the correct functions.php file, in the root folder of the theme you have active.

If you are running the Child theme, you need to have the functions.php file look like this…

<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file. 
* WordPress will use those functions instead of the original functions then.
*/
 /*
 * this function will turn ON the Custom CSS Class setting for all ALB elments [sjm 20160209]
 * The Quick CSS (Enfold Child > General Styling > Quick CSS) has two classes available - .hide-mobile and .show-mobile
 * IMPORTANT: You DO NOT add the period before the class, if you do, it will not work. (This is when you are editing the element.)
 */ 
add_theme_support('avia_template_builder_custom_css');

• This reply was modified 8 years, 9 months ago by spidercreations.

I had Enfold Child with no option for Theme Options.

No options at all? You should have a bunch of options open up to you once the page loads after you click on Enfold Child. If not, something may be incorrect with your Enfold theme installation, or maybe your permissions?

Are you logged in as a user with admin privileges?

Steve

You can upload most files – including images, zips, PDFs, .doc, .xls, .eps – into the Media Gallery. Then you can just create a standard hyperlink or set it up so when you click an image that will open/download the file. Different file types would “open” different ways and not necessarily download into your downloads folder. As an example, clicking on a link or image that points to an EPS file will download the file, point it to a JPG, it would open it unless the site visitor right clicked and selected “save as.”

The Journiapp.com website is not a WordPress website, so I’m not sure what they are using.
I do agree, something like that would be kind of nice to include as a feature in Avia, but it would need to be a new feature a lot of people are looking for.

That plugin I suggested will work too, but the presentation of the information on the page may not be what you are looking for.

This is not associated with specifics to Enfold, rather more-or-less a WordPress question.

You sure can. First, my strong suggestion is to use the Enfold Child theme so you can make the following addition to the functions.php file for the Child theme.

add_theme_support('avia_template_builder_custom_css');

You can add it to the regular parent functions.php file, but it will be overwritten upon update.

After adding that line of code, you’ll see a Custom CSS Class field for almost all of the Avia Layout content elements. But first…

You’ll need to go to the Enfold settings > General Settings section and scroll down to the Quick CSS section and add something similar to the following:

@media only screen and (max-width: 670px) {
.hide-mobile { display: none; }}

@media only screen and (min-width: 671px) {
.show-mobile { display: none; }}

That bit of CSS ensures a specified element will be hidden if the screen is smaller than 670px, and I added the second one to ensure an element is shown if it is smaller than 671px. In other words, one element will hide and the other element will be shown if you are looking for that extra feature.

Then go to the element itself on the page and go to that Custom CSS Class field. To hide the element below 670px wide, add the following to the field:

hide-mobile

To show an element when the screen width is smaller than 671px, add the following to the field:

show-mobile

Note that you do not include the period at the beginning of the class.

Adjust the pixel width for your needs.

• This reply was modified 8 years, 11 months ago by spidercreations.