Jump to content
Sign in to follow this  
sedique

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

Recommended Posts

sedique

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!

Share this post


Link to post
Share on other sites
catrina
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

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
sedique
So the link was sent. What's next?

Share this post


Link to post
Share on other sites
catrina
By box slider, are you referring to the feature slider on your homepage?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
sedique
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!

Share this post


Link to post
Share on other sites
catrina
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]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
sedique
Oh ok, and how can I apply a div tag right next to it?

Share this post


Link to post
Share on other sites
sedique
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?

Share this post


Link to post
Share on other sites
Rob
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

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
sedique
I have it full width, but I want to shrink it's width so I can apply a div tag next to it

Share this post


Link to post
Share on other sites
Rob
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?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
sedique
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?

Share this post


Link to post
Share on other sites
Rob
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.

Former PageLines Moderator, Food Expert and Raconteur

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  

×