Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 21, 2014 at 11:01 am #267887
    Michael Oeser

    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
    – Michael

    May 21, 2014 at 10:37 pm #268265
    Josue

    Hey Michael!

    You can enable this:
    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Josue

    May 22, 2014 at 10:08 am #268514
    Michael Oeser

    Hi 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
    – Michael

    May 22, 2014 at 5:55 pm #268697
    Josue

    Hi 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, 5 months ago by Josue.
    May 23, 2014 at 9:15 am #269025
    Michael Oeser

    Hi 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

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘How-to: Trigger specific elements?’ is closed to new replies.