Targeting Rows in Avia Layout Builder for Markup - Support | Kriesi.at

Tagged: CSS, Layout Builder

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
January 7, 2014 at 4:27 pm #206358
Estland
Participant
How do I target rows within the content builder. For example, in the admin content builder I have two rows. The first is laid out in thirds, the second row is laid out in fourths. I would like to have one background for the first row and a different background for the second row.

Looking at the code there doesn’t appear to be a div or element containing each row that I can use for CSS markup.
```
<div class="flex_column av_one_third first avia-builder-el-1 el_after_av_layerslider avia-builder-el-first ">
<div class="flex_column av_one_third avia-builder-el-3 el_after_av_one_third ">
<div class="flex_column av_one_third avia-builder-el-5 el_after_av_one_third ">
<div class="flex_column av_one_fourth first avia-builder-el-7 el_after_av_one_third column-top-margin">
<p></p>
<div class="flex_column av_one_fourth avia-builder-el-9 el_after_av_one_fourth column-top-margin">
<div class="flex_column av_one_fourth avia-builder-el-11 el_after_av_one_fourth column-top-margin">
<div class="flex_column av_one_fourth avia-builder-el-13 el_after_av_one_fourth column-top-margin">
```
If there was a hook I could use when a layout element is clicked that would be awesome. I could then use functions.php to add in divs and separate out the sections/rows without editing the theme.
- This topic was modified 10 years, 6 months ago by Estland.
January 7, 2014 at 5:03 pm #206365

Devin
Inactive Moderator

Hi Vada!

No, they don’t have a specific row element as is since that isn’t how the theme outputs its html. You could wrap your content areas in color sections and then use the developers ID field to add an ID to grab onto and you can also turn on the custom class field for all elements: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

Best regards,
Devin

January 9, 2014 at 9:16 pm #207640
Estland
Participant
Thanks Devin. I was able to use a combination of color sections and custom class fields using the link you posted to get the desired effect. The only minor issue I am having is finding enough elements to wrap a text block in a design that has a top background, a middle background, and a bottom background. I’m trying to insert another div within the body of the text block and absolute position it, but am having minimal luck.
```
#sub_slider .je_block_bottom {
    background: url("images/bg_get_estimate_bottom.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
    bottom: -45px;
    color: #967C68;
    min-height: 55px;
    padding: 10px 5px 5px 30px;
    position: absolute;
    width: 100%;
}
```
The text block I’m working on is called “Get An Estimate”
http://heartland.estlandpreview2.com/
January 10, 2014 at 4:43 pm #208067

Devin
Inactive Moderator

I’m not quite sure what you are going for but I would just use a single background for that whole text block. If you need it to be a bit more wide on mobile or something then you can change out the background with a media query.

The custom.css file has an example of a desktop only and mobile only media query you can use.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Targeting Rows in Avia Layout Builder for Markup’ is closed to new replies.