Author Topic: New WebsiteBaker Backend – we modernize WB :-)  (Read 25651 times)

Offline Yetiie

  • Posts: 778
New WebsiteBaker Backend – we modernize WB :-)
« on: December 14, 2014, 09:24:27 AM »
In the german forum we recently had a discussion about how to make WebsiteBaker more attractive to users. One(!) issue was to give WB a modern look.

That for I did a new Backend.
Just have a look to the Screenshots or download the Theme and try it out.
Both (Screenshots and Theme-Package) are appended to this Post.

Name: Advanced Theme WB Flat
The Backend is done for WB v2.8.3


The Items:

>>> New modern Backend based on actual Admin-Panel-Structure realised in a modern Flat-Design-Look

>>> New Feature: Dashboard which shows some (technical) project information.

>>> New Feature: WB Information Center which can show actual information to WB or to the specific webproject.


Dashboard and WB Information Center are prepared to be easy customized by preparing one File with the Information you want to show the Users in your Project. To find the files have a look to the short documentation.





Idea WB Information Center (new)
----------------------------------------------------

The Idea of WB Information Center (togglebox right top of page) is, that there should be prepared specific information to the editors or admins of the specific project. This could be Links to WB Information as shown in the Backend on start. Other Ideas for useful information are:

- Links to often used webworker ressources (like 'Can I Use', Lorem Ipsum Generators, Validation Services, o.a.)
- Links for the Editors concerning the Project for what the specific webpage is build (i.e. the page is about ‘local events’ present links to webpages with event calenders and szene reports to the specific city)
- Information for editors which helps to build the actual webpage (i.e. you prepared a set of css classes to be used by the editors show a list with the classes and short descriptions, - so the editor has this information always on his fingertips.)

To prepare the Information for the WB information Center you only need knowledge of easy html … so any webdesigner should be able do it. Just prepare the specific file for your project.

(NOTE: in the actual version the WB Information Center is very small. If the idea works to the community the box can be done larger and size and maybe placement could be made easy customizable.)




Idea Dahboard (new)
----------------------------------------------------

The Dashboard is done to show dynamic information about your specific webproject. To the Start it shows simple information like number of pages, project language or project template.

But it could be used to show more detailed information like number of backend users (local community), date of latest news, system information like page visitors or what your Ideas are.

To prepare the Information for your project you need to have knowledge of a developer(!) of WB. So you need to know where to fetch the information you want to show, how to contact the database in the correct WB technique and/or about the management of wb access authorization(!) to the specific information. (But of cause everybody can/should do it like he think it works for himself.)

To have a look how it could (maybe easy) work have a look to the specific file.




Future: ideas and development
----------------------------------------------------

The new backend is done in hope to help WebsiteBaker to become more attractive for more users and to get back a modern actuality to become back it’s competitiveness to other modern cms systems. Off course this is only one brick for the wall but maybe it could be a kick off for initialization other actions too.

For the moment it is a private project and an offer to use this backend theme as you like it. If the idea is welcome it could become an official project. Some features like customizing (wb-)titels, (wb-)icon and some basic colors for you specific webproject (a welcome issue for modern cms systems I think) could be added easily. We will see … :-)





The Package in this posting is a Beta version.
No one is perfect.
Help in testing is welcome.


[gelöscht durch Administrator]

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #1 on: December 14, 2014, 09:25:28 AM »
Cause of experience - just a kind request to the admin:
Due to the fact, that the german and international communities don’t have too much contacts the information is prepared to the german and international forum.

Both postings are intended by the author.
The international is the leading one.

It would be nice to let the discussion be available in both parts of the forum.
Thank you very much.

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1188
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #2 on: December 14, 2014, 09:05:48 PM »
Wow! Looks great and modern!

First thing that drops outta my mind right away is if your template does make the WB admin slower to load and to work with?

One of the major problems with other CMS admins is the overkill of dynamic loading bars, colors, schemes etc. Looks great but works like a snail. (WP for instance)

One of the major advantages is that the admin of WB works relatively fast. Did you benchmarked your template with the original and/or Argos theme?

Besides that is your template only suitable for standard installations? Or can it handle custom implementations of admin mods.

But again... impressive 1st try!

PS; I'll test it on our testdomain.

