Jump to content


Photo

[release] Bootstrap Admin Theme


  • Please log in to reply
16 replies to this topic

#1 almonk

almonk

    Jr. Member

  • Members
  • PipPip
  • 41 posts
  • 5

Posted 19 September 2011 - 05:04 PM

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.

Posted Image

You can fork the code here (git clone into a folder called templates-admin under site):
https://github.com/a...rap-admin-theme

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

Thanks,

Al

#2 Soma

Soma

    Hero Member

  • Moderators
  • 3,194 posts
  • 1748

  • LocationSH, Switzerland

Posted 19 September 2011 - 05:17 PM

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

@somartist | modules created | support me, flattr my work flattr.com


#3 ryan

ryan

    Hero Member

  • Administrators
  • 5,773 posts
  • 3120

  • LocationAtlanta, GA

Posted 20 September 2011 - 11:03 AM

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.c...d/admin-themes/

#4 Soma

Soma

    Hero Member

  • Moderators
  • 3,194 posts
  • 1748

  • LocationSH, Switzerland

Posted 20 September 2011 - 04:17 PM

just noticed one big problem... :D

Attached Thumbnails

  • PastedGraphic-5.png
  • bootstrap-theme-bug.png

@somartist | modules created | support me, flattr my work flattr.com


#5 diogo

diogo

    Hero Member

  • Moderators
  • 1,998 posts
  • 1076

  • LocationPorto, Portugal

Posted 21 September 2011 - 06:29 PM

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?

Attached Thumbnails

  • Screenshot-1.png


#6 ryan

ryan

    Hero Member

  • Administrators
  • 5,773 posts
  • 3120

  • LocationAtlanta, GA

Posted 22 September 2011 - 11:37 AM

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; ?>


#7 diogo

diogo

    Hero Member

  • Moderators
  • 1,998 posts
  • 1076

  • LocationPorto, Portugal

Posted 22 September 2011 - 11:44 AM

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

#8 apeisa

apeisa

    Hero Member

  • Moderators
  • 2,526 posts
  • 854

  • LocationVihti, Finland

Posted 22 September 2011 - 02:24 PM

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.

#9 slkwrm

slkwrm

    Sr. Member

  • Members
  • PipPipPipPip
  • 248 posts
  • 66

Posted 22 September 2011 - 04:27 PM

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.


#10 ryan

ryan

    Hero Member

  • Administrators
  • 5,773 posts
  • 3120

  • LocationAtlanta, GA

Posted 23 September 2011 - 11:50 AM

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.

#11 Pete

Pete

    Administrator

  • Administrators
  • 1,756 posts
  • 658

  • LocationChester, England

Posted 24 September 2011 - 04:18 AM

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.

#12 ryan

ryan

    Hero Member

  • Administrators
  • 5,773 posts
  • 3120

  • LocationAtlanta, GA

Posted 24 September 2011 - 01:39 PM

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

#13 vknt

vknt

    Full Member

  • Members
  • PipPipPip
  • 72 posts
  • 9

Posted 06 November 2011 - 11:23 AM

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?

#14 almonk

almonk

    Jr. Member

  • Members
  • PipPip
  • 41 posts
  • 5

Posted 06 November 2011 - 07:26 PM

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

#15 Didjee

Didjee

    Newbie

  • Members
  • Pip
  • 9 posts
  • 20

  • LocationDelft, The Netherlands

Posted 15 March 2012 - 10:37 AM

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;
}

Posted Image
Online/offline designer at Didjee in Delft, The Netherlands
http://www.didjee.nl

#16 ryan

ryan

    Hero Member

  • Administrators
  • 5,773 posts
  • 3120

  • LocationAtlanta, GA

Posted 16 March 2012 - 09:11 AM

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

#17 almonk

almonk

    Jr. Member

  • Members
  • PipPip
  • 41 posts
  • 5

Posted 25 March 2012 - 12:39 PM

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




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users