• 0

How to make iBox Icons clickable?

Question

Posted · Report post

Hello all,

 

Is there a way to make the iBox icons clickable? It seems everyone I let test the DMS website design loves to click the big round icons but it is not clickable.. Any suggestions or advice on how to make the icons themselves clickable instead of adding a "More >" link.

1 person likes this

Share this post


Link to post
Share on other sites

29 answers to this question

  • 0

Posted · Report post

Good question, would like to know the same.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ditto

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

First thing I did when I saw those icons was try to click on them. It's counter-intuitive to have them there as mere candy.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You're so right.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Agreed, making the icons clickable would be hugely helpful. Also, does anyone know how to change the 'more' link text to be customisable too? I can't seem to see a setting.... thanks.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

i this it's something to do with line 182 of Section.php:
 
this works:
 

http://paste.pagelines.com/5pg

 

Huuuuu !!!! DMS should´nt be suppossed to avoid coding?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, this is indeed a workaround for the Problem.

 

BTW Line 144 is the one where the 'more' link is created, Deleting this Line removes it from the Frontend.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello mediendezign,

 

Can you tell me what you added to get the images to be clickable? I tried placing <a href="%s"> everywhere but nothing works... it just makes the icons disappear completely >_<

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Er, is anyone wondering why something called i- "Box" only has round placeholders? Geez... this is starting to p*** me off. In Framework you could link almost any box, even the media box has no external link? WTF!  

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I know I must sound like a broken record, and a mean old man by now.

 

But instead of debating fixing something you're not going to get fixed easily, why not skip iBox, as pretty as it is, and use a text widget with the Grid System code in it, creating columns, where you can add linked images.  Yes, you can actually create that cute bouncy image effect, if you know enough CSS and have the right code to do it.

 

Without the bounce, I was able to recreate a 6 column box set with linked images, linked text and un-linked description in this way. The best part is, it is fully responsive. Get the code at http://demo.pagelines.me/tools

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No worries Rob.

The problem is that, yes we could do it without using iBox. But what is the point of having DMS then??

 

Not everyone has the technical ability to accomplish it without using iBox while having the same image effects. Yes, we can follow a how-to article to make the images clickable but I don't think everyone can "use a text widget with the grid system code, and know enough CSS and right code to do it". And for that reason alone, is why many of us are using DMS in the first place!

 

 

I know I must sound like a broken record, and a mean old man by now.

 

But instead of debating fixing something you're not going to get fixed easily, why not skip iBox, as pretty as it is, and use a text widget with the Grid System code in it, creating columns, where you can add linked images.  Yes, you can actually create that cute bouncy image effect, if you know enough CSS and have the right code to do it.

 

Without the bounce, I was able to recreate a 6 column box set with linked images, linked text and un-linked description in this way. The best part is, it is fully responsive. Get the code at http://demo.pagelines.me/tools

 

I know I must sound like a broken record, and a mean old man by now.

 

But instead of debating fixing something you're not going to get fixed easily, why not skip iBox, as pretty as it is, and use a text widget with the Grid System code in it, creating columns, where you can add linked images.  Yes, you can actually create that cute bouncy image effect, if you know enough CSS and have the right code to do it.

 

Without the bounce, I was able to recreate a 6 column box set with linked images, linked text and un-linked description in this way. The best part is, it is fully responsive. Get the code at http://demo.pagelines.me/tools

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Daniel, i took the code which lazlo provided in his link and uncommented line 144 to remove the 'more'. you'll have to replace the content of section.php in dms/sections/ibox.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Er, is anyone wondering why something called i- "Box" only has round placeholders? Geez... this is starting to p*** me off. In Framework you could link almost any box, even the media box has no external link? WTF!  

 

Not sure why you're so angry, DMS has three box sections each with there own purpose. iBox was never meant to have icons linkable. However, this has already been added to the issue tracker as an enhancement.

 

MediaBox, you have a HTML box, where you can add HTML, so you can create a link.

 

TextBox is the the plain jane of the three but you can do almost anything with it such as HTML and Shortcodes. 

Also although the section is called iBox, that is reference the style and not eh actual shape.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Spoken over a weekend of frustration at unexpected change... Sorry about that. And yes, there are coding workarounds for just about everything but as a old graphic designer type who never intended to be a "computer programmer" I am lamenting the time I have to spend scratching my head, and yelling at my computer... that could be spent making things "look good."

 

Thanks for all the help to Support folks! I wouldn't be using PageLines products if it wasn't for you guys! 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No need to apologise, we understand people frustration. Something that may assist is you is this doc I wrote, it has a section about how to use the MediaBox to add your logo to your site. The instructions provides example code on how to add an image to MediaBox which is a link. http://docs.pagelines.com/tutorials/creating-a-branding-area
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you. This is the solution! WAHOOOO!!~

 

i this it's something to do with line 182 of Section.php:
 
this works:

http://paste.pagelines.com/5pg

 

Daniel, i took the code which lazlo provided in his link and uncommented line 144 to remove the 'more'. you'll have to replace the content of section.php in dms/sections/ibox.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To make things easier I took care of both issues (Linking Images/Disabling More Link)

 

http://paste.pagelines.com/4eq

 

Allen

 

Thanks allot for your effort, but I think the solution should come from the developer. Otherwise on a new version there caould be problems. Besides it certainly goes against the DMS spirit to code. At least that is what the people behind it sell. And that is why I´m still evaluating if I subscribe or not.

 

