Question

I’m trying to write a custom style sheet to rename Facebook Groups in the left sidebar. I am not an admin of the groups and cannot change the names, I just want to read something there that is meaningful to me, especially when many group names begin with the same words and appear the same in the sidebar list.

What I try to do is hide the original name and insert my custom name.

I can insert my custom group name with something like:

#navItem_group_136453550474635 a div:nth-child(2):after{
content: "Custom name";
}

Unfortunately I cannot “shrink” the div with the original name with “display:none”, only hide it, so that in effect there is some empty space pushing my custom name to a second line.

This works:

#navItem_group_162405550444366 a div div{
visibility: hidden;
}

This does not work:

#navItem_group_162405550444366 a div div{
display: none;
}

“display:none” does not work, presumably because the div already has display:block, but why doen’t my browser style sheet overwrite that?

I’m using safari under OS 10.8.?, but I believe this shouldn’t make a difference.

Answer 1

“display:none” does not work, presumably because the div already has display:block, but why doen’t my browser style sheet overwrite that?

Does your rule have the same specifity as the one Facebook is using to format this element?

Have you tried adding !important to your declaration, to overwrite the formatting of Facebook’s own stylesheet?