...:: Bake the Unbakable ::...

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1188
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #3 on: December 14, 2014, 10:11:32 PM »
Ok, here we go, after testing first few impressions;

- Loading time with empty setup is good
- Large gap between several sections. I'd prefer it to tighten things up. Remove gaps. See att.  (1)
- Some buttons, see att. (2) do work but the mouse-pointer is not visible so you don't know that you can click on it.
- (personal) I'm slightly irritated by the WB logo right top corner that is bigger than the upper grid. I'd rather see it much smaller so that it fits nicely in the darkblue upper grid.
- Feauture to disable/remove the WB Information Center when creating a group (enable/disable in group settings) because customers don't need any access to these kind of information.

For now thats it. First impression looks good, now time for further tuning.

Regards
...:: Bake the Unbakable ::...

Offline Ruud

  • Posts: 3642
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #4 on: December 15, 2014, 10:14:57 AM »
Very very nice!!!

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #5 on: December 15, 2014, 03:26:28 PM »
Great. Im am happy that you like the new theme  :-D :-D :-D

For the moment I pick up the testing results and will work on it on holiday coming up next two weeks.



To the Questions:
--------------------------------------

  • No, there was no direct perfomance test against the traditional theme. But the new one has a bit more JS so the tratidional themes off course would win I believe ... but there isn't to much additonal JS so the new theme should work fluent. (In my testing on a not so perfomed system it does. A special note and question for testing this will follow up later.)
  • The design of the big icon indeed is a question of like or not. What we can do is: If there are enough developers who would like to use it I will do an configuration file. There I can place an alternative design. Than you could chose it or (as the idea is) adapt the design to the project with your own titles and icons :-)
  • The Theme is developed with a first view on the standard modules off course. But as I  proofed other modules should look even nice too. The main Problem ist, that there is no CSS Framework for WB yet (no one I know or no one which is respected by most module authors) and to me it seems hta some modules are working their own special way. If there will be the congiuration file you can add an adaption css snippet and do it on your own. Even if we would collect such snippest I would adapt them to the theme too.
  • The large gap between the sections: indeed this is a special thing. I tried a smaller distance but this din't work to the different modules in an optical way (I became problems to differ the optical End and Beginning of the sections. The Probleme was the extremly different look of the modules which made it confused.) And Indeed the html output is not optimal on this  page, so there are not many possibilities to solve this problem ... Onhte other hand: some like it ;-)
  • Concerning WB Information Center and Group Setting: To add this to the group setting you qould have to change the core ... and this only would make sense if all themes would have an Information Center. So I think this would not be a good Ida even it would become an official project. But in a configuration file we could do a switch to switch it on or out general. But when you have a special look to the directory contentinclude I believe an developer could prepare the information with an database query show special information adapted to the group-settings.






Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #6 on: December 15, 2014, 03:43:09 PM »
So. Once more thx for first testings.
Up to this here is an Information maybe to have a special look for:


>>>
There is some additional JS use for some special functions.
Most of this is used for the collapse-animation of the left sidebar.
In FF an IE it seems to work fluent.

Special in Chrome
in state sidebar collapsed (!)
In very rare cases I had a little struggle:
loading a new page chrome showed the whole sidebar for a quick 0.01 second before it collapsed

I think I figured it out. But when you are testing it would be nice to have a special look for this.




>>>
At all the new theme is made for new browsers and it should work down to IE10.
IE9 I am not quite sure. Even if it becomes an official project IE9 should be tested in a special way.



>>>
Reponsive:

We had a discussion to this point before in the German Forum. Cause there were some question for this I did the theme that it should work on tablet in a width down to 1024px with collapsed sidebar.

Please: this is not my way to work on it. Testings for this are very wlcome if you are interessted in using it on tablets.


Special for Handys: Even I don't think that is reale nessesary I checked the chances to do it responsive to portait-modus of handy. The problem is, that the pagelist and even more some (most?) modules are not done for a repsonive view. It indeed realy  does not make make sense to work on it. But working in portrait modus like on a tablet maybe should work. ;-)

Offline crnogorac081

  • Posts: 1879
  • Gender: Male
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #7 on: December 17, 2014, 11:39:11 AM »
big LIKE ! I like the new theme, but, but a sidebar is a bit dark to me :D
no bb in signature

