# Change Image Picker style for uploading profile photos in Glide Pages

**URL:** <https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292>\
**Category:** Ask for Help\
**Created:** [September 27, 2022, 11:09pm UTC](https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292 "2022-09-27T23:09:41Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![sga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sga/32/36912_2.png) [@sga](https://community.glideapps.com/u/sga)\
**Post date:** [September 27, 2022, 11:09pm UTC](https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292/1 "2022-09-27T23:09:41Z")

</div>

Hi everyone!

Our small team is working on a project in Glide Pages to build a basic social media app.

We’d like to allow users to **upload a profile photo** in a form, but would like to change the style of the Image Picker so that it is a **round** icon. Like so:

![Screen Shot 2022-09-27 at 19.02.27](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/e/0e0fb7faae8199f6491064224e79f13348a017de.png)  
(Sample from Twitter)

With the help of older posts, here’s some code we tried so far. In a Rich Text field right above the form. (Not sure if we have the right class name, tbh.) Unfortunately, it does not work yet:

```auto
<pre><span><style>

[data-test="base-picker-button"] {
border-radius: 100px;
background-image: url("insertsampleurl.com");
}

```

Curious if anyone ran into a similar use case or has a solution. Thank you in advance!

---

<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:** [September 28, 2022, 12:28am UTC](https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292/2 "2022-09-28T00:28:45Z")

</div>

Interesting. Had a go at this…try this:

![CleanShot 2022-09-27 at 20.27.43](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/4/2/42af7eb4ae7e525bae4ecbc63af12d9ce826efd4.gif)

```auto
<pre><span><style>
[data-test="app-picker-button"] {
height: 100px !important;
width: 100px;
padding: 0;
border-radius: 50%;
}
.leftItem img {
width: 100px !important;
height: 100px !important; 
}

.rightItem {
position: absolute;
margin: 0 !important;
left: 75%;
bottom: 0%;
transform: translate(-50%, -50%);
}

[kind="twotone"] {
position: absolute;
margin: 0 !important;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
translate-x:
}

.main-content {
display: none;
}

```

---

<div class="post-metadata">

**Author:** ![sga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sga/32/36912_2.png) [@sga](https://community.glideapps.com/u/sga)\
**Post date:** [September 28, 2022, 12:51am UTC](https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292/3 "2022-09-28T00:51:07Z")

</div>

Wow thanks so much @Robert_Petitto! Appreciate you taking the time to build that out.

I just tried this and it didn’t work… BUT I think it might just be because Glide has a different class name for GlidePages (versus GlideApps). The code itself looks awesome. Do you happen to know where the class name might be hidden here?

For reference: I tried the “base-picker-button” and the “wire-base-picker” to no avail.

 ![Screen Shot 2022-09-27 at 20.47.11](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/e/9e19090c2bd1af26e9824158c6343c4d9761c634.png)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [September 28, 2022, 1:20am UTC](https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292/4 "2022-09-28T01:20:56Z")

</div>

You must have a Business plan to implement CSS in Glide Pages.

---

<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:** [September 28, 2022, 2:34am UTC](https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292/5 "2022-09-28T02:34:05Z")

</div>

Ah…ya…I built this in Glide apps, not pages. I’d have to toy with it.

---

<div class="post-metadata">

**Author:** ![sga](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/sga/32/36912_2.png) [@sga](https://community.glideapps.com/u/sga)\
**Post date:** [October 9, 2022, 5:10pm UTC](https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292/6 "2022-10-09T17:10:41Z")

</div>

Thank you @ThinhDinh! I am currently on the Free Plan while I work on developing the platform, but intend on going to the Business Plan once we’re ready to launch.

Do you know if we must be on the Business Plan for us to experiment with CSS in the Editor? (It’s ok for now if it does not publish the custom code.) Thanks in advance!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 10, 2022, 12:30am UTC](https://community.glideapps.com/t/change-image-picker-style-for-uploading-profile-photos-in-glide-pages/50292/7 "2022-10-10T00:30:07Z")

</div>

> [@sga](#):
>
> Do you know if we must be on the Business Plan for us to experiment with CSS in the Editor?

Yeah, I think you must be on the Business Plan to have it as an option.