Jump to content

Archived

This topic is now archived and is closed to further replies.

dtldesign

DMS2 iBox hover swap image

Recommended Posts

dtldesign

Hello

I've had a search but cannot see anything about how to do a swap image on hover for iBoxes.

My site is here http://dtl-design-test2.co.uk/gorely2/how-we-can-help-you/ and would like the whole image to change when hovered over.

Is there a plugin or is it CSS. I'm finding it hard to actually workout how to use the custom class for each iBox.

 

Sorry if this has been answered or if I am being a bit thick.

 

JT

Share this post


Link to post
Share on other sites
Danny

Hi,

 

To do something like that, you will likely need to give each iBox a custom class. Then you're going to need to use that custom class and apply styling to make the image appear on hover.

Please be aware that something like this would require extensive CSS and this isn't something we can provide support for.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dtldesign

That's fine! I'm OK with CSS. I was just wondering as when looking with an inspector I cannot seem to find the exact IDs to apply for each box. 
The old Pagelines was far easier for this and I did it all the time!

 

Share this post


Link to post
Share on other sites
Danny

The old PageLines you're referring to used a completely different section called Boxes. iBoxes and Boxes are not the same section and have different options.

If you want to be able to target a specific iBox, you're going to need to use the styling classes field and give each one a unique class, so you can target them individually.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dtldesign

Yes, I do realise they are completely different platforms.

 

OK. I will give it another go. Didn't have much success last night but may change with fresh eyes.

 

Thanks

Share this post


Link to post
Share on other sites
Danny

A better option would probably be to use the MediaBox section and use HTML, this way you have more control. So give both the iBox and MediaBox a try and see what you think.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dtldesign

Right! OK. Will give that a go. Good shout... thanks!

 

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

Awesome, nice job!


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      Is there a way to disable the responsive function of your iBoxes?
      I do not want all iBoxes underneath each other on mobile, is there a way to fix columns or group boxes?
      I use them for small links and want them to stay next to each other, see attachment
      Please let me know.



    • tkpagelines
      By tkpagelines+
      Hi there ,
      i would like to change the color of menu items on hover and the current menu item. Both should have the same color, but not the color given of the theme scheme.
      Any suggestions ? Maybe a css snippet ?
       
      Thanks
    • Audun MB
      By Audun MB+
      I've added a number option (ie the first box has a 1 next to or above, second box has 2, etc) to iBoxes in DMS (as a custom section), and I'd like that for PL5 Boxes as well. Adding it for iBox was quite easy:
      First this: 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pagelines' ) ), 'count' => array( 'name' => __( 'Counter', 'pagelines' ) ), 'image' => array( 'name' => __( 'Images', 'pagelines' ) ), 'numb' => array( 'name' => __( 'Number', 'pagelines' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pagelines' ) ) And then this } elseif( $media_type == 'numb' ){ $background = ($color) ? sprintf('<span class="invert-icon" style="background-color: %s;"></span>', $color) : ''; $media_html = sprintf( '<i class="iii icon iboks-number" style="%s">%s</i>%s', $text_color, $count, $background ); } And some CSS (though I used the style for icon mostly). iBox already did know which number the box had in the sequence, so adding the number was quite simple. 
      The Boxes code, and PL5 code in general, is a bit mor complex with javascript (with Knockout) and php, and some CSS cheats. It took me a while to figure out how it works, and I'm not sure I quite grasp it yet.
      Adding a number option to the media array is the same as iBox:
      array( 'key' => 'ibox_media', 'type' => 'select', 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pl-section-boxes' ) ), 'count' => array( 'name' => __( 'Counter', 'pl-section-boxes' ) ), 'boxnumb' => array( 'name' => __( 'Numbering', 'pl-section-boxes' ) ), 'image' => array( 'name' => __( 'Images / SVG', 'pl-section-boxes' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pl-section-boxes' ) ) ), 'default' => 'icon', 'label' => __( 'Select iBox Media Type', 'pl-section-boxes' ), ), In the section template I'll add a line for the boxnumber. In addition I have to add variuous boxnumb classes in the build.less file to make it hidden by default and style it.
      function section_template(){ ?> <script type="text/html" id="boxes-template"> <a class="boxes" data-bind="class: boxclass() + ' pl-col-sm-' + $root.ibox_cols(), plhref: link" > <div class="boxes-pad" data-bind="class: 'pl-control-'+ $root.ibox_format()"> <div class="boxes-media media-left"> <span class="the-boxes-media pl-animation pl-appear" data-bind="class: 'media-'+$root.ibox_media(), style: { color: color, width: $root.image_width() + 'px', opacity: $root.image_opacity}"> <div class="pl-image" data-bind="plbg: image, class: $root.image_format"></div> <span class="pl-counter" data-bind="pltext: count"></span> <span class="pl-boxnumb" data-bind="pltext: ?numbervalue?"></span> <i class="boxes-icon pl-icon" data-bind="class: 'pl-icon-'+icon()"></i> </span> </div> <div class="boxes-text media-right"> <h3 class="boxes-title" data-bind="pltext: title"></h3> <div class="boxes-desc" data-bind="pltext: text"></div> </div> </div> </a> </script> Where I'm stuck is how to get the number to supply to pltext. Since the boxes are numbered in the configuration panel (showing as Item 1, Item 2, ...) I guess there is something in the code that could give me the box number, but what would that be? Finding it in the pure php code of iBox was quite easy, but the Javascript-Knockout.js-PHP code in PL5 isn't that easy to read. 
      I realise that I'm developer terrority now, but I'd appreciate any help. I guess this could be useful for more people if get it to work. Maybe it should be added as a standard option? "X things you need to know" or similar is staple website content and the Boxes section is ideal for that with numbers. On our website the "X things you need to know"-pages is half our traffic. 
    • laka74
      By laka74+
      Dear support,
      I'm having problems using the iBox - can't change anything or delete it ?!
      http://seriousplay.training/
      Best
      regards
      Lasse Kramer
    • mistrmint
      By mistrmint+
      Site : http://fireworxmedia.yourdemosite.co.za/
      I need to change the second menu items on hover to different colors.
      i.e factual needs to be blue on hover, fiction red on hover, etc. etc.
      then on the sub menu of factual, all need to hover blue with the main menu factual item staying as blue,
      and the sub menu of fiction needs to hover red with fiction item staying as red.
      etc. etc.
       
      For the life of me I cannot figure it out.
×