Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 26, 2021 at 8:52 pm #1296826
    boelgebryder

    HI
    At Boelgebryder.dk i have 3 cells in the middle of the frontpage.

    Cell 1 is called “Coaching” – Cell 2 is called “Pitstop for men” and Cell 3 is called “Mig og Mandø”
    I would like to have different background colours in those 3 cells, but can´t find a way to do it :-(

    As you can see, all the cells are with rounded corners and grey background. This is due to a quick css I have defined in Enfold Child – General Styling
    The css is as follows :

    #av_section_1 .av-special-heading{
  
  background-color: bisque;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-top:10px;
  
}

#av_section_1 .avia_textblock{
  
  background-color: #CCC;
  padding:10px;
  /* color: #FFF !important; */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

    I´m aware that this overrides the background color of any cell, but is there a way around to define single cells.

    Hope you can help me ?

    April 26, 2021 at 10:49 pm #1296846
    Jordan Shannon

    Hey boelgebryder,

    Add this to quick css:

    .avia_textblock.background-color.yellow{
background:yellow!important;
}

    It works on the first one. So if you add a custom class to the other 2 it should work just the same.

    Best regards,
    Jordan Shannon

    April 28, 2021 at 8:46 pm #1297222
    boelgebryder

    Hi Jordan.
    First – Thanks for taking your time to help !

    But I must be dumb as a doornail !

    I did not know about custom classes, so I went online trying to learn.
    After that i added this to quick css, under “Enfold child” -> “General styling” -> “Quick Css.”

    #av_section_1 .av-special-heading{
  
  background-color: bisque;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding-top:10px;
  
}

#av_section_1 .avia_textblock{
  
  background-color: #CCC;
  padding:10px;
  /* color: #FFF !important; */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  
}

.box1 {
 .avia_textblock.background-color.yellow{
background:yellow!important;
}
.box2 {
 .avia_textblock.background-color.blue{
background:yellow!important;
}
.box3 {
 .avia_textblock.background-color.red{
background:yellow!important;
}

    And in the textblock used inside the cell, I went to “Advanced” -> “Developer Settings” and wrote the custom CSS Class. ( See picture ) Custom CSS Class

    But I still keep getting the grey boxes and no colours.
    I Expect that first part of the css regarding the section has something to do with it, but if I remove them I dont get my rounded corners anymore.

    Kind regards

    Kim

    April 29, 2021 at 1:28 pm #1297348
    Nikko

    Hi Kim,

    Based on the screenshot you gave, this will not work (invalid CSS):

    .box1 {
 .avia_textblock.background-color.yellow{
background:yellow!important;
}

    try to change it with this instead:

    .box1 {
  background-color: yellow !important;
}

    Best regards,
    Nikko

    April 29, 2021 at 9:16 pm #1297412
    boelgebryder

    Thanks Nikko.

    Worked perfect. Thanks for helping me out.

    Kim

    April 30, 2021 at 12:42 am #1297423
    Jordan Shannon

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

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