Need Help with World icon + World name text color

Posted 13 days, 17 hours ago (Edited 13 days, 17 hours ago) by Marumenkai

Hello !! First time using the forums so,,, sorry if this isn't quite the right way to go about things,,!

I need help changing my world's text color. I'm using Pinky's world code freebie : https://toyhou.se/19287705.freebie-card-world

This is my CS world: https://toyhou.se/~world/177133.akudarus-wip
As you can see, I use a pixel icon for my group, and Pinky's code seems to be better suited for those full image group icons. However, I'd like to work around this for now if possible,,! Since my banner is a pattern + also a light color, the group's name text is hard to see because the text is white. The only time you can actually see the group's name is when you scroll.

If anyone can please help me out, that would be cool !! ;; My goal is to just change the group name's text color or an alternative of sorts so its visible on both the dark theme and against a light-colored pattern banner. And I'd like to figure out if its possible to change the circular icon into a squared one.... :'o

Avistella

You can try shifting the sidebar down so that the text starts against the black background. To do so, add this to the bottom of your existing CSS:

@media (min-width: 992px) {
.side-nav {
margin-top:-45px;
}
}

But if you specifically want to change the text colour, use this code:

.side-nav .display-group a {
color:HEXCODE;
}

To make the icon a square, use this code:

.side-nav .display-group img {
border-radius:0;
}

If you want the corners to be rounded, change 0 to a different value (ex. .75rem). The higher the number, the more rounded the corner will be

Marumenkai

Avistella Ty for the help!! The first code def solved the issue on text readability! However, I tried using the last code to change it into a square icon but it seems to have no effect on it ;o;

Avistella

Did you paste the code at the very bottom of the CSS? The order you paste the code is important.
If you did, try changing border-radius:0; to border-radius:0 !important;

Marumenkai

Avistella the !important; seemed to do the trick !! Thank you for the help ♥ ♥