[Solved] Is display none the right way to hide an element?

[iizag]

For example, if I want to hide something in bbpress forums, is it the right way to just do a quick display none?

If it is the right way, then which of the two options is best?

form#whats-new-form {
    display: none !important;
}

or

( just to make sure, ill add visibility)

form#whats-new-form {
    display: none !important;
    visibility: hidden !important;
}

[shaneisme]

display: none means it will be hidden AND removed from the flow of the website.

visibility: hidden means it will be hidden, BUT will remain in the flow of the website.

Essentially, visibility: hidden will not show the element, but will retain the space it takes up. Whereas display: none completely removes it.

But, when you’re talking about doing what you’re doing, it’s actually best to remove it in the code. You’re still processing and rendering the code, but you’re just hiding it in the styles which means you’re losing that performance (no matter how small that is, it still counts).

[Paulie_D]

The question is…why are you hiding it?

If you’re hiding it to show it later then display:none is a reasonable option.

Alternatively, you could hide it offscreen with a large positioning value.

Or add/remove it with JS/JQ

However, if you’re hiding it because it’s showing up on your page and you don’t want it there you need to think about how it’s getting there and fix that.

[iizag]

I want to hide it to remove it completely. I dont want that option showing. So if your saying then dont do display none, then edit the core files . But I thought it was always recomended not to touch core files, in my case, bbpress. So I can update smoothly in the future. So instead, whats my option? Is it possible to create a function in my child theme to remove it ?

like
if user is on user profile
then dont show “whats new”

with
if user is on their own profile
then dont show “what new”

[Paulie_D]

So if your saying then dont do display none, then edit the core files .

Core files no, I don’t think so…

Sounds to me as though you need to examine your php includes / functions / calls (I’m assuming this is php) to see why it’s being called.

There must surely be an option somewhere to include/exclude some information from being inserted in the first place.

[Alen]

Is it possible to create a function in my child theme to remove it ?

I’m not familiar with bbpress, but I would imagine there is a way to modify functionality without altering core files.

So recommended way is to definitely take care of this at server level. And anyone interested… here’s some CSS for hiding elements, etc…

.hidden {
  display: none !important;
  visibility: hidden;
}

.invisible {
  visibility: hidden;
}

.hide-text {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.visually-hidden {
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
.visually-hidden.focusable:active,
 .visually-hidden.focusable:focus {
  position: static;
  clip: auto;
  height: auto;
  width: auto;
  margin: 0;
  overflow: visible;
}

Code from Rock-Hammer

[iizag]

Thank you all for the help. I found a way to do it through php by just creating a blank php file and uploading it to my child theme with the instructions here https://buddypress.org/support/topic/resolved-how-to-disable-activity-commenting/ . Thanks again, now I know when to not use display none .

[Author]

Posts