Author Topic: Skinable frontend account template - first try :)  (Read 13337 times)

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Skinable frontend account template - first try :)
« on: October 23, 2009, 09:21:48 AM »
Hi,

I tried Stefek's solution from this post: http://www.websitebaker2.org/forum/index.php/topic,15692.0.html

and here is a small demo

username: test
pass: demo123

have fun and try to log in :)
I.


Please do not change prefered language when you log in, as site goes under construction for next person who logs in with same username...
« Last Edit: April 05, 2010, 01:05:07 PM by crnogorac081 »
no bb in signature

mr-fan

  • Guest
Re: Skinable frontend account template - first try :)
« Reply #1 on: October 23, 2009, 11:25:17 AM »
wow - nice backed

i like the combination with your PM mod.... :wink:

i've send you a PM on your site

regards martin

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #2 on: October 23, 2009, 11:34:32 AM »
I like it too :)

That idea just crossed my mind so I did a quick rework during my job break :)

By the way, my basic idea was to prevent users to see backend :) They dont have to see backend now when they want to change their preferences :) Only if they know the structure of WB and type /admin :)

cheers
« Last Edit: October 23, 2009, 11:36:31 AM by crnogorac081 »
no bb in signature

mr-fan

  • Guest
Re: Skinable frontend account template - first try :)
« Reply #3 on: October 23, 2009, 11:43:50 AM »
ok the skinnable backend is such a new stuff - but i'm looking for some real good tutorials for a tutorials project to support and enlarge the help project...

i've this patch will get in the 2.8.1 - could you write a little tutorial (not in the forum - a real tut)?

i will write you again - for now it's just to have it in minds... :wink:

regards martin

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #4 on: October 23, 2009, 11:57:38 AM »
Do you mean about this panel in frontend ?
no bb in signature

mr-fan

  • Guest
Re: Skinable frontend account template - first try :)
« Reply #5 on: October 23, 2009, 12:28:31 PM »
yes....it's very nice use of the patch.... 8-)
« Last Edit: October 23, 2009, 12:33:33 PM by mr-fan »

Offline maverik

  • Posts: 1572
  • Gender: Male
  • ..:: viva los tioz ::..
Re: Skinable frontend account template - first try :)
« Reply #6 on: October 23, 2009, 12:29:09 PM »
very nice, much better than my small copy and paste solution  :-)

can you share, post the code of the panel?

sorry for my bad english

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: Skinable frontend account template - first try :)
« Reply #7 on: October 23, 2009, 12:32:15 PM »
Wow Ivan,
looks really cool!!!

I am glad to see that the work I did on the patch was not a 'wasted time project' and some designers can see the advantages it offers ;-)

Kind regards,
Stefek

« Last Edit: October 23, 2009, 12:53:43 PM by Stefek »
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #8 on: October 23, 2009, 12:34:56 PM »
Guys,

I will post it as soon as I get home :) Also I want to try some design adjustments :)

cheers
no bb in signature

Offline LordDarkman

  • Posts: 343
  • Gender: Male
  • Leben ist schön. Nur nicht drüber nachdenken...
    • Internet Radio Gates of Doom
Re: Skinable frontend account template - first try :)
« Reply #9 on: October 23, 2009, 06:55:38 PM »
Ok first I klicke daround a little bit, than I logged me in unter massages. Than I went do /admin/, logged out and again in... Now my mind:
First of all I like the Theme for login. Only the margin doesn't fit in IE. FF everything is allright. Same is with the Top bar. At IE I have to scroll to the right to see everything. After I klicked on Login at FF I can't see the Forgotten your details? Link. This works in IE.
The solution with Changing details is more than perfekt. Only thing I would like to ask: Is it possible to change the view? Maybe it's possible to disply a Special section, menu site or something there... I have users witch are just able to edit special sites and this way they can have a "quicklink". Changing settings is not nesesary every time.

That's it for the moment.

CU Moritz

And again: GREAT WORK!!!

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #10 on: October 23, 2009, 07:54:41 PM »
I am playing a bit with the styling, all should fit just fine when I finish.

Well, my idea was to set preferences page here, but you can put in this panel whatever you like :)

What do you mean by changing a view ? do you have some other idea ?

cheers
no bb in signature

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #11 on: October 23, 2009, 09:29:10 PM »
Now a bit more styled.. Working fine in FF 3.5 IE 8 and Chrome, tested myself :)

By the way, dont think that it brakes design. I manualy put down the language menu on my site, because this panel was overlaping it and I couldnt change language :)

Is there anything you want to add/change before I post the code ?

