-
AuthorPosts
-
May 21, 2014 at 11:01 am #267887
Hi there,
I wonder if there is a better way to trigger specific elements. What I did right now is…
…I have three columns, each colum contains a textcontainer element and an icon. Each column should get an individual background image. I recognized that each element gets a css class assigned to it but it seems as if this class is “dynamic” and depends on the number of elements used on a page.
For example one of the colum elements has the class of .avia-builder-el-9. So I can trigger this class and assign a background image but if I change something (add/remove an element) this class might change to .avia-builder-el-10 or something similar. That can obviously kill my whole design.
So is there a chance to add a class or ID to ANY element in order to trigger it via CSS. Just like it is possible to add an ID to the color-section element? Or is it possible to keep the classes “static” so they are not changing any time I´m adding or removing an element from a page? Otherwise thoses classes don´t make sense, right?
Thanks
– MichaelMay 21, 2014 at 10:37 pm #268265Hey Michael!
You can enable this:
http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/Best regards,
JosueMay 22, 2014 at 10:08 am #268514Hi Josue,
that is AWESOME!
The only thing that´s missing is I can´t add custom css to columns because columns don´t have an editor. What I need to achieve is what you see in the screenshot here: https://dl.dropbox.com/s/0v9ui4zywfrlc68/index.html
You can see that any of the three columns has an individual bg image. I did with this CSS for example:
#unternehmenkacheln .avia-builder-el-9 {background:url(images/bg-kacheln/kachel-team.jpg) no-repeat!important;background-size:cover!important;}
In this case .avia-builder-el-9 is the first column element inside a color section with the ID #unternehmenkacheln. That works as long as I don´t add/remove an element because then the class of the column changes. Maybe it´s not hte best idea to ad the bg image to the colum element itself but I have no other idea.
Any other idea how to create a box like this that has a bg image and can hold a text container element where I can add text and links etc.
Cheers
– MichaelMay 22, 2014 at 5:55 pm #268697Hi Michael!
Try the following, add this to your theme / child theme functions.php:
function columns_class_mod(){ ?> <script> (function($){ $(window).load(function() { $(".custom_elements").each(function(){ var theClasses = $(this).attr('class').split(' '); for (var i = 0; i < theClasses.length; i++) { if (theClasses[i] === "custom_elements") { theClass = theClasses[i+1]; } } $(this).parents(".flex_column").addClass(theClass); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'columns_class_mod');
Now, this will make each element with a class of custom_elements apply its next class to its parent flex_column element.
For example here i have a text elements inside a column, i have set the identifier ‘custom_elements’ class first and the class i want to apply to the parent element last (custom_class):
The result:
Then you can target the column with:
.flex_column.custom_class{ ... }
This was implemented in 3.2, no need for this mod.
Cheers!
Josue- This reply was modified 9 years, 6 months ago by Josue.
May 23, 2014 at 9:15 am #269025Hi Josue,
what should I say? I´m impressed! that works like a charm and does what I need. Thanks a ton man.
Have a great time
– Michael -
AuthorPosts
- The topic ‘How-to: Trigger specific elements?’ is closed to new replies.