Customizable FRONTEND Account Templates (Patch)

[Stefek]

Hello.

Lately I had to design the Account Templates for one of my current projects.
If you already tried to style this areas, you then know that you need to change the corefiles in the /[root]/account directory.
For a designer knowing not much about PHP it is not only dificult to "find" the right HTML parts inside those php files but could be also a little bit risky.

So I decided to split the HTML out of those PHP files by using phpLib (standard template engine inside of WebsiteBaker).

After I was done with this for myself I asked some WB Users and Programmers who encouraged me to build a whole packege out of this and post in the forum.

So I did - because it is a good thing for designers to have a easy access to these files in order to design them to their own needs.

This patch provides not only this oportunity for designers, but it clears up some validation bugs and gets rid of some "relicts". I hope this is some help for the developers.


The Patch consists of the following files
(techn. information, not necessary needed for designers. A
Designers Instruction will follow soon) :
The directory [ROOT]/account consists:
changed PHP Files:
- signup_form.php
- login_form.php
- forgot_form.php
- preferences_form.ph p
^{These changed files are loosed from every HTML
and enable by using phpLib to outsource HTML into separate Templates.}
- login.php
^{One change in this file to enable the
'Excessive Login Attempts' message in Frontend.}

additional(new) PHP Files:
- warning.php
- warning_message.php
^{These new Files, enables the 'Excessive Login Attempts'
message in Frontend.}

newdirectoty created  [ROOT]/account/htt consist the followingTemplates:
- signup_form.htt
- login_form.htt
- forgot_form.htt
- preferences_form.ht t
- warning_message.htt
^{(I used *.htt as file suffix, which is already common for WB
Users, thanks to anyNews and Backend themes and alot of other modules.}

All those HTT files consists nearly the same HTML as in the original PHP files.
I only cleaned them up a little bit for better w3c validation.

Find the patch attached.
Do not forget to rename/backup your current /account/ directory before uploading!

This is just the patch - the advantage for designers will be explained in the next post.

Last but not least: Thanks to user Thorn, Doc, Ruud and Argos for encouragement and/or some technical hints.

MfG,
Stefek


Patch UPDATE #2
New files attached.



[gelöscht durch Administrator]

[Stefek]

Hello Designer.

This topic is about customization of the FRONTEND Account Templates.

Its only good if you WebsiteBaker installation has to do with 'USERS'
This are the following areas of your WebsiteBaker installation which will be customizable after using the above patch and the "Account Template Kit".

What to do.
After application of the above patch, do the following:
1) Open your current WebsiteBaker template
2) Move the entire folder "account-htt" into your templates folder (it's attached to this post)
3) Open the htt files and customize the files, css, use droplets - whatever and however you like.
4) Install your template back to your WebsiteBaker installation

You're done.

I attach the "Account Template Kit" as a "demo" only, so you can see how it works.
To have a cleane SET of those files, you better use the /htt/ folder out of the above patch and renaming it to "account-htt" move copy it to your WebsiteBaker template.

There is one obligation: the folder has to have the name "account-htt".
This is important. It won't work else.

The following image (you have to be logged in, to see the picture) you see the "demo" in action:


By using both - the patch in the first post and the template files attached in this post - you can change the look and feel of all those areas.

Regards,
Stefek


Demo files UPDATED
New files attached.



[gelöscht durch Administrator]

[Stefek]

There is one more thing I have to explain on this topic.

At the first glance it may look like an overhead. But it's not.

Once the patch is applied, the normal WB user don't need to do anything within his template.
BUT if he wants to redesign these areas (or just parts of them) he CAN.
It's a "on demand functionality"

How the patcht works:
inside the php files we apply the phpLib engine.
It goes like this (excerpt from the signup_form.php):

Code: [Select]

