I can’t find anything to change it, but wanted to ask before i put in a request.
I’d really rather it say Your Dashboard - as my users can have multiple public profiles accessible through their dashboard so it’s a bit confusing for navigation.
As far as I know there is no way to change the wording of “View Profile”. If it were anywhere to be changed it would be in the Settings section.
I tried using CSS, but seems like the fact that this menu isn’t immediately visible when you load the page (only after you click the profile picture) messes with it, I haven’t found a way to deal with that.
Bummer, I was hoping that there would be a work-around!
Not the end of the world, but a bit presumptuous to assume that in all cases people would want that button for a “profile” and not something like “your account”
Yes, the world has not ended because there is still CSS. Is this what you mean?
Did you use ::before or ::after master? I couldn’t get it to work at all.
It’s fine to use :before/:after, but you need to use font-size:0; for the parent element. I’ll just give you the code.
The issue is with the mobile view, where a div element is added via JavaScript. For now, I think “view profile” is not needed on mobile, so I removed it.
#app-modal-root > div > ul > li:nth-child(1) {
font-size: 0;
}
#app-modal-root > div > ul > li:first-child:not(:has(> [data-testid="mb-li"])):before {
content: "Hello World";
vertical-align: middle;
font-size: 14px;
}
/*Mobile display*/
#app-modal-root > div > ul > li:first-child > [data-testid="mb-li"] {
display: none;
}
Ah so this was the problem. I had something like this instead:
div[class*="nav-bar-common___StyledUl"] li:first-child::before {
content: "New Text";
visibility: visible;
}
div[class*="nav-bar-common___StyledUl"] li:first-child {
font-size: 0;
}
I also didn’t see the data-testid you mentioned. I used your code and it doesn’t change the text.
There isn’t any mb-li classes in my case. It’s just straight li classes.
Switch to the mobile view, especially after you use my two codes above.
You haven’t turned on the CSS preview.
Yes @ThinhDinh, you can use visibility or font-size, depending on the condition. But in this case, using font-size will not remove the hover effect.
It turns out the choice component also has the same selector. To avoid it, I tweaked it a bit:
#app-modal-root > div > ul > li:not([data-testid="wc-item"]):nth-child(1){
font-size: 0;
}
#app-modal-root > div > ul > li:not([data-testid="wc-item"]):first-child:not(:has(> [data-testid="mb-li"])):before{
content: "Hello World";
font-size: 14px;
}
/* Negating the pseudo effect above */
#app-modal-root > div > ul > li:not([data-testid="wc-item"]):first-child:has([data-testid="mb-li"]):before {
content: "";
}
@Himaladin @ThinhDinh - I’ve started tagging some of these threads as custom-css
There is some really useful stuff, and at least having that tag will make them a bit easier to find.
Thank you!
Do you know what’s the main difference between the “compile CSS” choice and “CSS preview”? I have always turned the “compile CSS” option on but I never know the difference between them.
Nope, but your latest one works. Thanks a lot!