# 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:** 20\
**Page:** 1

<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 2, 2021, 4:55am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/1 "2021-02-02T04:55:41Z")

</div>

What I tried this time.  
★ An alternative to the tab bar at the bottom of the screen.  
★ Page transition animation.  
★ Elements that are displayed / hidden by device height.

> **[E-Book-ver.2](https://average-activity-125.glideapp.io/)**

---

<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 2, 2021, 5:00am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/2 "2021-02-02T05:00:03Z")

</div>

this is really cool!.. you going to share css for 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 2, 2021, 5:27am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/3 "2021-02-02T05:27:08Z")

</div>

what is the css for full screen image in welcome screen? that looks great…  
i know you probably wont tell code for that amazing button lol… looks like a lot of work

---

<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 2, 2021, 5:58am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/4 "2021-02-02T05:58:15Z")

</div>

```
<div top:0px; left: 0%; z-index:-1;" target="_blank">
<img src="image url" style="height: 55rem">
<pre><span><style>
[data-test="glide-app-bar"]
{display: none}
.jiuuwu svg 
{ display: none; }

```

The CSS on the TOP screen is the above description.

- I think there are other ways.
- The CSS class name may change due to specification changes.

---

<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 2, 2021, 6:02am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/5 "2021-02-02T06:02:39Z")

</div>

how to apply that in rich text? with image URL and i can put tiles on top of that image

---

<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 2, 2021, 6:13am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/6 "2021-02-02T06:13:22Z")

</div>

Please specify the image address in the “image url” part.

---

<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 2, 2021, 6:16am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/7 "2021-02-02T06:16:00Z")

</div>

not working, image is not stretching to the top i still have a bottom tab bar

 ![Proposal 2021-02-02 at 1.17.31 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/d/8df235ff21dadc9aa92affbed357b9a3b92a9386.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 2, 2021, 6:20am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/8 "2021-02-02T06:20:07Z")

</div>

Investigate the cause.  
Please wait for a little 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 2, 2021, 6:21am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/9 "2021-02-02T06:21:46Z")

</div>

and i can’t put elements on top that image, is there a way to send that image to the background?

---

<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 2, 2021, 6:31am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/10 "2021-02-02T06:31:37Z")

</div>

BTW, you are a magician! i love your sample of E-Book… it is sick!

---

<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 2, 2021, 6:37am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/11 "2021-02-02T06:37:18Z")

</div>

```
<div style="position: fixed; 
top:0px; left: 0%; z-index:-1;" target="_blank">
<img src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/EDxaxHAZKfbYKIyjmIus/pub/9Iaue2czbsl7ssKsKXOS.jpg" style="height: 46em; ">
<pre><span><style>
.jiuuwu svg {
display: none;
}
[data-test="glide-app-bar"]
{display: none}

```

★ Please try this.  
★ The code you sent will generate a background image.  
★ Regular components can be placed on top.  
★ If you move a tab other than the main tab to the side menu on the tab edit screen, the bottom tab will not be displayed.

---

<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 2, 2021, 6:38am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/12 "2021-02-02T06:38:58Z")

</div>

![Proposal 2021-02-02 at 1.38.04 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/1/5103d5861192bebd91c214798930dfc893c71d97.jpeg) . . ![Proposal 2021-02-02 at 1.52.00 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/7/87ad8f04327a724daebc071c76785d79fb04d4db.jpeg)

still bottom bar is there, but this is a great improvement!  
ありがとうございました @hisashi.fujita !

---

<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 2, 2021, 7:18am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/13 "2021-02-02T07:18:02Z")

</div>

now only thing i need is to change images to smaller sizes than Glide is offering, and i can make full screen view like a real website! lol  
is there a css for that?

---

<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 2, 2021, 8:18am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/14 "2021-02-02T08:18:32Z")

</div>

```
<div style="position: fixed; top:0px; left: 0%; z-index:-1;" target="_blank">
<img class="back_image" src="https://storage.googleapis.com/glide-prod.appspot.com/uploads-v2/EDxaxHAZKfbYKIyjmIus/pub/9Iaue2czbsl7ssKsKXOS.jpg">
    <pre><span><style>
    .back_image{
    width: max(400px, 100vw);
    }
    .jiuuwu svg {
    display: none;
    }
    [data-test="glide-app-bar"]
    {display: none}

```

You may be able to use this CSS.  
Depending on how it is used, it may not work well.

---

<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 2, 2021, 8:23am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/15 "2021-02-02T08:23:21Z")

</div>

can I apply this to the images from glide dynamically

 ![Proposal 2021-02-02 at 3.23.49 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/b/2b196b29ca127a5ce9e7a99f1cc4f0e48f49b0c3.jpeg)

and if there is a chance to take out the bottom tab bar…

---

<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 2, 2021, 8:34am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/16 "2021-02-02T08:34:41Z")

</div>

It can be applied dynamically using the glide table template function.  
★ Write the URL of the image in the G spreadsheet.  
★ Write CSS on the glide table template.  
★ Associate the image URL of the G spreadsheet with the image URL part of CSS.

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f78afa0eef62c6fbb5e53d05d390eef97db55168.jpeg "Template Column | Glide Data Editor Tutorial") ](https://www.youtube.com/watch?v=lJ8a0aMU2ds)

---

<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 2, 2021, 8:35am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/17 "2021-02-02T08:35:59Z")

</div>

あなたは最高です、そして私は本当にあなたの助けに感謝します

---

<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 3, 2021, 6:07am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/18 "2021-02-03T06:07:09Z")

</div>

```
<pre><span><style>
/*Hide svg at the top——————————————*/
.jiuuwu svg { display: none; }
/*Hide tytle at the top——————————————*/
[data-test="glide-app-bar"] {display: none}
/*Hide the bar at the bottom——————————————*/
#tabBar{ display:none; }
/*Hide svg at the bottom——————————————*/
.sc-cOigif.fALvAp svg { display: none; }

```

★ You can hide the upper and lower basic items with the above CSS.  
★ Please use partially if necessary.  
★ It is necessary to prepare a transition to another tab with a floating button etc.

---

<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 3, 2021, 6:20am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/19 "2021-02-03T06:20:53Z")

</div>

thank you!

---

<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, 4:33am UTC](https://community.glideapps.com/t/customize-the-prototype-tab-bar-of-the-e-book-app/22100/20 "2021-02-05T04:33:47Z")

</div>

is there a way to attach dynamic text to floating button?

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