Jump to content

Flat/modern Integration (Client + Login)


VIBEdigital

Recommended Posts

Hey guys- New user here- I discovered Blesta on Friday and quickly signed up after about a month of debating on how I am going to manage my growing client's hosting. We primarily focus on fully-managed solutions and optimized hosting solutions and I have been looking for a highly configurable, but usable out of the box solution, that really doesn't automate everything (as we're a hands on web dev company) but had the capability, and this is it! I spent the weekend plugging in my clients, linking my Stripe account, building service plans, etc, and best of all, personalizing the client dashboard and login screen (I've modded the admin a bit, but really not necessary). I am a front-end developer with a lot of CSS experience and basic PHP experience... enough to tweak and move stuff around comfortably, but I don't program. Here is the result of my personal integration for my clients.

 

Basically- I widened the template, removed all of border radius' and shadows, removed the chunky top sections, modified the client_main_myinfo to incorporate a photo (which is static for now, my programmer will make that account specific, set by the admin, in the weeks to come) and rearranged some of the functions, and basically changed the font and colors on everything.

 

This is just a start- We're going to run client account info down the left as part of main_myinfo, and tweak it a bit more. We'll eventually modify the package order forms before we roll out the ability to sign up from our website. We also do graphic/print work, so we may modify the support system to allow for requests that include text fields and drop downs for graphic type products (ie. asking the client what type of product, what size, what amount, etc)

 

I am not happy with my CSS mods of the login page, it will likely change. It looks nice, but it's not perfect.

 

I've really enjoyed modifying Blesta- the php and css is very clean and easy to work with!

 

See attached. Feedback greatly appreciated!

 

Craig

post-10892-0-98572000-1418003879_thumb.j

post-10892-0-94895100-1418004080_thumb.j

Link to comment
Share on other sites

The photo is a PhotoShop mockup. I took a screenshot of the browser after I modified the client area and placed it in a PhotoShop mockup. I'd love to have those Apple devices! I have a really nice home office in a hi-rise, but it's small. My desk has 2 25" HP monitors on it and I have a couple of dell machines. And my office could be cleaner.

 

I do some light photography though. Although that's a mockup photo, it could easily be done with a 50mm 1.4 lens, which is great for that bokeh effect (blurred background) :)

 

I'll consider sharing the CSS files and the basic PHP modifications when I am done. We're currently doing the admin side.

 

I only modified 3 CSS files, although I duplicated the CSS folder and placed a copy in a sub-directory to use for the login page, then changed the link rels on the login pdt file since some of the classes were shared. The right thing to do would have been to write new classes. I'd like to fix that before sharing the files publicly!

 

Glad I am getting some good feedback. I started slowly rolling this software out to a few of my clients this week.

Link to comment
Share on other sites

The photo is a PhotoShop mockup. I took a screenshot of the browser after I modified the client area and placed it in a PhotoShop mockup. I'd love to have those Apple devices! I have a really nice home office in a hi-rise, but it's small. My desk has 2 25" HP monitors on it and I have a couple of dell machines. And my office could be cleaner.

 

I do some light photography though. Although that's a mockup photo, it could easily be done with a 50mm 1.4 lens, which is great for that bokeh effect (blurred background) :)

 

I'll consider sharing the CSS files and the basic PHP modifications when I am done. We're currently doing the admin side.

 

I only modified 3 CSS files, although I duplicated the CSS folder and placed a copy in a sub-directory to use for the login page, then changed the link rels on the login pdt file since some of the classes were shared. The right thing to do would have been to write new classes. I'd like to fix that before sharing the files publicly!

 

Glad I am getting some good feedback. I started slowly rolling this software out to a few of my clients this week.

 

You are good at that mate :D

Link to comment
Share on other sites

  • 4 weeks later...

I may create a CSS-Only version of the theme where it will re-skin the the dashboard but not change the functionality but I'd need to purchase a second license to the software as I'd rather apply the changes to a fresh installation.

 

I've started to re-skin the admin dashboard to match as well.

 

Essentially, I'd just create a drop-in css folder to replace the existing folder (although i'd suggest saving the original). To re-skin the login I'd create a second CSS folder to modify and make one link rel change to the login screen's .pdt, as right now the login and dashboard itself share some of the same CSS elements. I prefer to control both screen's styles independent of each other, so we just need to have the login call do different css files.

 

If I can get some time over the next few weeks, I will work on this, as i'd like to have it myself

 

Right now I haven't worked much with this so I need to get in there and make this system work for me!

Link to comment
Share on other sites

I may create a CSS-Only version of the theme where it will re-skin the the dashboard but not change the functionality but I'd need to purchase a second license to the software as I'd rather apply the changes to a fresh installation.

 

Open a ticket and I'll issue a dev license to your account. If you have an owned license, it'll be permanent, if monthly, then it'll expire after 6 months but can be extended.

Link to comment
Share on other sites

Thanks Paul! That's something I am definitely interested in doing, time permitting! I really enjoy UI design and there hasn't been much need for it with my business (as a front-end web developer/business owner serving other businesses) so I truly enjoy working on my personal projects and sharing. If I can get some clean drop-in CSS in place I'd share it. Right now SOME of this was done quickly and some of styling is hardcoded in the pdt files. Now that there is interest, and for my ease down the road, I'll go back and assign and write classes and remove the hard-styling. 

 

I spent the last 6 hours or so re-doing the login screen. My biz partner and I both agreed that coming from spending the past three years being at every beck and call of our clients and answering their questions via email, phone, facebook, text, we'll need to make them very comfortable transitioning to a more auto-mated, less personal system than we have in place now. (which is just direct access to us). So our plan was to move towards a more welcoming log in screen on par with some of today's top personalized web apps based on a service (think bench.co).

 

The main dash will stay as it is in the images above, although we'll be adding more features, as well as the ability to order and re-order products (as we offer print marketing to support our client's websites as well).

 

So today i reset the css to the out-of-the-box login screen from Blesta and reworked it with our vision of a welcoming login... We are going to add a little more and tweak the media queries for mobile, but this is the result so far!:

 

newlogin.jpg

Link to comment
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.

Loading...
×
×
  • Create New...