Tagged: , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • May 4, 2014 at 1:12 am #259829
    Frostholm

    Hello,

    I’m currently trying to figure out if it’s even possible, but since I can’t give an ‘icon box’ an ID or Class, then it’s quite hard to do. But currently I got a page and when you scroll down a ‘Fullscreen Slider’ appears and then after some now content not related to the slider, but what I would love is to have an ‘icon box’ above the images in the ‘Fullscreen slider’.

    But since I can’t give the ‘icon box’ an ID or Class that’s quite hard to do with CSS.

    What do you recommend I do?

    May 4, 2014 at 1:52 am #259833
    Frostholm

    Actually just solved it myself.

    For those that would like to know a solution for this:
    1. Switch back to Default Editor.
    2. Pick the Magic Wand.
    I wanted the Iconbox in 50/50 page layout, so
    3. Picked 1/2 1/2
    4. Picked Iconbox, and choose icon + title + made the content
    (6.) moved it into the second 1/2 (50%), because I wanted that
    7. Copy it all and switch back to Advanced Layout Editor
    8. Make a Text Block
    9. Paste the copied shortcodes
    10. Within the Text Block lightbox/popup pick text view and make a <div> with an ID around it all and end the </div> (Remember to remove <p> tags that might automatically get there by WordPress.
    11. Open your CSS file style.css or what your using (I’m using child theme, so style.css)
    12. Write the positioning you want.
    13. Whitespace will occur so I removed that with CSS also.

    Here is the codes for what I did
    Within text block

    <div id="NAME OF YOUR ID">
	[av_one_half first][/av_one_half]
	[av_one_half]
		[av_icon_box icon='YOUR ICON' font='' position='top' title='YOUR TITLE' link='' linktarget='' linkelement='']
			<p>
				YOUR CONTENT
			</p>
		[/av_icon_box]
	[/av_one_half]
</div>

    Within CSS (style.css)

    #after_full_slider_0 { position: relative; margin-top: -105px; background-color: rgba(255,255,255,0.0); }
#after_full_slider_0.container_wrap { border-top-width: 0px !important; }
#NAME OF YOUR ID { position: absolute; z-index: 9999; margin-top: -500px; display: block; }

    Anyway, solved the problem myself :)

    May 4, 2014 at 11:10 am #259918
    ouranos3

    Hey Frostholm,

    Could you share the url (or make a screenshot) ? I would love to see what an iconbox looks like on a full-sceen slider… ;)

    Thanks for sharing the solution.

    May 4, 2014 at 2:14 pm #259945
    Frostholm

    On Wednesday the website will go live, so I’ll drop a link on that day, but I have noticed one bug in it. I think it comes from enfolds side though. So maybe someone can help me out to make this iconbox become a 100% reality? :)

    May 4, 2014 at 2:18 pm #259947
    Frostholm
    This reply has been marked as private.
    May 4, 2014 at 3:02 pm #259953
    ouranos3

    Thanks a lot

    May 4, 2014 at 7:53 pm #259992
    Frostholm
    This reply has been marked as private.
    May 7, 2014 at 7:56 am #261170
    Dude

    Hi!

    Did you solve the issue? I tested the website with IE, Firefox and Chrome (see: http://www.screenr.com/ukgN ) and I didn’t notice any issue with the IconBox. Btw you can add a custom css class to Icon Boxes: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ too.

    Best regards,
    Peter

    May 7, 2014 at 3:47 pm #261324
    Frostholm

    Hey,

    The problem is still there. On the ‘Services’ page between the sections ‘Independent Newsletter’ and ‘Trade Shows & Special Events’. The slider inbetween those two sections has an iconbox with the content of ‘Road Shows’, but when you scroll down it doesn’t display until you have scrolled to the end of the fullscreen slider. When you reach that point it suddenly displays. It’s like ‘Road Shows’ put itself behind the ‘Fullscreen Slider’.

    I think it’s something with the ‘Fullscreen Slider’ that effects the ‘iconbox’. I don’t know how to fix this. The ‘Road Show’ iconbox should be displayed at all times above/on the ‘Fullscreen Slider’, not be hidden until you scroll past the slider.

    Here is an image where you can see the iconbox after it has been scrolled past the ‘Fullscreen Slider’:

    May 8, 2014 at 5:25 am #261600
    Ismael

    Hey!

    Thank you for the update.

    The Road Show icon box is visible, checking on Chrome and Firefox Windows 8.

    The modification that you did is a bit extensive and you said that it can be done easily if only you can add a custom class or ID on the iconbox. Actually you can do it by adding the theme support for custom css class, just follow the instruction on the link Dude suggested. Edit functions.php, find this code:

    if(isset($avia_config['use_child_theme_functions_only'])) return;

    Below, add this code:

    add_theme_support('avia_template_builder_custom_css');

    Edit any avia elements like the Icon Box element then scroll below. Add a unique css selector on “Custom Css Class” field. If I am not mistaken, the issue why the iconbox is not showing intermittently is because of the stack or layering order of the color sections so please try to add this on Quick CSS or custom.css:

    #after_section_6.container_wrap {
z-index: 9999;
}

    Cheers!
    Ismael

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