Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 27, 2015 at 9:03 pm #419612
    thatsmyname

    Hello,

    My landing page is almost empty with the menu at the top and a fullscreen video color section as content.
    I’d like to place an avia image element within the colorsection and that image should align to the top.

    already tried this via quick css:
    .home .content { padding-top: 0; }
    -> works as long as the image is outside the colorsection. once inside it gets back to center.

    thanks
    Stefan

    March 28, 2015 at 7:20 am #419789
    Rikard

    Hi thatsmyname!

    I’m not entirely sure what you are trying to do here, could you please provide us with a screenshot highlighting what you are trying to achieve?

    Regards,
    Rikard

    March 28, 2015 at 7:43 am #419797
    thatsmyname

    Hi Rikard,

    yes sure, here are two screenshots and one photoshop layout.
    hope that makes it clearer, i would like to place the blue image like this:

    photoshopped goal Layout:
    photoshopped_Goal_Layout

    ..and not like this:

    Wordpress Try Version 1:
    Wordpress_Try_Version1

    Wordpress Try Version 2:
    Wordpress_Try_Version2

    best regards
    Stefan

    • This reply was modified 9 years, 8 months ago by thatsmyname.
    March 30, 2015 at 6:42 am #420211
    Rikard

    Hi!

    Please try the following CSS in Quick CSS under Enfold–>General Styling: 

    .page-id-21 .avia-builder-el-1{   
position: absolute !important;
top: 0px !important;
right: 5% !important;
}

    Best regards,
    Rikard

    March 30, 2015 at 6:53 am #420215
    Ismael

    Hey!

    Turn on the custom css class field. Refer to this link: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Edit the image element. Use “custom-image” in the custom css field for example. Add this to the Quick CSS field to adjust the position of the image:

    .custom-image {
  position: absolute;
  top: 0;
  right: 20px;
}

    Cheers!
    Ismael

    March 30, 2015 at 9:33 am #420273
    thatsmyname

    Hi Rikard, Hi Ismael,

    thanks for your support. i tried both versions. here is what i found out:

    – Rikards Version via Quick CSS under General Styling works without problems.

    – Ismaels Version via the Custom CSS Field gets blocked by the ‘Image Styling’ Checkbox. Makes sense, but was not obvious for me. If the Checkbox is set to ‘Default’, Custom CSS works. If set to ‘No Styling’, it will block the Custom CSS Field.
    -> How could i remove the border radius (via Custom CSS) that comes with the ‘Default’ Setting of the ‘Image Styling’ Checkbox?

    best regards
    Stefan

    March 31, 2015 at 3:31 pm #421206
    Ismael

    Hey!

    Did you add a custom css class? I checked the element but I can’t see the custom css class attribute.

    Regards,
    Ismael

    March 31, 2015 at 3:53 pm #421238
    thatsmyname

    Hi Ismael,

    thanks for coming back.
    Yes i did create a Custom CSS class. ( in the custom css field within the image element, right ? ).
    But since i still had problems with that way, i went for the Quick CSS Version.
    – i just noticed, that the custom css field disappeared with the latest enfold update procedure yesterday. –
    –> would css code inside this field disappear as well with updates ?

    still, i would prefer a custom css version. otherwise the quick css field will be getting rather full in the future.

    So right now it looks like this under Quick CSS regarding this particular image element:

    .page-id-21 .avia-builder-el-1{
border-radius: 0px !important;   
position: absolute !important;
top: 0px !important;
right: 0% !important;
}
.page-id-21 .avia-builder-el-1 .image-overlay {
background: url(https://www.schwebewerk.com/wordpress/wp-content/uploads/2015/03/bookmark_featuredproject_overlay.png) no-repeat !important;
height:150px !important;
width:68px !important;   
position: absolute !important;
top: 0px !important;
left: 0px !important;
}
.page-id-21 .avia-builder-el-1 .image-overlay .image-overlay-inside {	
display: none !important;
}

    since i tried it in several ways which didn’t work completely, how do i modify this css code properly to move it inside the custom css field?

    best regards
    Stefan

    April 1, 2015 at 4:50 pm #422014
    Yigit

    Hi!

    Please use this code and enable custom CSS field once again – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    It will be overwritten each time you update the theme as long as you do not use a child theme and place the code inside functions.php file of your child theme.
    Avia builder element ID’s would work fine as well but if you make changes on page elements, i.e.: add new elements before your elements, element numbers will change and you are going to need to adjust your code once again. Solid way would be using custom CSS field :)

    Regards,
    Yigit

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