<?php //
/* Include  phpLib-template parser */
    require_once(WB_PATH . &#39;/include/phplib/template.inc&#39;);
    // see if there exists a template file in "account-htt" folder  inside the current template             
        if     (file_exists(WB_PATH . &#39;/templates/&#39; . TEMPLATE . &#39;/account-htt/signup_form.htt&#39;)) {
            // if so, set the path there
            $tpl = new Template(WB_PATH . &#39;/templates/&#39; . TEMPLATE . &#39;/account-htt&#39;);
                } 
                // else use "htt" folder in "root/account/" 
              else {
                $tpl = new Template(dirname(__FILE__) . &#39;/htt&#39;);
            }        

The script looks first into the template if there is a htt file -
if the file can't be found, it uses the default htt file within the account/htt directory.

So don't worry  - it's no overhead for users.
But an advantage for those being in need to customize this areas.

Regards and looking for Feedback.
Stefek

[crnogorac081]

ughh, it took me a while to figure out patching

is this order right ?

1. make backup: change foler account to account-BU
2. Create account folder and copy all content (.php files and htt folder) to that folder
3. Copy htt folder, and paste it to /template/ defult template / , and then rename htt to account-htt
4. restyle .htt files in account-htt folder

 Now just one question, do I need to copy all files to account-htt (all .php files and htt folder) or just .htt ?

cheers
I

[Stefek]

Hello Ivan,

ughh, it took me a while to figure out patching

Sorry for my english skills - I still have to learn both - english and php 

Point 1-4 is correct.

For Point 3 & 4 -> you may also use the 'demo kit' from my second post (attached) and use this as a starting point.
Point 3 & 4 is good if you want the "default HTML" as starting Point.

Whereas in the 'demo kit' I have built in more "specials" like {PLACEHOLDERS} you may like to use, CSS file, Images and so fort.

Now just one question, do I need to copy all files to account-htt (all .php files and htt folder) or just .htt ?

You only need the *.htt files

Thanks for giving it a try.

Regards,
Stefek

[pcwacht]

Looks like a neat job!

I know I will use it. Thanks!


Might indeed be an asset to wb281
Maybe even do the same trick to search?


Have fun,
John

[Stefek]

Hello John,

thank you for your feedback - it means much to me hearing this from a well skilled developer 

Maybe even do the same trick to search?

As far as I know, the search template is genarated through loops / settings in the backend (backend->settings/advanced settings->search)
It maybe will work to do the trick to either look into the template if there is a search.htt file or else execute the loops/settings from inside the backend.
That's a good idea - and a good step forward for "on demand cusomization" from within the template.

Best Regards,
Stefek

[crnogorac081]

I agree that this should be an addition to WB 2.8.1 . Who likes to style he will style, if you dont like there is a default htt

Even more, there are no security holes as "certified" WB coders did this 

cheers

[Stefek]

I agree that this should be an addition to WB 2.8.1 . Who likes to style he will style, if you dont like there is a default htt

Thanks you Ivan.
You're right - it's a "on demand" thing.
And with this patch you have more possibilities and [PLACEHOLDERS] you can use. Even a path to your [TEMPLATE_DIR] (good for Pics, JS, CSS) is in there.
And you can expand the profile making use of droplets - if someone wants to

So thanks for testing and your feedback.

Kind Regards,
Stefek

^{By the way, Ivan:  this patch has nothing to do with the lately posted securitypatch by FrankH.
It influences this area, but is found in another location (framework).}

[Stefek]

Hello.

John (PCWacht) informed me about a typo in some files (I wrote MASSAGE instead of MESSAGE).

I updated all files.
You'll find them in the first post (Patch)
and second Post (htt files for the template).

Thanks John.


Kind Regards,
Stefek

[crnogorac081]

I noticed that too, but thought that you wanted to avoid some conflict with variables

[Stefek]

I noticed that too, but thought that you wanted to avoid some conflict with variables

Hello Ivan.
No, it was just a typo error of mine

Regards,
Stefek

[Waldschwein]

Hello,

I think it should be in WB 2.8.1, as it's more a bugfix then a new feature. We can see, even more "professional" sites then now could be created with it. 

Yours Michael

[erpe0812]

I am sure you know the way things have to go................. ..
http://project.websitebaker2.org/newticket

rgds

erpe

[Stefek]

Hello Erpe,
yes I know that.

I will open a ticket (my first ever) as I wrote in the german thread. 

I am still waiting for some feedback/suggestions.

Did you test it?

Regards,
Stefek

[erpe0812]

No,
no time this time
(not only a song by Police)

erpe

[Waldschwein]

I will open a ticket (my first ever) as I wrote in the german thread. 

I am still waiting for some feedback/suggestions.

Hello,

please consider that:

The development team plans the release of WebsiteBaker CMS  2.8.1 scheduled for end of the year 2009.

Time line (based on current tickets):     
RC1 by Mid of November
[...]

Don't test it to death.

Yours Michael 

[Stefek]

Thanks to user Chio who tested the patch I fixed another inconsistency in the patch.

I uploaded the zip with the new files in the first Post.

Thanks to all for your comments.

Regards,
Stefek

[Stefek]

Some people has had problems to understand to how apply the patch they told me via PM.

I decided to illustrate that.
So, here we go.

STEP 0)
Download the patch from the first Post (account_patch.zip)



STEP 1)
A) Using a FTP Client, go to your WebsiteBaker Installation and look for the 'account' directory
B) Reneme it to 'account_backup' in order to backup this directory