:ph34r:

Share this post


Link to post
Share on other sites
  • 0

Posted (edited) · Report post

You can work your way around css via simple html coding. Put a text box in front of the ibox, place the 'a href' html hyperlink code in the text box but do not close it (</a>).

Then create an ibox and put the closing of the html-code in the title area. 

 

example:

Text box: (a href="/test">

ibox: Title area </a>

 

So everything between the beginning and closing of the code is a hyperlink.

 

Good luck.

Edited by opwolken
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To make things easier I took care of both issues (Linking Images/Disabling More Link)

 

http://paste.pagelines.com/4eq

 

I replaced the file dms > section > ibox > section .php file, with the code above.

 

For those who have no idea what this does, this will only make the icon clickable not the boarder around the icon.

 

Anyways, here is the code I added in order to get things how I wanted on my demo : http://www.apcbackup.com

 

This code will change the color of your headers in iBox

.ibox-wrapper .ibox-text h4 { 
  color:#fff;
  margin-bottom: 5px;
}

 

This code will change the description text color in iBox

 

.ibox .ibox-desc {
  color:#fff;
  margin-bottom: 1em;
}

 

This will change the boarder color around the icon

.pl-contrast {
  background:#0DAAD8;
}

 

This will change the boarder icon color on hover

 

.ibox .ibox-media .ibox-icon-border.media-type-icon:hover {
  background:#F1F1F1;
}

 

This will change the icon color on hover

 

.ibox .ibox-media .ibox-icon-border.media-type-icon:hover i {
  color: #0DAAD8;
}
 
This is the static color of the icon on load - These are the icons you select for each iBox

.icon-cloud-upload{color:#fff;}
.icon-windows{color:#fff;}
.icon-exclamation{color:#fff;}
.icon-beer{color:#fff;}

 

My CSS might be able to be made shorter but this should help some people who are not coders like myself.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

[quote name="apcomputing" post="168812" timestamp="1376334254"]I replaced the file dms > section > ibox > section .php file, with the code above.
 
For those who have no idea what this does, this will only make the icon clickable not the boarder around the icon.
 
Anyways, here is the code I added in order to get things how I wanted on my demo : http://www.apcbackup.com
 
This code will change the color of your headers in iBox

.ibox-wrapper .ibox-text h4 { 
  color:#fff;
  margin-bottom: 5px;
}
 
This code will change the description text color in iBox
 
.ibox .ibox-desc {
  color:#fff;
  margin-bottom: 1em;
}
 
This will change the boarder color around the icon

.pl-contrast {
  background:#0DAAD8;
}
 
This will change the boarder icon color on hover
 
.ibox .ibox-media .ibox-icon-border.media-type-icon:hover {
  background:#F1F1F1;
}
 
This will change the icon color on hover
 
.ibox .ibox-media .ibox-icon-border.media-type-icon:hover i {
  color: #0DAAD8;
}
 This is the static color of the icon on load - These are the icons you select for each iBox

.icon-cloud-upload{color:#fff;}
.icon-windows{color:#fff;}
.icon-exclamation{color:#fff;}
.icon-beer{color:#fff;}
 
My CSS might be able to be made shorter but this should help some people who are not coders like myself.[/quoute]

Thanks. I am assuming that this is a snippet from the entire CSS file. Can you copy it to pastebin here on PagLines? That would make for easier implementation. Thanks so much.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I will get it up on pastebin, if anyone wants to just take it from my source site they can as well copy and past from there.

 

I am working on the code to make the css boarder clickable as well, based off of your code changes. @allenresha

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Code updated - 8/13/2013

Update -- Links were not working with the icon boarders on the left and right.

 

 

If you are using this code please make sure to use the new link below for the section.php or update your existing code to make the full boarder around the icon clickable.

 

 

The following set of code will  make icons and the boarders around the icons in iBox clickable!

 

I've also included CSS to edit the colors of the icons, as well as the header and text below the icon. 

NOTE: You will have to reference the ICONs you have selected in iBox to set the icon color in the CSS,  I made notes for which section changes what.

NOTE: if you select cloud-upload as an icon under iBox - It is actually called .icon-cloud-upload and this is what you would add to the css, check my CSS with notes.

 

I take no responsibility if you break your website with the code below.  Please be responsible and backup your files before making changes to them.

 

Before using the code found in the link below, please make a copy of your section.php found under dms > sections > ibox > section.php

 

Replace the code in dms > sections >ibox >section.php : with the code found in the link below

http://pastebin.com/jAB4Fz7C

 

Add the following CSS to your custom CSS to edit the properties of the iBox text, headers, and the icon's found in the iBox's

http://pastebin.com/YeEcek5p

 

Thank you allenresha for getting this started.

 

Example site : http://www.apcbackup.com   --  Icons are located toward the bottom, this site is just a demo.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Er, is anyone wondering why something called i- "Box" only has round placeholders? Geez... this is starting to p*** me off. In Framework you could link almost any box, even the media box has no external link? WTF!  

 

Yeah i wasnt a fan of the circles either but they are pretty easy to work around.... just have to adjust the border radius with custom CSS. Its late here now but if you want me to show you how just hit me back and ill go through it with you tomorrow!

Cheers,

Seán

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now