Please login or register.

Login with username, password and session length
Advanced search  
Pages: [1] 2

Author Topic: Image instead of "user"-text (login screen)  (Read 10333 times)

eriknorum

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 78
Image instead of "user"-text (login screen)
« on: February 28, 2008, 10:21:50 PM »

Good evening fellow snusers, beginners question:
How do I replace the text "user" and "password" at the login screen? Ive looked around snews.php and tried a few things, but .phps not my cup of tea I guess.

http://nyurl.se/snuser
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Image instead of "user"-text (login screen)
« Reply #1 on: February 28, 2008, 10:56:59 PM »

Using the default login function in snews.php (current version, 1.6) as our reference...

Code: [Select]
<?php

// LOGIN
function login() {
if ($_SESSION[db('website').'Logged_In'] != token()) {
echo '<h2>'.l('login').'</h2>';
echo html_input('form''''post''''''''''''''''''''post'db('website').'administration/''');
echo '<p>'.l('login_limit').'</p>';
echo html_input('text''uname''uname'''l('username'), 'text'''''''''''''''''''); // contains language variable for username
echo html_input('password''pass''pass'''l('password'), 'text'''''''''''''''''''); // contains language variable for password
echo mathCaptcha();
echo '<p>';
echo html_input('hidden''Loginform''Loginform''True''''''''''''''''''''''');
echo html_input('submit''submit''submit'l('login'), '''button''''''''''''''''''');
echo '</p></form>';
}
else {echo '<h2>'.l('logged_in').'</h2><p><a href="'.db('website').'logout/" title="'.l('logout').'">'.l('logout').'</a></p>';}
}

?>


... you'll notice that the 6th and 7th strings in the function contail the language variables for:
- l('username') for username
- l('password') for password.

So, you could then search for 'username' and 'password'  in the news.php file... within the language variable array... to locate these variables and their values... the complete strings for these are:
   $l['username'] = 'Username';
   $l['password'] = 'Password';

If you want to add icon images beside the text... or to replace the text... then you would add the image file-path into the value side of these strings so the image will display as the value for the variable wherever it exists. However, it is not that simple since these variables are used in other function locations where we probably don't want them to display. So we create NEW language variable/value strings in the language array... and alter those variable-names to the new ones within the function strings.

As an example... if you had icon images in your root images folder called username.gif and password.gif... you could add these variable strings into the language variable array:
   $l['login_username'] = '<img src="folder-name/username.gif" alt="Username" />&nbsp;Username';
   $l['login_password'] = '<img src="folder-name/password.gif" alt="Password" />&nbsp;Password';

Then... in function login... you would add login_ into the variable-names in their respective locations... and the images will display just to the left of the text. If you don't want the text... then just remove it from the language variable strings.

Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

eriknorum

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 78
Re: Image instead of "user"-text (login screen)
« Reply #2 on: February 29, 2008, 08:32:57 AM »

Wow Keyrocks, Ill try it out right away, I suppose the same procedure can be used to exchange other texts with images? Thank you very much for your clear answer  :)
Logged

eriknorum

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 78
Re: Image instead of "user"-text (login screen)
« Reply #3 on: February 29, 2008, 09:20:14 AM »

Ok, Im on the right track i think...but, of course I cant quite understand what Im doing  ??? So far, i managed to (changes are marked in red)
Quote
#settings
   $l['settings'] = 'Settings';
   $l['site_settings'] = 'Site';
   #login
   $l['login_status'] = 'Login status';
   $l['login'] = 'Login';
   $l['username'] =  'User';
   $l['login_username'] = '<img src="gfx/icons/PNG-32/Profile.png" alt="Username" />';
   $l['password'] = 'Password';
   $l['login_limit'] = 'User/pass limitations: 4-8 alphanumeric characters only';
   $l['logged_in'] = 'You are Logged In';
   $l['log_out'] = 'Logging out';
   $l['logout'] = 'Logout';

