Hello,

When a customer orders on my site, I would like to force them to indicate a 10-digit telephone number (10 numbers, no more, no less), without spaces or dots between the numbers. I tried the “woocommerce checkout field” plugin but it does not work: when I click on “my account” then on modify addresses, I find the initial fields, without restrictions. Do you have a solution please?

Thank you in advance,

Have a good day,
Audrey

Hello,
We use the Enfold Theme for our website and Gravity form for our forms.

We have a styling issue with the checkboxes and buttons radio.
They are not align with their label.
I’m using the rules provided by the Gravity Form’s support to override the customizations made by the theme:
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_radio .gchoice {
display: inline-grid;
grid-auto-flow: column;
}
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_container_checkbox .gchoice {
display: inline-grid;
grid-auto-flow: column;
}
But it doesn’t work correctly. The button is very far from the label.
So could you help me on this topic please?

I also have a styling issue when I try to display checkboxes (or radio buttons) in columns (the rules “gf_list_2col” works on Gravity forms’ preview but not in live).
Do you have any solution for this?

Thank you for your help.
Céline

I added javascript particles.js
https://vincentgarreau.com/particles.js/
I downloaded and extract in child theme, i added css code

/* —- base —- */
html{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
canvas{
display:block;
vertical-align:bottom;
}
/* —- particles.js container —- */
#particles-js {
position:absolute;
width: 100%;
height: 100%;
background-image: url(”);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
top: 0;
}

/* =============================================================================
HTML5 CSS Reset Minified – Eric Meyer
========================================================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}

/* =============================================================================
My CSS
========================================================================== */

/* —- base —- */

html,body{
width:100%;
height:100%;
background:#111;
}

html{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body{
font:normal 75% Arial, Helvetica, sans-serif;
}

canvas{
display:block;
vertical-align:bottom;
}

/* —- stats.js —- */

.count-particles{
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}

.js-count-particles{
font-size: 1.1em;
}

#stats,
.count-particles{
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}

#stats{
border-radius: 3px 3px 0 0;
overflow: hidden;
}

.count-particles{
border-radius: 0 0 3px 3px;
}

/* —- particles.js container —- */

#particles-js{
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url(”);
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
}
i added js code in app.js

“particles”: {
“number”: {
“value”: 80,
“density”: {
“enable”: true,
“value_area”: 800
}
},
“color”: {
“value”: “#ffffff”
},
“shape”: {
“type”: “circle”,
“stroke”: {
“width”: 0,
“color”: “#000000”
},
“polygon”: {
“nb_sides”: 5
},
“image”: {
“src”: “img/github.svg”,
“width”: 100,
“height”: 100
}
},
“opacity”: {
“value”: 0.5,
“random”: false,
“anim”: {
“enable”: false,
“speed”: 1,
“opacity_min”: 0.1,
“sync”: false
}
},
“size”: {
“value”: 5,
“random”: true,
“anim”: {
“enable”: false,
“speed”: 40,
“size_min”: 0.1,
“sync”: false
}
},
“line_linked”: {
“enable”: true,
“distance”: 150,
“color”: “#ffffff”,
“opacity”: 0.4,
“width”: 1
},
“move”: {
“enable”: true,
“speed”: 6,
“direction”: “none”,
“random”: false,
“straight”: false,
“out_mode”: “out”,
“attract”: {
“enable”: false,
“rotateX”: 600,
“rotateY”: 1200
}
}
},
“interactivity”: {
“detect_on”: “canvas”,
“events”: {
“onhover”: {
“enable”: true,
“mode”: “repulse”
},
“onclick”: {
“enable”: true,
“mode”: “push”
},
“resize”: true
},
“modes”: {
“grab”: {
“distance”: 400,
“line_linked”: {
“opacity”: 1
}
},
“bubble”: {
“distance”: 400,
“size”: 40,
“duration”: 2,
“opacity”: 8,
“speed”: 3
},
“repulse”: {
“distance”: 200
},
“push”: {
“particles_nb”: 4
},
“remove”: {
“particles_nb”: 2
}
}
},
“retina_detect”: true,
“config_demo”: {
“hide_card”: false,
“background_color”: “#b61924”,
“background_image”: “”,
“background_position”: “50% 50%”,
“background_repeat”: “no-repeat”,
“background_size”: “cover”
}
i added code in function.php
function enfold_customization_custom_js() {
?>
<script type = “text/javascript” src = “http://test.jskindustrial.com/wp-content/themes/enfold-child/particles.js-master/particles.js-master/particles.js”></script&gt;
<script type = “text/javascript” src = “http://test.jskindustrial.com/wp-content/themes/enfold-child/particles.js-master/app.js”></script&gt;
<?php
}
add_action( ‘wp_footer’, ‘enfold_customization_custom_js’ );
but it show nothing in output

