Jump to content
almonk

[release] Bootstrap Admin Theme

Recommended Posts

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.

uhh3uifn43.jpg

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

Share this post


Link to post
Share on other sites

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?

post-349-132614279139_thumb.png

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

bootstrap-insert-image.png

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...