CSS help to hide


#1

Hi All

Does anyone know the CSS code to do the following?

  1. see screen shot below, I put in a RED rectangle box, I would like to hide the topic summary
    Awesome screenshot

  2. see screen shot below, the area in RED circle, is it possible to have the categories list vertically one on top of the other as opposed to side by side in 2 columns?

http://www.awesomescreenshot.com/image/1767432/7f45f1d291cbee7d3a6a6d77a1dc1ccf

Any suggestion or advice would be appreciated. Thanks


(Régis Hanol) #2
  1. To hide the topic summary
.topic-map { display: none; }
  1. To list categories one on top of the other (not recommended if you have lots of categories though)
.menu-panel {
  span.badge-category { max-width: 100%; }
  li.category-link { width: 100%; }
}

Strongly recommend that you learn CSS because that’s going to be useful if you want to customise your Discourse :wink:


#3

@zogstrip THANK YOU so much !! Both CSS codes work beautifully.

Yes I have been trying to learn CSS for well over a year now, watched tons of video tutorials, it all makes sense while I was watching the video tutorials but somehow retention is almost zero. It is something that I need to practice and drill in order to retain.

Thanks again for helping out !!


#4

Good way to try things is to use Inspect options on Chrome or Firefox (not sure of the english word they use). You can edit, add some options on the css class you chose, highlight the part you change, and it never mess things up because it’s only temporary on your browser. I use it a lot before making the customization on my admin panel.


#5

@zogstrip Hi Regis, I followed your code below so that the categories in the hamburger menu will be listed vertically one on top of the other. It is working very well in desktop view, but for some reason it is not working under mobile view.

Is there something extra that I need to add so that it will work for mobile view also so that the categories are listed vertically one on top of the other? Thanks


(Régis Hanol) #6

Yes, it needs to go under the mobile customization. For that, you need to click the little :iphone: icon :wink:


#7

@zogstrip ahh…THANKS Regis :slight_smile: , will give that a try