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.
1 Like
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?
1 Like
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;
}
2 Likes
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: "";
}
1 Like
@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.
3 Likes
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.
Not too sure… However, the difference is clear when you enable “Compile CSS” because you won’t apply your custom CSS, and you may receive messages if there are errors in your code usage.
Does your custom CSS work when enabled?
2 Likes
Nope, but your latest one works. Thanks a lot!
2 Likes