Move SEARCH bar

[Bruce_man]

How do I move search bar to the header area? see attachment

I ask this because I want to remove the entire nav bar (is this what it's called??) see second attachment

The only thing on my nav bar is the FORUM, CALENDAR, and all the way to the right is the SEARCH bar. I want to remove that entire field

 

 

 

 

 

This is the final result

[steve00]

One way is via css:

If using custom.css then add:

#elSearch {
position: absolute;
top: -125px;
right: xxpx;
}

where xx = your own number (trial and error)

[Bruce_man]

Thanks but all this did was move the word "Search" to the right (depending on the xx value)

I want to move the search bar altogether to the header area

[Meddysong]

Removing the navbar and changing the part of the page on which the seach bar appears will require editing your templates rather than just amending the CSS. It's not the sort of thing I feel particularly comfortable advising you on because I've never done it myself but if I write the basic description, somebody smarter than me might give you more details.

The presence of the navbar comes down to a line in the globalTemplate file "{template="navBar" app="core" group="global" params=""}". If that weren't there, then the navBar template wouldn't be called and that particular series of code which generates the navbar wouldn't be included when the page is downloaded.

Within the navBar template you'll find the code which generates the search bar. Since you want this to appear elsewhere on the page, you'll need to paste [some of] this code into the relevant template. You can then alter the CSS to adjust the positioning and whatnot.

Like I said, I've never done this before on my own site, so if you act on my advice, on your own head be it. Far better if somebody who has experience in this area spells it out, I think.

[steve00]

Thanks but all this did was move the word "Search" to the right (depending on the xx value)

I want to move the search bar altogether to the header area

​Strange ... as works for me ... you are talking about IPB 4 ??

[Meddysong]

​Strange ... as works for me ... you are talking about IPB 4 ??

​It's a safe bet that he is, Steve. This is in  IPS Community Suite 4.0 > Technical Support. If that doesn't give it away, the screenshots he posted should

[Bruce_man]

yeah i am using ipb 4 RC Steve00

[Woodsman]

It works for me as well

#elSearch {
	border-radius: 20px;
	padding: 4px 10px 4px 10px;

	background: #fff;
	margin: -50px 0 0 500px;

	float:left;

/*	margin: 10px 0;*/
	height: 26px;
	width: 170px;
	position: relative;
	opacity: 0.4;
	{prefix="transition" value="0.1s all linear"}
}

 

[Bruce_man]

It works for me as well

#elSearch {
	border-radius: 20px;
	padding: 4px 10px 4px 10px;

	background: #fff;
	margin: -50px 0 0 500px;

	float:left;

/*	margin: 10px 0;*/
	height: 26px;
	width: 170px;
	position: relative;
	opacity: 0.4;
	{prefix="transition" value="0.1s all linear"}
}

 

​THAT WORKED!!!

Now how to remove navbar

[Woodsman]

This may take some playing with.... 1st It seems you would need to hide or disable all apps with the exception of your primary app.

Then go to css - core - global - framework - global.css

Find

#elSearchNavContainer, #elMobileNav {
/*	border-radius: 4px 4px 0 0;
	box-shadow: #000 0px 7px 10px;
	background: {theme="main_nav"};*/
}

And you will get this...

After you disable all applications with the exception of your primary app which this will be the last app standing... and that one can't be disabled without shutting you completely down. So be real careful of what you hide or disable.

[Bruce_man]

Yeah I just have the forum and that is all I want to use. I don't want CALENDAR, GALLERY, DOWNLOADS, BLOG, or even CHAT

I'm a simple man so everything must be simple. All those apps save for FORUM are clutters and I can live without them

 

This code...remove it?

#elSearchNavContainer, #elMobileNav {
/*	border-radius: 4px 4px 0 0;
	box-shadow: #000 0px 7px 10px;
	background: {theme="main_nav"};*/
}

 

Here is what I am trying to accomplish (see attachment)

 

[steve00]

There are 2 steps to this, one is the background and the other is the links.

using the custom.css add the following:

#elSearchNavContainer, #elMobileNav {
    background: transparent;
}

#ipsLayout_mainNav {
    display: none;
}

 

[Bruce_man]

There are 2 steps to this, one is the background and the other is the links.

using the custom.css add the following:

#elSearchNavContainer, #elMobileNav {
    background: transparent;
}

#ipsLayout_mainNav {
    display: none;
}

 

​That worked wonders Steve!

Thank you guys. I truly appreciate it!

[Bruce_man]

bump:

anyway to put border on search bar?

(If the search bar were placed on an area where the color of that area is white, then the search bar would BLEND with the surrounding white) hence why I'd like to put a dark border around it

[Meddysong]

Yep, that's easy enough. You just have to add the styling to elSearch, so something like:

#elSearch {
    border: solid #cdcdcd 3px;
}

You can add box-shadow and similar things there too, if needed. If you make the changes to custom.css instead of in the normal CSS files, they will be protected from being overwritten in updates.

[Bruce_man]

Yep, that's easy enough. You just have to add the styling to elSearch, so something like:

#elSearch {
    border: solid #cdcdcd 3px;
}

You can add box-shadow and similar things there too, if needed. If you make the changes to custom.css instead of in the normal CSS files, they will be protected from being overwritten in updates.

​that worked

_____________________________________________________

 

BTW what's this are called?? (see attach)

Can I put a border around them? If so HOW?

And can I change the color to something other than white? because if I change header background to white, then you can't see it

 

[Meddysong]

That's #elUserNav and you would need to amend this if you wanted a border - add some padding too if you do that, otherwise it'll look terrible.

To change the font color of the items you would need to amend #elUserNav > li > a, such as

#elUserNav > li > a {
    color: red;
}

or

#elUserNav > li > a {
    color: #003672;
}

[Bruce_man]

That's #elUserNav and you would need to amend this if you wanted a border - add some padding too if you do that, otherwise it'll look terrible.

To change the font color of the items you would need to amend #elUserNav > li > a, such as

#elUserNav > li > a {
    color: red;
}

or

#elUserNav > li > a {
    color: #003672;
}

​where do i find this eiUserNav?

And whats padding and how do I add it?

[Meddysong]

Padding is the difference between having a border that squeezes right up to the different elements in your elUserNav and giving some breathing space:

You're not searching for eiUserNav anywhere. If you edit the current file, you risk it being overwritten with upgrades. Any changes you make to the CSS should be written in custom.css, which won't be overwritten. So you should add to custom.css

#elUserNav > li > a {
    border: solid 3px red; /*or the relevant number of the colour, such as #003672*/
    padding: 5px; /*or whatever number works for you*/
}

Really, though, it's clear from your asking about padding that you don't know anything about CSS, which makes changing your files a bit of a dangerous task. You should invest a bit of time in learning a little bit about CSS. I did it at http://www.w3schools.com/css/.

[Bruce_man]

Padding is the difference between having a border that squeezes right up to the different elements in your elUserNav and giving some breathing space:

You're not searching for eiUserNav anywhere. If you edit the current file, you risk it being overwritten with upgrades. Any changes you make to the CSS should be written in custom.css, which won't be overwritten. So you should add to custom.css

#elUserNav > li > a {
    border: solid 3px red; /*or the relevant number of the colour, such as #003672*/
    padding: 5px; /*or whatever number works for you*/
}

Really, though, it's clear from your asking about padding that you don't know anything about CSS, which makes changing your files a bit of a dangerous task. You should invest a bit of time in learning a little bit about CSS. I did it at http://www.w3schools.com/css/.

​Thanks. No im not new to CSS. Did a few modifications when I made a VB forum a while back.

Simply adding or removing values to the custom.css is simple enough