Glyph / Icon for links to uploaded files

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
adz1111
Posts: 12
Joined: 2014-03-31 12:24

Glyph / Icon for links to uploaded files

Post by adz1111 » 2014-04-05 11:15

Hi

I followed the tutorial to add a field that allows users to upload files (in this case PDFs). When you do that you also get the option, in the table or detail view, to have a clickable icon displayed. If you choose this it is a small "globe" button - where can the icon used be changed? I would like to use a different glyph / icon for that if possible?

In advance, many thanks.

adz1111

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Glyph / Icon for links to uploaded files

Post by peebee » 2014-04-09 22:53

This is how I do it if you want to use one the pre-installed glyphicons. Just requires some minor editing and additional CSS class.....

Firstly, here's the available glyphs to choose from: http://getbootstrap.com/components

Open the applicable generated tablename_templateDV.html from the /template folder in a suitable editor . Find the code that relates to the download globe glyph which looks like this: <i class="glyphicon glyphicon-globe" title="<%%VALUE(fieldname)%%>"></i>

Edit that line and replace glyphicon-globe with the desired glyph code from the available glyphs in the link above

eg: <i class="glyphicon glyphicon-download-alt" title="<%%VALUE(fieldname)%%>"></i> (which is a traditional style download icon)

Then open your selected bootstrap theme, which you will find in the /resources/initializr/css folder.

You can change the glyph size by editing the font size in the class. Add this class to the bootstrap theme css (using the example "glyphicon-download-alt" above - change to suit your selected glyph).

i.glyphicon.glyphicon-download-alt {
font-size: 4em;
margin: 0 15px;
}

4em is quite large but you can just vary the font size and margin to suit your purpose. For a custom icon, you'd have to edit the class to match your own icon.

Not sure if that's the "best" way to do it but it is simple and it works.....

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 352
Joined: 2013-03-21 04:37

Re: Glyph / Icon for links to uploaded files

Post by peebee » 2014-04-10 00:29

Further to that post of mine above - I just noticed that the "glyphicon-download-alt" glyph is already used by Appgini for the "Save CSV" icon. Better not use that one. Editing the CSS class will affect all instances of the glyph.

adz1111
Posts: 12
Joined: 2014-03-31 12:24

Re: Glyph / Icon for links to uploaded files

Post by adz1111 » 2014-04-11 13:34

Thanks peebee (sorry for delay in responding) - will have a play this weekend :-)

Post Reply