by the way, is there a simple way to change background color for combo box ?

cheers
« Last Edit: October 23, 2009, 09:33:23 PM by crnogorac081 »
no bb in signature

Offline LordDarkman

  • Posts: 343
  • Gender: Male
  • Leben ist schön. Nur nicht drüber nachdenken...
    • Internet Radio Gates of Doom
Re: Skinable frontend account template - first try :)
« Reply #12 on: October 24, 2009, 01:04:00 AM »
Is still the Same. I made a screenshot maybe it helps. Look at the scrollbar at the bottom.

What I was thinking aout is this: I have a user who's taking care about the news. So when he logged in, display the news section there.
Or Display pn if you use this Modul or even be able to set up a shortcut list. In my case I offten use Addon file editor, from the admin panel, so I would like to place a shortcut there.
But this all depense on the user logged in. I know it's strange but display diffrent things depend on logged in / not logged in and wich user would be gread.

CU Moritz

[gelöscht durch Administrator]

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #13 on: October 24, 2009, 02:26:28 AM »
Just dont tell me that you are using IE6 :)



Well, basicly you can put anything in the panel, and user doesnt have to be loged in :), but you will have just one panel - the one where is log in and sign up..

But you can use one panel to login or sign up, and when he is loged in, there is another panel with 3 fields to put what you need..

I am not a coder, so I cant code this just to check modules in backend ang get this in frontend, but you can manualy add whatever you want there...(I put preferences page, but you can place some droplets- or even transform anynews snippet into droplet and put it there..)

I will try tomorrow to put another section block in the panel to be displayed when you are loged in, and see if it works :) just my crazy ideas :)

all best
I.
no bb in signature

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #14 on: October 24, 2009, 02:31:59 AM »
and little off topic:

If I have two blocks: Left and right, (left is main, right is side bar) which target (like _blank for new window) or whatever I must define that when I click on link in right block, new content opens in it, and not in main (left) block ? or if I click on link in Left block to open page in right and reverse..?

cheers
no bb in signature

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #15 on: October 26, 2009, 03:17:29 PM »
and little off topic:

If I have two blocks: Left and right, (left is main, right is side bar) which target (like _blank for new window) or whatever I must define that when I click on link in right block, new content opens in it, and not in main (left) block ? or if I click on link in Left block to open page in right and reverse..?

cheers

Does anyone have any hint for this ?

cheers
no bb in signature

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: Skinable frontend account template - first try :)
« Reply #16 on: November 19, 2009, 06:21:12 PM »
Guys,

I will post it as soon as I get home :) Also I want to try some design adjustments :)

cheers

Hello Ivan,
you didn't post your trick till now, right?

Could you explain how you did include all the boxes in top?

Kind Regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #17 on: November 19, 2009, 11:26:23 PM »
Guys,

I will post it as soon as I get home :) Also I want to try some design adjustments :)

cheers

Hello Ivan,
you didn't post your trick till now, right?

Could you explain how you did include all the boxes in top?

Kind Regards,
Stefek

