# إضافة التصاميم

**URL:** https://meta.discourse.org/t/layouts-plugin/55208
**Category:** Plugin
**Tags:** pavilion, broken
**Created:** [5 يناير 2017، 9:41ص UTC](https://meta.discourse.org/t/layouts-plugin/55208 "2017-01-05T09:41:13Z")
**Posts on this page:** 20
**Page:** 7

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [19 سبتمبر 2017، 12:55ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/124 "2017-09-19T00:55:43Z")

</div>

> [@exetico](#):
>
> Have you an overview with all known widgets/layouts (other than the ones, made by you)?

The only ones I’m aware of are mine and those made by @Alavi1412. It is relatively easy to adapt any existing [Discourse widget](https://github.com/discourse/discourse/tree/master/app/assets/javascripts/discourse/widgets) or combination of widgets to work with this plugin.

> [@exetico](#):
>
> It could also definatly be a good idéa to make a new template for layouts, other people could jump on (Remember comments 😉) - and also recommend to put something like “discourse-layouts” as topic in their Git’s.

I’m not sure what you mean?

> [@exetico](#):
>
> Just a tip - I think you need to update the code behind the Twitter-solution. The widget showing up one more time, after each page-visit (without reload). I had the same issue with $( document ).ready(function() {}); after you improved how the scripts is handled. I’m not using the Twitter-widget feature at the moment.

Yeah. That’s just the custom html plugin. The issue is with the js in the script tag I included in the custom html, not with the custom html plugin or layouts plugin.

---

<div class="post-metadata">

### Author: ![jomaxro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jomaxro/32/126216_2.png) [@jomaxro](https://meta.discourse.org/u/jomaxro)
#### Post date: [19 سبتمبر 2017، 6:30ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/125 "2017-09-19T06:30:47Z")

</div>

> [@angus](#):
>
> I can no longer edit the original post.

Consider it wiki’d. 🗒

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [25 سبتمبر 2017، 5:49م UTC](https://meta.discourse.org/t/layouts-plugin/55208/126 "2017-09-25T17:49:55Z")

</div>

Hey, @angus. Something got broken. I’m re-categorizing until it’s fixed.

I saw some post that was a callout to all plugin developers, that I suspect was related, but I can’t find it.

```plaintext
I, [2017-09-25T16:53:06.407281 #15] INFO -- : > cd /var/www/discourse && su discourse -c 'bundle exec rake db:migrate'
rake aborted!
NoMethodError: undefined method `before_filter' for DiscourseLayouts::WidgetController:Class
Did you mean? before_action
/var/www/discourse/plugins/discourse-layouts/controllers/widget.rb:4:in `<class:WidgetController>'
/var/www/discourse/plugins/discourse-layouts/controllers/widget.rb:3:in `<top (required)>'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/dependencies.rb:286:in `load'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/dependencies.rb:286:in `block in load'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/dependencies.rb:258:in `load_dependency'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/dependencies.rb:286:in `load'
/var/www/discourse/plugins/discourse-layouts/plugin.rb:51:in `block in activate!'
/var/www/discourse/lib/plugin/instance.rb:248:in `block in notify_after_initialize'
/var/www/discourse/lib/plugin/instance.rb:246:in `each'
/var/www/discourse/lib/plugin/instance.rb:246:in `notify_after_initialize'
/var/www/discourse/config/application.rb:211:in `each'
/var/www/discourse/config/application.rb:211:in `block in <class:Application>'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/lazy_load_hooks.rb:43:in `execute_hook'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/lazy_load_hooks.rb:52:in `block in run_load_hooks'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/lazy_load_hooks.rb:51:in `each'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/lazy_load_hooks.rb:51:in `run_load_hooks'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/application/finisher.rb:73:in `block in <module:Finisher>'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/initializable.rb:30:in `instance_exec'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/initializable.rb:30:in `run'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/initializable.rb:59:in `block in run_initializers'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/initializable.rb:58:in `run_initializers'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/application.rb:353:in `initialize!'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/railtie.rb:185:in `public_send'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/railtie.rb:185:in `method_missing'
/var/www/discourse/config/environment.rb:5:in `<top (required)>'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/dependencies.rb:292:in `require'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/dependencies.rb:292:in `block in require'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/dependencies.rb:258:in `load_dependency'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activesupport-5.1.3/lib/active_support/dependencies.rb:292:in `require'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/application.rb:329:in `require_environment!'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/railties-5.1.3/lib/rails/application.rb:445:in `block in run_tasks_blocks'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/rake-12.0.0/exe/rake:27:in `<top (required)>'
/usr/local/bin/bundle:22:in `load'
/usr/local/bin/bundle:22:in `<main>'
Tasks: TOP => db:migrate => environment
(See full trace by running task with --trace)

```

---

<div class="post-metadata">

### Author: ![j.jaffeux](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/j.jaffeux/32/60297_2.png) [@j.jaffeux](https://meta.discourse.org/u/j.jaffeux)
#### Post date: [25 سبتمبر 2017، 5:51م UTC](https://meta.discourse.org/t/layouts-plugin/55208/127 "2017-09-25T17:51:20Z")

</div>

It’s due to discourse being on rails 5.1 now, should be an easy fix.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [26 سبتمبر 2017، 1:50ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/128 "2017-09-26T01:50:10Z")

</div>

Fixed ☀

[https://github.com/angusmcleod/discourse-layouts/commit/080479e9147142ecf965a796f0b4307b00e2283f](https://github.com/angusmcleod/discourse-layouts/commit/080479e9147142ecf965a796f0b4307b00e2283f)

Example: [https://discourse.angusmcleod.com.au/c/layouts](https://discourse.angusmcleod.com.au/c/layouts)

@pfaffman Could you re-categorize? Thanks.

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [26 سبتمبر 2017، 3:41ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/129 "2017-09-26T03:41:13Z")

</div>

> [@angus](#):
>
> Could you re-categorize? Thanks.

I assumed that you could! It’s your post. But thanks @jomaxro!

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [30 سبتمبر 2017، 6:58م UTC](https://meta.discourse.org/t/layouts-plugin/55208/130 "2017-09-30T18:58:34Z")

</div>

Hi Angus,

After the update, the layouts plugin and widgets are working fine, but the widget selection page (in admin panel) is blank.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [1 أكتوبر 2017، 6:26ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/131 "2017-10-01T06:26:50Z")

</div>

Hm, I’m not seeing an issue. Did you clear the plugins using the X button? If so try rebuilding your container.

 ![Screenshot at Oct 01 14-25-50](https://global.discourse-cdn.com/meta/original/3X/a/0/a03ff13d0a45668bfd39fd5c23c0a0312543ca48.png)

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [1 أكتوبر 2017، 8:00ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/132 "2017-10-01T08:00:33Z")

</div>

![Untitled](https://global.discourse-cdn.com/meta/original/3X/9/d/9de515d1655fd59aa484d861dd9b163f00af6e85.png)

this is the snapshot of the admin-widget selection page.

I have two widgets installed: custom-html and the modified profile widget, both updated after Rails 5.1 update.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [2 أكتوبر 2017، 12:38ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/133 "2017-10-02T00:38:48Z")

</div>

Still can’t reproduce this error 😕 . I’ve tried using just your profile widget and the custom html widget. The layouts admin works fine. Also, those logs seem unconnected to the layouts code. Have you tried rebuilding your container (i.e. `./launcher rebuild app`)? Are you using the Discourse Master branch? What other plugins do you have installed?

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [2 أكتوبر 2017، 6:33ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/134 "2017-10-02T06:33:25Z")

</div>

yes, everything as said: we are using the Master branch + we have rebuild recently (yesterday).

plugins:  
math, header search, cake-day, data-explorer, and telegram notification.

🤔

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [3 أكتوبر 2017، 1:13ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/135 "2017-10-03T01:13:09Z")

</div>

nada. To help you further, I’ll either need more logs, or access to your instance.

 ![40 AM](https://global.discourse-cdn.com/meta/original/3X/f/5/f5b7d53706add22c87d9b36df0240fd780394962.png)

* * *

 ![01 AM](https://global.discourse-cdn.com/meta/original/3X/8/5/858971e973176ed6b838ec6ecea7df9a9508cc20.png)

* * *

 ![25 AM](https://global.discourse-cdn.com/meta/original/3X/2/5/25783051609c687d5ef93435ba49ac1231ca90cf.jpg)

---

<div class="post-metadata">

### Author: ![Pad\_Pors](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pad_pors/32/52016_2.png) [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [4 أكتوبر 2017، 9:43ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/136 "2017-10-04T09:43:07Z")

</div>

here is the error I got repeatedly these days:

`Job exception: Unsupported argument type: 2187 (Fixnum)`

```plaintext
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activerecord-5.1.3/lib/active_record/relation/where_clause_factory.rb:27:in `build'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activerecord-5.1.3/lib/active_record/relation/query_methods.rb:612:in `where!'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activerecord-5.1.3/lib/active_record/relation/query_methods.rb:605:in `where'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activerecord-5.1.3/lib/active_record/relation/finder_methods.rb:78:in `find_by'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activerecord-5.1.3/lib/active_record/querying.rb:7:in `find_by'
/var/www/discourse/vendor/bundle/ruby/2.3.0/gems/activerecord-5.1.3/lib/active_record/core.rb:203:in `find_by'
/var/www/discourse/app/jobs/regular/create_avatar_thumbnails.rb:12:in `execute'
/var/www/discourse/app/jobs/base.rb:153:in `block (2 levels) in perform'

```

does it help?

even browser is up-to-date! and I’m not sure where this comes from.

---

<div class="post-metadata">

### Author: ![Bolarinwa\_Balogun](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bolarinwa_balogun/32/138753_2.png) [@Bolarinwa\_Balogun](https://meta.discourse.org/u/Bolarinwa_Balogun)
#### Post date: [25 أكتوبر 2017، 1:03ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/137 "2017-10-25T01:03:53Z")

</div>

Hi,  
I recently heard about plugin and wanted to make use of it to enable a navigation sidebar in my topics page.

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [25 أكتوبر 2017، 11:30ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/138 "2017-10-25T11:30:44Z")

</div>

Yup, you can do that with this plugin. You will need your own navigation widget though. Or you could try using the custom html widget.

---

<div class="post-metadata">

### Author: ![Bolarinwa\_Balogun](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bolarinwa_balogun/32/138753_2.png) [@Bolarinwa\_Balogun](https://meta.discourse.org/u/Bolarinwa_Balogun)
#### Post date: [1 نوفمبر 2017، 2:34ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/139 "2017-11-01T02:34:51Z")

</div>

How do I get the custom html widget?  
Thanks

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [1 نوفمبر 2017، 7:36ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/140 "2017-11-01T07:36:16Z")

</div>

[https://github.com/angusmcleod/layouts-custom-html](https://github.com/angusmcleod/layouts-custom-html)

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [25 نوفمبر 2017، 4:45ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/141 "2017-11-25T04:45:03Z")

</div>

I was trying to add the “create new topic” button to the profile widget and failed miserably 😄

Now, I get an error in the console after rebuilding with official profile widget.

Did something change in Discourse?

`Error: Could not find module discourse/widgets/component_connector` imported from `discourse/plugins/layouts-profile/discourse/widgets/profile`

* * *

Edit:

Well it turns out something has changed. I looked at the Discourse Repo and apparently `widgets/component_connector` was modified 4 days ago.

It’s is not called `widgets/component_connector` Then name is actually `widgets/component-connector`

So I edited Line #2 in `layouts-profile/assets/javascripts/discourse/widgets/profile.js.es6`

From this:

`import ComponentConnector from 'discourse/widgets/component_connector';`

To this:

`import ComponentConnector from 'discourse/widgets/component-connector';`

And everything seems to be back to normal now.

Still haven’t figured out how to add the “New topic” button yet though, even though I went through the lovely instructions above in this post. 😁

One of those days…

---

<div class="post-metadata">

### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus)
#### Post date: [26 نوفمبر 2017، 2:02م UTC](https://meta.discourse.org/t/layouts-plugin/55208/142 "2017-11-26T14:02:31Z")

</div>

Thanks for the report 👍

I’ve updated the widget so that it works with the latest. And added some other minor fixes.

[https://github.com/angusmcleod/layouts-profile/commit/0fb6caa459754cd798d7bfd858390ce95201a153](https://github.com/angusmcleod/layouts-profile/commit/0fb6caa459754cd798d7bfd858390ce95201a153)

> [@lll](#):
>
> Still haven’t figured out how to add the “New topic” button yet though

As it sounds like you’ve already read my [previous explanation](https://meta.discourse.org/t/custom-layouts-plugin/55208/10) of how to do this and given it a shot, here’s some working methods with an explanation of what is going on. Add the methods to your version of the profile widget and see how you go.

First, let’s add a new button widget to the actions array, at the bottom of the `html()` method (before `actions` is pushed to `contents`).

```plaintext
actions.push(this.attach('button', {
  label: 'topic.create',
  icon: 'plus',
  action: 'createTopic',
  className: 'btn-small'
}));

```

Then add the `createTopic` method as a new method in the widget. I’ve added some comments to explain what’s going on. I’ve assumed that you want the button to work in both discovery (i.e. topic lists) and topic routes. This method is designed to work in both.

```plaintext
createTopic() {
  // First we get the composer controller, as that is what we'll need 
  // to open the composer with. As we want to also check for existing 
  // drafts and the current discovery category, we'll also get the 
  // discovery controller.
  const discoveryController = this.register.lookup('controller:discovery');
  const composerController = this.register.lookup('controller:composer');

  // I'm assuming the action you want to take is createTopic. The other
  // actions you can take are listed at the top of the composer model.
  let params = { action: 'createTopic' };

  // Here we load the relevant composer params from the discovery controller
  // (they may not exist though, e.g. if we loaded a topic directly)
  const categoryId = discoveryController.get('category.id');
  const draftKey = discoveryController.get('model.draft_key');
  const draftSequence = discoveryController.get('model.draft_sequence');

  // let's assign the topic if we're in a topic
  const topic = this.attrs.topic;

  // First we'll set the initial category in the compose category selector.
  // You could set this to any category id you wanted. But let's set it 
  // to the topic category if we're in a topic and, failing that, the 
  // discovery category if there is one.
  if (topic && topic.get('category')) {
    params['categoryId'] = topic.get('category.id');
  } else if (categoryId) {
    params['categoryId'] = categoryId;
  }

  // if there is a draft new topic in discovery, load it, otherwise start
  // a new one.
  if (draftKey && draftSequence) {
    params['draftKey'] = draftKey;
    params['draftSequence'] = draftSequence;
  } else {
    params['draftKey'] = 'new_topic';
  }

  // Finally, let's open the composer with our params!
  composerController.open(params);
  },

```

Now we’ve got a New Topic button in the profile widget.

 ![Screenshot at Nov 26 22-01-37](https://global.discourse-cdn.com/meta/original/3X/9/9/99b456d64fa41461a470afcf6813193b7b3436d2.png)

If you wanted a `createTopic` button that only works in discovery routes, that’s actually a lot simpler, as you just need to send `createTopic` to `route:discovery` and it will handle the rest. However, as you seem to be using the profile widget in both discovery and topic contexts, the above method will work in both.

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [28 نوفمبر 2017، 2:19ص UTC](https://meta.discourse.org/t/layouts-plugin/55208/143 "2017-11-28T02:19:12Z")

</div>

> [@angus](#):
>
> As it sounds like you’ve already read my previous explanation of how to do this and given it a shot, here’s some working methods with an explanation of what is going on. Add the methods to your version of the profile widget and see how you go. […]

That was incredibly kind of you to go thought that tutorial again! I read and went through the steps once again. And read the original instructions one more time, but still 🙃

I want to thank you regardless though. I will try to go through the instructions one or two more times and let you know what happens 🤞

[Previous page](https://meta.discourse.org/t/layouts-plugin/55208.md?page=6)

[Next page](https://meta.discourse.org/t/layouts-plugin/55208.md?page=8)
