Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • May 25, 2014 at 3:56 pm #269685
    Angiec13

    Hi- I am applying a grey background color to four columns on this page: http://smartwarehousing.com/news-insights/. It’s currently all grey across, but I want it to be just grey behind each 1/4 column.
    I read this post: https://kriesi.at/support/topic/how-to-trigger-specific-elements/ and thought about following it, but I don’t want the php changes to be overriden each time I update the theme. This client wants to be self-sufficient once my engagement is done.

    I have this obviously erroneous code in my css as a starting point to show you which column I applied the element style to– 

     .flex_column av_one_fourth first  avia-builder-el-2  el_before_av_one_fourth  avia-builder-el-first   {
    background-color: #FFFFFF;
    padding-bottom: 40px;
    padding-left: 10px;
}

    I need the grey background to be behind both elements in each of the four columns– text and the read more button with some padding around it. I would love any tips on this. If you think I have to change the php on this, I may have to tell the designer the desired effect can’t be done. I’m not sure, but thanks for any help– I also think it might be possible my situation is a little different from the post I referenced.

    Thanks for your time,
    Angie

    May 25, 2014 at 4:29 pm #269689
    Flikk

    lets start with this:

    #top.page-id-10 #av_section_1 .av_one_fourth {
    background-color: #000000;
    padding: 10px;
}

    And about the syntax of your code:

    Classes allways have a leading dot in CSS. So it would be:
    .flex_column .av_one_fourth first .avia-builder-el-2 .el_before_av_one_fourth .avia-builder-el-first

    And if you want to target multiple elements, you have to seperate them with a comma:
    .flex_column, .av_one_fourth first, .avia-builder-el-2, .el_before_av_one_fourth, .avia-builder-el-first

    If you dont use the comma like .class1 .class2 { }
    Then you target all elements with class2 that are inside an element that has the class1 instead of targeting both

    May 25, 2014 at 5:03 pm #269691
    Angiec13

    Hi Flikk– Thanks! That first code did it and the tutorial on classes was very helpful. Enjoy your day! :)

    Angie

    May 25, 2014 at 6:34 pm #269716
    Flikk

    you’re welcome.
    You might want to check the width setting of your text elements in those columns.

    There is some inline CSS in the HTML code that sets a fix size to the element:

    <p style="height: 200px; width: 100%; font-size: 16px; padding-top: 10px; text-align: left; background-repeat: no-repeat no-repeat; color: #ffffff;"><strong style="color: #ffffff;">Smart Warehousing will occupy 575,000 square feet at intermodalpark</strong><br>
Kansas City Business Journal</p>

    Not sure if you entered it like that in the text element but it causes some problems with the layout if you reduce the size of your browser window (or have a smaller screen).

    The width should be set to 100% and you dont need the padding there.

    Good weather over here so i’m going to have a BBQ and hope that you can get that fixed on your own.
    If not, just ask for help.

    But right now i dont have time left :)

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Column background color with css’ is closed to new replies.