HTML/CSS Search Cutomization help.

Discussion in 'Web Design and Development' started by iMasterWeb, Aug 10, 2009.

  1. iMasterWeb macrumors regular

    Joined:
    Mar 15, 2009
    #1
    Hi! I am currently in the process of setting up a Tumblr Blog that I'm customizing. The problem I'm encountering now is this: I'd like to change the button on the search to a custom image. Here is the current code:
    Code:
    <form action="/search" method="get">
        <input type="text" name="q" value="{SearchQuery}"/>
        <input type="submit" value="Search"/>
    </form>
    And I'm trying to edit the button that says "Search" I have the desired replacement image uploaded here: http://tumblr.imasterweb.net/searchbtn.jpg

    Any help is appreciated!

    -iMaster
     
  2. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #2

    Where you have
    Code:
    <input type="submit" value="Search"/>
    
    replace with:


    Code:
    <input type="image" src="/path/to/image.jpg"  />
    
     
  3. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #3
    Odd Results

    That didn't seem to work; it results in the following: [​IMG] The code I used is
    Code:
    <form action="/search" method="get">
        <input type="text" name="q" value="{SearchQuery}"/>
       <input type="image" src="http://tumblr.imasterweb.net/searchbtn.jpg"  />
    </form>
    Thanks for any help!
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    Are you sure you uploaded the image? When I try to access the image from your link I get an error page from your host. That would be a problem.
     
  5. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #5
    Changed Permissions

    Ok, I figured it out. I had the permissions set incorrectly it is working now, though. How would I go about aligning the image and the search field?
     
  6. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #6
    I believe you can mess with the CSS for it and make the vertical-align:middle for the image button tag.
     
  7. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #7
    Sounds good, but I'll need more in-depth instructions if you don't mind. I'm not that great with CSS and HTML.
     
  8. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #8
    Adjust your HTML slightly,
    Code:
    <form action="/search" method="get">
        <input type="text" name="q" value="{SearchQuery}"/>
       <input type="image" [B]id="submitBtn"[/B] src="http://tumblr.imasterweb.net/searchbtn.jpg"  />
    </form>
    Then, from the source file, look at the CSS section inside the style tags near the top. Add the following to it just before the </script>.

    Code:
    #submitBtn {
     vertical-align: middle;
    }
     
  9. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
  10. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #10
    Another Question

    Would it be possible to do the same thing with the actual search field? Thanks for any help!
     
  11. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #11
    Do you mean replacing it with an image, or aligning it?
     
  12. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #12
    You mean your field below?

    Code:
    <input type="text" name="q" value="{SearchQuery}"/>
    
    If yes, then you do that exact same as with your button. Give it an id, so it becomes, for example

    Code:
    <input type="text" name="q" id="searchField" value="{SearchQuery}"/>
    
    And then your css, something like
    Code:
    #searchField {
    margin:auto 0;
    vertical-align:middle;
    /*Anything else you want*/
    }
    
     
  13. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #13
    Replacing it with an image. Thanks!
     
  14. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #14
    Using Cerebrus' Maw's id attribute,
    Code:
    #searchField {
     width: __px;
     height: __px;
     background: transparent url('image.png') no-repeat;
     border: none;
    }
    Essentially you'll give it a background image and take away the border. You can give the appropriate width and height.
     
  15. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #15
    Alignment

    Thanks! It worked, but now the two images aren't aligned. I've added the
    Code:
    vertical-align: middle;
    but that didn't work. Is there a way I can align them with each other?
     
  16. Cerebrus' Maw macrumors 6502

    Joined:
    Mar 9, 2008
    Location:
    Brisbane, Australia
    #16
    Is it possible for you to give a link to the page your editing?

    Just so we can see the full code. "Alignment" can mean a lot of things! (inline,vertical, flowing, right, left etc)

    If not, give a brief synopsis of what you got and what you want to achieve.

    Thanks.
     
  17. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #17
    It may be because of the height you have on it. Can you upload it to your site so I can see it in action (or at least post the new HTML/CSS)? I'd be kind of guessing right now as there has been a few changes made now. With the border gone it would have adjusted the total height/width some.
     
  18. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #18
    Code

    Well, I'll give you the link, but I don't think viewing the source code will help you much because it splits up the CSS and HTML for some reason. The link is http://imaster.tumblr.com I can, however, give you the full code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <!--
        Earl Grey - A free Tumblr theme by Ian Gowen (http://ian.gowen.cc)
        Available for download at http://earlgreytheme.tumblr.com
        Licensed under Creative Commons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0/us/)
    -->
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <!-- DEFAULT COLORS -->
        <meta name="color:Background" content="#111"/>
        <meta name="color:Content Background" content="#fff"/>
        <meta name="color:Sidebar Background" content="#333"/>
        <meta name="color:Sidebar Border" content="#555"/>
        <meta name="color:Light Accents" content="#ddd"/>
        <meta name="color:Dark Accents" content="#111"/>
        <meta name="color:Links" content="#888"/>
        <meta name="color:Text" content="#111"/>
        <meta name="color:Footer text" content="#fff"/>
        <meta name="color:Link highlights" content="#c93"/>
        <meta name="color:Sidebar Box" content="#444"/>
        <meta name="color:Sidebar text" content="#999"/>
        <meta name="color:Site title" content="#ccc"/>
        
        <!-- END DEFAULT COLORS -->
        
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link rel="icon" href="{Favicon}"/>
        <link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}"/>
        {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
        <title>{Title}{block:PostTitle} - {PostTitle}{/block:PostTitle}</title>
        <style type="text/css">
            body, html {
                background-color: {color:Background};
                margin: 0;
                padding: 0;
                font-family: Georgia, Times, serif;
                color: {color:Text};
            }
            body {
                min-width: 960px;
                background-color: {color:Background};
                color: {color:Text};
            }
            .permalink
            {
                font-size: 9px;
                color: {color:Links};
                text-decoration: none;
            }
            a
            {
                color: {color:Links};
                text-decoration: none;
            }
            a:hover
            {
                color: {color:Link highlights};
                text-decoration: none;
            }
            div.date
            {
                font-size: 28px;
                font-style: italic;
                color: {color:Light Accents};
            }
    
            #header
            {
                height: 30px;
                background-color: {color:Background};
                width: 100%;
                margin: 0;
                padding: 0;
            }
            #wrap
            {
                width: 100%;
                margin: 0 0 0 0;
                padding: 0;
                background-color: {color:Sidebar Background};
                /*max-width: 900px;
                min-width: 600px;*/
            }
            #content
            {
                border-left: 10px solid {color:Sidebar Border};
                padding: 20px 20px 20px 20px;
                background-color: {color:Content Background};
                max-width: 660px;
                float:left;
            }
            #footer
            {
                font-size: 12px;
                background-color: {color:Background};
                color: {color:Footer text};
                clear:both;
                margin: 0;
                padding: 5px;
                text-align: right;
            }
            div#navigation
            {
                padding-top: 10px;
                text-align: right;
            }
    
            h1, h2, h3, h4, h5, h6
            {
                font-weight: normal;
            }
            h1#sitetitle a
            {
                color: {color:Site title};
                text-decoration: none;
    font-family: serif;
    font-size: 35px;
    padding-bottom: 0px;
            }
           h5
           {
                text-align: center;
           }
            .post
            {
                padding-top: 10px;
                padding-bottom: 20px;
                border-bottom: 1px dotted {color:Light Accents};
            }
            .permalink
            {
                text-align: right;
                float: right;
                vertical-align: middle;
                padding-top: 5px;
            }
            
            /* Link */
            
            div.post div.link span.link
            {
                font-size: 18px;
                color: {color:Light Accents};
            }
            /*audio */
            .playcount
            {
                font-style: italic;
                color: {color:Light Accents};
            }
            /* Quote */
            
            div.post div.quote span.quote
            {
                font-size: 18px;
            }
            div.post div.quote big.quote
            {
                font-size: 50px;
                line-height: 1px;
                vertical-align: -23px;
            }
            div.post div.quote div.source
            {
                text-align: right;
                font-style: italic;
            }
            big.quote, big.quote a
            {
                color: {color:Light Accents};
            }
            big.quote a:hover
            {
                color: {color:Light Accents};
                text-decoration: none;
            }
            
            div.post pre
            {
                background-color: {color:Light Accents};
                border: 1px solid {color:Background};
            }
            
            /* Video */
            
            .video div.caption
            {
                padding-top: 10px;
                text-align: left;
            }
            
            .video
            {
                text-align: center;
            }
            
            /* Photo */
    
            div.post div.photo
            {
                text-align: center;
            }
            .photo img
            {
                border: 9px solid {color:Dark Accents};
            }
            
            div.post div.photo div.caption
            {
                padding-top: 10px;
                text-align: left;
            }
            
            /* Chat */
            div.post div.conversation ul
            {
                list-style-type: none;
            }
            
            
            div.post div.conversation li .label
            {
                font-weight: bold;
            }
            
            /* sidebar styles */
            #sidebar
            {
                background-color: {color:Sidebar Background};
                float:left;
                padding: 0px 20px 20px 20px;
                margin: 0;
                width: 300px;
                max-width: 300px;
                color: {color:Sidebar text};
            }
     
            .sidebar_box p
            {
                font-size: 15px;
                padding-left: 5px;
            }
            .sidebar_box ul
            {
                list-style-type: none;
                font-size: 14px;
                font-style: none;
                padding-left: 5px;
            }
            
            .sidebar_box h5
            {
                padding: 5px;
                margin: 0;
    font-size: 15px;
    font-style: italic;
            }
            .sidebar_box
            {
                background-color: {Color:Sidebar Box};
                border: 1px solid {color:Sidebar Border};
                padding: 5px;
                margin-bottom: 10px;
            }
            #blogroll li 
            {
                display: inline;
            }
            blockquote
            {
                margin-left: 10px;
                border-left: 8px solid {Color:Light Accents};
                padding-left: 10px;
                font-style: italic;
            }
            
            #submitBtn {
     vertical-align: middle;
    }
    
    #searchField {
     width: 246px;
     height: 22px;
     background: transparent url('http://imasterweb.net/searchfld.gif') no-repeat;
     border: none;
    vertical-align: middle;
    color: #999
    }
            
        </style>
    </head>
    <body>
    <!-- Start of StatCounter Code -->
    <script type="text/javascript">
    var sc_project=4987858; 
    var sc_invisible=1; 
    var sc_partition=57; 
    var sc_click_stat=1; 
    var sc_security="ab910ebe"; 
    </script>
    
    <script type="text/javascript"
    src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
    class="statcounter"><a title="joomla analytics"
    href="http://www.statcounter.com/joomla/"
    target="_blank"><img class="statcounter"
    src="http://c.statcounter.com/4987858/0/ab910ebe/1/"
    alt="joomla analytics" ></a></div></noscript>
    <!-- End of StatCounter Code -->
        <div id="wrap">
            <div id="header">
            </div>
            {block:Description}
            <div id="sidebar">
                <h1 id="sitetitle"><a href="/"><center>{Title}</center></a></h1>
                <div id="description">
    <form action="/search" id="search" method="get">
        <input type="text" name="q" id="searchField" size="33px" value="{SearchQuery}" />
       <input type="image" src="http://imasterweb.net/searchbtn.gif" id="submitBtn" />
    </form>
                    <h3>{Description}</h3>
                </div>
                <div id="bio" class="sidebar_box">
                    <h5>~Bio~</h5>
                    <p>
    My name is William (as you can hopefully already tell) and I am the writer of this blog (another obvious and somewhat redundant statement). You may also know me on YouTube as iMaster33 or as the creator of the tech site, <a href="http://imasterweb.net">iMasterWeb</a>. On this blog I will post about my interests other than tech. Things music, sports, and even my everyday life! I hope you enjoy reading this blog as much as I enjoy writing it.
                    </p>
                </div>
    <div id="twitter" class="sidebar_box">
    <h5>~Twitter~</h5>
    <div id="twitter_div">
    <style>
    a{ font-size: 14px; color: #999; text-decoration: none;}
    ul{list-style-type:none; font-size: 14px;}
    li{padding-bottom:12px;}
    </style>
    <h2 style="display: none;" >Twitter Updates</h2>
    <ul id="twitter_update_list"></ul>
    <a href="http://twitter.com/iMaster33" id="twitter-link" style="display:block;text-align:left; font-style: italic;">Follow Me</a>
    </div>
    <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
    <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/iMaster33.json?callback=twitterCallback2&count=3"></script>
      </div>
                {block:Following}
                <div id="blogroll" class="sidebar_box">
                    <h5>~Blogroll~</h5>
                    <ul>
                        {block:Followed}
                        <li><a href="{FollowedURL}"><img src="{FollowedPortraitURL-24}" title="{FollowedTitle}"/></a></li>
                        {/block:Followed}
                    </ul>
                </div>
                {/block:Following}
            </div>
            {/block:Description}
            
            <div id="content">
                {block:Posts}
                    {block:NewDayDate}
                        <div class="date">
                            {Month} {DayOfMonth}<sup>{DayOfMonthSuffix}</sup>
                        </div>
                    {/block:NewDayDate}
            
                    <div class="post">
                        {block:Regular}
                            <div class="regular">
                                {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                                {Body}
                            </div>
                        {/block:Regular}
                    
                        {block:Photo}
                            <div class="photo">
                                {LinkOpenTag}<img src="{PhotoURL-400}" alt="{PhotoAlt}"/>{LinkCloseTag}
                                {block:Caption}
                                    <div class="caption">{Caption}</div>
                                {/block:Caption}
                            </div>
                        {/block:Photo}
                    
                        {block:Quote}
                            <div class="quote">
                                <span class="quote">
                                    <big class="quote"><a href="{Permalink}">“</a></big> {Quote} <big class="quote">”</big>
                                </span>
                                {block:Source}<div class="source">— {Source}</div>{/block:Source}
                            </div>
                        {/block:Quote}
                    
                        {block:Link}
    
                            <div class="link">
                                <span class="link">» <a href="{URL}" class="link" {Target}>{Name}</a></span>
                                {block:Description}
                                    <div class="description">{Description}</div>
                                {/block:Description}
                            </div>
                        {/block:Link}
                    
                        {block:Conversation}
                            <div class="conversation">
                                {block:Title}<h2><a href="{Permalink}">{Title}</a></h2>{/block:Title}
                                <ul>
                                    {block:Lines}
                                        <li class="{Alt}">
                                            {block:Label}<span class="label">{Label}</span>{/block:Label}
                                            {Line}
                                        </li>
                                    {/block:Lines}
                                </ul>
                            </div>
                        {/block:Conversation}
                    
                        {block:Audio}
                            
                            <div class="audio">
                                {AudioPlayerBlack} 
                                {block:Caption}
                                    <div class="caption">{Caption}</div>
                                {/block:Caption}
                               <div class="playcount">{FormattedPlayCount} plays<p></div>
                            </div>
                        {/block:Audio}
                    
                        {block:Video}
                            <div class="video">
                                {Video-400}
                                {block:Caption}
                                    <div class="caption">{Caption}</div>
                                {/block:Caption}
                            </div>
                        {/block:Video}
            <span class="permalink">
                <a href="{Permalink}">{DayOfMonthWithZero}/{MonthNumberWithZero}/{Year} @ {12Hour}:{Minutes} {AmPm}</a> 
            </span>
    <div style="font-size: 10px; text-align: left;"><a class="dsq-comment-count" href="{Permalink}#disqus_thread">Comments (View)</a></div>
        </div>
                {/block:Posts}
    {block:Permalink}
    <script type="text/javascript">var disqus_url = "{Permalink}"; var disqus_title ="{block:PostTitle}{PostTitle}{/block:PostTitle}";</script>
    <div id="disqus_thread"></div><script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/williamsblog/embed.js"></script>
    <a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
    {/block:Permalink}
    <script type="text/javascript">
    //<![CDATA[
    (function() {
    		var links = document.getElementsByTagName('a');
    		var query = '?';
    		for(var i = 0; i < links.length; i++) {
    			if(links[i].href.indexOf('#disqus_thread') >= 0) {
    				query += 'url' + i + '=' + encodeURIComponent(links[i].href) + '&';
    			}
    		}
    		document.write('<script charset="utf-8" type="text/javascript" src="http://disqus.com/forums/williamsblog/get_num_replies.js' + query + '"></' + 'script>');
    	})();
    //]]>
    </script>
    
                <div id="navigation">
                    {block:PreviousPage}
                        <a href="{PreviousPage}">« newer</a>   
                    {/block:PreviousPage}
            
                    {block:NextPage}
                        <a href="{NextPage}">older »</a>
                    {/block:NextPage}
                </div>
            </div>
            <div id="footer">
    visit the <a href="http://imaster.tumblr.com/archive">archive</a> /  
                subscribe via <a href="{RSS}">rss</a>  / 
                powered by <a href="http://www.tumblr.com/" target="_blank">tumblr</a>  / 
                design by <a href="http://ian.gowen.cc/">Ian Gowen</a>
            </div>
        </div>
    {SearchQuery}
    {URLSafeSearchQuery}
    
    {block:SearchPage}
        {SearchResultCount}
    {/block:SearchPage}
    
    {block:NoSearchResults}
    {/block:NoSearchResults}
    
    </body>
    </html>
    
    
    And here's an image of what I'm trying to align: [​IMG] ( the two items are #searchField and #submitBtn )

    Thanks for any help!!
     
  19. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #19
    Funny enough, switching #submitBtn's vertical-align to "top" seems to fix it.
     
  20. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #20
    Thanks

    Hey guys! Thanks so much for all the help! I have yet another problem, but this might belong in another thread altogether: Its odd, sometimes the images I'm using show up and work perfectly, but other times they don't show up at all, or in the case of the actual search button, displays plain black text that says "search query" There's nothing wrong with where they're uploaded because every time I check via their URL they are up and running. Is anyone else having this problem? http://imaster.tumblr.com Here are some examples of what I'm talking about: [​IMG] [​IMG] Thanks!
     
  21. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #21
    I was noticing that too with Firefox. Safari started doing it, but using the Developer menu I found some errors it was giving,

    Code:
    Unsafe JavaScript attempt to access frame with URL http://www.tumblr.com/dashboard/iframe?src=http%3A%2F%2Fimaster.tumblr.com%2F from frame with URL http://imaster.tumblr.com/. Domains, protocols and ports must match.
    It may be interfering with the image downloads some times. I've seen this issue once here in the forums. I don't remember if a solution was reached though. I also notive from Firefox, when opening the Page Info window and going to the Media tab and selecting on the image it shows the file size as 0kb.
     
  22. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #22
    I think I'll start a new thread about this.
     
  23. notnek macrumors 6502

    notnek

    Joined:
    Oct 25, 2007
    #23
    just wondering if you've tried just styling your inputs and not use images.

    Code:
    input { background: #999; color: #FFF; outline: none; border: 1px solid #CCC; padding: 3px; }
    
     
  24. iMasterWeb thread starter macrumors regular

    Joined:
    Mar 15, 2009
    #24
    Guess who feels like a complete and total idiot? That worked perfectly.....except for one thing :D It seems to make the "search" button a little larger than the search field itself. Here's a picture: [​IMG] Thanks for all of the help!!!
     
  25. notnek macrumors 6502

    notnek

    Joined:
    Oct 25, 2007
    #25
    ha. i know the feeling. we all tend to make things a little too complicated. for the search button, just adjust the top/bottom padding. you can adjust however makes it look better. i think this should fix it:

    Code:
    input#submitBtn { padding: 0px 3px; }
    
     

Share This Page