WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

Go to page : 1, 2  Next

View previous topic View next topic Go down  Message [Page 1 of 2]

1 Log-In/Search Bar on Thu Jun 24, 2010 8:52 pm

latchy

avatar
Registered Member
Registered Member
OK so, I have designed a Log-In/Search bar and would like to place it on my homepage and forum. Is it possible, here it is Smile

http://www.graphiccentral.org/

2 Re: Log-In/Search Bar on Thu Jun 24, 2010 9:07 pm

Krazy


Registered Member
Registered Member
Rob, What is your link to your Gaming site?


@ Topic - You can I believe via template editing an then CSS.

3 Re: Log-In/Search Bar on Thu Jun 24, 2010 9:44 pm

Unknown Data

avatar
Registered Member
Registered Member
Where do you want it to be placed? Accurately.

http://woops.dk

4 Re: Log-In/Search Bar on Thu Jun 24, 2010 10:43 pm

ankillien

avatar
Administrator
Administrator
Hello!

You want it in your homepage? Means in HTML page? If so, you can place the code wherever you want it to display.

On forum, you can add the code in index_body template.

5 Re: Log-In/Search Bar on Thu Jun 24, 2010 11:03 pm

latchy

avatar
Registered Member
Registered Member
I don't know how to code it, lol.

That is what I am asking for Smile

http://www.graphiccentral.org/

6 Re: Log-In/Search Bar on Fri Jun 25, 2010 12:12 am

Guest


Guest
How could you design it without knowing the code ? Shocked

7 Re: Log-In/Search Bar on Fri Jun 25, 2010 12:22 am

latchy

avatar
Registered Member
Registered Member
Just becuase you can design something does not mean you have to code it. I don't mean to bring people into this but look at Fellon Smile

http://www.graphiccentral.org/

8 Re: Log-In/Search Bar on Fri Jun 25, 2010 3:20 am

Krazy


Registered Member
Registered Member
Krazy wrote:Rob, What is your link to your Gaming site?


Rob, so you designed it in one of your graphics programs? Or did you write the code?

9 Re: Log-In/Search Bar on Fri Jun 25, 2010 8:47 am

ankillien

avatar
Administrator
Administrator
Write the basic HTML first.

Use INPUT tag to create text and password fields.
<input type="text" /> and <input type="password" />

Use <input type="submit" value="log in" /> to create submit button.

The lost password and register links with this code...
<a href="LINK URL HERE">TETX HERE</a>

Once you are done with HTML, I'll tell you how to use CSS on it to decorate.

10 Re: Log-In/Search Bar on Fri Jun 25, 2010 4:24 pm

latchy

avatar
Registered Member
Registered Member
OK thats done Smile

http://www.graphiccentral.org/

11 Re: Log-In/Search Bar on Fri Jun 25, 2010 11:14 pm

ankillien

avatar
Administrator
Administrator
Now you need black background for input boxes.

Code:
input[type="text"] , input[type="password"] {
color : #CCC;
background : #000;
}

Red background for the submit button...

Code:
input[type="submit"] {
color : #FFF;
background : red;
}

12 Re: Log-In/Search Bar on Fri Jun 25, 2010 11:54 pm

latchy

avatar
Registered Member
Registered Member
OK, got this o far. I am doing this on a blank HTML page to test it out Smile

Click Here!

Whats next Razz

http://www.graphiccentral.org/

13 Re: Log-In/Search Bar on Fri Jun 25, 2010 11:58 pm

ankillien

avatar
Administrator
Administrator
hmm...

To remove the shaded border, you can add "border:none;" to the above code.
To apply a background color to whole line, you can wrap all the codes in a <div> tag and apply some class to it, for example "login-box".

Now you can add background to it by using this code...

Code:
.login-box {
background : #666;
}

The search bar can be made using the input tags as well.

14 Re: Log-In/Search Bar on Sat Jun 26, 2010 12:21 am

latchy

avatar
Registered Member
Registered Member
Is it possible to re-style the Button to the one like the design? Same goes for the background of the box Smile

Edit: Thats wired, the box color changes when I cange the border to non Shocked

Another Edit: There is a problem No The bottom of the box is been cut off. Check the link again :

http://www.graphiccentral.org/

15 Re: Log-In/Search Bar on Sat Jun 26, 2010 1:05 am

Nem

avatar
Registered Member
Registered Member
\There is a problem No The bottom of the box is been cut off. Check the link again
Add
Code:
height: 32
to the ".Loginbox"

http://www.graphics-post.com/forum

16 Re: Log-In/Search Bar on Sat Jun 26, 2010 2:24 am

latchy

