Okay
  Public Ticket #3546218
Adding a CSS class to fancy box element
Closed

Comments

  •  7
    MediaV7 started the conversation
    December 19, 2023 at 10:06am

    Hi,

    I have a column with multiple fancy boxes. I want to apply unique styling to each box.

    Is there a way for me to add a css class to each fancy box without resorting to using nth to differentiate between them?

    Thanks,
    Austin

  •  8,939
    Tahir replied
    December 19, 2023 at 11:44am

    Hey Again,

    Please provide the page URL so we can write up what's possible.

    Thanks.

    ThemeNectar Support Team 

  •   MediaV7 replied privately
  •  8,939
    Tahir replied
    December 19, 2023 at 2:17pm

    Hey Again,

    Since each Fancy Box is added in a Column you can add an Extra Class to each and use CSS to target it. See screenshot: 

    8085637361.png

    Thanks.

    ThemeNectar Support Team 

  •  7
    MediaV7 replied
    December 19, 2023 at 4:05pm

    Hi,

    Yes but all of my fancy boxes are in one column and controlled using flex box.

    It's okay. I'll just need to apply nth child css to each item

    Thanks

  •  7
    MediaV7 replied
    December 19, 2023 at 4:28pm

    Hi again,

    Does the fancy box completely disregard the 'Image size' field? I have tried using a few different pre-determined image sizes (including default Salient image sizes) but this is being overridden by the 'Image Aspect Ratio' field.

    How do I set this to be the dimensions of the image size?

    Thanks

    Attached files:  Screenshot 2023-12-19 at 16.26.28.png

  •  8,939
    Tahir replied
    December 19, 2023 at 4:40pm

    Yes, You would need to alter the CSS below to adjust the sizing :

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .nectar-fancy-box[data-style="image_above_text_underline"].aspect-16-9 .box-bg {
    padding-bottom: calc((9 / 16) * 100%);
}

    Thanks


    ThemeNectar Support Team