{"id":13669933,"url":"https://github.com/websemantics/pyrocms-theme","last_synced_at":"2025-09-12T22:45:02.242Z","repository":{"id":57079133,"uuid":"74036986","full_name":"websemantics/pyrocms-theme","owner":"websemantics","description":"Skinnable, responsive and highly customizable admin theme for PyroCMS 3","archived":false,"fork":false,"pushed_at":"2016-12-19T12:36:23.000Z","size":3553,"stargazers_count":15,"open_issues_count":1,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-24T13:21:24.125Z","etag":null,"topics":["pyrocms","pyrocms-theme","pyrocms3"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/websemantics.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-17T14:52:49.000Z","updated_at":"2021-12-25T14:35:53.000Z","dependencies_parsed_at":"2022-08-24T14:56:23.853Z","dependency_job_id":null,"html_url":"https://github.com/websemantics/pyrocms-theme","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fpyrocms-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fpyrocms-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fpyrocms-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/websemantics%2Fpyrocms-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/websemantics","download_url":"https://codeload.github.com/websemantics/pyrocms-theme/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248129535,"owners_count":21052589,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pyrocms","pyrocms-theme","pyrocms3"],"created_at":"2024-08-02T09:00:25.796Z","updated_at":"2025-04-09T23:30:48.384Z","avatar_url":"https://github.com/websemantics.png","language":"CSS","funding_links":["https://www.paypal.me/websemanticsca"],"categories":["Themes"],"sub_categories":[],"readme":"![Web Semantics, Inc. PyroCMS 3 Admin Theme](https://websemantics.github.io/pyrocms-theme/assets/img/pyrocms.svg)\n\u003e Hand crafted, multi-skinned, responsive and easily customizable PyroCMS 3 admin theme built for a much refined and intuitive user experience. An absolute labor of love to make possible ultimate control over style and layout. Welcome to a new way to build PyroCMS 3 Admin themes.\n\n## Introduction\n\nThe idea of this project is to build an extensible and modular Admin theme with varieties of style components and layout scaffoldings to enable deep customization and maximum code reuse. Every single line of code or style while writing this theme was carefully placed to perform a function or improve overall user experience for desktop and mobile devices.\n\nThe theme allows for a lighter approach to customize core styles to suit different requirements through the concept of [Skins](#skins). This projects hopes to build a catalog of Admin UI styles and layouts that the community can use and share.\n\nHead over to the [Skins](#skins) section to learn more about how that works and the options available for customization.\n\n## Features\n\n- Easy to customize and style,\n- Comes with [6 skins](#available-skins),\n- Supports the official [PyroCMS Theme](https://github.com/pyrocms/pyrocms-theme),\n- Allows to `sort` and `exclude` modules from the navigation menu (Sidebar),\n- Supports different layouts (for example, with / without top Navbar),\n- Comes with new login page.\n\n## Install\n\n1- Use `composer ` to install the theme as follows,\n\n```bash\ncomposer require websemantics/pyrocms-theme\n```\n\n2- Install all [available skins](#available-skins),\n\n```bash\ncomposer update\n```\n\n3- Change value of `ADMIN_THEME` in the project `.env` file,  \n\n```\nADMIN_THEME=websemantics.theme.pyrocms\n```\n\n## Skins\n\nThis theme was designed to enable drastic changes to the style, layout and user experience with minimal effort on the behalf of the developer by introducing a new concept, `Skins`.\n\nA skin is a lightway approach to redesign and customize the default theme styles to suite your needs.  The `default theme skin`, [Plus Skin](https://github.com/websemantics/plus-skin), shown below, features a sidebar, one of many layout options provided with this theme.\n\nCustomization can range from changes to the theme variables, adding additional styles to overriding theme views.\n\n![Plus Skin](https://github.com/websemantics/plus-skin/raw/master/resources/img/plus.png)\n\n### Available Skins\n\nThe theme comes with a number of skins as you can see below; each of these skins come as an addon package that you can require individually or through this theme.\n\n| [Official](https://github.com/websemantics/pyrocms-skin) | [Default](https://github.com/websemantics/plus-skin) |\n|---|---|\n| ![Official Skin](https://github.com/websemantics/pyrocms-skin/raw/master/resources/img/pyrocms.png) | ![Default Skin](https://github.com/websemantics/plus-skin/raw/master/resources/img/plus.png) |\n\n| [Classic](https://github.com/websemantics/classic-skin) | [Navy Blue](https://github.com/websemantics/blue-skin) |\n|---|---|\n| ![Classic Skin](https://github.com/websemantics/classic-skin/raw/master/resources/img/classic.png) | ![Navy Blue Skin](https://github.com/websemantics/blue-skin/raw/master/resources/img/blue.png) |\n\n| [Github](https://github.com/websemantics/github-skin) | [Horizon](https://github.com/websemantics/horizon-skin) |\n|---|---|\n| ![Github Skin](https://github.com/websemantics/github-skin/raw/master/resources/img/github.png) | ![Horizon Skin](https://github.com/websemantics/horizon-skin/raw/master/resources/img/horizon.png)  |\n\n| [Stone](https://github.com/websemantics/stone-skin) | Add Yours! |\n|---|---|\n| ![Stone Skin](https://github.com/websemantics/stone-skin/raw/master/resources/img/stone.png) | ![Yours Skin](https://websemantics.github.io/pyrocms-theme/assets/img/nopreview.png) |\n\n### Official Skin\n\nWhile enjoying many of the skins provided in this theme you can still go back to the official PyroCMS 3 admin theme without having to actually switch themes. This project decided to build on the great work done on the [official PyroCMS theme](https://github.com/pyrocms/pyrocms-theme) to keep the theme lean and guarantee that all of PyroCMS official Admin theme default styles are supported out-of-the-box. It actually goes further than that by adding few features to enhance appearance and user experience as described below,\n\n- Retina display support for the brand logo using SVG images\n- Enhanced user experience provided as an animation for the modules `push` menu (slowly opens/closes)\n- Support for Image Select, a way to present images with `select` field type (radio mode)\n- Brand new login page with animated logo\n\n### Change Active Skin\n\nTo change the current active skin, head over to `setting` then `themes` or click on `Theme Settings` button at the footer. A list of the available skins will be presented with preview pictures. Select your favorite skin and click save, vola!\n\nYou can also set the value of `PYROCMS_SKIN` in the project `.env` to the skin namespace,  \n\n```\nPYROCMS_SKIN=websemantics.skin.github\n```\n\n## How to Create a Skin\n\nLet's say you want to create a new skin called. `sunshine`. Simply, follow these steps,\n\n- Create a new skin addon (requires [Builder extension](https://github.com/websemantics/builder-extension)),\n\n```bash\nphp artisan make:addon vendor.skin.sunshine\n```\n\n- Change skin settings from skin config file, `sunshine-skin/resources/config/skin.php`.\n\n- Switch to the new skin as described in, [Change Active Skin](#change-active-skin) section.\n\n### Embedded Skins\n\nThe great thing about skins is that, they don't have to be their own addon package. A skin can also be specified within any addon type including `extensions` and `modules`.\n\nAll is required for the theme to find and use a skin is,\n\n- The skin main config files `addon/resources/config/skin.php`,\n- A preview image `addon/resources/img/name.png` and,\n- The skin main style file, `addon/resources/scss/skin.scss`.\n\nCheck out the [Plus Skin](https://github.com/websemantics/plus-skin) for details.\n\n## Control Layout\n\nThis theme comes with few very powerful features that were aimed to change the skin layout using `sass` and theme configuration variables,\n\n### Show Navbar\n\nWhen building a skin, you can decide on whether you want to have a navbar or not. Turning this feature `on` / `off` will show the navbar with an attached toggle button to `show` / `hide` the sidebar and the classic menu, other navbar items. Also, some sidebar links will be removed, for example, `View Site`, `Logout` etc as will be provided by the navbar,\n\n### Sidebar\n\nThis theme allows to `sort` and `exclude` modules from the Sidebar. You can sort modules in the Sidebar via the `sidebar` config variable @ `resources/config/config.php`. Simply, list the modules' slugs in the `sort` array, for example,\n\n```php\n  'sidebar' =\u003e [\n    'sort' =\u003e [\n      'anomaly.module.posts',\n      'anomaly.module.pages'\n    ]\n  ]\n```\n\nThis will show the `Posts` module in top of the sidebar list followed by the `pages` module. The remaining modules will be listed as per the default control panel navigation behaviour.\n\nFor exclusion, listing all undesired modules in the `exclude` config variable. Here's an example,\n\n```php\n  'sidebar' =\u003e [\n    'exclude' =\u003e [\n      'anomaly.module.addons',\n      'anomaly.module.variables'\n    ]\n  ]\n```\n\nFeel free to mix and match between `exclude` and `sort` to achieved the desired look.\n\n### Toggle Button\n\nThere are two types of toggle buttons the theme uses to collapse the Sidebar. The default one uses the `toggle` css class and is used by default. A more elaborate button that has animation uses `hip-toggle` class. Check the styles @ `pyrocms-theme/resources/scss/theme/components/_toggle.scss`.\n\nFor how to use the Hip Toggle Button with your own skin, check the `Github` skin implementation. More docs to come for better usage.\n\n## Inspirations\n\nFuture expansions for the theme,\n\n- [Multi-Level Accordion Menu](https://codyhouse.co/demo/multi-level-accordion-menu/animated.html).\n- [Animated Page Transition](https://codyhouse.co/demo/animated-page-transition-2/index.html).\n- [Responsive Sidebar Navigation](https://codyhouse.co/demo/responsive-sidebar-navigation/index.html#0).\n\n## Support\n\nStar :star: this repository if you find this project useful, to show support or simply, for being awesome :)\n\nYou can also [![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/websemanticsca).\n\nNeed help or have a question? post at [StackOverflow](https://stackoverflow.com/questions/tagged/pyrocms-theme+websemantics).\n\n*Please don't use the issue trackers for support/questions.*\n\n## Contribution\n\nContributions to this project are accepted in the form of feedback, bugs reports and even better - pull requests.\n\n## Resources\n\n- [Auto Pyro](https://github.com/websemantics/auto-pyro), PyroCMS deploy tool for faster development experience.\n- [Template Template](https://github.com/pyrocms-templates/template-template), Default Builder extension template for building Builder extension templates.\n- [Registry](https://github.com/pyrocms-templates), List of all Builder extension available template.\n- [Awesome PyroCMS](https://github.com/websemantics/awesome-pyrocms), Curated list of PyroCMS addons and resources.\n- [PyroCMS Cheatsheet](http://websemantics.github.io/pyrocms-cheatsheet), List of commands and features for PyroCMS 3.\n- [PyroCMS](https://github.com/pyrocms/pyrocms), MVC PHP Content Management System built to be easy to use, theme and develop with. It is used by individuals and organizations of all sizes around the world.\n\n## License\n\n[MIT license](http://opensource.org/licenses/mit-license.php)\nCopyright (c) Web Semantics, Inc.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebsemantics%2Fpyrocms-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebsemantics%2Fpyrocms-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebsemantics%2Fpyrocms-theme/lists"}