avatar
Registered Member
Registered Member
I done that, now I just need the button rounding and the same button to activate the search as what is in my design in the first post. It would be helpful as the I can use the same code to change the Log In button Very Happy

Thanks,
Rob

http://www.graphiccentral.org/

17 Re: Log-In/Search Bar on Sat Jun 26, 2010 2:24 pm

ankillien

avatar
Administrator
Administrator
To make the button rounded, use this code...

Code:
input[type="submit"] {
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}

To put an image as button, use this code...

Code:
<input type="image" src="IMAGE URL HERE">

18 Re: Log-In/Search Bar on Sat Jun 26, 2010 8:04 pm

latchy

avatar
Registered Member
Registered Member
OK Thanks Smile

I need to put the search bar to the left, I have tried placing a div inside of the div and it won't work. It is making all of the other elements go all over the place Sad

Here is the code I'm using
Code:
<style>
input[type="text"] , input[type="password"] {
color : #CCC;
background : #4a4a4a;
border:none;
}

input[type="submit"] {
color : #fff;
background : #f55100
}

.Loginbox {
background-image: url('http://i69.servimg.com/u/f69/14/29/05/13/header10.gif');
background-repeat: no-repeat;
height: 32;
width: 923
}

.Login { 
padding-top: 5px; 
padding-right: 0px; 
padding-bottom: 0.25in; 
padding-left: 23em; 


input[type="submit"] {
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}

a
{text-decoration:none
}

</style>
<font face="arial"><font size="2">
<div class="Loginbox">
<div class="Login"><input type="text" /> <input type="password" /> <input type="submit" value="Log In" /> <a href="LINK URL HERE"><font color="white">Lost Password?</font></a> <font color="#808080">No account yet?</font><a href="LINK URL HERE"> <strong><font color="#f55100">Register</font></strong></a>
    </div>
      </div></font> </font>

http://www.graphiccentral.org/

19 Re: Log-In/Search Bar on Sat Jun 26, 2010 9:38 pm

ankillien

avatar
Administrator
Administrator
This will be your code..

Code:
<style>
input[type="text"] , input[type="password"] {
color : #CCC;
background : #4a4a4a;
border:none;
}

input[type="submit"] {
color : #fff;
background : #f55100
}

.Loginbox {
background-image: url('http://i69.servimg.com/u/f69/14/29/05/13/header10.gif');
background-repeat: no-repeat;
height: 32;
width: 923
overflow:hidden;
}
.searchbox {float:left; padding:5px;}
.Login
 { 
padding-top: 5px; 
padding-right: 0px; 
padding-bottom: 0.25in; 
padding-left: 23em; 


input[type="submit"] {
-moz-border-radius : 5px;
-webkit-border-radius : 5px;
border-radius : 5px;
}

a
{text-decoration:none
}
</style>
<font face="arial"><font size="2">
<div class="Loginbox">
<div class="searchbox">
<input type="text">
<input src="BUTTON IMAGE URL HERE" type="image">
</div>
<div class="Login"><input type="text"> <input type="password"> <input value="Log In" type="submit"> <a href="LINK%20URL%20HERE"><font color="white">Lost Password?</font></a> <font color="#808080">No account yet?</font><a href="LINK%20URL%20HERE"> <strong><font color="#f55100">Register</font></strong></a>
    </div>
      </div></font> </font>

20 Re: Log-In/Search Bar on Sat Jun 26, 2010 9:50 pm

latchy

avatar
Registered Member
Registered Member
The search field is not aligned with the others

http://www.graphiccentral.org/

21 Re: Log-In/Search Bar on Sun Jun 27, 2010 10:10 am

ankillien

avatar
Administrator
Administrator
set padding-top to 8px for the .searchbox selector.

22 Re: Log-In/Search Bar on Sun Jun 27, 2010 5:00 pm

latchy

avatar
Registered Member
Registered Member
I have it is not working

http://www.graphiccentral.org/

23 Re: Log-In/Search Bar on Sun Jun 27, 2010 7:50 pm

ankillien

avatar
Administrator
Administrator
I must work.
I've tested your code with this changes and it works fine. May be you have done something wrong!

Check if you have forgot to put any semicolons or braces?

24 Re: Log-In/Search Bar on Sun Jun 27, 2010 11:19 pm

latchy

avatar
Registered Member
Registered Member
I forgot to close the style Shocked.

Razz

http://www.graphiccentral.org/

25 Re: Log-In/Search Bar on Mon Jun 28, 2010 8:52 am

ankillien

avatar
Administrator
Administrator
So, is it working fine now?

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 2]

Go to page : 1, 2  Next

Permissions in this forum:
You cannot reply to topics in this forum