[release] Bootstrap Admin Theme

[almonk]

I recently made a few custom modules for a client (sadly not able to share) that required quite an 'app like' environment. While Apeisa is busy working on the updates to his clean admin theme that I have designed, I thought I'd put together a different theme entirely.

This theme uses the Twitter Bootstrap framework, which is really nice if you haven't already tried it. There's quite a few nasty hacks that I've had to do to skew PW to fit the framework, but none of it is too apparent to the user.

You can fork the code here (git clone into a folder called templates-admin under site):

https://github.com/almonk/Bootstrap-admin-theme

It's still a wip, but very much usable already. Please fork and improve.

Thanks,

Al

[Soma]

Nice and clean theme, looks good! Thanks for sharing.

[ryan]

Nice job! Tried it out and seems to work great. I've just updated the Admin Themes page with your theme and Soma's:

http://processwire.com/download/admin-themes/

[Soma]

just noticed one big problem...

[diogo]

I like this theme very much! I also liked your PinWire some time ago

Anyway, there seems to be a problem with the name, next to the login. i checked the default.php and found out something wrong in these lines

<?php if($user->hasPermission('profile-edit')): ?> 
   <li><a class='action' href='<?php echo $config->urls->admin; ?>profile/'><?=$user->name?></a></li>
<?php endif; ?>

I couldn't find the error there(maybe because i don't know much of php, or maybe because i'm quite sleepy ), so i just rewrote it in a different way, and it works now

<?php if($user->hasPermission('profile-edit')):  
   echo "<li><a class='action' href='" . $config->urls->admin . "profile/'>" . $user->name . "</a></li>";
endif; ?>

EDIT: Hm, In my office computer it works fine just as it is on github. I took another look at the code, and there seems to be nothing wrong with it...

anyone knows what might have happened?

[ryan]

The problem is right here:

<?=$user->name?>

That's a PHP short tag. The majority of PHP installations have them enabled, but not all do. As a result, it's not always safe to use short tags in things like admin themes, modules, or templates/profiles intended for broad distribution.

@almonk: next time you are making updates, this can be fixed just by changing it to:

<?php echo $user->name; ?>

[diogo]

oops, I will confirm this at home, and make sure to enable it

[apeisa]

I recently made a few custom modules for a client (sadly not able to share) that required quite an 'app like' environment. While Apeisa is busy working on the updates to his clean admin theme that I have designed, I thought I'd put together a different theme entirely.

Damn you Alistair

This is even better looking theme than the one before (that I am porting to clean admin). And not just the looks, I really like how this one feels to use!

EDIT: I think that pw admin would really benefit from simple dropdown navigation. One click access from anywhere to templates, fields, users, permissions and roles. Setup and access pages are really just container pages without any content or function, so easy way to skip those would mean faster site building and maintaining.

[slkwrm]

I think that pw admin would really benefit from simple dropdown navigation. One click access from anywhere to templates, fields, users, permissions and roles. Setup and access pages are really just container pages without any content or function, so easy way to skip those would mean faster site building and maintaining.

Cool idea, Apeisa! Totally agree here. This would make navigation much faster.

[ryan]

I think that pw admin would really benefit from simple dropdown navigation. One click access from anywhere to templates, fields, users, permissions and roles. Setup and access pages are really just container pages without any content or function, so easy way to skip those would mean faster site building and maintaining.

I agree, that makes sense. I'll work on this.

[Pete]

Love this theme - only thing I changed so far was to make it fixed-width again. Obviously it's all down to personal preference, but it helps because my site is fixed-width too so if I have the TinyMCE fields around the same width then you get a better representation of how the text (which will be interspersed with images inserted trhough TinyMCE on some pages) will look on the live site.

Also at 1600 pixels wide on my screen, some paragraphs of text just fit the full width and it made reading the content of some of the pages a bit hard for me.

Just personal preferences like I say, and it was a simple CSS edit to change it to fixed-width.

[ryan]

A good middleground is fluid with minwidth/maxwidth and centered-- good at any res.

[vknt]

almonk, I really really like this theme. Had some issues with the theme, as mentioned by Soma and I was just wondering if you are planning to continue to work on it in the near future?

[almonk]

No plans to support this. But it is open source, please fork and make any enhancements.

[Didjee]

Hi! This is my first post here ;-)

I solved the issues mentioned by Soma by editing bootstrap.css.

Go to /wire/templates-admin/styles/bootstrap.css

Remove or comment line 2063 to 2087 (.modal class) and replace it by:

body.modal {
  background-position: 0 -60px !important;
}
body.modal div.topbar,
body.modal ul#breadcrumb {
  display: none;
}
body.modal div.container-fluid {
  min-width: 300px;
}
body.modal div.container-fluid > div[style] {
  padding-top: 15px !important;
}

[ryan]

Welcome to the forums Didjee! Thanks for the fix. Great first post!

[almonk]

Thanks Didjee! I've updated the git repo with your fix.