Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

HTML/CSS Search Cutomization help.

I

iMasterWeb

macrumors regular
Original poster
Mar 15, 2009
158
0
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
 
iMasterWeb said:
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
Click to expand...


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

replace with:


Code: 
<input type="image" src="/path/to/image.jpg"  />
 
Odd Results

That didn't seem to work; it results in the following:
2zi5544.jpg
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!
 
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?
 
iMasterWeb said:
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?
Click to expand...

I believe you can mess with the CSS for it and make the vertical-align:middle for the image button tag.
 
Sounds good, but I'll need more in-depth instructions if you don't mind. I'm not that great with CSS and HTML.
 
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;
}
 
Another Question

Would it be possible to do the same thing with the actual search field? Thanks for any help!
 
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*/
}
 
iMasterWeb said:
Replacing it with an image. Thanks!
Click to expand...

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.
 
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?
 
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.
 
iMasterWeb said:
Is there a way I can align them with each other?
Click to expand...

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.
 
Code

Cerebrus' Maw said:
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.
Click to expand...

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:
o0a0yb.jpg
( the two items are #searchField and #submitBtn )

Thanks for any help!!
 
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:
28tj6zq.jpg
2qtana9.jpg
Thanks!
 
iMasterWeb said:
Is anyone else having this problem?
Click to expand...

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.
 
angelwatt said:
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.
Click to expand...

I think I'll start a new thread about this.
 
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; }
 
notnek said:
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; }
Click to expand...

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:
sfw8d4.jpg
Thanks for all of the help!!!
 
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; }
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back