Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • July 7, 2016 at 4:15 am #657825
    gerardbao

    Hi there,

    I’m trying to create a custom class for an image container so it floats up above a widget box (sort of like the icon content box).

    .avia-image-container.avia-align-center .avia-image-container-inner {
    background: #ffffff none repeat scroll 0 0;
    display: inline-block;
    margin: -68px auto 0;
    vertical-align: bottom;
    }

    After updating the margin, I was able to get the image to float up above the border like I want it too.
    However I only want it applied to a specific custom CSS as noted in

    Turn on Custom CSS Class field for all ALB Elements

    I set a custom class (float-icon-box) for the middle site search box on my homepage. Modified the Quick CSS, and it the image container doesn’t float up like it should.
    .float-icon-box {
    display: inline-block;
    margin: -68px auto 0;
    vertical-align: bottom;
    }

    Any suggestions?

    July 7, 2016 at 6:41 am #657839
    Vinay

    Hey gerardbao,

    It’s not clear what you are trying to do? Would you mind posting us a screenshot/mockup of what you would like to achieve? You can upload the screenshot to imgur.com or dropbox and share the link here :)

    Best regards,
    Vinay

    July 7, 2016 at 10:18 am #657864
    gerardbao

    Here it is.
    https://dl.dropboxusercontent.com/u/39930/images/float-icon-margin.png

    July 9, 2016 at 8:03 pm #658824
    Vinay

    Hi,

    Thank you for sharing the mockup, to modify specific icon box please add the below css to quick css and the custom css class name “icon-offset” to the icon box element.

    .icon-offset .avia-image-container-inner {
    margin-top: -200px;
}

    Let us know if you have any questions.

    Best regards,
    Vinay

    July 11, 2016 at 12:15 am #659024
    gerardbao

    I applied the code to the Simple custom CSS and added the icon-offset class name to the image box element and even the column box itself. Both attempts didn’t change anything.

    July 12, 2016 at 2:42 pm #659885
    Andy

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Andy

    July 12, 2016 at 11:13 pm #660145
    gerardbao

    Info noted in private.

    July 13, 2016 at 9:20 am #660231
    Andy

    Hi,

    you didn’t put “icon-offset” as custom css class inside your icons in question, Vinay told it to you already. Afterwards I put this code into your Quick CSS field:

    .avia_textblock.icon-offset {
margin-top: -86px;
}

    Hope you’re happy now?

    Best regards,
    Andy

    July 13, 2016 at 6:32 pm #660529
    gerardbao

    Sorry. I only put icon-offset in one of the icons for testing. Looks like the additional code helped too.

    Yes I am happy and whole again. Thanks!

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Custom image float style CSS’ is closed to new replies.