Jump to content

Archived

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

interpro

how to make ibox icon a hyperlink?

Recommended Posts

interpro

Hi - I'm trying to make the ibox icons into hyperlinks but havent been successful - can anyone advise how this might be done please?

Share this post


Link to post
Share on other sites
greenfly

Could we have a link to your site please?


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
interpro

I should add that I did find this topic in the forum: http://forum.pagelines.com/topic/34579-image-with-link-in-ibox/?hl=ibox+link#entry203555

however the title doesnt match the actual question asked, which is different to what I am requesting help with.

 

I would like to know how to make the images/icons within the ibox into clickable hyperlinked elements.

Share this post


Link to post
Share on other sites
greenfly

I believe the answers here are what you are looking for http://forum.pagelines.com/topic/34579-image-with-link-in-ibox/?hl=ibox+link#entry203555


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
interpro

Thanks Martin.

 

I've added this bit of CSS to DMS LESS

.ibox-text.bd {
  display: none;
}

nothing seems to have changed however... are you sure that relates to making the image-icon in the ibox into a hyperlink? the OP in the thread we are both linking to seems to be about suppressing the <More information> links rather than linking from the image icons?

 

thanks for your assistance 

Share this post


Link to post
Share on other sites
interpro

teensy bump...

 

Just to clarify my question, i've included a screenshot of what I'm trying to do. any advice on solving this would be greatly appreciated.

 

GRCSJ1S.png

Share this post


Link to post
Share on other sites
greenfly

You can't do this easily without changing the actual code of the ibox section. 

 

I think the easiest way to do this is to forget about the iboxes (as i said in my previous topic reply i linked previously) and use text boxes. 

 

Add a canvas area, to the canvas area add three columns and then to each column ad a text box. 

 

Add the images in as HTML images wrapped in the link. Then the title and text either wrapped in links or not. 

 

Would you like me to walk you through doing this? Do you foresee any issues with doing this? 

 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
interpro

Yes, a step by step guide for the code would be very much appreciated. Including the source code for the iBox images - • "home" • "users" • "money" • "comments". Thanks!

Share this post


Link to post
Share on other sites
greenfly

Step 1 

 

Add a canvas area. To the canvas area add the three column section. And then add to each column ad a text box. 

 

Step 2 

 

Add the code for the icon you need. You can get the relevant icons from Font Awesome here >> http://fortawesome.github.io/Font-Awesome/icons/

 

For the first box use <i class="fa fa-home"></i>

 

 

You can add the size for the icon via a class of fa-3 but you can use 1 to 6. 3 is probably right 

 

so you would be adding 

<i class="fa fa-home fa-3"></i>  

Step 3 

 

Add the text/title Juridiskā adrese and wrap this in your selected tags. I have chosen <p> tags for this example

 

so you now have 

<i class="fa fa-home fa-3"></i> <p>Juridiskā adrese </p> 

then add a custom class to the text so you can style this as you see fit. 

<i class="fa fa-home fa-3"></i> <p class='IP-boxtext'>Juridiskā adrese </p> 

I have added 'IP' to your class selector (InterPro) to make it totally unique. 

 

Step 4

 

wrap the whole thing in the link tags. 

<a href="http://demo.interpromote.com/test/lv/juridiska-adrese-un-virtualais-birojs/"><i class="fa fa-home fa-3"></i> <p class='IP-boxtext'>Juridiskā adrese </p> </a>

You can then add the same code to the other boxes, changing the icon based on your selections from Font Awesome and the links and texts. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
interpro

Some problems have occured. I added the code to the text box - <a href="http://demo.interpromote.com/test/lv/juridiska-adrese-un-virtualais-birojs/"><i class="fa fa-home fa-3"></i> <p class='IP-boxtext'><h4>Juridiskā adrese</h4> </p> </a> And added fa-5x to  Custom Styling Classes & Inline CSS Styling 

 

The problem that has occued is this Screen-Shot-2014-07-02-at-17.08.58-2.png

 

How to reduce the spacing?

Share this post


Link to post
Share on other sites
greenfly

You have an extra <p> tag in there. 

 

If you paste in the code for me i will change it for you 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly

change 

<a href="http://demo.interpro...tualais-birojs/"><i class="fa fa-home fa-3"></i> <p class='IP-boxtext'><h4>Juridiskā adrese</h4> </p> </a>

 

to 

 

