mjut

Additional CSS for admin templates

Recommended Posts

Hello!

I am trying to get some extra css-file into my admin templates. I managed to modify my admin.php to this:

<?php namespace ProcessWire;
	require($config->paths->adminTemplates . 'controller.php'); 
	echo "<link rel='stylesheet' type='text/css' href='" . $config->urls->templates . "css/admin.css'>";

By doing so, the css <link> is added to the very end of each parsed admin-html. (right AFTER the closing </body> tag.)
That causes some trouble. e.g. the page tree is not displaying any more. Although, other pages are working - like the edit form of a page.

My question: is there a correct way of adding my extra css to the admin area?

Thanks for you help!

Stephan

 

Share this post


Link to post
Share on other sites

Hello @mjut,

I have no experience with adding CSS for admin templates, but you could try out the module Admin Custom Files😉

If you don't want to use an extra module for that, maybe someone else will jump in.

Regards, Andreas

Share this post


Link to post
Share on other sites

Welcome to the forums @mjut

You need to use $config->scripts->add() for JS and $config->styles->add() for CSS .These need to be added before the controller.php

$config->scripts->add($config->urls->templates . "scripts/admin.js");
$config->styles->add($config->urls->templates . "styles/admin.css");
// this comes last
require($config->paths->adminTemplates . 'controller.php'); 

 

Edited by kongondo
  • Like 3

Share this post


Link to post
Share on other sites

Thank you for the input!

@AndZyk that module is amazing. I fiddled around with it for a bit - the number of tweaks is unlimited! I have to save this for other projects. It seems a bit of an overkill for my needs now.

The other approach is exactly what i was looking for! Thank you tons @kongondo - this works like a charm.

Cheers

