Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 2, 2019 at 1:20 am #1096282
    JanMiHero

    Hi,
    I need to have a gray background of the page (e.g. defined with page ID) and a color section background (e.g. red)…for each row of “tickets”
    How to show the red section background on the gray page background?

    Big thanks

    May 3, 2019 at 4:53 am #1096696
    Rikard

    Hey JanMiHero,

    I’m not sure I understand what you are asking, do you want to target a Color Section with CSS on some pages only? If so then you get the page ID class in the body class, then add an ID to the Color Section in question:

    .page-id-000 #color-section-id {
  your CSS here
}

    Best regards,
    Rikard

    May 3, 2019 at 7:03 pm #1096992
    JanMiHero

    Hi Rikard,

    thank you. The desired effect I want to get is like on the screenshot…Gray background and Photo / Date / buttons / in white rectangle…
    So my idea was to use page background(gray ) and use section´s background (white) to style it like this.

    Also not sure about the definition of 100% width of section´s size (it should be not to the “edges of browser window”) e.g. 80% of width in the centre.
    Thanks for any idea.
    Kind regards
    Jan

    May 9, 2019 at 9:28 am #1098805
    Victoria

    Hi JanMiHero,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top.page-id-12332 #wrap_all #main .avia-no-border-styling.avia-section-small {
    background-color: #ffffff!important;
}
.html_header_top.html_header_sticky #top.page-id-12332 #wrap_all #main {
    background-color: #ebebeb;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    May 29, 2019 at 4:55 pm #1105194
    JanMiHero

    Hi Victoria,

    thanks, that worked well.

    Is there a way how to style those white rows, so they will be on left and right side more accurate to the content?
    Like in the picture here :

    Big thanks for any help
    Kind regards
    Jan

    May 29, 2019 at 7:45 pm #1105248
    Jordan Shannon

    Hi,

    Do you mean reducing the margins on the left and right?

    Best regards,
    Jordan Shannon

    May 30, 2019 at 7:26 am #1105379
    JanMiHero

    Hi,

    exactly, reducing those margins on the left and right.
    Now every row with the performance and tickets buttons has its own “color section”.
    That was the idea how to style it.
    I try to style it now like this,
    (I tried to make bigger margins…but on smaller screens is then all the content is strangely shrunk…)

    #vstupenky_gray06,
    {
    max-width: 94% !important;
    margin-left: 3%;
    margin-right: 3%;
    }

    Big thanks for any idea.
    Kind regards
    Jan

    May 31, 2019 at 5:18 pm #1105759
    Jordan Shannon

    Hi,

    Add this to quick css:

    #vstupenky_gray06 .container{
padding-left:5px!important;
padding-right:5px!important;
}

    Best regards,
    Jordan Shannon

    June 10, 2019 at 5:21 pm #1108848
    JanMiHero

    Hi Jordan,

    thank you, but the code is not working no my site.
    Please see the images.

    Do you have any other idea how to style it more like this?
    Big thanks
    Kind regards
    Jan

    June 10, 2019 at 11:23 pm #1108897
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    June 11, 2019 at 3:52 pm #1109196
    JanMiHero

    Hi Jordan,

    thank you, yes I did, but no effect on frontend design.
    Any other way how to style it please?

    Thank you very much.
    Kind regards
    Jan

    June 17, 2019 at 5:35 pm #1111053
    Basilis

    Hi,

    The custom CSS is the only way you can style this element, there is no other way unfortunately.

    Best regards,
    Basilis

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.