# Cockpit CMS - How Can i remove the Sidebar and Change Icons

**URL:** https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455
**Category:** Support
**Created:** [December 13, 2018, 9:01am UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455 "2018-12-13T09:01:07Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![fschuermeyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/fschuermeyer/32/216_2.png) [@fschuermeyer](https://discourse.getcockpit.com/u/fschuermeyer)
#### Post date: [December 13, 2018, 9:01am UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/1 "2018-12-13T09:01:07Z")

</div>

Hello, i have 2 Questions.

1. How can i change the Icon from a Collection to Costum Icon? Its a way to Upload in the Backend new Icon Sets?
2. How can i cahnge the Postion from the Sidebar? i want a full width editor, without the Sidebar

 ![41](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/2a7b083bfb4131c25a16773f65dea5afd0804c95.png)

---

<div class="post-metadata">

### Author: ![pauloamgomes](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/pauloamgomes/32/48_2.png) [@pauloamgomes](https://discourse.getcockpit.com/u/pauloamgomes)
#### Post date: [December 13, 2018, 9:54am UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/2 "2018-12-13T09:54:47Z")

</div>

Hi @fschuermeyer, I’m afraid that is not possible in a standard way and tbh the sidebar is a core concept of the editorial process. In such case probably you may hide it using CSS. You can create your own css files in your addons or just create a file in config/cockpit/style.css

---

<div class="post-metadata">

### Author: ![fschuermeyer](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/fschuermeyer/32/216_2.png) [@fschuermeyer](https://discourse.getcockpit.com/u/fschuermeyer)
#### Post date: [January 5, 2019, 8:36pm UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/3 "2019-01-05T20:36:50Z")

</div>

If you will change the icons go to \> asetts \> app \> media \> icons and Place your File and than go to storage \> collection \> the file from the collection to set your own Icon.

And than change the name to Costum.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/8ac199dd44e496ddbdfa4c0d8f813d467cac38b9.png)