Offline Vincent

  • Posts: 376
  • Gender: Male
    • websites voor ondernemers
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #8 on: December 17, 2014, 03:03:03 PM »
Looks very promising indeed. Looking forward to a def version.

Vincent

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #9 on: January 14, 2015, 04:25:20 PM »
Attached to this post you will find the rc candidate of Advanced Theme WB Flat.



Following things had been realized:

Fixed: Include FontAwesome
Adapted: Design of message-boxes
New: Layout for page forgot login data
New: customize by css file – hide WB Info Center
Fixed: Some Links in Menus (activated/deactivated)
Changed: Icon in page menu – back to list with pages



Not realized up to now:

>>>
Change WB Link from www.websitebaker2.o rg to www.WebsiteBaker.or g
I was not quite why the www2-Link is presented in the original theme.
Can I get an official Info about it and which one is wished.

>>>
New Layout affects module WB Visitor: Bars in bar charts are upside down
I don’t use this module. So I have to ask for help of the community:
Can you give me a correction CSS for this module.
Please do the correction in css file .theme-folder./extern-modules-correction.css
Even if I get the code I will add it to the theme.



Question to the community

Same questions for help of the community on other modules.
There are a lot modules which are developed in a very different way.
If you use such a module which is affected by the new theme: please correct the CSS and I will ad it to the theme.


Information to the new version:

The fixes are based on the feedback of the community.
This version now is the release candidate.
If there are some issues or wishes: please post them in this thread.

Thx for your Help.



[gelöscht durch Administrator]

Offline Ruud

  • Posts: 3642
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #10 on: January 14, 2015, 04:56:47 PM »
Change WB Link from www.websitebaker2.o rg to www.WebsiteBaker.or g
I was not quite why the www2-Link is presented in the original theme.
Can I get an official Info about it and which one is wished.
See: http://forum.WebsiteBaker.org/index.php/topic,27925.msg194395.html#msg194395
It now is officially: WebsiteBaker.org

New Layout affects module WB Visitor: Bars in bar charts are upside down
I don’t use this module. So I have to ask for help of the community:
Can you give me a correction CSS for this module.
This is caused by a global  "vertical-align: top" on td/th (#contentarea table, #contentarea tr, #contentarea td) elements.
I will overrule this in the wbstats admintool backend.css (next version), but other modules could be affected also.

There is also a global "text-align: left" in your "caption, th, td {}".
This overrules the method used in many modules to align the save/cancel buttons. Mostly (like the WYSIWYG module) they will be aligned by <td align="right">.
With the cssrule now, right-aligned-buttons are left aligned. (not pretty)

For the rest.. I think you are doing a great job here!!

Offline Ruud

  • Posts: 3642
  • Gender: Male
  • Do not use PM for help! Please use the forum!
    • Dev4Me - Professional WebsiteBaker Development
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #11 on: January 14, 2015, 05:12:05 PM »
Just an idea for the information center.
I added the WebsiteBaker (english) newsfeed in the contentbox.

Just replace the php inside the attached zip in the folder:
/templates/advanced_theme_wb_flat/contentinclude/informationcenter/

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #12 on: January 15, 2015, 04:22:34 PM »
Thx for the feedback.

Especially for the hints to the alignments:
Alignments of buttons an in the tables are indeed a problem to the new theme.
The old table-design struggles to the modern techniques.
I will have a closer look once more to it but I am not uite sure if I will solve it in a general way.

The Idea for the newsfeed in the Information Center is great :-)
That's the way WB should go. I think, I will take this for the def-version.
 :-) :-) :-) :-)




Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #13 on: January 16, 2015, 03:15:33 PM »
Attached to this post you will the rc candidate of Advanced Theme WB Flat with fixes based on the feedback off the community.



Changes:

>>>
Information center now shows wb rss feed on standard (Thx Ruud for idea and code)
Just for information: the order of the news is not right at the moment. But this is a problem on the wb page (rss feed) itself. The problem is known and wb is working on it.

>>>
Changed: wb links in the footer and information center to new official domains.
(Not change link in information center to help project due to the fact that the theme is for v.3.8.3 and not for 3.8.4.)

>>>
Deleted: css value in reset-css
text-align: left" for "caption, th, td".
This affected some modules in positioning of the buttons

>>>
Deleted: css values for structure-innercontent
vertical-align: top on td/th for #contentarea table, #contentarea tr, #contentarea td
For me it seems it works and this should fix the bar chart problem with module WB Visitor