Oupsss , totaly forgot :( sorry

Ok here it is:

Ih index.php of the temlate add following code into head

Code: [Select]
<link href="<?php echo TEMPLATE_DIR?>/account-htt/css/slide.css" rel="stylesheet" type="text/css" media="screen" />

AND ALSO

<script src="<?php echo TEMPLATE_DIR?>/account-htt/js/slide.js" type="text/javascript"></script>




Now, just below <body> tag I added this code:

Code: [Select]

<!-- Panel -->
<div id="toppanel">
    <div id="panel">
        <div class="content clearfix">
       
        <?php
        
if(FRONTEND_LOGIN AND !$wb->is_authenticated()) {
        
?>

                <div class="left">
                <h1>Welcome to this Web-site</h1>
                <h2>This is great site..</h2>        
                <p class="grey">Next step is to drop text from from global block!</p>
                <h2>This is Header</h2>
                <p class="grey">this is raw design.. but its working :)</p>
            </div>
           
               <div class="left">
            <?php
                
include (WB_PATH . &#39;/account/login_form.php&#39;);
            
?>

            </div>

            <div class="left right">
             <?php
                
include (WB_PATH . &#39;/account/signup_form.php&#39;);
            
?>

               </div>
     
        <?php
        
} elseif (FRONTEND_LOGIN AND $wb->is_authenticated()) {
        
        include (
WB_PATH . &#39;/account/preferences_form.php&#39;);

        
?>


        <?php
        
}
        
?>



        </div>
    </div> <!-- /login -->    

    <!-- The tab on top -->    
    <div class="tab">
        <ul class="login">
            <li class="left">&nbsp;</li>
            <li>
                <?php
                
echo $TEXT[&#39;WELCOME_BACK&#39;].&#39;&nbsp;&#39;;
                
if($wb->is_authenticated()) {
                echo 
$wb->get_display_name().&#39; | <a href="&#39;.LOGOUT_URL.&#39;">&#39;.$MENU[&#39;LOGOUT&#39;].&#39;</a> &#39;;
                
} else{
                echo &
#39;Guest&#39;;
                
}
                
?>

           
            </li>
            <li class="sep">|</li>
            <li id="toggle">
                <?php
                
if($wb->is_authenticated()) {
                echo &
#39;<a id="open" class="open" href="#">&#39;.$MENU[&#39;PREFERENCES&#39;].&#39;</a>&#39;;
                
} else{
                echo &
#39;<a id="open" class="open" href="#">Log In | Register</a>&#39;;
                
}
                
?>

                <a id="close" style="display: none;" class="close" href="#">Close Panel</a>            
            </li>
            <li class="right">&nbsp;</li>
        </ul>
    </div> <!-- / top -->
   
</div> <!--panel -->

And add this account-htt (attached) into your template dir.


that should do the trick :)

cheers


[gelöscht durch Administrator]
no bb in signature

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: Skinable frontend account template - first try :)
« Reply #18 on: November 20, 2009, 03:51:37 AM »
Cool Ivan!

Thank you for sharing.

Works excelent.

Kind regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #19 on: November 20, 2009, 12:39:12 PM »
Im glad :) this panel could be used for anything.. example: news or events for registered users :) or something like that..

cheers
no bb in signature

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: Skinable frontend account template - first try :)
« Reply #20 on: November 20, 2009, 01:44:36 PM »
Hello Ivan,
yes thats right.
A kind of sitemap/page-hotlinks or a search input field is a good idea too ;-)

I was just interested how you did include the external files, and this way:
Quote from: Ivan
Code: [Select]
<?php
                
include (WB_PATH . &#39;/account/login_form.php&#39;);
            
?>

            </div>

            <div class="left right">
             <?php
                
include (WB_PATH . &#39;/account/signup_form.php&#39;);
            
?>

               </div>
... brings some new ways of usage of my patch into mind.

For example using a code section I can make a page, where the user has both: the opportunity to login or to register on one page.

 :-)

Kind regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #21 on: November 20, 2009, 02:44:05 PM »
Yea, you can use it for anything :) You just need a good idea :)
no bb in signature

Offline Argos

  • Posts: 2542
  • Gender: Male
    • Argos Media
Re: Skinable frontend account template - first try :)
« Reply #22 on: November 30, 2009, 12:48:31 PM »
I like the sliding thingy, but maybe you can use a jquery version to keep WB as much jquery-oriented as possible?

I tried to login in with test/demo123, but the only thing I see is a Website Under Construction page...
Jurgen Nijhuis
Argos Media
Heiloo, The Netherlands
----------------------------------------------------------------
Please don't request personal support, use the forums!

Offline crnogorac081

  • Posts: 1889
  • Gender: Male
Re: Skinable frontend account template - first try :)
« Reply #23 on: November 30, 2009, 03:49:32 PM »
Yep, I knew what was the issue the moment I read your post :)

If you go to backend: http://ivan.milicevic.me/admin , you will see that somebody changed prefered language from english to Poland (I just put it back to english so that demo can work again..)

The problem is that site goes under construction when user logs in , if he choose preferred language which is different than each page's language..

I wrote about that here: http://www.websitebaker2.org/forum/index.php/topic,15731.msg102177.html#msg102177

You can now try the demo, and also test this "bug" , and change language some other, and see that site goes under construction.. but then please go to backend and put language back to english so that other people can see the demo too :)

cheers
no bb in signature

Offline Stefek

  • Posts: 6177
  • Gender: Male
  • ("ړ)
Re: Skinable frontend account template - first try :)
« Reply #24 on: November 30, 2009, 04:06:03 PM »
Hello Ivan,
one of the positive features of the Customizable Frontend Account Template is the fact that you can remove input fields you don't want your logged in visitors to change.
For example you can remove or hide the "language" input field / select box and they wan't be able to change it.

;-)
Regards,
Stefek
"Gemeinsam schafft man mehr."

gemeinsam
1. mehreren Personen oder Dingen in gleicher Weise gehörend, eigen
2. in Gemeinschaft [unternommen, zu bewältigen]; zusammen, miteinander
#Duden

 

postern-length