Hide specific tags from the sidebar or tags page

luceos

No extension would be needed. This could be best PRed against the tag extension itself.

MikeJones

Minor - bug (If you can really call it a bug)

This code does not work with the User Directory Extension.

If you are looking at your user directory then pick any other option other than the default from the user directory filter the tags to appear on the left. This isn't a huge issue cause its most likely only your admins who can see this page anyway, but I just wanted to point it out.

MikeJones

S0 I was playing around with the CSS today. IF you want to hide the more tags button just add this line:

   [href="/tags"] {
	    display: none !important;
	}

clarkwinkelmann

MikeJones careful, your code also removes the "Tags" link below "All discussions", making it impossible to access the tags page. This might not be the intended behavior.

It could also hide links to the tags page inserted by users on the forum, if using relative links (like [url=/tags]click here[/url]). If this happens it might cause headache to the forum moderators once someone encounters it and can't figure out why their link isn't rendered.

To hide only the "more" button, I suggest using:

.item-moreTags { display: none; }

MikeJones

clarkwinkelmann sweet thanks! I will try this out when I get home

MikeJones

Found another little bug, for some reason, this code does not work to hide the tags if you use the filters for "Top", "Newest", or "oldest" the tags always pop back up after selecting one of those.

clarkwinkelmann

MikeJones this code

Which one ? I'm curious to check that.

UPDATE: oh okay I see. With the code provided by jordan, it will only match the exact url. But the url changes when you apply a filter because the filter is also applied to all those urls (for example /t/general becomes /t/general?sort=top).

You could replace the exact match [href=] with a start-match [href^=]. See https://css-tricks.com/almanac/selectors/a/attribute/ for the available selectors 😉

HD3D

Can anyone help me with similar thing?
How to hide/exclude specific tag from search result?

jordanjay29