>>>
Added some design fixes for modules Secure Form Switcher, news module and page edit page-settings. Have a look to file extern-modules-correction.css for this



Up to know it is rc status. But I believe in this way it could become the working version.
My question is if you could check if you can find some mistakes.


Thx one more for your Help.


[gelöscht durch Administrator]

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1188
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #14 on: January 17, 2015, 11:49:39 AM »
Very glad to see that you took the time and effort to work on this great admin mod.

Downloaded it and for the forthcoming period my intention is to implement this as a standard in our new projects (first one already online).

One question remains:

Can anyone explain (for all non-coders out here) how to edit the contents of the Information Center. For now it's filled with contents that customers doesn't have to see. In my case things I'd love to see are:

- Direct link to our webmail server
- Quick contact (eg. button to email us directly)
- Simplified WB Stats
- Twitter feed (instead of RSS feed) so customers can read our latest news from our Twitter account

But overall.... great job!! Thank you.


...:: Bake the Unbakable ::...

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #15 on: January 17, 2015, 05:17:12 PM »
I am pleased that you like the theme.
Good idea for information to use the information center.


To add or replace information to the information center is same as writing a classic html page. Up to now there is no way to to it in wb directly (unless you use a tool lik the file editor I believe).

Just Customize the informationcenter content in following file:
path.to.themefolder/contentinclude/informationcenter/informationcenter.content.php

Write the content in direct html code or do it in php (with a php-block <?php ... ?>.
I you use php you can use wb framework and wb variables.

To add/change the css please use following file:
path.to.themefolder/informationcenter.css


Does this information help?
This Information had been given in the documentation file too.
Did you read it? If this will not be understood I nee to reformulate it.

Due to the fact that you need to write html into a known file I am not quite sure if this is a way for non coders. But I believe that the admins off wb should be able to write basic html.


Note:
If you do not not whant to present the information center there is an easy way to switch it of. Have a look to the file:
path.to.themefolder/informationcenter.css
There you just need to comment out the css.

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #16 on: January 17, 2015, 05:40:38 PM »

Just another hint to all:

The way to add information to the information center is a way which works for me.
But there is still the idea to to ot with a single page in wb directly so it could be done directly in the system.
Even if there is somone in the community who would like to code this special Item we could add such a mechanic.



The basic Idea is:

The admin creates a page 'wbinformationcenter' to the project.
He can do it as an private or hidden page so the normal redactuer could not change it.

The information center firts searchs the database if there is a page with such a name.
If there is a page with this name it take the content from the database.

If in the database no page is found the information center take the content of the file:
path.to.themefolder/contentinclude/informationcenter/informationcenter.content.php



Some considerations to realize it:

The php mechanic to select the content from database or from file needs to be placed in the file
path.to.themefolder/contentinclude/informationcenter/include.php

Calling the page from database needs to add all possible sections which could be build for a page.

I don't believe that there should be a problem with the right management because the special wb page could be managed with wb rigths. Hints are welcome to this point too of course.



Offline crnogorac081

  • Posts: 1879
  • Gender: Male
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #17 on: January 19, 2015, 12:07:27 PM »
Why just to modernize design.

Why cant we make backend template that uses ajax requests, instead of constant refreshes ?

That would, in my opinion, have to change the way /admin is coded right ?
no bb in signature

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #18 on: January 19, 2015, 03:50:39 PM »
First: the dashboard indeed is done in Ajax.

The reason is, that this information is called additional to the normal template from a php-file and should be be added as additional content with different space. On this way everyone can prepare his own information for the dashboard. Maybe there will come som more ideas from the community. Just prepare the file:

.path-to-theme-folder/contentinclude/websiteinformations.php.

Second:

Big part of the other pages are mostly build with htt-templates which can be changed. But a lot of other content is generated and hard coded from the system itself. As I remember the hard coded content includes some links too. So I don't believe that it is possible to change and include all the content by ajax.

But to be honest: I am not a specialist on ajax technique at all. So maybe another one could write something to this question.




Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1188
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #19 on: January 23, 2015, 10:51:18 AM »
Hi,

Your point of direction worked out perfectly. I changed the Information center so clients now directly can go to their webmail, send us an email and read more information how to use WB. Instead of the RSS feed I changed it into our Twitter feed. So in short very handy for our customers. :)