Stephan

 

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By LukeCage
      Hi! I have a big problem with a client of mine. I have to do something that i don't do very often with processwire, and i'm very afraid that i'm not gonna able to do it. So i write to search some help from you experts.
      The website that i'm gonna create will have a database with infos about users. This users are not the actual registrered users, but possible users. I'll try my best to explain this. What i will have is a datasheet in the database with infos about all the users (name, surname, fiscal Code) that can register to the website. So during registration the website is confront with this database of people, and accept or not your registration to the website.
      Now. The problems are: the client need a page in the CMS to insert this people in the first place (Custom Admin Page?) in the database. I read what i need to create it, but i don't understand what i need to do next. What i need to do for reading and writing to the database, with data, directly from a custom admin page in processwire?
      The other thing is. I can do this control during registration? I Can extend fields in the user account?
      I'm completely in your hands.
    • By Robin S
      Breadcrumb Dropdowns
      Adds dropdown menus of page edit links to the breadcrumbs in Page Edit.

      Installation
      Install the Breadcrumb Dropdowns module. The module requires ProcessWire >= v3.0.83 and AdminThemeUikit.
      There is a checkbox option in the module config that determines if the breadcrumb dropdowns will include pages that the user does not have permission to edit.
      Features/details
      The module adds an additional breadcrumb item at the end for the currently edited page. That's because I think it's more intuitive for the dropdown under each breadcrumb item to show the item's sibling pages rather than the item's child pages. In the dropdown menus the current page and the current page's parents are highlighted in a crimson colour to make it easier to quickly locate them in case you want to edit the next or previous sibling page. Unpublished and hidden pages are indicated in the dropdowns with similar styling to that used in Page List. If the option to include uneditable pages is selected then those pages are indicated by italics with a reduced text opacity and the "not-allowed" cursor is shown on hover. There is a limit of 25 pages per dropdown for performance reasons and to avoid the dropdown becoming unwieldy. If the current user is allowed to add new pages under the parent page an "Add New" link is shown at the bottom of the breadcrumb dropdown. If the currently edited page has children or the user may add children, a caret at the end of the breadcrumbs reveals a dropdown of up to the first 25 children and/or an "Add New" link. Overriding the listed siblings for a page
      If you want to override the siblings that are listed in the dropdowns you can hook the BreadcrumbDropdowns::getSiblingsmethod and change the returned PageArray. For most use cases this won't be necessary.
      Incompatibilities
      This module replaces the AdminThemeUikit::renderBreadcrumbs method so will potentially be incompatible with other modules that hook the same method.
       
      https://modules.processwire.com/modules/breadcrumb-dropdowns/
      https://github.com/Toutouwai/BreadcrumbDropdowns
    • By karian
      I don't know why multiple instances (repeater_repeat_columns1, repeater_repeat_columns2, ...) of my repeater field are displayed inside Template field (see image).
      Is there a way to clean/reset it ?
       

    • By psy
      I'm combining two PW sites into one, Site A into Site B.
      At each step, I did it bit by bit as the 'all at once' approach failed.
       
      First, I exported all the fields from Site A and imported into Site B. Any field types not supported by import/export, eg FieldtypeOptions I manually recreated. All good.
      Next I exported all the templates from Site A and imported them into Site B and copied across their associated template files. All good.
      Finally I exported the pages I needed from Site A into Site B - again, bit by bit to ensure it all went smoothly.
      From the admin side, it all looked and worked perfectly.
      Front end was a totally different story. All existing pages in Site B worked as expected. NONE of the pages imported from Site A displayed. They all ended in a redirect loop with no errors in the PW logs or Tracy Debugger.
      After some trial-and-error, I finally got it working with:
      - create a new template in Site B admin with no associated template file and just a title field
      - import the fields from the imported Site A template into the newly created template (both on Site B)
      - copy the Site A php template file into a new file that matched the new PW Site B template name and save in Site B site/templates
      I can deal with the above workaround. Just curious to know if I did something wrong or if the template import/export feature is problematic?
       
      ### Solution:
      While the export/import was a slow process, turned out the front end redirecting issue was unrelated. For reasons unknown, all templates marked as HTTPS only were the ones redirecting, ie all templates from Site A. Finally solved it by changing the $config->https to true in site/config.php
      Now the pages display correctly as https whether the template forces the issue or not.
       
    • By rafaoski
      This profile can be used as a business card or very simple blog.
      Requires the latest version processwire 3.0.101 !!!
      Milligram Site Profile For Processwire 3x with include functions like:
      MarkupRegions
      FunctionsAPI
      wireIncludeFile | wireRenderFile
      Essentially, this structure uses minimalist CSS framework Milligram and the Flexbox Grid System Gridlex
       
      Live Example
      CAN DOWNLOAD FROM THIS LINK ( Basic Version and simple Blog Version )
      https://github.com/rafaoski/site-milligram
      https://github.com/rafaoski/site-milligram-blog
      Screenshot:

      If you want to use Laravel Mix you must first ensure that Node.js and NPM are installed on your machine.
      Basic example to Debian and Ubuntu based Linux distributions:
      Node.js
      curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash - sudo apt-get install -y nodejs
      See more installation options LINK
      npm is installed with Node.js just check in linux terminal like below:
      node -v
      npm -v
      Set BrowserSync inside folder /templates/webpack.mix.js and change your dev url
      proxy: 'http://localhost/mix/', to your installation processwire folder like:
      proxy: 'http://localhost/your-processwire-installation-folder/',
      Next install npm packages in your templates folder with command npm install
      Now, boot up the dev server npm run watch, and you're all set go!
      On completion, use the command npm run production to build styles and scripts in the dist folder
      Simple Usage ( Basic Command )
      Run npm install Watch npm run watch Build npm run production All files to Webpack build steps is inside file ( webpack.mix.js )
      Folder With all SCSS files is inside templates/src/scss
      All build styles and scripts is inside the ( dist ) folder
      References:
      Milligram
      Gridlex
      Laravel Mix
      Feather Icons
      Web Font Loader
      Verlok Lazy Load
      Cookie Consent
      Particles.js