Css to hide topic timeline per topic


(Paul W) #1

I’m trying to hide the topic timeline, essentially trying to create a fullwidth page.
I only want to do this on one specific topic.

I’ve fairly easily found a css selector for the body

section[data-topic-id="77"] .topic-body {
  width: 100%;
}

but I can’t find a css selector to apply to #topic-timeline (or #topic-progress-wrapper), just so I can display:none

Can anyone help?


(Joe) #2

Take this with a grain of salt.

You won’t be able to do so with pure CSS.

CSS is cascading, meaning the direction it follows is always down the document tree.

.timeline-container comes before the element with the attribute data-topic-id and that’s why you won’t be able to select it with pure CSS based on the presence of the data-topic-id

You can do this with jQuery but the implementation I know for Discourse is not very efficient as it will fire on every single page load which is nonsense if you’re only trying to change one page.


(Paul W) #3

yep … knew all that :confused:

Kinda hoping someone has done something like insert topic-id into the body class :thought_balloon:


(Paul W) #4

How about someone savvy with the api ?

$('body').addClass('topic' + ${topic.get('id')})

p.s. I know nothing :stuck_out_tongue:


(Daniela) #5

Probably if you play with z-index you can hide the timeline without using jQuery

.timeline-container have z-index: 499 , so you can use 500 for .topic-body.
If you do not want avatar positioning problems use a 90% width instead of 100% and obviously use a white background

Something like this should work:

section[data-topic-id="77"] .topic-body {
    width: 90%;
    background:white;
    z-index: 500; 
}