Page 1 of 1

Custom Icons in NavBar inside footer region

Posted: Thu Jan 30, 2014 10:57 pm
by Carol

I have a startup screen that I would like to look like the following I put together in HTML. Please look at it at http://visualdesignlady.com/mobile/in... and let me know how I can customize the footer navbar to look and behave like the example.


Custom Icons in NavBar inside footer region

Posted: Thu Jan 30, 2014 11:42 pm
by Alena Prykhodko

Hello Carol,

Please find more here http://demos.jquerymobile.com/1.3.0-b...
Also you can add image to Navbar:
On page Show event Run JS:

precodeAppery("mobilenavbaritem_1")&#46;html("<img src='" + Appery&#46;getImagePath('image&#46;jpg') + "'>");/code/pre
Where mobilenavbaritem_1 - name of mobile navbar item;
image.jpg - image in Media Manager.


Custom Icons in NavBar inside footer region

Posted: Fri Jan 31, 2014 2:09 am
by Carol

This code worked great:
Appery("mobilenavbaritem_1").html("Image");

Now, I need to have the icon label included, and the button background color transparent - something like "background-color: rgba(0,0,0,.25)"

Can that be done in Run JS too?


Custom Icons in NavBar inside footer region

Posted: Fri Jan 31, 2014 2:27 am
by Alena Prykhodko

You can set icon in Navbar item Properties- Icon and choose one in dropdown list or in More Properties create attribute data-icon with appropriate value: http://demos.jquerymobile.com/1.3.0-b...
(But first set Icon in Properties to none)

Yes, you can style this with CSS as well.


Custom Icons in NavBar inside footer region

Posted: Fri Jan 31, 2014 2:52 am
by Carol

that didn't answer the question I asked. Can you look at it again?

  1. I want to have the icon label appear

  2. I want the button background to be transparent

    I do not see a CSS exposed in order to edit it, should I go that route.


Custom Icons in NavBar inside footer region

Posted: Fri Jan 31, 2014 3:06 am
by Alena Prykhodko

[quote:]1. I want to have the icon label appear [/quote]

What do you mean under icon label?

[quote:]2. I want the button background to be transparent [/quote]
Add new CSS asset with code:

pre&#46;Class
{background: transparent !important;}/pre

Class - component Class Name in Properties;


Custom Icons in NavBar inside footer region

Posted: Fri Jan 31, 2014 3:10 am
by Carol

I want it to look like this:
Image


Custom Icons in NavBar inside footer region

Posted: Fri Jan 31, 2014 3:20 am
by Alena Prykhodko

data-icon="info"

You can use any CSS to style, it's out of scope of our support.