STEP 2)
A) Rezip the zip file 'account_patch.zip' and rename the 'account_patch' directory into 'account'
B) Using FTP upload this directory to the root of your installation

You're done.
No validation errors anymore.

Furthermore, you can now use the optional design-kit as described in the next post.

Enjoy it!
Regards,
Stefek

[gelöscht durch Administrator]

[Stefek]

Hello.
Some people also had problems to integrate the account-htt files.

This is also very easy.
But Remember: this is optional.
(No one really needs to use this "extra-feature". The Patch addresses also the validation bugs and handles them.)

The whole patch was originally written to reduce validation errors and to give you the ability to redesign all those areas without any need to change the core files. And it does exactly that while applying this steps.

First: Downlaod the 'account-htt.zip' file from the second post of this thread (Answer#1)

STEP 3)
Using your FTP Client (or by downloading your template with the AddonsFileEditor) go to your Template and move the account-htt directory in there.


STEP 4)
Go to this directory and style this files to your design needs


Important Note:
The files attached in the second post is just a demo.
I wanted to give you a example about how this could be used in a real situation.

If you want to start from zero, you can also open the zip file "account-patch.zip" and pick up the 'htt' directory, rename it to 'account-htt'  and there you go - a fresh and clean set of account-htt files (without images, css etc.).

Regards,
Stefek



[gelöscht durch Administrator]

[chio]

How to replace the account-Folder - this wasn't the problem.
Where I had the troubles was to realize: Its the TEMPLATE_DIR where to put the second folder.

Anyway, it works fine now and the first thing I'll do with it: Get rid of the Form-Reset button. I wonder how many people klick the reset instead of the submit button...

[Stefek]

Hello Chio,

thanks for your comment.

Where I had the troubles was to realize: Its the TEMPLATE_DIR where to put the second folder.

Well I thought that it should be clear (because of the title of the thread "Skinable FRONTEND Account...").

2) Move the entire folder "account-htt" into your templates folder

Anyway, I think now with the new illustrations everything is fine and understandable.

It's time to write a ticket.
Any body's gonna help me? (Never did it before.)

Regards,
Stefek

[Argos]

Great work, and another step towards an even more powerful WB!

I don't know if it's related, but is it more easy now to have a signup form with more info fields? I'd love to have WB to be able to function as a simple profile manager where visitors can sign up fill in a form (with custom fields beside the current default ones), and can manage and show their profile on the frond end.

[Stefek]

I don't know if it's related, but is it more easy now to have a signup form with more info fields?

Hello Jurgen.

As I am new to php, I just can give a semiprofessional answer and maybe another one can give more info on this.
But yes, it should be easier to implement such functionalities by using php in combination with the htt files and inserting droplets to them.

A good coder will be able to do that.

And the advantage is, that such solutions wouldn't need any further core replacement (only template adjustements) in order to implement such solutions.

Thanks for your comment.
I hope some coders will say more on this topic.

Regards,
Stefek

[mr-fan]

hi guys,

nice mod for real control of the complete design! very good for professional websites!!

@jürgen:

maybe you can combiene this mod for your needs

https://forum.WebsiteBaker.org/index.php/topic,15162.0.html

i think it's what you mean?

//Edit:  there is also a droplet for frontendusage - i think this can be easy used with the htt files now!! 

regards martin