1
demian
Help with WOX theme Login Bar
  • 2010/1/23 18:09

  • demian

  • Quite a regular

  • Posts: 225

  • Since: 2008/4/29


Ok i would like to integrate the login bar from wox theme...as can be seen here in xoops.org to my theme.....

here's what i did

1. downloaded the wox theme from svn
http://xoops.svn.sourceforge.net/viewvc/xoops/XoopsThemes/wox.tar.gz?view=tar


2. copy this code from wox\tpls\content.html to my current theme.html

<div id="top-links-container">
    <
div class="login_links" id="wox-login-all">
        <
div class="wox_search">
            <
img src="<{$xoops_imageurl}>images/srh.png" alt="" />
            <
input type="text" name="keyword" value="Search here..." id="wox-searchi" />
        </
div>
        <
div class="the_links">
        <{if 
$xoops_isuser}>
            <
span class="icons">
                <
a href="<{$xoops_url}>/viewpmsg.php" title="Private Messages"><img src="<{$xoops_imageurl}>images/email.png" alt="Messages" /></a>
                <
a href="<{$xoops_url}>/notifications.php" title="Notifications"><img src="<{$xoops_imageurl}>images/alerts.png" alt="Notifications" /></a>
            </
span>
            <
a href="<{$xoops_url}>/user.php?op=logout">Logout</a> |
            
Welcome back <strong><a href="<{$xoops_url}>/user.php"><{$xoops_uname}></a></strong> |
        <{else}>
            <
a href="<{$xoops_url}>/modules/profile/register.php">Register</a> &nbsp;|&nbsp; <a href="javascript:;" id="wox-login-link">Login</a>
        <{/if}>
        </
div>
    </
div>
<{if !
$xoops_isuser}>
    <
div class="login_links" id="wox-login-login" style="display: none;">
    <
form action="<{$xoops_url}>/user.php" method="post" id="wox-login-form">
        <
label for="uname">User:</label>
        <
input type="text" name="uname" id="uname" />
        <
label for="pass">Password:</label>
        <
input type="password" name="pass" id="pass" />
        <
input name="op" value="login" type="hidden">
        <
input type="hidden" name="xoops_redirect" value="<{$xoops_requesturi}>" />
        <
input type="hidden" name="xoops_login" value="1" />
        <
a href="javascript:;" onclick="$('#wox-login-form').submit();">Login</a>
        <
a href="javascript:;" id="wox-cancel-login">Cancel</a>
    </
form>
    </
div>
<{/if}>
</
div>


3. copy the css class from wox\css\general.css to my theme css stylesheet

/* Login Links */
div#top-links-container{
    
overflowhidden;
    
width950px;
    
margin0 auto;
    
height32px;
}
div#top-links-container div.login_links{
    
floatright;
    
background#D6DEE4;
    
height22px;
    
text-aligncenter;
    
font-size0.9em;
    
padding4px 15px 6px 5px;
    
color#213A4E;
    
-moz-border-radius0 0 8px 8px;
    -
khtml-border-radius-bottomleft8px;
    -
khtml-border-radius-bottomright8px;
    -
webkit-border-bottom-left-radius8px;
    -
webkit-border-bottom-right-radius8px;
    
border-radius0 0 8px 8px;
    
overflowhidden;
    *
width420px;
}
div.login_links div.wox_search{
    
floatleft;
    
border1px solid #CCC;
    
overflowhidden;
    
background#FFF;
    
-moz-border-radius8px;
    -
khtml-border-radius8px;
    -
webkit-border-radius8px;
    
border-radius8px;
    
padding-right5px;
    *
width160px;
}
div.login_links input[type='text'],
div.login_links input[type='password']{
    
border0;
    
background#FFF;
    
width130px;
    
padding3px;
    -
moz-border-radius8px;
    -
khtml-border-radius8px;
    -
webkit-border-radius8px;
    
border-radius8px;
    
color#666;
}
div.login_links input[type='submit']{
    
displayblock;
    
floatright;
    
border0;
    
background#D6DEE4;
    
text-decorationunderline;
    
color#213A4E;
    
cursorpointer;
}
div.login_links div.wox_search img{
    
cursorpointer;
    
floatright;
    
padding-top4px;
}
div.login_links div.the_links{
    
floatright;
    
padding4px 0 0 10px;
}
div#top-links-container a{
    
color#213A4E;
    
text-decorationnone;
}
div#top-links-container a:hover{
    
text-decorationunderline;
}
div#top-links-container span.icons{
    
displayblock;
    
floatright;
    