Quote
// LOGIN
# 1.6.0 - "echo" added to all html_input strings,
function login() {
   if ($_SESSION[db('website').'Logged_In'] != token()) {
      echo '<h2>'.l('login').'</h2>';
   # 1.6.0 - "administration" added to next string.
      echo html_input('form', '', 'post', '', '', '', '', '', '', '', '', '', 'post', db('website').'administration/', '');
      echo '<p>'.l('login_limit').'</p>';
      echo html_input('text', 'uname', 'uname', '', l('login_username'), 'text', '', '', '', '', '', '', '', '', '');
      echo html_input('password', 'pass', 'pass', '', l('password'), 'text', '', '', '', '', '', '', '', '', '');
      echo mathCaptcha();
      echo '<p>';
      echo html_input('hidden', 'Loginform', 'Loginform', 'True', '', '', '', '', '', '', '', '', '', '', '');
      echo html_input('submit', 'submit', 'submit', l('login'), '', 'button', '', '', '', '', '', '', '', '', '');
      echo '</p></form>';
   }

This gives me: http://static.pici.se/pictures/EBfVyRRuV.png   -  which is pretty close to what I want, but, I cant find the place to get rid of that comma after the image, also Im thinking of how to get the image side by side with the textfield in stead of above it  :)


BBcode doesn't operate between 'code' tags - philmoz
« Last Edit: February 29, 2008, 10:34:09 AM by philmoz »
Logged

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Image instead of "user"-text (login screen)
« Reply #4 on: February 29, 2008, 10:40:01 AM »

find
// FORM GENERATOR
function html_input

locate
Code: [Select]
case 'password': $output = '<p>'.$lbl.':<br />'.$input.$val.' /></p>'; break;you will find that colon just before the <br /> tag.
Logged
Of all the things I have lost, it is my mind that I miss the most.

eriknorum

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 78
Re: Image instead of "user"-text (login screen)
« Reply #5 on: February 29, 2008, 10:55:52 AM »

Thanks, that did the trick (thanks for editing my post too ;) )
Now I only got about 25 questions left before I can finish my site...Ill keep posting this thread though, if needed mod kan move it.
    <ul class="comments_menu">
      <?php new_comments(5, 100); ?>
    </ul>

