Adding a button when viewing a user's profile

(Arran Scott) #1


I’ve read on a few topics that it’s strongly advised against editing the core code.

I’m running into an issue straight away and I want to do things the correct way rather than just hacking my way through it.

A couple of examples:

I want to add another button under the ‘Message’ button when viewing a users profile - do I create a new plugin that just adds the button? Do I create a connector and inject it through an already existing plugin outlet?

I also want to remove the collapsible profile top bar, so for that I know I can just remove the ‘collapsed-info’ class but that feels dirty.

What are my options?


(Mittineague) #2

AFAIK, for changes to survive updates there are two options.

Use a plugin
The plugin might break, but it won’t get replaced like a hacked Core file would.
Using a plugin-outlet works very well for inserting things into the DOM
For removing things, usually CSS display: none works

Use Admin -> Customize
These work and survive updates, But depending on what and how much you want to do might not be the best choice.

(Arran Scott) #3

Ok, thanks.

Will start hacking on a plugin then!

What do you recommend for the collapsible profile header?

I don’t see any other way of doing that other than removing the class (or apply different styles to said class).


(Mittineague) #4

Are you certain you want to remove all of that?
It contains quite a lot of information that I imagine many would want to have there.

<section class="collapsed-info about has-background" style="background-image: url(">
      <div class="profile-image"></div>
      <div class="details">
        <div class="primary">
          <img alt="" src="" class="avatar" height="120" width="120">
          <section class="controls">
              <li><a data-ember-action="11591" class="btn" href=""><i class="fa fa-angle-double-down"></i>Expand</a></li>
          <div class="primary-textual">
            <h1>Mittineague <!----></h1>
              <h3>Plugin Author</h3>
<!---->            </h3>
            <div class="bio">
<p><a href="" class="onebox" target="_blank"></a></p>
<p>Beginners Discourse Plugin Tutorials <br>
<a href="" class="onebox" target="_blank"></a><br>
<a href="" class="onebox" target="_blank"></a><br>
<a href="" class="onebox" target="_blank"></a></p>
        <div style="clear: both"></div>

(Arran Scott) #5

I don’t want to remove it completely, I just want it to be extended by default.

I’ve done it by overriding the default view with a folder structure the same as the one in the jsapp folder.

This seems to work ok, I guess I can just re-install the plugin as and when I update Discourse?


(Mittineague) #6

I tried display: block; visibility: visible but no joy - not that I thought it would be that easy, but I tried anyway.

Removing the “collapsed-info” from the class works, but I think that would need JavaScript instead of a simple CSS-only solution.

(Charles Walter) #7

@arrancscott on which template are you trying to change the link to go straight to the full profile? Have you already read this topic?


I looked at this earlier and almost everything can be revealed by overriding the CSS downstream of the collapsed-info class:

However the grey strip at the bottom:

Which is here in the dom:

Is not even present in the Dom until the expand button has been pressed. So I guess some client side code needs to be called, or the behaviour overridden via a plugin or similar.

Although, it’s only the user’s own profile that is collapsed - everybody else’s is open by default.

Edit: And this jQuery (tested on Meta in Chrome dev tools console for non admin user ) simulates a click on the expand button and expands the profile.

      $(' .viewing-self .user-main .details .primary  ul li .btn')[0].click();

Not that I think that it has much practical use, but it'll work with some fiddling, it seems, if needed.

(Kane York) #9

How about this: override collapsedInfo on controllers/user to always return false?

  'collapsedInfo': false

By the way, this… doesn’t look too great.

p.s. that’s my public email, feel free to email me there


Sorry for jumping in, that works great. Is there any need to run that code in doc ready or similar?

Is there any code references that details Discourse on the client? I’ve only found the odd snippet so far.

(Kane York) #11

Just put it in </head> in a customization. It’ll run right after all the classes get defined.

And, well, basically only the code is the documentation. I have a lot of the tribal knowledge involved, so I was able to move to the correct location quickly :stuck_out_tongue:



It’s very frustrating digging around all the time so I end up bookmarking snippets like your example above.

Can’t help wondering how much more productive guys like me (40 years experience, and no intention of writing proprietary server side code) would be, with just a little more client side specific documentation.

Edit: Apologies @arrancscott for jumping in.

(Arran Scott) #13

@ccdw - It’s ok.

I wasn’t aware that everyone else’s profile is open by default.

There are a few ways here it seems, I mean I’ve solved it by overriding the template but I guess this brings me back to my first question, what is the Discourse way of doing this?

I see there’s a few ways to customise the front end without editing the core code, but, is there any way of editing back-end code without changing core? For example, adding a Rails model and creating another table etc.