margin-left5px;
    
margin-top: -1px;
}



4. copy wox theme jquery definition in wox\theme.html to my current theme.html

<script type="text/javascript" src="<{xoImgUrl js/jquery-1.3.2.min.js}>"></script>
<
script type="text/javascript" src="<{xoImgUrl js/jquery-ui-1.7.2.custom.min.js}>"></script>
<
script type="text/javascript" src="<{xoImgUrl js/effects.js?ver=1.01}>"></script>
<
script type="text/javascript" src="<{xoImgUrl js/jquery.cookie.js}>"></script>




the login bar appear in my theme but when i click login..nothing happens...

what am i missing ?


btw does anyone know if there is any other cool login bar for XOOPS from other themes ? please let me know..

TQ

2
ghia
Re: Help with WOX theme Login Bar
  • 2010/1/23 19:29

  • ghia

  • Community Support Member

  • Posts: 4953

  • Since: 2008/7/3 1


Try with a real button
<input class="formbutton" value="Login" type="submit">


3
demian
Re: Help with WOX theme Login Bar
  • 2010/1/24 0:15

  • demian

  • Quite a regular

  • Posts: 225

  • Since: 2008/4/29


not the login to submit...but the login to show the form....


i like to rephrase my problem
right now i see this in my theme

Resized Image


but when i click login..the login form does not appear..nothing happens



4
demian
Re: Help with WOX theme Login Bar
  • 2010/1/24 0:24

  • demian

  • Quite a regular

  • Posts: 225

  • Since: 2008/4/29


i just tried using the wox theme as my theme...same problem

when i click login..the login form does not appear..nothing happens

5
ghia
Re: Help with WOX theme Login Bar
  • 2010/1/24 1:36

  • ghia

  • Community Support Member

  • Posts: 4953

  • Since: 2008/7/3 1


OK.
Here,
<a href="javascript:;" id="wox-login-link">Login</a>
a function is missing to change the display attribute of wox-login-login
<div class="login_links" id="wox-login-login" style="display: none;">

6
demian
Re: Help with WOX theme Login Bar
  • 2010/1/24 2:16

  • demian

  • Quite a regular

  • Posts: 225

  • Since: 2008/4/29


where i can find the function ?

and where should i put it ?

7
ghia
Re: Help with WOX theme Login Bar
  • 2010/1/24 2:37

  • ghia

  • Community Support Member

  • Posts: 4953

  • Since: 2008/7/3 1


Probably you need the jquery and effect scripts.

8
demian
Re: Help with WOX theme Login Bar
  • 2010/1/24 2:50

  • demian

  • Quite a regular

  • Posts: 225

  • Since: 2008/4/29


ok i see this in js\effect.js

$("#wox-cancel-login").click(function(){
        $(
"#wox-login-login").slideUp("slow", function(){
            $(
"#wox-login-all").slideDown("slow");
        });
    });



i have put this is in my theme, and copy the wox's js folder to my theme folder
<script type="text/javascript" src="<{xoImgUrl js/jquery-1.3.2.min.js}>"></script>
<
script type="text/javascript" src="<{xoImgUrl js/jquery-ui-1.7.2.custom.min.js}>"></script>
<
script type="text/javascript" src="<{xoImgUrl js/effects.js?ver=1.01}>"></script>
<
script type="text/javascript" src="<{xoImgUrl js/jquery.cookie.js}>"></script>


9
demian
Re: Help with WOX theme Login Bar
  • 2010/1/24 2:52

  • demian

  • Quite a regular

  • Posts: 225

  • Since: 2008/4/29


ok i change this from
<script type="text/javascript" src="<{xoImgUrl js/effects.js?ver=1.01}>">

to

<script type="text/javascript" src="<{xoImgUrl js/effects.js}>">




and now its working

10
demian
Re: Help with WOX theme Login Bar
  • 2010/1/24 15:44

  • demian

  • Quite a regular

  • Posts: 225

  • Since: 2008/4/29


although its working (perfectly with firefox browser) with my theme

i decided not to use due to incompatibility with some browser

example IE 7: xoops.org

http://img230.imageshack.us/img230/4808/xoops.jpg


this sucks man

can this be fix ?

Login

Who's Online

178 user(s) are online (116 user(s) are browsing Support Forums)


Members: 0


Guests: 178


more...

Donat-O-Meter

Stats
Goal: $100.00
Due Date: Apr 30
Gross Amount: $0.00
Net Balance: $0.00
Left to go: $100.00
Make donations with PayPal!

Latest GitHub Commits