Skinable frontend account template - first try :)

[crnogorac081]

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...

[mr-fan]

wow - nice backed

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

i've send you a PM on your site

regards martin

[crnogorac081]

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

[mr-fan]

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...

regards martin

[crnogorac081]

Do you mean about this panel in frontend ?

[mr-fan]

yes....it's very nice use of the patch....

[maverik]

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

[Stefek]

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

[crnogorac081]

Guys,

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

cheers

[LordDarkman]

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!!!

[crnogorac081]

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

[crnogorac081]

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

[LordDarkman]

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

[crnogorac081]

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.

[crnogorac081]

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

[crnogorac081]

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

[Stefek]

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

[crnogorac081]

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:

<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:

<!-- 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 . '/account/login_form.php');
            ?>
            </div>

            <div class="left right">
             <?php
                include (WB_PATH . '/account/signup_form.php');
            ?>
               </div>
     
        <?php
        } elseif (FRONTEND_LOGIN AND $wb->is_authenticated()) {
        
        include (WB_PATH . '/account/preferences_form.php');

        ?>

        <?php
        }
        ?>


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

    <!-- The tab on top -->    
    <div class="tab">
        <ul class="login">
            <li class="left">&nbsp;</li>
            <li>
                <?php
                echo $TEXT['WELCOME_BACK'].'&nbsp;';
                if($wb->is_authenticated()) {
                echo $wb->get_display_name().' | <a href="'.LOGOUT_URL.'">'.$MENU['LOGOUT'].'</a> ';
                } else{
                echo 'Guest';
                }
                ?>
           
            </li>
            <li class="sep">|</li>
            <li id="toggle">
                <?php
                if($wb->is_authenticated()) {
                echo '<a id="open" class="open" href="#">'.$MENU['PREFERENCES'].'</a>';
                } else{
                echo '<a id="open" class="open" href="#">Log In | Register</a>';
                }
                ?>
                <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

[Stefek]

Cool Ivan!

Thank you for sharing.

Works excelent.

Kind regards,
Stefek

[crnogorac081]

Im glad this panel could be used for anything.. example: news or events for registered users or something like that..

cheers

[Stefek]

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:

Code:

<?php
                include (WB_PATH . '/account/login_form.php');
            ?>
            </div>

            <div class="left right">
             <?php
                include (WB_PATH . '/account/signup_form.php');
            ?>
               </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

[crnogorac081]

Yea, you can use it for anything You just need a good idea

[Argos]

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...

[crnogorac081]

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

[Stefek]

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