![image](https://canada1.discourse-cdn.com/flex030/uploads/getcockpit/original/1X/31cc3282305dee99d851285f7284a9541af9dc13.png)

---

<div class="post-metadata">

### Author: ![pauloamgomes](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/pauloamgomes/32/48_2.png) [@pauloamgomes](https://discourse.getcockpit.com/u/pauloamgomes)
#### Post date: [January 6, 2019, 11:12am UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/4 "2019-01-06T11:12:20Z")

</div>

@fschuermeyer changing the core icons is not a good idea, however, we can have a quick hack, put your custom icons inside config/icons and change the icon path to

`'icon' => '../../../../config/icons/post-new.svg'`

ideally would be better if cockpit accepted something like

`'icon' => '#config:icons/post-new.svg'` but that doesn’t work as we can observe on `modules/collections/views/index.php` (line 62).

---

<div class="post-metadata">

### Author: ![jasonday](https://avatars.discourse-cdn.com/v4/letter/j/67e7ee/32.png) [@jasonday](https://discourse.getcockpit.com/u/jasonday)
#### Post date: [August 7, 2019, 8:51pm UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/5 "2019-08-07T20:51:26Z")

</div>

Any update to this? Does the newer version of Cockpit handle icons any differently?

---

<div class="post-metadata">

### Author: ![serjoscha87](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/serjoscha87/32/151_2.png) [@serjoscha87](https://discourse.getcockpit.com/u/serjoscha87)
#### Post date: [September 18, 2019, 6:29pm UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/6 "2019-09-18T18:29:15Z")

</div>

No - icons are still loaded the same way as before (as far as I can tell).

And I don’t think this will ever be changed.

Perhaps someone could write an addon that allows to reconfigure the icon setes. But currently most icons are stored as SVG within the cockpit assets. Perhaps an addon could extend this to use some of the biggest icon fonts.

---

<div class="post-metadata">

### Author: ![jasonday](https://avatars.discourse-cdn.com/v4/letter/j/67e7ee/32.png) [@jasonday](https://discourse.getcockpit.com/u/jasonday)
#### Post date: [October 8, 2019, 2:48pm UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/7 "2019-10-08T14:48:17Z")

</div>

It seems as though the easiest approach would be to treat icons as assets, and within the dashboard simply allow for selecting any asset within the system to be the ‘icon’ for the collection, etc. The functionality already exists

---

<div class="post-metadata">

### Author: ![Tummerhore](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/tummerhore/32/490_2.png) [@Tummerhore](https://discourse.getcockpit.com/u/Tummerhore)
#### Post date: [February 24, 2020, 11:17pm UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/8 "2020-02-24T23:17:26Z")

</div>

Just in case someone adds custom icons and wonders why their color is not changable in the collection settings like it’s the case for the stock icons: The svg needs a `<switch>` tag in order to change the color.

---

<div class="post-metadata">

### Author: ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)
#### Post date: [February 26, 2020, 12:37pm UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/9 "2020-02-26T12:37:26Z")

</div>

## Change icons

You can use the inbuilt path mechanism to replace the core icon set.

```php
// add second assets path to public storage folder
$app->path('assets', COCKPIT_PUBLIC_STORAGE_FOLDER.'/assets');

$app->on('app.layout.contentbefore', function() {
    echo '<pre>';

    print_r($this->paths['assets']);
    /* output: Array
    (
        [0] => path/to/cockpit/storage/assets/ // --> this is the new one
        [1] => path/to/cockpit/assets/
    ) */

    echo $this->path('assets:app/media/icons');
    /* output: path/to/cockpit/assets/app/media/icons */

    echo '</pre>';
});

```

Now create a folder `/app/media/icons` inside `path/to/cockpit/storage/assets` and save your own icon set inside that folder.

Now the output of `echo $this->path('assets:app/media/icons');` should be:  
`path/to/cockpit/storage/assets/app/media/icons`

If a core icon is called directly via `$app->pathToUrl('assets:app/media/icons/webhooks.svg');`, it will be displayed, because it uses the second assets path as fallback.

See:

> <https://github.com/agentejo/cockpit/blob/next/lib/Lime/App.php#L371-L375>

Now let’s have a look at the icon selection (singleton):

> <https://github.com/agentejo/cockpit/blob/next/modules/Singletons/views/singleton.php#L46-L50>

The Filesystem helper uses an directory iterator and it lists all files inside `'assets:app/media/icons`, which is found in our storage folder now.

See also:

> <https://github.com/agentejo/cockpit/blob/next/lib/LimeExtra/Helper/Filesystem.php#L26>

It’s actually quite easy to replace the icon set, but it might have some unwanted side effects, that I’m not aware of, yet.

---

<div class="post-metadata">

### Author: ![raffaelj](https://yyz2.discourse-cdn.com/flex030/user_avatar/discourse.getcockpit.com/raffaelj/32/331_2.png) [@raffaelj](https://discourse.getcockpit.com/u/raffaelj)
#### Post date: [February 26, 2020, 12:59pm UTC](https://discourse.getcockpit.com/t/cockpit-cms-how-can-i-remove-the-sidebar-and-change-icons/455/10 "2020-02-26T12:59:11Z")

</div>

## Remove sidebar

I don’t remove it, but I change the dom to give it the full width.

```php
$app->on('collections.entry.aside', function($collection) {

    echo '<script>
this.on("mount", function() {
    App.$(".app-main > div > [data-is] > .uk-grid > .uk-width-medium-3-4").removeClass("uk-width-medium-3-4").addClass("uk-width-1-1");
    App.$(".app-main > div > [data-is] > .uk-grid > .uk-width-medium-1-4").removeClass("uk-width-medium-1-4").addClass("uk-width-1-1 uk-grid");
});</script>';

});

```

- `App.$` is jQuery
- select the entry containter with width 3-4 and give it a full width 1-1
- select the sidebar, giv it a full width and make it a grid, so its children aren’t stacked anymore