<a href="http://demo.interpro...tualais-birojs/"><i class="fa fa-home fa-3"></i> <h4 class='IP-boxtext'>Juridiskā adrese</h4> </a>

 
 

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
interpro

Still does the same thing.

 

Is everything correct here?

Screen-Shot-2014-07-02-at-17.08.58-2.pngScreen-Shot-2014-07-02-at-17.25.54.png

Share this post


Link to post
Share on other sites
interpro

Sorry. The correct image is this Screen-Shot-2014-07-02-at-17.25.52-2.png

Share this post


Link to post
Share on other sites
greenfly

Add a custom class to your text boxes - call it IP-iconmargin

 

then add the following to your custom CSS area

.IP-iconmargin .hentry p {  margin:0;
}

to get this http://screencast.com/t/pN0DJZxwnrh


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
interpro

I'm sorry, but could you please explain in detail where is the custom class field in text box and the custom CSS area?

I'm lost :(

Share this post


Link to post
Share on other sites
greenfly

The custom class field is in the section options for the text box

 

The custom CSS field is in the Visual Editor labelled  </> Custom 

 

More information on how to do this is available here http://docs.pagelines.com/customize/how-to-customize


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
interpro

Martin, thank you very much for your patience in walking me through this.

 

The spacing issue is resolved now, thanks a lot!

 

A new issue appeared when the spacing issue dissappeared, in that the icon has shrunk in size:

http://demo.interpromote.com/test/

 

Can you see what I might have done wrong here?

<a href="http://demo.interpromote.com/test/lv/juridiska-adrese-un-virtualais-birojs/"><i class="fa fa-home fa-3"></i> <h4 class='IP-boxtext'>Juridiskā adrese</h4> </a>

y0V2DQP.png

Share this post


Link to post
Share on other sites
greenfly

Ah ok. There might be an easier way to do this than way i am going to say but this works and i will look at this again for you later. 

 

Add a custom class of IP-iboxes-fa to the text sections that are now your 'iboxes' to the Custom class field as previously. 

 

Then we are going to tell your site to make the icon larger with CSS. 

 

In your Custom Code add the following 

.IP-fa-iboxes .fa {
font-size:600%;
}

This says when there is a custom class of IP-fa-iboxes AND a font awesome icon (.fa) make the font awesome icon 600% larger.

 

I 'THINK' the reason for this is that the font awesome icons are just that... 'a Font' or unicode characters so the wrapper is making the text behave as though it was just normal font/text and applies the <a> style to it. 

 

Does this make sense? 

 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
interpro

Thanks for the explanation Martin, and yes that makes sense.

 

So my text content code still looks like this:

<a href="http://demo.interpromote.com/test/lv/juridiska-adrese-un-virtualais-birojs/"><i class="fa fa-home fa-3"></i> <h4 class='IP-boxtext'>Juridiskā adrese</h4> </a>

 
I've added the extra custom CSS as suggested like so:
IHBwNAP.png
 

Add a custom class of IP-iboxes-fa to the text sections that are now your 'iboxes' to the Custom class field as previously.

and then as suggested above I added a custom class of IP-iboxes-fa to the text sections that are now my 'iboxes' - I dont know if this is an important detail but in your previous post you mentioned to add a custom class IP-iconmargin:

Add a custom class to your text boxes - call it IP-iconmargin

Anyway, I tried it with both IP-iboxes-fa and IP-iconmargin, but the icon did not increase in size unfortunately. I've saved the most recent version using IP-iboxes-fa like this:

1vuzz0O.png

 

here's how it looks in production currently:

 

http://demo.interpromote.com/test

 

Did I misunderstand something you were trying to explain that I should have done differently?

Share this post


Link to post
Share on other sites
interpro

Can you see what I might have done wrong here?

Share this post


Link to post
Share on other sites
interpro

I've added the extra custom CSS as suggested like so:
IHBwNAP.png
 
and then as suggested above I added a custom class of IP-iboxes-fa to the text sections that are now my 'iboxes' - I dont know if this is an important detail but in your previous post you mentioned to add a custom class IP-iconmargin:
Anyway, I tried it with both IP-iboxes-fa and IP-iconmargin, but the icon did not increase in size unfortunately. I've saved the most recent version using IP-iboxes-fa like this:
1vuzz0O.png


Hmm, the custom styling class is IP-iboxes-fa, but the extra custom CSS was IP-fa-iboxes, could that be the issue here?

Share this post


Link to post
Share on other sites
interpro
yep - that did the trick! Thanks a lot for the help Martin!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×