Jump to content
NorbertH

Looking for a backend template/theme whith less spaces between elements.

Recommended Posts

As we are building some webapplications with the PW backend , having those really big spacings between all field elements in forms and everywhere is not too practical. 

UI Kit already has less spacings between all elements than Bootstrap for example , but i am looking fore a more condensed BE Theme.  Maybe someone already made something like that?

  • Like 1

Share this post


Link to post
Share on other sites

Are you aware that you can fully rewrite the UIKit admin theme? Just copy the wire/modules/AdminThemeUikit folder to site/modules/. The next time you load a page in the backend, PW will ask you which version you'd like to use. You can even choose if you'd like to use SASS or LESS, iirc.

If that's overkill for you, you can just override paddings and margins if you write / load an extra admin.css.

But the first thing you should consider, is to simply configure the admin theme via GUI @ site/backend/module/edit?name=AdminThemeUikit&collapse_info=1

And of course, PW lets you define borders, paddings, margins and background-colors on a per-field basis.

  • Like 5

Share this post


Link to post
Share on other sites

@NorbertH you could give a try to a theme I made but still not released: https://github.com/flydev-fr/AdminThemeGitKit

Still not finished but already cool. To make the theme more condensed, in the theme settings, you can use the following options :

- Layout + Interface > Inputfield column width > Select option B (percentage-based)

- Forms + Input > Select option Small

- Primary CSS file should be set to :  site/modules/AdminThemeGitKit/uikit/dist/css/uikit.git.min.css

 

Feedbacks welcome 🙂

  • Like 2

Share this post


Link to post
Share on other sites

@flydev could you please share some screenshots or screencasts?

@NorbertH did you try my module? It's exactly built for such backend modifications without having to build a whole new admin theme (and I'd be happy to have a more condensed version as well, but CSS is not my strongest skill):

 

  • 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 franciccio-ITALIANO
      Hi everyone.
      I've created 12 templates that are the same but each with an extra bit of html code. 
      The piece of code is as follows:
      <div> <div class="box-pf"> <i class="fa fa-map-pin fa-2x fa-red faa-pulse animated"></i> <a href=""> <span class="uk-text-middle"><i>Sonchus oleraceus</i> 'Grespino degli Orti'</span></b> </a> </div> </div> On the third line we read "fa-red."
      I created 12 similar templates.
      The first template has only one box with fa-red, the last template has 12 boxes with icons of 12 different colors.
      So. is there any way to have only 1 template and add, if I want and when I want, a small or big, same or different piece of html code?
       
    • By Brian Peat
      Hello! I've got a single client on Processwire and it's completely foreign to me. I've been able to find most things, but they've asked for a custom designed page with a full width header image/section, and then a body block and a right side bar below the header. They're using a landing page template, so I duplicated that, figured out how to add it in the admin, and assigned it to the page. Nothing. It doesn't change a thing.
      I feel like I'm missing something obvious. I've made sure all the fields are the same, I tried to set up the parent/child stuff though this page doesn't have a parent that I can tell (though it's under Landing Pages). If I can get the template to actually kick in, I think I can use a bit of code to check for the hero section and load it at the top. I also made a copy of the widget template and set that to load instead of the original. But again, since my main page template isn't kicking in, neither is the new widget template.
      I'd just love some tips on what to check or change to get a landing page to actually render what's in the assigned page template.
      Hopefully I've used the correct terminology here to make sense.
      Thanks!
    • By rookie
      hi there,
      Is there a module or other solution to select a template with a preview image? Sometimes it is not that easy to describe a template.
      e.g. Template with 3 columns (image, title, content, button) or template for a slider with max. 4 pictures.
      Even if it is nice to have a description field for a template, a picture says more than thousand words could describe.
      And no, I don't think I could develop something like that. I don't even know where to start.🙄
    • By muzzer
      I have just upgraded a site from 2.7 to latest v3.
      I have run into a weird issue where a page template setting for slashUrls changes from No to Yes immediately after an ajax call, causing the second ajax call on the page to use the wrong setting.
      There is no reference to the $template->slashUrls() in any of my code.
      This happens every time I load the page, it's 100% consistent.
      I have this running on a second machine under v2.7 and no such weirdness.
      I'm lost as to why this is happening, what would cause a PW setting change for slashUrls? Anyone have any ideas?
       
       
       
    • By Pip
      Hi everyone, 
      Is there a way for us to replicate the "http://mydomain.com/processwire/page/edit/?id=xxx" and change the template to match my site template? 
      I'm terribly happy with the admin / backend page edit. It covers literaly everything I want to empower my non super admin user in updating pages such as validation, repeater management, file upload. 
      I wish not to allow the users to see the backend for both security and aesthetic reasons. 
      Thanks and hope to hear from you soon. 
       
×
×
  • Create New...