Just a quick question, I am in the process of upgrading to 2.8.beta4 and I am just curious if there is a way to keep the old PM style, rather than have the new bubbles. Thanks!
Hi Zac
It is possible with override the current css if you really want to. Try something like this
This will looks like the default Discourse Light theme. Probably the best option is remove the archetype-private_message
class from body
with js. That keeps the custom theme style.
COMMON
.archetype-private_message {
.topic-avatar,
.topic-body {
border-top: 1px solid var(--primary-low);
}
.topic-body {
.cooked {
box-sizing: unset;
border: none;
margin-top: 0;
margin-left: 0;
padding: 1em 11px 0.25em 11px;
border-radius: 0;
}
&.highlighted {
animation: background-fade-highlight 2.5s ease-out;
.cooked {
animation: none;
}
}
}
.post-menu-area {
margin-top: 0;
}
.small-action-desc.timegap {
flex-wrap: wrap;
flex: 1 1 100%;
align-items: center;
padding: 1em 0;
text-transform: uppercase;
font-weight: bold;
font-size: var(--font-down-1);
color: var(--primary-medium);
}
.current-user-post,
.current-user-post:not(.moderator) {
.topic-body {
.cooked {
background: none;
border: none;
}
&.highlighted {
animation: background-fade-highlight 2.5s ease-out;
.cooked {
animation: none;
}
}
}
}
.topic-map {
border: 1px solid var(--primary-low);
border-top: none;
border-radius: 0;
padding: 0;
section {
border-top: 1px solid var(--primary-low)
}
.map:first-of-type .buttons .btn {
border: 0;
border-left: 1px solid var(--primary-low);
border-top: 1px solid transparent;
border-radius: 0;
}
.participants .user {
border: 1px solid var(--primary-low);
border-radius: 0.25em;
padding: 0;
background: none;
}
}
}
DESKTOP
.archetype-private_message {
.topic-map {
margin: 20px 0 20px 11px;
}
}
MOBILE
.archetype-private_message {
.topic-post {
margin: 0;
article {
border-top: 1px solid var(--primary-low);
}
}
.topic-body,
.topic-avatar {
border-top: none;
}
.topic-body {
flex: unset;
}
.boxed .contents {
padding: 10px 0 0 0;
}
.topic-map {
margin: 0;
}
}
As a complete JS newbie, what would be the best way to do this? A while loop or infinitely recursive function seems unideal.
My current solution looks like this:
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() =>{
window.onload = noBubbles();
});
async function noBubbles()
{
var elements = document.getElementsByClassName('archetype-private_message');
while(elements.length > 0){
elements[0].classList.remove('archetype-private_message');
}
}
</script>
This actually seems decently elegant to my novice eyes but I’m sure somebody will have a more efficient way lol
You’re still going to want to manually undo as much of the bubble stuff as you can via CSS because it does pop up for a split second when you load in but this at least prevents it from sticking around in a very simple manner that should work regardless of future changes to your themes
I would try something like this but I don’t know if this change has any side effect. CSS is always the safest and easiest for change something. That is why I posted that.
I don’t remember what was the body
class before the changes but I just replace it to archetype-regular
instead of remove archetype-private_message
class because there are some global css for [class*="archetype-"]
class so we keep that in private messages too.
Header
<script type="text/discourse-plugin" version="0.8">
const body = document.querySelector("body");
api.onPageChange(() => {
if (body.classList.contains("archetype-private_message")) {
body.classList.replace("archetype-private_message", "archetype-regular");
}
});
</script>
As far as I can tell, works like a charm!