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.
The 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.
The theme allows for a lighter approach to customize core styles to suit different requirements through the concept of Skins. This projects hopes to build a catalog of Admin UI styles and layouts that the community can use and share.
Head over to the Skins section to learn more about how that works and the options available for customization.
sort
and exclude
modules from the navigation menu (Sidebar),1- Use composer
to install the theme as follows,
composer require websemantics/pyrocms-theme
2- Install all available skins,
composer update
3- Change value of ADMIN_THEME
in the project .env
file,
ADMIN_THEME=websemantics.theme.pyrocms
This 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
.
A skin is a lightway approach to redesign and customize the default theme styles to suite your needs. The default theme skin
, Plus Skin, shown below, features a sidebar, one of many layout options provided with this theme.
Customization can range from changes to the theme variables, adding additional styles to overriding theme views.
The 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.
Official | Default |
---|---|
![]() |
![]() |
Classic | Navy Blue |
---|---|
![]() |
![]() |
Github | Horizon |
---|---|
![]() |
![]() |
Stone | Add Yours! |
---|---|
![]() |
![]() |
While 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 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,
push
menu (slowly opens/closes)select
field type (radio mode)To 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!
You can also set the value of PYROCMS_SKIN
in the project .env
to the skin namespace,
PYROCMS_SKIN=websemantics.skin.github
Let's say you want to create a new skin called. sunshine
. Simply, follow these steps,
php artisan make:addon vendor.skin.sunshine
Change skin settings from skin config file, sunshine-skin/resources/config/skin.php
.
Switch to the new skin as described in, Change Active Skin section.
The 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
.
All is required for the theme to find and use a skin is,
addon/resources/config/skin.php
,addon/resources/img/name.png
and,addon/resources/scss/skin.scss
.Check out the Plus Skin for details.
This theme comes with few very powerful features that were aimed to change the skin layout using sass
and theme configuration variables,
When 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,
This 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,
'sidebar' => [
'sort' => [
'anomaly.module.posts',
'anomaly.module.pages'
]
]
This 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.
For exclusion, listing all undesired modules in the exclude
config variable. Here's an example,
'sidebar' => [
'exclude' => [
'anomaly.module.addons',
'anomaly.module.variables'
]
]
Feel free to mix and match between exclude
and sort
to achieved the desired look.
There 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
.
For how to use the Hip Toggle Button with your own skin, check the Github
skin implementation. More docs to come for better usage.
Future expansions for the theme,
Star :star: this repository if you find this project useful, to show support or simply, for being awesome :)
Need help or have a question? post at StackOverflow.
Please don't use the issue trackers for support/questions.
Contributions to this project are accepted in the form of feedback, bugs reports and even better - pull requests.
MIT license Copyright (c) Web Semantics, Inc.