# Layouts Plugin

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

<div class="post-metadata">

### Author: ![Jay91](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jay91/32/135181_2.png) [@Jay91](https://meta.discourse.org/u/Jay91)
#### Post date: [March 8, 2018, 7:12pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/167 "2018-03-08T19:12:22Z")

</div>

How i can add google adsense banner using this plugin ?

---

<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: [March 9, 2018, 12:15am UTC](https://meta.discourse.org/t/layouts-plugin/55208/168 "2018-03-09T00:15:03Z")

</div>

I recommend that you use the [https://meta.discourse.org/t/google-adsense-plugin/11763](https://meta.discourse.org/t/google-adsense-plugin/11763) instead.

---

<div class="post-metadata">

### Author: ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)
#### Post date: [March 9, 2018, 6:19am UTC](https://meta.discourse.org/t/layouts-plugin/55208/169 "2018-03-09T06:19:12Z")

</div>

> [@angus](#):
>
> No, it’s just been moved again, and subsumed into another plugin. If you’re interested in using it I can create a separate plugin. It’s basically just a wrapper for the map-widget in the locations plugin.

Any luck with this? 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: [March 10, 2018, 5:52am UTC](https://meta.discourse.org/t/layouts-plugin/55208/170 "2018-03-10T05:52:40Z")

</div>

I’ve added a `layouts-map` widget to the [Locations Plugin](https://meta.discourse.org/t/locations-plugin/69742).

[https://github.com/angusmcleod/discourse-locations/commit/422b583584fa02f7b2df42bdfd070c97ad262c5e](https://github.com/angusmcleod/discourse-locations/commit/422b583584fa02f7b2df42bdfd070c97ad262c5e)

See e.g. [https://discourse.angusmcleod.com.au/c/locations/layouts](https://discourse.angusmcleod.com.au/c/locations/layouts)

 ![Screenshot%20at%20Mar%2010%2013-48-38](https://global.discourse-cdn.com/meta/original/3X/f/1/f1578536d0fe7c39ae0b2cb9211efce300ad64bc.png)

If you have both the Custom Layouts and Locations Plugins installed, `layouts-map` will be available in the Layouts admin area and the category-specific layouts widget settings.

The locations displayed on the map will be:

- No category: All locations.
- Category: Locations in that category.
- Topic: Topic location.

The widget itself is controlled like any other custom layouts widget, by category-specific or site-wide route settings.

There are also two site settings relevant to the widget:

- `location layouts map search enabled`: Enables the map-search functionality.
- `location layouts map show avatar`: Display’s the user’s avatar in the top left corner of the map.

---

<div class="post-metadata">

### Author: ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)
#### Post date: [March 10, 2018, 3:40pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/171 "2018-03-10T15:40:12Z")

</div>

Thanks Angus! I installed it and it works well. One question- Do you think we can style the layout and map size via CSS, or is it pretty much set by the plugin? specifically, with the map, the topic list got squished, though the browser window still has a lot of space to utilize horizontally. so i am thinking about using CSS to put the map in those unused space instead. secondly, using CSS to make the map bigger, like taller in height, for example.

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: [March 11, 2018, 2:10am UTC](https://meta.discourse.org/t/layouts-plugin/55208/172 "2018-03-11T02:10:44Z")

</div>

The site settings ` layouts sidebar ${left or right} width` set the width of the sidebars. Widgets are currently 100% of the width of the sidebar, so increasing the sidebar with will also increase the width of the map.

> [@ckshen](#):
>
> i am thinking about using CSS to put the map in those unused space instead

If you’re referring to the white space to the left and right of the 1110px (1126px with padding) discourse envelope, it’s a bad idea to put stuff here.

 ![Screenshot%20at%20Mar%2011%2009-51-20](https://global.discourse-cdn.com/meta/original/3X/7/b/7b631030330132c43cc9e396c9d89afd27cb7bf7.png)

There a number of reasons why a website or app will set a maximum width for all content, including differing screen resolutions between users. The Discourse team has chosen 1110px. Facebook’s “gobalContainer” has a max-width of 981px.

 ![Screenshot%20at%20Mar%2011%2009-48-34](https://global.discourse-cdn.com/meta/original/3X/f/6/f675b1ad41c356b757b40ace56e76390ee022e8b.png)

Putting stuff in that margin area will be both incongruous with overall Discourse design and will not be a great experience for users with smaller screens or poor screen resolution.

There are a few ways you can deal with the effect a wider sidebar has on the topic list:

1. Remove elements. This is why the Layouts plugin has the ` layouts list navigation disabled` and ` layouts list header disabled` settings (both site and category-specific). But if you use these settings you need something to replace the removed functionality with, e.g. a dedicated navigation widget.

2. Make existing elements more compact. This is why the Layouts plugin has the ` layouts list nav menu` menu setting(s). This puts the filter list nav buttons (e.g. Latest etc) into a menu to save space.

> [@ckshen](#):
>
> using CSS to make the map bigger, like taller in height, for example.

You can do this by adding some custom css to your theme in Admin \> Customize. The rule you want to change is:

```plaintext
.nav-container .locations-map:not(.expanded) {
  height: 170px;
}

```

Make sure you include the `:not(.expanded)`.

---

<div class="post-metadata">

### Author: ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)
#### Post date: [March 11, 2018, 5:47am UTC](https://meta.discourse.org/t/layouts-plugin/55208/173 "2018-03-11T05:47:19Z")

</div>

Thanks for the background about Discourse’s width. Appreciate it.

I configured as you suggested via CSS. [Looks great](https://www.hungryonion.org/c/regions/san-francisco-bay-area). Its a great implementation for the type of geographical focused discussions. Appreciate the plugin.

Is there a way to only show the map in categories where location plugin is enabled?  
or disable the map for certain categories/subcategories where its irrelevant? 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: [March 11, 2018, 6:01am UTC](https://meta.discourse.org/t/layouts-plugin/55208/174 "2018-03-11T06:01:15Z")

</div>

> [@ckshen](#):
>
> Is there a way to only show the map in categories where location plugin is enabled?

The layouts plugin also has category-specific settings. See Category Settings \> Settings. Use these instead of the site-wide settings.

---

<div class="post-metadata">

### Author: ![Jay91](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jay91/32/135181_2.png) [@Jay91](https://meta.discourse.org/u/Jay91)
#### Post date: [March 12, 2018, 6:58pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/175 "2018-03-12T18:58:18Z")

</div>

I use this plugin already, but i want to show ads on the side bar this why i asked.  
if i cant, can you tell me how i can show links to categories through this plugin ?

---

<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: [March 13, 2018, 12:14am UTC](https://meta.discourse.org/t/layouts-plugin/55208/176 "2018-03-13T00:14:09Z")

</div>

If you wanted to use this plugin, you could use this widget to add arbitrary html to a sidebar:

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

You add the html to the `layouts_custom_html` site setting.

---

<div class="post-metadata">

### Author: ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)
#### Post date: [March 16, 2018, 6:55pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/177 "2018-03-16T18:55:05Z")

</div>

Angus, there is a single pixel box around the list of topics with this plugin. whereas without, there are only a single pixel line between topics but without the box. Is the box intentional?

With the plugin:

 ![3-16-2018%2011-53-49%20AM](https://global.discourse-cdn.com/meta/original/3X/4/5/451574580d0268e2f9a8a5d9d58dc733ef8b2a9b.png)

vs without:

 ![3-16-2018%2011-54-33%20AM](https://global.discourse-cdn.com/meta/original/3X/d/2/d252eedb8ab0e527b95b1e413d40959a24d47b07.png)

---

<div class="post-metadata">

### Author: ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)
#### Post date: [March 16, 2018, 7:26pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/178 "2018-03-16T19:26:46Z")

</div>

Here’s a question for those who has used the custom-html widget. I am planning to display a different html for every category. I think I need to fork/ duplicate the original widget a number of times and load them all into app.yml so different settings can be applied to each widget.

Anyone can think of a cleaner way to do this?

---

<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: [March 19, 2018, 2:18am UTC](https://meta.discourse.org/t/layouts-plugin/55208/179 "2018-03-19T02:18:31Z")

</div>

> [@ckshen](#):
>
> there is a single pixel box around the list of topics with this plugin

Yes; to clarify this happens when you turn on the `layouts list nav menu` setting, i.e. to use the nav menu instead of the list of nav buttons. The css was out of date. I’ve updated it.

[https://github.com/angusmcleod/discourse-layouts/commit/991534e5b1b24d419474aee104d0fb0b59b0993e](https://github.com/angusmcleod/discourse-layouts/commit/991534e5b1b24d419474aee104d0fb0b59b0993e)

> [@ckshen](#):
>
> I am planning to display a different html for every category. I think I need to fork/ duplicate the original widget a number of times and load them all into app.yml so different settings can be applied to each widget.
> 
> Anyone can think of a cleaner way to do this?

I’ve added category-specific html strings to the widget. Have a look in the category settings. Category takes precedence over site.

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

---

<div class="post-metadata">

### Author: ![ckshen](https://avatars.discourse-cdn.com/v4/letter/c/ad7895/32.png) [@ckshen](https://meta.discourse.org/u/ckshen)
#### Post date: [March 22, 2018, 10:15pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/180 "2018-03-22T22:15:16Z")

</div>

This plugin plus the custom html plugin enables many possibilities. Right now we show a map and some social icons on each category. But really one can do anything. So, thank you for the plugin! Am thinking about a category sidebar on the left.

 ![3-22-2018%203-12-29%20PM](https://global.discourse-cdn.com/meta/original/3X/f/9/f9cf07751f9f75fee44791a1b024b63d9bc67519.jpg)

---

<div class="post-metadata">

### Author: ![nothing](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/nothing/32/95750_2.png) [@nothing](https://meta.discourse.org/u/nothing)
#### Post date: [May 14, 2018, 11:16pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/181 "2018-05-14T23:16:42Z")

</div>

widget does not work stable. categorized html also appears in other categories and also looks at home. Sidebar caches do not reset and stay plugged in between pages.

A look at the affection, HTML added to category A, it also appears in category B

---

<div class="post-metadata">

### Author: ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [May 15, 2018, 10:26am UTC](https://meta.discourse.org/t/layouts-plugin/55208/182 "2018-05-15T10:26:53Z")

</div>

Hi, @angus

Many asked to add categories (in sidebar) all over the forum. Maybe it makes sense to add this to your plugin?

I created a widget and added 3 files to your plugin and it works. Here is a little code.

 ![cat](https://global.discourse-cdn.com/meta/original/3X/e/6/e66325b5e35ed3aa311245b6f4550fd45dbcc823.jpg)

[https://github.com/Toxuru/widget-cat](https://github.com/Toxuru/widget-cat)

---

<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: [May 16, 2018, 3:48am UTC](https://meta.discourse.org/t/layouts-plugin/55208/183 "2018-05-16T03:48:26Z")

</div>

> [@nothing](#):
>
> widget does not work stable. categorized html also appears in other categories and also looks at home.

I’m not sure what you’re referring to? I haven’t built a category-specific html widget.

> [@Stranik](#):
>
> Many asked to add categories (in sidebar) all over the forum. Maybe it makes sense to add this to your plugin?
> 
> I created a widget and added 3 files to your plugin and it works. Here is a little code.

Great! Looks like you already did it for me 🙂

---

<div class="post-metadata">

### Author: ![Stranik](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/stranik/32/85638_2.png) [@Stranik](https://meta.discourse.org/u/Stranik)
#### Post date: [May 16, 2018, 6:32am UTC](https://meta.discourse.org/t/layouts-plugin/55208/184 "2018-05-16T06:32:39Z")

</div>

> [@angus](#):
>
> Great! Looks like you already did it for me

It was easy. 😉 Perhaps the code can be simplified even more.  
If your plugin will add categories, that would be great .

---

<div class="post-metadata">

### Author: ![exetico](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/exetico/32/119962_2.png) [@exetico](https://meta.discourse.org/u/exetico)
#### Post date: [May 18, 2018, 9:12am UTC](https://meta.discourse.org/t/layouts-plugin/55208/185 "2018-05-18T09:12:05Z")

</div>

Hi,

We’re facing some problems with horizontal scroll on our forum, caused by the `display:flex`, in `layouts`.

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/d/7de90d97d61486afd8515118f348b0e43c148e3d.png)

```plaintext
.layouts-nav-button {
  @extend .nav-pills;
  float: left;
}

```

Guess it’s a few commits since i saw it the first time.

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/a/ba60a88ed5a13669aa525625d1af551e425b3cf1.png)

> <https://github.com/paviliondev/discourse-layouts/blob/main/assets/stylesheets/common/layouts.scss#L430>

---

<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: [May 20, 2018, 12:14am UTC](https://meta.discourse.org/t/layouts-plugin/55208/186 "2018-05-20T00:14:14Z")

</div>

Could you point me to where this is happening on your site? It’ll make it a little easier to understand what is going on. Thanks.

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

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