# Customize the prototype / tab bar of the E-Book app

**URL:** <https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100>\
**Category:** Project Showcase\
**Created:** [February 2, 2021, 4:55am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100 "2021-02-02T04:55:41Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 5, 2021, 5:11am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/21 "2021-02-05T05:11:23Z")

</div>

Can you explain a little more concretely what you want to achieve?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 5, 2021, 5:13am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/22 "2021-02-05T05:13:52Z")

</div>

i have a go to CART floating button, and i wanna display total $ in the cart under or on top cart icon

 ![Proposal 2021-02-05 at 12.14.33 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/5/25d7cded73e018a52c1a858248aeddbb1a47fdba.jpeg)

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 5, 2021, 5:30am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/23 "2021-02-05T05:30:23Z")

</div>

I want to display the price as a floating item like a button instead of the total price display prepared on the screen. Do you want to realize such a function?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 5, 2021, 5:31am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/24 "2021-02-05T05:31:56Z")

</div>

total price with cart icon, in the bottom right corner  
i can create cart PNG icon…

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 5, 2021, 6:07am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/25 "2021-02-05T06:07:22Z")

</div>

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/a/9a851132a486587685a30a40fea5a48ced65ec38.jpeg)

↑ Is it like this?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 5, 2021, 6:08am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/26 "2021-02-05T06:08:20Z")

</div>

you are a magician!!!  
what is the css?

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 5, 2021, 6:31am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/27 "2021-02-05T06:31:40Z")

</div>

The image I just uploaded is a dummy created with a DTP application.

★ The required CSS is not so easy.  
★ If I have time to spare, I may be able to do it.  
★ Please wait for about a week.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 5, 2021, 6:34am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/28 "2021-02-05T06:34:09Z")

</div>

![Proposal 2021-02-05 at 1.35.09 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/9/090a6fd7ec536179f0def7855cb3fbfae19c1976.jpeg)  
i have this code to change color of inline list titles

```
<pre><span><style>
div.sc-xGAYn.flTmrG {
color: green;
}

```

is working good on my laptop, but is not on cellphone…  
any advice ?

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 5, 2021, 7:13am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/29 "2021-02-05T07:13:29Z")

</div>

You can improve it by the following work.

★ Delete the title of the inline list.  
★ Add new rich text and copy and paste the code below.  
★ Adjust the font size, color, and top and bottom margins.  
★ Place rich text just above the inline list.

```
<div class="title">
Liberty New York<div>
<style>
.title {
color: green;
font-size: 1.2rem;
font-weight: bold;
margin: 0rem 0rem 0.2rem 0rem !important;
}

```

★ Please give it a try.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 5, 2021, 7:20am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/30 "2021-02-05T07:20:14Z")

</div>

thank you, but it is not title… is group name in filter… sorry  
i wanna make vendors names stand out… so they know, that they are ordering from different places…

 ![Proposal 2021-02-05 at 2.19.31 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0e08f9fb08bc2dbeb558fda5806e31969fe2157d.jpeg)

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 5, 2021, 7:34am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/31 "2021-02-05T07:34:06Z")

</div>

I see…  
Then please try this.

```
<pre><span><style>
[data-test="list-item-title"] {
color: red !important;
font-size: 1.2rem !important;
font-weight: bold !important;
margin: 0rem 0rem 0.2rem 0rem !important;
}

```

Oops, if you look closely, this also seems different.  
Please wait for a while.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 5, 2021, 7:35am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/32 "2021-02-05T07:35:53Z")

</div>

this one is changing items names, i need to change group names, when you use in App filter

 ![Proposal 2021-02-05 at 2.38.20 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/c/fc26ec6229ff76d2c96c3dd51b7194411310ab37.jpeg)

---

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [February 5, 2021, 8:04am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/33 "2021-02-05T08:04:58Z")

</div>

I tried a little.  
Specifying the text color for the group title worked on Mac and iPhone.  
It didn’t work on Android devices.  
Is your phone an android?

In any case, you should ask the masters.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 5, 2021, 8:06am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/34 "2021-02-05T08:06:33Z")

</div>

okidoki… thank you. yes, i have galaxy note

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [February 5, 2021, 1:10pm UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/35 "2021-02-05T13:10:07Z")

</div>

Very inventive!

[Previous page](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100.md?page=1)