HD3D That one requires more changes on the backend. You'll be better off posting it in the Dev tag instead, it's not a CSS fix (even if you hide the results through frontend trickery, they're still going to be loaded).

TidbitSoftware

In my use case, I wanted to hide the 'Best Answer' tag link (https://extiverse.com/extension/fof/best-answer) from the left sidebar and 'Tags' page. To do so, I added the following to the 'Custom Styles' from the 'Administration' page:

a[href='/forum/t/best-answer'] { 
    display: none !important;
}

AndyS

jordanjay29 I know this post is 5 years old but I'm just starting out with Flarum and want to be able to hide secondary tags from Sidenav on all pages where it is displayed. The CSS code given in this post seems to be the solution I'm looking for but after pasting it into the Custom CSS code box and adjusting the slug names to match the ones I want to hide, the tags are still displayed in the Sidenav,

Is there something else I need to do?

User31

AndyS

I've been working on the same thing all afternoon.
Here's what I've pieced together so far:

/*REMOVE-NAV-TAGS BEGIN*/
.IndexPage-nav.sideNav .item-following, 
.IndexPage-nav.sideNav .item-allDiscussions, 
.IndexPage-nav.sideNav .item-badges, 
.IndexPage-nav.sideNav .item-birthdays,
.IndexPage-nav.sideNav .item-categories {
	display: none;
}
.item-moreTags { display: none !important;  }
/*REMOVE-NAV-TAGS END*/

Still haven't figured out how to remove all the other tags though.
And I'm actually trying to get rid of the entire secondary navigation altogether.

EDIT: To add example image:

My intended goal with this-(from it's current state as shown in the image above)-is:

1. Remove all the side nav tags.
2. Remove the white top & bottom borders.
3. Remove the horizontal scrolling bar thing.
4. Center the ['Start a Discussion'] button, or instead moving it somewhere either in the header image/or in the header navigation bar.
5. Next would be removing the entire side navigation scroller thing from Post pages, so posts can then be widened to fill the full page width.

(Hopefully I'll eventually be able to find the necessary CSS codes to achieve these tasks...😅 although this coding stuff is just so utterly mind boggling that I may likely need to hire an expert.)

EDIT: To add this code I've customized-(in case anyone needs it)-for removing the discussions page side-navigation slider-panel thing:

/*REMOVE-DISC-PAGE-SIDE-NAV-SLIDER BEGIN*/
@media (min-width: 768px) {
  .DiscussionPage-nav {
  display: none !important;
}
.DiscussionPage-stream {
  margin-left: 15px !important;
  margin-right: 15px !important;
  }
}
/*REMOVE-DISC-PAGE-SIDE-NAV-SLIDER END*/

(NOTE: I don't know if the above code is the best way to achieve this, although it seems to be working on 3 of my sites so far.)

AndyS

User31

Thanks for sharing. In my case I'm happy to keep tags for 'Following' and 'All Discussions'. I'm also wanting to keep the Primary tags which appear at the bottom of Sidenav. It's just the secondary tags I want to exclude from Sidenav although I still want them to appear on the "All Discussions" page.

Is there some documentation you are referencing to get as far as you have? I know nothing about CSS either but I could try working on this in parallel to you if I just knew where to start.

User31

AndyS

No worries Andy.
I think I understand what you're intending to achieve.
Although, that said, I currently haven't found any potential solutions. (*but I'll keep an eye out still.)

Regarding the query on reference documentation and such.
A lot of stuff I've randomly found sprinkled/buried around this forum, as there are plenty of awesome Flarum community members who've generously provided effective codes other the years.
W3Schools website can be pretty helpful too.
🤓👍W3Schools
Yet in all honesty, and admittedly, I seem to find significant difficulty comprehending any computer coding documentation in general.

It just goes 'in one ear & out the other' as they say.

Ie: I can read the presented material, but it largely just doesn't make any sense to my mind.

Whereas instead I find by practically applying codes and directly seeing the results-(😅which are often variably disastrous)-somehow my mind usually then begins to form a degree of general comprehension as to the "nature" of the practically applied codes.

From that point I more or less continue arbitrarily altering/or adding those codes with others and repeating the practical application trials....😄to see what happens.

In case you were interested. I've started gathering all the codes that worked for me into free public resource threads over at Λsylum

AndyS

User31

That all sounds pretty much like my way of working too! Not so much "code warriror", more like "code conscript" i.e, obliged to do it but without much training .

I've been on W3Schools for other things in the past and it's good. This time round I'm following a CSS course on CodeAcademy to get started with CSS.

Thanks for the link to your code stash. I'll definitely be checking that out. I'm only just starting to build a forum for a volunteering group I belong to, many of whom are techno-sceptics so my strategy is to try to keep the site as simple as possible and only introduce bells and whistles once they are comfortable. That's one reason why I want to get rid of the secondary tags from the SideNav element - a few nested primary tags is fine but adding a dozen or so secondary tags makes it cluttered.

Still hoping somebody in the community with more skill and knowledge than me is listening in on this thread and will be able to give me some pointers to achieve what I need. I will of course share here if I get it working.

Andy

User31

AndyS

😎Andy mate, I have to say. You seem like a fantastic individual!

Ahh mean, I had initially begun noticing getting a really good impression from you about 2-3 days ago after reading the first post of yours-(that I'm currently aware of reading.)

However I wasn't sure if my impression was accurate until just now....because you've literally said exactly the same phrase I'd almost used in my previous response to you this morning. Except I chose not to use it as I'd mistakenly assumed you might not know what I meant by - code stash...😂.
So I figure either you're some kind of mind-reader, or you're someone who possibly operates on a similar level as me.
This is further supported by your described intentions and goals too.
Oddly enough I am also inclined in a very similar sense.... although I belong to no group at all, yet still my underlying motivators with my forum adventures are voluntarily for the benefit of what is technically "a group that I belong to"—that being man-kind.
And I agree with you regarding forum simplicity as well.
Simplicity is a major priority for me too.
One of the aspects of Xenforo that I wasn't fond of was the predominant communal push towards ever increasing complexity. Almost as though the dominant belief amongst the XF "webmasters" is that everyone everywhere is a computer whizz just like them.
I am certain that one of the keys to forums finally reasserting superiority over the feral "fast-food/junk food" mass social media "hybrid forum" juggernauts, is simplicity.

🤔... sorry, I've probably gone off on a tangent here.

Anyways I just tested out your new tag removal code....😃👍 it works perfectly!

Infact, your code also removes Primary Tags too.

Well done Andy!

AndyS

Wow! I just stumbled on a partial solution to what I want to do. I had created a secondary tag called "secondary tag" and added this code into Custom CSS

.sideNav {
[href*="secondary"] {
display: none !important;
}
}

and to my surprise it worked. Obviously that only works on a specific tag name so now if I can just find out how secondary tag elements are distinguished from primary tags then I'm thinking I could make the code generic to remove all secondary tags from sideNav.

User31

AndyS

What I've done is made duplicates of your code, 1 for each tag I wanted removed.

Right now on the main page @Asylum there are no tags visible at all in the secondary navigation.
It's completely vacant—except for the 'Start a Discussion' button.

One thing I don't understand yet, is why only a handful of tags were shown in the secondary nav when there are around 20-30 of them.
I actually expected to see each of them appearing as I removed each of the already visible tags, yet fortunately that didn't occur. So I only had to remove five tags all up, instead of 20-30.

AndyS

User31

Well that's good it worked for you. Happy to have been of assistance.

Just exploring a little further what happens with that code. I see that a user can still choose them when starting a discussion (which is what I wanted) and also the tags are still visible on the Tags page (which is also what I wanted).

So, so far so good. But looking at the html for the page I still haven't been able to identify any class, attribute or whatever that identifies a tag as a secondary tag. Which means for the moment referencing specific tags by name is the only approach, which will be a pain in the butt whenever I need to add more secondary tags. So still searching for a generic solution to my problem.

If I knew how to code I think what I'd like to do would be to have a button or a link after the last primary tag in SideNav which would toggle on/off display of the secondary tags. But that's all way beyond my capabilities.

AndyS

User31 One thing I don't understand yet, is why only a handful of tags were shown in the secondary nav when there are around 20-30 of them.

Yes I played around with this. It seems like there is a maximum of three secondary tags displayed in the SideNav element. And I think "removal" code doesn't actually remove the tags - it just makes them invisible but they are still occupying the three slots available so you have to click on More... to go to the Tags page where you can see all the secondary tags along the bottom.

Actually it seems it's a little more subtle than that. In the Tags administration page the secondary tags are sorted into alphabetical order but it looks like SideNav works off of order in which they were created which I am guessing is determined by an internal sequence number. So if that's right, in my use case, what I have to do is make sure that I add CSS code which will always hide the three secondary tags with the lowest sequence number to make sure the three slots in SideNav are always occupied by hidden tags.

I;m not sure I like that sort of data-dependent futzing but I'm going to play with that a little more to see if it breaks anything else.

User31

AndyS

Have you got yourself a test site?

I should've mentioned this earlier.

While only using one site I found it challenging to test any CSS codes because most of the time I'd need to remove a bunch of others, typically resulting with making things disorganized and generally confusing.

Right now I'm using 3 Flarum sites simultaneously.
Each basically being thematic clones.

So I can do all the new code testing at one site without messing up the other two, which I simply add any successful new codes to once tested.
And if I make a huge mess on the testing site, it's easy to copy the entire CSS code base from either of the others.