How do I shrink the box slider so I can put a search box next to it?

[sedique 0]

I have a box slider that I want to manipulate in order to put a search box right next to it? How do I shrink its size and how do I put another box right next to it? Another question would also be is how do I put a search box right on top of my slider? If you still don't understand, please tell me so I can reword my question. Please answer asap! Thanks!

[catrina 103]

As advised previously in your other thread, you'll need to use CSS and Firebug can help you determine what CSS you need to use. For further reference on CSS attributes, please see here: http://w3schools.com/css/default.asp

[sedique 0]

So the link was sent. What's next?

[catrina 103]

By box slider, are you referring to the feature slider on your homepage?

[sedique 0]

Oh no, I'm sorry, I messed up the name... it's called quick slider... I am trying the narrow the width so I can put a div tag next to it!

[catrina 103]

You can narrow the quick slider width by adding this CSS: [code]#quickslider section.container.section-quickslider.fix {width: 700px; margin: 0 auto; margin-left: 143px;}[/code]

[sedique 0]

Oh ok, and how can I apply a div tag right next to it?

[sedique 0]

Wait, the quick slider doesn't change in size... I adjust it a little bit, but it looks the same as the start? Any corrections?

[Rob 547]

Sedique, Instead of applying CSS, look at Dashboard > PageLines > Templates and tell us where you have the QuickSlider located. If you placed it in a template in the Content Area, then the sidebar will automatically be along side, according to your layout and you can simply use a widget to include the search in that sidebar. If you have it in the Page Templates area, it's going to be full-width. You might benefit from reviewing this carefully: http://www.pagelines.com/wiki/How_to_Use_the_Template_Setup

[sedique 0]

I have it full width, but I want to shrink it's width so I can apply a div tag next to it

[Rob 547]

When you say "apply a div tag next to it", do you mean you want the slider still full width but the slide narrower and a custom div included in its space? Or a custom div in a sidebar next to the slider?

[sedique 0]

Here is an example of what I am trying to follow http://www.wardleyre.com/ It's fullwidth, but I want to apply a custom div tag that has a form... Do you see what I mean now?

[Rob 547]

Yes, now I see what you mean. I'm going to make a rather odd suggestion though. Make your images in a graphics editor look like the photo + the white 1px divider + the grey area with border. Every image should contain the white border and grey area, each of the same width. Using the Features slider (I am not sure the quick slider is the correct choice here), set the title to be the "Find Your Home" bit (wrapping the "Home" part in a unique div). You can use HTML in the Feature slide header and body. Make sure you close the div for the title. Next, create a div with a unique class in the text area (body) of the feature slide. Include your form inside the form div, but also apply unique divs for the form components, such as the Submit button. Make sure each div is closed properly. Save it. Test it. Now, if you want multiple slides, all you need to is reproduce everything... background image (photo different) keeping the title and form content the same. Of course, you can always change things if you wish. If there's only one slide, don't set any transition and set the number of slides to 1 in the page's meta settings. Since your background for the form area is already built into the background image, then you'll need to select "Text on RIght" under Feature Text Position and under Feature Design Style, you'll probably want White Text - Dark Feature Background - No Overlay. Don't use the URL or text for the link. That should, in theory, do it.