Jump to content
Sign in to follow this  
tclary

Need to customize search box location

Recommended Posts

tclary    0
tclary

FIrst of all, I just want to congratulate your team on a beautiful design??”really excellent work. I'm enjoying customizing the theme to my needs and have just a few questions on the Features page. 1. I can't seem to locate the code in style.css which properly governs the bottom edges for the images I have in the fboxes. Ideally I would like to have the images go to the very bottom or to the edges; I adjust one and it messes up the other. Can you tell me which lines of the css code would help? 2. The search box at the bottom seems to be governed by the code which governs the search box in the nagivation menu at top (image not attached). I have the top one precisely where I need it but it seems to control the horizontal location of the one at the bottom, as show on the live site here. Obviously, I need to have it scoot all the way over to the 'Looking for something?' box. Thanks so much for you help. And again: OUTSTANDING design and function!

Share this post


Link to post
Share on other sites
tclary    0
tclary

Oops. Forgot to mention that this is regarding the iBlogPro3 theme!

Share this post


Link to post
Share on other sites
Andrew    201
Andrew
1. I can't seem to locate the code in style.css which properly governs the bottom edges for the images I have in the fboxes. Ideally I would like to have the images go to the very bottom or to the edges; I adjust one and it messes up the other. Can you tell me which lines of the css code would help?
There isn't really any code that 'governs' this. The fboxes are all inside a containing div, the will fit the size of the tallest box. Inside the boxes, HTML is used to control layout. Feel free to elaborate more if this doesn't help.
2. The search box at the bottom seems to be governed by the code which governs the search box in the nagivation menu at top (image not attached). I have the top one precisely where I need it but it seems to control the horizontal location of the one at the bottom, as show on the live site here. Obviously, I need to have it scoot all the way over to the 'Looking for something?' box.
You need to control this with CSS specifiers... as the search form is at the top of the layout, then you need to put your modifications in a "#nav .searchform" type selector so it doesn't affect the one on the bottom.

Share this post


Link to post
Share on other sites
tclary    0
tclary

Thanks so much for your reply! I took a shot at it and think I launched a missile from NORAD by mistake lol. I hate to be a pain, but could you just show me in the code below exactly what to do to keep the top right search box on the right, and the bottom search box on the left, with the "#nav. searchform" thing you mentioned? I'll buy you and your whole team beer. And I'm not kidding lol

	/*  SEARCH BAR STYLING */
		.searchform {
			position: absolute;
			margin-top:2.5px;
			margin-left:757px;
			width: 200px;
			float: right;
			font-size: 13px;
			padding:0;
		}
		#morefoot .searchform{float:left}
		.searchform .s{
			background:transparent url(images/search-bar-trans.png) no-repeat scroll center top;
			margin:0;
			border: none;
			padding:8px 0 0 0px;
			height: 25px;
			position:absolute;
			right:13px;
			top:0;
			width:163px;
			color: #666;
			overflow: hidden;
		}
		.searchform .s:focus { outline: 0; border: none;}
		.searchform .left{
			background:transparent url(images/search-leftcap-trans.png) no-repeat scroll left top;
			display:block;
			height:29px;
			left:0;
			position:absolute;
			top:0;
			width:33px;
		}
		.searchform .right{
			background:transparent url(images/search-rightcap-trans.png) no-repeat scroll right top;
			display:block;
			height:29px;
			position:absolute;
			right:0;
			top:0;
			width:14px;
		}
		.searchform .searchsubmit {
			height: 24px;
			width: 24px;
			border: none;
			cursor: pointer;
			text-indent: -999%;
			line-height: 1px;
			margin:0;
			background: transparent;
		}
	

Share this post


Link to post
Share on other sites
Andrew    201
Andrew

Change this:

#morefoot .searchform {float:left;}
To this:
	#morefoot .searchform {
	   float:left;
	   margin-left: 10px;
	}
	

I'll buy you and your whole team beer. And I'm not kidding lol
You already did that, although a link in your blog roll would be nice. Good luck! Love your site and logo :)

Share this post


Link to post
Share on other sites
tclary    0
tclary

You are my new best friend. I'll put up a link, a banner, a keg, spotlights, amplifiers, dancing girls, firetrucks, and guns. You're my hero.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×