Search bar positioned bottom of header instead of top?

jmann

Tried every css tag I can think of. Anyone have any ideas? THANKS!!!

peregrine

an scrrenshot and your theme - will almost always get you a better answer.

what theme. post a screenshot of where you want it.

you can move the div lower in your .tpl file in the views folder of theme
<div class="SiteSearch">{searchbox}</div>

css changes in design/custom.css of your theme folder.

and/or position the magnifying glass with:

.SiteSearch .Button

position box with left, right, absolute or padding etc.

.SiteSearch

depending what you use you may need !important

jmann

Thanks! Here is a screenshot. It is the default theme. Just want the box to lower so it is on the same plane as "Discussions, Activity"

peregrine

you would add them to custom.css in design folder of theme.

one way to do it (you need to adjust px values to your liking)

#Head .SiteSearch .InputBox {
position: absolute;
top: 140px;
right: -40px;
}

.SiteSearch .Button {
position: absolute;
top: 143px;
right: -30px;
}

I would clone the default theme. see there:

You should make a new theme. Never modify the default theme so you can debug with the standard default theme.

Create a new theme folder and copy the contents of default theme to your new theme.

call the newtheme whatever you want buy be consistent everywhere.

e.g. themes/newtheme

then edit the about.php in themes/newtheme

$ThemeInfo['default'] = array( 'Name' => '+Baseline',

so the name of folder and name in brackets matches (upper and lower case) EXACTLY.

$ThemeInfo['newtheme'] = array( 'Name' => 'My New Theme',

and put https://github.com/vanilla/vanilla/blob/2.1/applications/dashboard/views/default.master.tpl

into the views folder of your new theme. create one if necessary

create a custom.css in the themes/newtheme/design/custom.css

add your css statements,

jmann

Thanks, I did that... I think, but search bar didn't move. Might be too advanced for my blood, until I learn how to code properly. The site is here community.punkjews.com I have been fiddling with firebug for an hour or so. I can create css websites fine but not so good at this.

peregrine

its because you theme is called PunkJews so you need to add it to the

themes/PunkJews/design/custom.css

    #Head .SiteSearch .InputBox {
    position: absolute;
    top: 140px;
    right: -40px;
    }
    .SiteSearch .Button {
    position: absolute;
    top: 143px;
    right: -30px;
    }

if you look at web developer - you can clearly see it is not added to your css.

peregrine

you've got an error in your css thats why its not reading the rest.

remove this

SiteSearch {
        position: bottom;

}

yourdomaninname/themes/PunkJews/design/custom.css

if you have an error its going to stop reading the rest you added below the error. that why its not using what you added below your syntax error. since it has no . for a class.

you can run your css through various css validators.

jmann

Wow you are the best. Thank you so much. If you are ever in Seattle i'd love to buy you a beer.

peregrine

@jmann said:
Wow you are the best. Thank you so much. If you are ever in Seattle i'd love to buy you a beer.

sounds good to me.

glad I could help.