...:: Bake the Unbakable ::...

daydreamer

  • Guest
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #20 on: January 24, 2015, 11:04:44 AM »
Looks very promising just a shame WB us dead in the water and hardly ever gets updates.

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1188
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #21 on: January 24, 2015, 11:38:57 AM »
Hi,

[off topic]
I understand your concern but may be it has reasons. There are lots of wb users, much less coders. And when there are coders it's important to show them our appreciation for their effort. For instance this admin mod is truly a great piece of coding. No one asked for it but it's there, free, we love it, embrace it and we use it.

Regarding the WB itself, Not every update means a step forward. As you will know some CMS are simply overdeveloped (eg. WP, Joomla etc). One of the great powers of WB is it's basics. Keep a CMS safe & simple. Mods are important, safe mods are even more important. And therefore we have to respect our mod builders so we can enjoy this kind of great addons. Hope there will be more coders who are willing to show their heart for WB.

But you are right regarding WB. The new 2.8.4 is in Beta for very long now.
[end off topic]

I changed the Information Center in what I believe is very handy for our customers. See attachment.

I changed the icons, the links and implemented our Twitter feed into the center.
...:: Bake the Unbakable ::...

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #22 on: January 30, 2015, 11:27:04 AM »
Great Ideas.
That's the way the new WB Information Center could/should be used.
Maybe in time there will come some more Ideas  :-) :-) :-)

Just a request for the testers:
I am going to finish the theme next week an prepare the first version.
Please: If there are some more problems, please place a short information here.

Thx for help  :-)

Offline Boudi

  • Global Moderator
  • *****
  • Posts: 1188
  • Gender: Male
  • //o_-\\
    • Yze Webdesign
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #23 on: January 30, 2015, 11:34:26 AM »
I did some pilots with several clients of us but no one encoutered any problems. So it seems (besides from some small css things from certain mods) that there are no issues.

1 thing though that irritates me is the fact that - when you upload files in the Media - you cannot jump to the next input field with the tab button. This was possible in the other templates. Now you have to manually click each input field.



...:: Bake the Unbakable ::...

Offline Yetiie

  • Posts: 778
Re: New WebsiteBaker Backend – we modernize WB :-)
« Reply #24 on: January 30, 2015, 02:34:41 PM »
Thank you for your Feedback.

On this page are input fileds with type file.
Also the html code is the same (due to the fact that the part of the page is hard coded) the DOM indeed has changed ;-)

Explanation:

Because styling of this special input fields (type=file) is not possible with pure css I use a special JQ named "NiceFileInput" to style this elements. (Very simple and easy JQ to use and style.) This JQ adds serveral elements for the file-inputs to the DOM which now could be styled with CSS. And on of this added elements is a second input-field. Unfortunately the tabindex for this field is not deactivated.

So: now you need two keystrokes with the tab-button to focus the next file-input-field.
One stroke activates the added text-input-field with the file name.
Second one activates the next file-input-field
Now you can use enter-button to open the upload-window.

Unfortunately the JQ don't show a focus outline to the button.
The JQ uses an DIV to show the Upload-Button-Symbol which is not activated itself.
The activated input button is prepared by an invisible css-after-element ...
Upt to now I did not found a solution to set a focus outline to the shown symbol-button.


---------

If you whant to have a closer look please have a look to the DOM on yourself.

Additional you will find this JQ in following folder:
path.to.themefolder/jquery_added/plugins/jqueryNiceFileInput/
The added second field is noted on line 29
Code: [Select]
var filename = $('<input type="text" readonly="readonly">')


First (not tested):
If you add 'tabindex="-1"' to the element you should only use one tab-button to jump to the next field.
But note: included to the theme is is the jq min-file. So you have to add it there. Just search the needle 'readonly'.

Second:
Maybe you find a trick to ad a focus style to the Button element.
The class for this element ist: div.NFI-button


If you find a solution to show a focus outline on the button symbol I am very interesseted to this special problem.
Please test and add the css in following file and to post it here: path.to.themefolder/extern-modules-correction.scss
I will add the solution to the general css.


Even it is not a solution I hope this explanation helps a little bit ... and maybe someone indeed finds a solution ;-)















 

postern-length