Hide sub categories AND titles in category view


(mattdamod) #1

Hi, all. I’m re-designing our customer form and have come across an issue I can’t seem to resolve.

I have begun to use images as the name for the category. We aren’t decided on the size and style of the button as yet (so please ignore the garish colours in the screenshot), however, as you can see, you can still see the name of the category above the image and also the sub-categories.

So my questions are:

  • Can I remove the name of the category? If so, how?
  • Can I remove the sub-categories from the parent category in the home category view?

Thanks in advance :slight_smile:


(Joshua Rosenfeld) #2

Is your only concern about visuals? If that’s the case they can easily be hidden via CSS.

Before:

CSS:

.category-list {
    .category {
        .category-name, i {
            display: none;
        }
    }
    .subcategories {
        display: none;
    }
}

After:


(mattdamod) #3

Excellent! Can I just put that anywhere in the CSS or does it need to follow other specific code (sorry, I’m a noob!)


(Joshua Rosenfeld) #4

Assuming you are running the latest version of Discourse, you’re going to want to put it in a theme.

  1. Open the Admin Page.
  2. Switch to the Customize Tab.
  3. Switch to the Themes sub-tab.
  4. Find the Theme currently enabled, it will be marked by a *.
  5. If no themes are listed/enabled, create one by clicking new.
  6. Enable your new theme by checking the “Theme is enabled by default” box. Nothing will happen at this point as the theme is “empty”.
  7. Click “Edit CSS/HTML”
  8. Paste the code into the Common > CSS box.
  9. Save

If you created and enabled a theme in step 4, you’ll need to reload your homepage to see the change. If the theme was enabled, the change should’ve happened automatically after you clicked save.

For future changes, you may find this post helpful:


(mattdamod) #5

Do you mean here?


(Joshua Rosenfeld) #6

Yep, looks like your site is not running the latest version of Discourse. That would indeed be where it should go in older versions.


(mattdamod) #7

Is this not the latest version?


(Joshua Rosenfeld) #8

Depends on which branch you are following. That is indeed the latest stable branch update. Most sites follow tests_passed, where the latest version is 1.8.0.beta11.


(mattdamod) #9

Ahhh, I see. So is there a way of inserting that code and getting the same results in a different way?


(Joshua Rosenfeld) #10

Just paste the code I shared above into the CSS box you showed above. Feel free to add it above or below the existing CSS, just be careful to not insert it inside any existing CSS rules.


(mattdamod) #11

Thanks so much for your help @jomaxro. I’m going to have to ask our web developers to have a look at this as it looks like there is a rule in the CSS that might be overriding your suggestion (I’m assuming!?)

Thanks again :slight_smile:


(Joshua Rosenfeld) #12

If you can share the existing CSS, I can look. It’s also possible the CSS I shared uses a class that doesn’t exist in Discourse 1.7.8…

…but yes, web developers should be right at home with CSS.


(Joshua Rosenfeld) #13

Now I’m really embarrassed @mattdamod, I copied CSS with the rules commented out! If you remove the backslashes it will very likely work :sweat_smile:. (I’ve edited my post above).


(mattdamod) #14

No worries mate :slight_smile: I’ll give this a try and let you know!


(mattdamod) #15

Just tried it @jomaxro, works a treat! Thanks ever so much :slight_smile:


(mattdamod) #16

I’ve tried adding the same rule to the mobile CSS, however, it doesn’t want to play nice and still displays it (only on mobile). Any top tips? Thanks :slight_smile:


(Joshua Rosenfeld) #17

It looks like the v1.7.8 uses different classes on mobile so the CSS will be different.

Try this:

.category-list {
    .category {
        th.main-link {
            display: none;
        }
    }
    tr.subcategories-list {
        display: none;
    }
}

(mattdamod) #18

Nope :confused: I have tried in multiple places, like the mobile CSS and the regular CSS too


(Joshua Rosenfeld) #19

I’m not sure then…it’s hard for me to guarantee as I don’t have a system running 1.7.8 to test on.


(mattdamod) #20

Not to worry, thanks @jomaxro. You have been a really big help already :slight_smile: