#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Honolulu
    Posts
    34
    Rep Power
    12

    CSS for input text


    I want to create input text boxes like www.templatemonster.com . I have found a css but it doesn't work. I have search tutorials, but it just doesn't display right. Help!
  2. #2
  3. 11
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Jul 2001
    Location
    Lynn, MA
    Posts
    4,635
    Rep Power
    83
    Steal it from them. You've got the source sitting there right in front of you when you're viewing the page, what more do you need?
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Honolulu
    Posts
    34
    Rep Power
    12
    What code is the right one to copy? I have scanned it 12 times but can't see where it starts and ends.
  6. #4
  7. 11
    Devshed Demi-God (4500 - 4999 posts)

    Join Date
    Jul 2001
    Location
    Lynn, MA
    Posts
    4,635
    Rep Power
    83
    Sure!

    View source. Look for the form you like. If the style is in a class,(it probably will be, if they didn't just redefine the default for an input element in the CSS stuff), trace back the classes until you find either the style definitions in the head of the document OR an externally linked CSS file. Rip those off.

    If you're unable to figure this out or have no clue what I'm talking about, you should probably read through some CSS/HTML tutorials or wait for someone do tell you exactly what to do and where to put your code. We all learn through experimentation!

    And please keep replies in the threads they belong in. I think it's rude to PM to bring attention to threads OR to ask for replies off-forum. Part of being in a forum is building knowledge for everyone.

    recieved via PM
    hawaii5point0 wrote on September 26th, 2003 11:31 PM:
    I can't find the right code on www.templatemonster.com . Can you help?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Norwich, UK
    Posts
    53
    Rep Power
    12
    The CSS used in that page is:
    Code:
    .search {
    	font-family:Tahoma,Verdana,Arial;
    	font-size:11px;
    	color:686868;
    	border-left-style: solid;
    	border-left-width: 1px;
    	border-left-color: 8B9A9F;
    
    	border-bottom-style: solid;
    	border-bottom-width: 1px;
    	border-bottom-color: 8B9A9F;
    
    	border-top-style: solid;
    	border-top-width: 1px;
    	border-top-color: 8B9A9F;
    
    	border-right-style: solid;
    	border-right-width: 1px;
    	border-right-color: 8B9A9F;
    }
    With each input having the class 'search'. But much of that CSS is completely redundant, it could simply be written as:
    Code:
    .search {
    	font-family: Tahoma,Verdana,Arial;
    	font-size: 11px;
    	color: #686868;
    	border-style: solid;
    	border-width: 1px;
    	border-color: #8B9A9F;
    }
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2002
    Location
    Honolulu
    Posts
    34
    Rep Power
    12
    That is perfect. Thank you so much.

IMN logo majestic logo threadwatch logo seochat tools logo