Hello, i have 2 Questions.
- How can i change the Icon from a Collection to Costum Icon? Its a way to Upload in the Backend new Icon Sets?
- How can i cahnge the Postion from the Sidebar? i want a full width editor, without the Sidebar
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
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.
@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).
Any update to this? Does the newer version of Cockpit handle icons any differently?
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.
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
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.
Change icons
You can use the inbuilt path mechanism to replace the core icon set.
// 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:
Now let’s have a look at the icon selection (singleton):
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:
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.
1 Like
Remove sidebar
I don’t remove it, but I change the dom to give it the full width.
$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
1 Like