At the time being I maintain about 20 Enfold installations. I really like the theme and use it in general with joy. The clients are happy when everything works and looks like they knew best it would be the best in the first place, they are indifferent about how it was done. As we know it. Their only annoyance is going the get that theme token in a universe they are not common to. But they survive and most thrive.

And they do not know about the massacre behind the scenes. Because when trying to reach elegant responsiveness I always have to duplicate entries in Enfold, change visibility and create an element massacre. And create pageload. Hurt their chances with google. The alternative would be to deep dive in the screen sizes in css and fiddle with directions and orders. Which I could avoid until now. And I want to keep it that way. When you have to edit something on those pages, there are feelings rising… You realise that you do not want your customers to change something for the better. And this is not good.

Some days ago I had to change a self made php-injection fed from a database un til then to static content for reasons. 60 pages plus in the first run. Now css handling for that is back with WordPress/Enfold and here the major annoyance starts. It was about coding now. Not just that it did not work smoothly to give a class name in developer settings to the column as – I think – it should: It did not show up until I put the generic name in both(!?) the class name fields and the id field. Whatever, maybe a fallback of some sorts I missed in the change log. In the end it worked, albeit clumsy.

Then I wanted to start designing and setup a place in the css section of “general styling”, which is my css playground. I realised that it is not just a mess to generally switch two columns in a 3 column design. It did not work for more than 2 hours and I did not know…
– did I forget to put any “!important” anywhere? It is not self explainatory where it would have to be used and where not to be used after all that time? Why do I do not know that after using Enfold seemingly from the beginning on?
– why cann’t I control settings that are presented to me as saveable settings with confidence and am unsure where the error lies? Or if there’s any? Or not? Or what?
– is there a pending bug? Should I go to the forum which is great tbh, but eats away my time?
– is it something about cacheing inside enfold? Is everything off (minification, combination, whatever) ans will I remember to put it back on after every minute change?

… and then I realised that this is not what I came to Enfold for.
I can write you down the css of what I want in a plain file just so. It is not that hard, even fluid design and flexboxes and the media stuff. I just look up what I have to. Then I debug it in a straight manner and then it is done. And it is all in plain sight for me. All in one place. Controllable. I know it’s rules and add mine. In the end I know what I’ve done and I know how and why it works.
Today for the first time I realised that Enfold, which I love, stands in my way of creating. And it does that too much to further ignore it. I developed habits around Enfold. Regarding responsiveness it was and is the burden to be overcome. But no, Sir. Creating websites and applications today is more than putting margins on headings reliably. In its core it should let me embrace a quick and controllable approach to responsiveness as well, imho.

I do not feel supported bny Enfold, which I regard as my companion.
We have come far together, don’t let me down on this, bro.

Please make responsiveness easier and more versatile. Let it have SOME user friendliness or even some elegance. Let it feel like working with a theme here, instead of working against it.
I started using enfold, because I did not want to be mainly a coder anymore and was seeking for help. And finding it in Enfold, back when mobile was far from being first.
Then everything became fluid and flexible and I now want to have a comfortable way of adapting to that and create with it. Badly.
Responsiveness is so basically needed today that a theme(!) with such a builder(!) should handle that way more elegant.
The CSS control in the theme is for corrections, not for handwritten code based handling of whole aspects of website deployment.

The technology is around for long now,
Please be the Enfold of 2021.

• This topic was modified 4 years, 8 months ago by eee_lala.

Hi,
While I was creating a list of tabs, I made sure to paste the tab name into the “Custom ID Attribute” field as well. However, upon save, the tabs didn’t work. I added “add_theme_support(‘avia_template_builder_custom_tab_toogle_id’);” to my child theme’s functions file but doing that wiped out the Custom ID Attribute fields and they are now all blank. I don’t want to go through and copy and paste the title into that Custom ID Attribute for each one. Is there a function that would automatically take the tabs title and add it to the Custom ID Attribute field? If so, that would be awesome!.

Thanks in advance!

I got a weird situation here.. I got site with Enfold and some custom post type made one with CPT UI one in the theme..

The Masonry element loads everything in the Posts table.. without filtering it whatsoever.. custom css, ACF fields, posts, pages.. everything

All the other elements work fine.. I tried uploading a freshly download version of the theme again…

The weird thing is that it’s a clone of another site on the same server where

any ideas?