CSS Trick: Change Favorite Heart to Bookmark

<pre><span><style>
[data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) {
stroke: white;
box-shadow: 1px 1px 45px 3px rgba(136,136,136,1);
d: path("m 1 1 l 16 0 l 0 18 l -8 -6 l -8 6 l 0 -18");
}
21 Likes

Here’s the d: path for a star:

<pre><span><style>
[data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) {
stroke: white;
box-shadow: 1px 1px 45px 3px rgba(136,136,136,1);
d: path("m 12 0 l 3 7 l 7 1 l -5 5 l 2 7 l -7 -4 l -7 4 l 2 -7 l -5 -5 l 7 -1 l 3 -7");
}

Screen Shot 2020-11-04 at 11.45.07 AM

6 Likes

Replicate styling to Tiles:

Screen Shot 2020-11-04 at 12.16.42 PM

<pre><span><style>
[data-test="app-toggle-icon-overlay"] :nth-child(1) :nth-child(1) {
stroke: white;
d: path("m 1 1 l 16 0 l 0 18 l -8 -6 l -8 6 l 0 -18");
}
[data-test="app-toggle-icon-overlay"] :nth-child(1) :nth-child(2) {
stroke: white;
fill: none;
d: path("m 1 1 l 16 0 l 0 18 l -8 -6 l -8 6 l 0 -18");
}
8 Likes

I want a red irregularly shaped circle. GO!

4 Likes

:rofl:

Screen Shot 2020-11-04 at 1.49.08 PM

<pre><span><style>
[data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) {
stroke-width: 3 !important;
d: path("m 13 2 t 5 2 t 6 9 t -9 8 t -10 -3 t -1 -8 t 9 -8");
}

@Jeff_Hager

13 Likes

:rofl: :rofl:

2 Likes

Well hot diggity! You did it! I bow down.

3 Likes

I also make balloon animals :clown_face:

9 Likes

image

3 Likes

How the hell did you do this :joy::joy::joy:

1 Like

I may use that just cuz it’s cool.

4 Likes

Hello @Robert_Petitto! I wonder if you can make a line of icons that do different actions.

For example: Like, save, react.

This is somewhat achievable on the details page. Especially with the new compound actions. Can create an inline list with different actions based on condition.

Thank you. By the way, when do you officially add compound stocks?

Not sure. Probably in a couple weeks.

1 Like

Was poking around a bit last night after I saw this and found a couple of potentially useful links:

5 Likes

The first one is how I built these :wink:
The second would have been a LOT quicker :sweat_smile:

EDIT: The second link doesn’t seem to provide compatible paths.

1 Like

Well… that might explain why I was struggling to get any of them working in Glide! :rofl::joy:

Actually @Robert_Petitto, I just had another go at this and got it working.

Twitter symbol:

And the CSS:

<pre><span><style>
[data-test="app-switch-view"] :nth-child(2) :nth-child(1) :nth-child(1) {
stroke-width: 3 !important;
d: path("M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266");
}

Trick is just to use everything that’s included in the quotes, and ignore the rest.

1 Like

But does it get filled in when clicked?

1 Like