Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 20, 2013 at 11:36 am #28103
    awilson3rd

    Hello,

    I am using the code below to add some styling to a columns on a page:

    .page-id-349 .flex_column {

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    border: 1px solid #b1b1b1;

    background: rgba(255, 255, 255, 0);

    padding-left: 5px;

    padding-top: 5px;

    padding-right: 5px;

    padding-bottom: 5px;

    }

    However, this targets all columns on the page including the footer columns. Is there any way to specifically target only some columns on a page?

    Thanks

    Andrew

    August 20, 2013 at 11:43 am #136491
    awilson3rd

    Ok, found the answer by changing the code to:

    .page-id-349 .avia-builder-el-11, .avia-builder-el-24 {

    -webkit-border-radius: 10px;

    -moz-border-radius: 10px;

    border-radius: 10px;

    border: 1px solid #b1b1b1;

    background: rgba(255, 255, 255, 0);

    padding-left: 5px;

    padding-top: 5px;

    padding-right: 5px;

    padding-bottom: 5px;

    }

    So, question has changed a bit. Is there an easier way to do this? I have multiple columns on multiple pages and to add this custom css every time would be too time consuming.

    Thanks

    Andrew

    By the way, will all this custom CSS had an effect on load times?

    August 21, 2013 at 6:41 pm #136492
    Devin

    Hi Andrew,

    If you add an ID to each color section where the columns are you could then just effect those columns globally. This would only work if you only had the color section once for each page but it would be similar to targeting the body class selector except you would use the color section ID.

    Just look for the field on a color section where you can add in the ID and use that in place of .page-id-##. For example: #my-custom-name .flex_column{}

    And no, this should not have any effect on loading.

    Regards,

    Devin

    August 21, 2013 at 6:56 pm #136493
    awilson3rd

    Thanks Devin,

    The only problem I see with that is the page doesn’t include a color section because of the sidebar.

    Thanks again,

    Andrew

    August 21, 2013 at 7:11 pm #136494
    awilson3rd

    What I have just tried (based on another post where you suggested a custom class) was to create another custom class and apply this to the individual column:

    [av_one_full first custom_class='columnborder1']

    That way I can target the border to individual columns on a page (makes a nice layout with emphasis in different blocks)

    I know I can add it to a text block using the custom ID but on a column. However, there is no option when creating a column to do this in the advanced layout so just want to check with you that is is ok and won’t mess things up (as advised, it has worked so far).

    Thanks again for the advise Devin,

    Andrew

    August 21, 2013 at 7:25 pm #136495
    Devin

    If you enable the custom class field on all elements then yes you could do that as well. Same basic idea just a differen’t implementation.

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Column Borders’ is closed to new replies.