Jump to content

Archived

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

danieldynasty

How to make iBox Icons clickable?

Recommended Posts

danieldynasty    2
danieldynasty

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.

  • Like 1

Share this post


Link to post
Share on other sites
Willem-Siebe Spoelstra    0
Willem-Siebe Spoelstra

Good question, would like to know the same.


I write about internet marketing, WordPress and Pagelines on my Dutch blog spoelstra.ws

Share this post


Link to post
Share on other sites
Deepsouth    1
Deepsouth

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
mediendezign+    0
mediendezign

You're so right.

Share this post


Link to post
Share on other sites
Iain Griffin    0
Iain Griffin

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
mediendezign+    0
mediendezign

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
danieldynasty    2
danieldynasty

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
dhrose+    3
dhrose

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
Rob    547
Rob

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


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
danieldynasty    2
danieldynasty

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

  • Like 1

Share this post


Link to post
Share on other sites
dotmuc    0
dotmuc

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dhrose+    3
dhrose

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! 

  • Like 1

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
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
  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
danieldynasty    2
danieldynasty

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
bigbangthinking    1
bigbangthinking

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:


| Big Bang Thinking | Thinking Design |
www.bigbangthinking.com

Share this post


Link to post
Share on other sites
opwolken    3
opwolken

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.

  • Like 1

Share this post


Link to post
Share on other sites
apcomputing    2
apcomputing

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.

  • Like 1

Share this post


Link to post
Share on other sites
allenresha    0
allenresha
[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
apcomputing    2
apcomputing

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
apcomputing    2
apcomputing

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

×