All times are UTC + 5:30 hours




Post new topic Reply to topic  [ 30 posts ]  Go to page 1, 2, 3  Next
  Print view

Responsive Admin Panel Theme (Free)
Author Message
PostPosted: Sat May 05, 2012 11:23 pm 
Registered User
Offline

Joined: Thu Oct 13, 2011 2:48 am
Posts: 275
This theme is now free to download and use under the MIT License! Let me know if you like it and definitely report any bugs.

Attachment:
File comment: Installation instructions included.
responsive-admin-theme.zip [43.15 KiB]
Downloaded 88 times

    Features:
  • Layout is entirely CSS (no images)
  • Breakpoints reduce layout width to accommodate small screens: 1008px, 694px, and 478px
  • Code examples for adding/modifying template icons (clonable and non-clonable)
  • Centered and left-aligned theme styles
  • Colors and language easily customized


Attachment:
responsive.png
responsive.png [ 201.61 KiB | Viewed 1078 times ]

Changelog:
February 28, 2013
- made repeatable region columns fill table width for smaller layouts (there is no longer a need to scroll horizontally if you have specified column widths)
* the above change will likely cause problems for old IE, so please remove or comment out the Responsive Repeatable Regions styles from ie.css and tablegear.css if you expect IE9 and below usage

February 12, 2013
- fixed all regressions from previous update
- made vertical white space more consistent
- added round corners to CKEditor, NicEdit, and image/thumbnail editable region preview images
- added message-container class to customize.css for use with message editable regions

December 31, 2012
* total CSS file size reduced by nearly a third
- improved selector efficiency
- removed duplicate and unused styles, vendor prefixes for box-shadow and border-radius, and old IE fixes
- added CKEditor 4 compatibility
- made forgot-password page styling consistent with login page
- increased login/install/forgot-password page button size
- decreased pagination and folder filter width
- decreased horizontal padding of header buttons for smallest layout
- moved responsive table header labels to customize.css to ease translation

October 24, 2012
- fixed PRO license logo rebranding (customize.css)
- CKEditor selector improved

October 08, 2012
- background color darkened slightly
- white text shadows applied to header, top-right section, and footer text

October 06, 2012
- styled thumbnail editable region's "View Thumbnail" button
- reduced breakpoints by 8px
- added 'resize:vertical' for textareas to accurately reflect their fixed widths

September 24, 2012
- fixed Chrome comment responsive table width
- added draft responsive table header labels
- styled image editable region's "View Image" button for show_preview='0'
- removed image input top margin
- selects now fill column width in repeatable table
- select and file/image input widths increased
- iframe-analytics media query relocated from styles.css to Extras section of customize.css


Last edited by cheesypoof on Fri Mar 01, 2013 9:20 am, edited 39 times in total.

Top
 Profile  
 

Re: Customizable Light Admin Panel Theme
PostPosted: Wed May 09, 2012 12:45 am 
Registered User
User avatar
Offline

Joined: Mon Feb 27, 2012 9:40 pm
Posts: 94
Location: Groningen, The Netherlands
Looks great, well done!


Top
 Profile  
 

Re: Customizable Light Admin Panel Theme
PostPosted: Wed May 09, 2012 2:59 am 
Registered User
User avatar
Offline

Joined: Mon Feb 27, 2012 9:40 pm
Posts: 94
Location: Groningen, The Netherlands
I was wondering how your 'Google Analystics' and 'Maintenance Mode' admin pages look. Can you see your Analystics results on that page? And can you switch to maintenance mode in the admin or is it just how the page looks?


Top
 Profile  
 

Re: Customizable Light Admin Panel Theme
PostPosted: Wed May 09, 2012 4:06 am 
Registered User
Offline

Joined: Thu Oct 13, 2011 2:48 am
Posts: 275
For the 'Google Analytics' template I made use of a great technique detailed by KK to display the analytics results in the admin panel: http://www.couchcms.com/forum/viewtopic.php?f=2&t=2778. You can see an example of the graphs at: http://www.seethestats.com/site/seethestats.com. I simply changed the graph color and applied some styling (margin, border, border-radius) to each 'iframe' to make them not look out of place in the admin panel.

The 'Maintenance Mode' template looks the same as the '404' template in the admin panel, the only difference being the content in ckeditor. It only controls the look of the page.

I'm glad you liked the theme. ;)


Top
 Profile  
 

Re: Customizable Light Admin Panel Theme
PostPosted: Wed May 09, 2012 12:57 pm 
Registered User
User avatar
Offline

Joined: Mon Feb 27, 2012 9:40 pm
Posts: 94
Location: Groningen, The Netherlands
Awesome. It works perfectly. Thanks!

Also, I have a SEO page in the Admin Panel where I have my description and keywords. Perhaps an idea for you?


Top
 Profile  
 

Re: Customizable Light Admin Panel Theme
PostPosted: Thu May 10, 2012 5:19 pm 
Registered User
Offline

Joined: Thu Oct 13, 2011 2:48 am
Posts: 275
I have search-related fields in a group in the 'Global Settings' template. 8-)


Top
 Profile  
 

Re: Customizable Light Admin Panel Theme
PostPosted: Thu May 10, 2012 8:16 pm 
Registered User
User avatar
Offline

Joined: Mon Feb 27, 2012 9:40 pm
Posts: 94
Location: Groningen, The Netherlands
That is also an option. :)

I was thinking... is there a way to make the admin panel responsive? My brother is often away from home, so he can update his website through the admin panel on his smartphone.


Top
 Profile  
 

Re: Customizable Light Admin Panel Theme
PostPosted: Fri May 11, 2012 9:25 am 
Registered User
Offline

Joined: Thu Oct 13, 2011 2:48 am
Posts: 275
I'm no expert on mobile or responsive design. CSS is incredibly powerful, so I don't think it would be too difficult to implement. I will definitely look into adding a few media query breakpoints for this theme in the very near future.

Update: Implemented, see the new 404 screenshot. The standard layout is 1008px wide. If the browser window isn't big enough, the layout automatically adjusts to the 694px or 478px (single column) width versions.


Last edited by cheesypoof on Wed Apr 10, 2013 6:45 am, edited 3 times in total.

Top
 Profile  
 

Re: Customizable Light Admin Panel Theme
PostPosted: Mon May 14, 2012 3:26 pm 
Registered User
User avatar
Offline

Joined: Mon Feb 27, 2012 9:40 pm
Posts: 94
Location: Groningen, The Netherlands
The 404 screenshot looks more mobile friendly, but it's not fully responsive.

I really like the menu from the Twitter Bootstrap framework when you viewing it on smaller screens. The menu changes when you are viewing it on a mobile. I also want something in admin panel of Couch, but I think it is only possible if we can make adjustments in the php files. Or is there another way?


Top
 Profile  
 

Re: Responsive Light Admin Panel Theme
PostPosted: Mon Jul 16, 2012 9:08 pm 
Registered User
Offline

Joined: Mon Jul 11, 2011 11:10 pm
Posts: 57
Cheesyproof, may I ask how you managed to get those icons before the admin panel entries?


Top
 Profile  
 

Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 30 posts ]  Go to page 1, 2, 3  Next

All times are UTC + 5:30 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
© 2001-2010 SYS-Solutions All Rights Reserved