As of now I have a few styles applied to this:
.comments_menu li{
list-style-type:none;
background-color:#182124;
padding-left:5px;
margin-bottom:3px;
border:1px solid #3d545e;
font-size:.78em;
}
.comments_menu li:hover{background-color:#182124;}

What I would like to do is to wrap the <li> in a <div> or <span> to add some extra stuff to it, I tried to do it here, but i have no success, so its obviously in the wrong place.

Quote
// NEW COMMENTS
# 1.6.0 - 1 change in $art_query string, comment noted below.
function new_comments($number, $stringlen) {
   $query = "SELECT * FROM ".db('prefix')."comments WHERE approved = 'True' ORDER BY id DESC LIMIT $number";
   $result = mysql_query($query);
   if (!$result || !mysql_num_rows($result)) {echo '<li>'.l('no_comments').'</li>';}
   else {
   $comment_limit = s('comment_limit') < 1 ? 1 : s('comment_limit');
   $comments_order = s('comments_order');
   while ($r = mysql_fetch_array($result)) {
   # 1.6.0 - select "id" and "AND approved = 'True'" added to next string.
      $art_query = "SELECT id FROM ".db('prefix')."comments WHERE articleid = '$r[articleid]' AND approved = 'True' ORDER BY id $comments_order";
      $art_result = mysql_query($art_query);
      $num = 1;
      while ($r_art = mysql_fetch_array($art_result)) {
         if ($r_art['id'] == $r['id']) {$ordinal = $num;}
         $num++;
      }
      $name = $r['name'];
      $comment = strip_tags($r['comment']);
      $page = ceil($ordinal / $comment_limit);
      $ncom = $name.' ('.$comment;
      $ncom = strlen($ncom) > $stringlen ? substr($ncom, 0, $stringlen - 3).'...' : $ncom;
      $ncom.= strlen($name) < $stringlen ? ')' : '';
      $ncom = str_replace(' ...', '...', $ncom);
      $articleSEF = retrieve('seftitle', 'articles', 'id', $r['articleid']);
      $articleCat = retrieve('category', 'articles', 'seftitle', $articleSEF);
      $categorySEF = find_cat_sef($articleCat);
      if (!empty($articleSEF)) {
         $paging = $page > 1 ? '/'.$page : '';
         echo '<li><a href="'.db('website').$categorySEF.'/'.$articleSEF.$paging.'/#'.l('comment').$ordinal.'" title="'.l('comment_info').' '.retrieve('title', 'articles', 'id', $r['articleid']).'">'.$ncom.'</a></li>';
}}}}

I honestly got a big problem understanding the stuff in snews.php, guess its a small-brain-issue...   :'(
Logged

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Image instead of "user"-text (login screen)
« Reply #6 on: February 29, 2008, 11:08:44 AM »

it is most likely the right place, just not done effectively (no offense meant)
Bottom echo statement is the output of the <li>. Don't use <div>, as that will break validation.
span shoud be ok...
You could insert class/es into the start tag.
Logged
Of all the things I have lost, it is my mind that I miss the most.

philmoz

  • High flyer
  • ULTIMATE member
  • ******
  • Karma: 161
  • Posts: 1988
    • fiddle 'n fly
Re: Image instead of "user"-text (login screen)
« Reply #7 on: February 29, 2008, 11:17:11 AM »

for eg
Code: [Select]
  echo '<span><li><a href="'.db('website').$categorySEF.'/'.$articleSEF.$paging.'/#'.l('comment').$ordinal.'" title="'.l('comment_info').' '.retrieve('title', 'articles', 'id', $r['articleid']).'">'.$ncom.'</a></li></span>';
.comments_menu span {border:solid 1px #182124;}

I think that sort of thing would work...
Logged
Of all the things I have lost, it is my mind that I miss the most.

eriknorum

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 78
Re: Image instead of "user"-text (login screen)
« Reply #8 on: February 29, 2008, 12:04:03 PM »

Actually no, wrapping the bottom <li> in a <span>
Quote
echo '<span><li><a href="'.db('website').$categorySEF.'/'.$articleSEF.$paging.'/#'.l('comment').$ordinal.'" title="'.l('comment_info').' '.retrieve('title', 'articles', 'id', $r['articleid']).'">'.$ncom.'</a></li></span>';
and adding .comments_menu span{border:solid 1px #fff;paddin:3px;background-color:#FF9900;}
to my css gave me the result shown on the picture below.
http://static.pici.se/pictures/XixbEjPKT.png
It works fine wrapping it in a div...the thing is, i want to wrap it in multiple div or spans to do some rounded corners for the browsers not supporting border-radius :)

edit:
I want to do this with the <li> output:
Code: [Select]
<div class="roundedcornr_box_495569">
   <div class="roundedcornr_top_495569"><div></div></div>
      <div class="roundedcornr_content_495569">
  <li><a href="'.db('website').$categorySEF.'/'.$articleSEF.$paging.'/#'.l('comment').$ordinal.'" title="'.l('comment_info').' '.retrieve('title', 'articles', 'id', $r['articleid']).'">'.$ncom.'</a></li>
      </div>
   <div class="roundedcornr_bottom_495569"><div></div></div>
</div>

It works...but how to get the same effect without breaking validation  ???
« Last Edit: February 29, 2008, 02:18:57 PM by eriknorum »
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Image instead of "user"-text (login screen)
« Reply #9 on: February 29, 2008, 02:57:48 PM »

@ Erik... this is more of a CSS styling issue than an sNews 1.6 problem... perhaps it should be explored under the CSS forum... but taking a look at the script you've posted above... I am seeing that it contains several extra division tags that should not be there.

If you are creating a round-cornered container with a few elements in it... it is better to construct the container from scratch and use sone static content in it for testing purposes. Then, once you have the container working and validating as a separate entity... then go about integrating it in a fresh function by a new name... and use that function-name to replace the default one while you are testing this out.

Question... do you have the CSS and HTML for this container in a working form all by itself? If so, could you post it here so one of us could copy, test and work with it on our own machine?
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

eriknorum

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 78
Re: Image instead of "user"-text (login screen)
« Reply #10 on: February 29, 2008, 05:34:10 PM »

@ Erik... this is more of a CSS styling issue than an sNews 1.6 problem... perhaps it should be explored under the CSS forum... but taking a look at the script you've posted above... I am seeing that it contains several extra division tags that should not be there.

If you are creating a round-cornered container with a few elements in it... it is better to construct the container from scratch and use sone static content in it for testing purposes. Then, once you have the container working and validating as a separate entity... then go about integrating it in a fresh function by a new name... and use that function-name to replace the default one while you are testing this out.

Question... do you have the CSS and HTML for this container in a working form all by itself? If so, could you post it here so one of us could copy, test and work with it on our own machine?
The code was created in some online generator so its kind of sloppy :) (i usually have a slightly different method of creating rounded corners) I think it validates though. I appreciate the help since the php is kind of a jungle to me, I have no problem with the html/css. I uploaded a working example here http://eriknorum.se/dev/test.html

Edit:Source files: http://eriknorum.se/dev/test.zip
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Image instead of "user"-text (login screen)
« Reply #11 on: February 29, 2008, 06:46:51 PM »

@ Eric...

I would suggest that you do not make the styling changes within the function // NEW COMMENTS itself. Instead, do it within the index.php file wherever you have <ul> <?php new_comments(5, 30); ?> </ul> currently placed. I suggest this because the whole idea behind the default sNews file structure is to keep the Styling and Functionality separated for easier templating. So, with that in mind, here is what I have working fine for my in one of my projects... using your downloaded ZIP:

In index.php, wrap the comments function-name as follows:

Code: [Select]

<div class="roundedcornr_box">
   <div class="roundedcornr_top"><div></div></div>
<div class="roundedcornr_content">
<ul> <?php new_comments(530); ?> </ul>
</div>
  <div class="roundedcornr_bottom"><div></div></div>
</div>


And... I put the images in an images folder... and changed the CSS as follows - white text so I could see it better on the dark background... and removed the numbers from the style declarations... they have no purpose. You can rename stuff to make it even shorter as long as it's the same in both files:

Code: [Select]
<?php
/* Modified css for rounded corner box - requires images to be located in an images folder */
.roundedcornr_box {
   
background#182124; color: #fff;
   
margin-bottom:3px;
}
.
roundedcornr_top div {
   
backgroundurl(../images/roundedcornr_495569_tl.pngno-repeat top left;
}
.
roundedcornr_top {
   
backgroundurl(../images/roundedcornr_495569_tr.pngno-repeat top right;
}
.
roundedcornr_bottom div {
   
backgroundurl(../images/roundedcornr_495569_bl.pngno-repeat bottom left;
}
.
roundedcornr_bottom {
   
backgroundurl(../images/roundedcornr_495569_br.pngno-repeat bottom right;
}

.
roundedcornr_top div, .roundedcornr_top,
.
roundedcornr_bottom div, .roundedcornr_bottom {
   
width100%;
   
height10px;
   
font-size1px;
}
.
roundedcornr_content margin0 10px; }

?>

« Last Edit: February 29, 2008, 06:48:35 PM by Keyrocks »
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

eriknorum

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 78
Re: Image instead of "user"-text (login screen)
« Reply #12 on: February 29, 2008, 07:44:30 PM »

@ Eric...

I would suggest that you do not make the styling changes within the function // NEW COMMENTS itself. Instead, do it within the index.php file wherever you have <ul> <?php new_comments(5, 30); ?> </ul> currently placed. I suggest this because the whole idea behind the default sNews file structure is to keep the Styling and Functionality separated for easier templating. So, with that in mind, here is what I have working fine for my in one of my projects... using your downloaded ZIP:

In index.php, wrap the comments function-name as follows:

Code: [Select]

<div class="roundedcornr_box">
   <div class="roundedcornr_top"><div></div></div>
<div class="roundedcornr_content">
<ul> <?php new_comments(530); ?> </ul>
</div>
  <div class="roundedcornr_bottom"><div></div></div>
</div>


And... I put the images in an images folder... and changed the CSS as follows - white text so I could see it better on the dark background... and removed the numbers from the style declarations... they have no purpose. You can rename stuff to make it even shorter as long as it's the same in both files:

Code: [Select]
<?php
/* Modified css for rounded corner box - requires images to be located in an images folder */
.roundedcornr_box {
   
background#182124; color: #fff;
   
margin-bottom:3px;
}
.
roundedcornr_top div {
   
backgroundurl(../images/roundedcornr_495569_tl.pngno-repeat top left;
}
.
roundedcornr_top {
   
backgroundurl(../images/roundedcornr_495569_tr.pngno-repeat top right;
}
.
roundedcornr_bottom div {
   
backgroundurl(../images/roundedcornr_495569_bl.pngno-repeat bottom left;
}
.
roundedcornr_bottom {
   
backgroundurl(../images/roundedcornr_495569_br.pngno-repeat bottom right;
}

.
roundedcornr_top div, .roundedcornr_top,
.
roundedcornr_bottom div, .roundedcornr_bottom {
   
width100%;
   
height10px;
   
font-size1px;
}
.
roundedcornr_content margin0 10px; }

?>


I dont know if Im misunderstanding something, but your suggestion would add the round corners to the <ul>, not the <li> right? That would give me all the <li> items in a rounded box, instead of one rounded box for every single <li> item, no?
Logged

Keyrocks

  • Doug
  • ULTIMATE member
  • ******
  • Karma: 449
  • Posts: 6019
  • Semantically Challenged
    • snews.ca
Re: Image instead of "user"-text (login screen)
« Reply #13 on: February 29, 2008, 07:55:18 PM »

Q-1 - I dont know if Im misunderstanding something, but your suggestion would add the round corners to the <ul>, not the <li> right?

Q-2 - That would give me all the <li> items in a rounded box, instead of one rounded box for every single <li> item, no?

A-1 - Yes... both the <ul> ... and all <li> strings generated by the function itself are wrapped within the container.

A-2 - No... because the function generates a separate <li> string in the generated source for each entry that it displays. If it displays 5 entries... then the function generates 5 separate entry strings each with their own opening and closing tags. All of the <li> strings are contained within one set of <ul> tags.

Keep in mind that the divisions themselves are just creating one container... and the function's contents are within the container's content division only... which is nothing more than a box wrapped with the corners.
Logged
Do it now... later may not come.
-------------------------------------------------------------------------------------------------
sNews 1.6 MESU | sNews 1.6 MEMU

eriknorum

  • Jr. Member
  • **
  • Karma: 2
  • Posts: 78
Re: Image instead of "user"-text (login screen)
« Reply #14 on: February 29, 2008, 08:08:54 PM »

Q-1 - I dont know if Im misunderstanding something, but your suggestion would add the round corners to the <ul>, not the <li> right?

Q-2 - That would give me all the <li> items in a rounded box, instead of one rounded box for every single <li> item, no?

A-1 - Yes... both the <ul> ... and all <li> strings generated by the function itself are wrapped within the container.

A-2 - No... because the function generates a separate <li> string in the generated source for each entry that it displays. If it displays 5 entries... then the function generates 5 separate entry strings each with their own opening and closing tags. All of the <li> strings are contained within one set of <ul> tags.

Keep in mind that the divisions themselves are just creating one container... and the function's contents are within the container's content division only... which is nothing more than a box wrapped with the corners.
After testing, I beg to differ ;), using the boxes in index.php like you suggested gives this result http://www.eriknorum.se/dev/ul.png  and doing it in snews.php looks like this http://www.eriknorum.se/dev/li.png  which is what I want, but the last one also gives a bunch of validation errors like philmoz warned me about.
Logged
Pages: [1] 2