Simon
|
Wonder if there is any way to place the search box in the right side of top menu. or make a new module and place it on the right side of menu.
se picture ---> http://i49.tinypic.com/2aet2r8.jpg
Your help is much appreciated!
|
| |
karl
|
hi,
i was wondering the same thing , how can i control where the search box goes, i was trying to put it under "slogan text" . is there any way to move it around folks ???????
|
| |
Garry
|
If you place the search module on user3 position in addition to main menu it goes to second line. You can try adding a new module position inline with user3 position but you need to decrease the width of user3 to free some space on right.
|
| |
Dane
|
I wanted a search box in the upper right corner of my header box--
The only way to do it is to manually tweak the code: add a searchbox css ID:
#searchbox { /*nest inside header div */
float:right;
position:relative;
top:10px;
right:10px;
}
and then manually add the searchbox div into the template's index.php, inside the DIV with class=art-Header:
<div class="art-Header">
<div class="art-Header-png"></div>
<div class="art-Header-jpeg"></div>
<!-- searchbox div manually added -->
<div id="searchbox">
<jdoc:include type="modules" name="search" />
</div><!-- end searchbox addition -->
</div>
Then, of course, add <position>search</position> to the templateDetails.xml file, and lastly, assign the search module properly.
Works, but it's a bit of a pain if you are frequently changing your site's look & feel, since you need to manually modify the index.php and templateDetails.xml every time you create a new template. I keep the CSS in system/css/general.css, so at least that doesn't have to be added every time.
|
| |
Simon
|
I followed Dane Suggestion with making a new layer and put the search box on the layer. this solution seems to work but the problem is the search box falls behind the menu as you see in the picture below.
so i wonder if any one here have some idea how to move the search box on the front of menu?
[IMG]http://i48.tinypic.com/2qbynub.png[/IMG]
Your help is much appreciated!
|
| |
Simon
|
Quote Dane:
I wanted a search box in the upper right corner of my header box--
The only way to do it is to manually tweak the code: add a searchbox css ID:
#searchbox { /*nest inside header div */
float:right;
position:relative;
top:10px;
right:10px;
}
and then manually add the searchbox div into the template's index.php, inside the DIV with class=art-Header:
<div class="art-Header">
<div class="art-Header-png"></div>
<div class="art-Header-jpeg"></div>
<!-- searchbox div manually added -->
<div id="searchbox">
<jdoc:include type="modules" name="search" />
</div><!-- end searchbox addition -->
</div>
Then, of course, add <position>search</position> to the templateDetails.xml file, and lastly, assign the search module properly.
Works, but it's a bit of a pain if you are frequently changing your site's look & feel, since you need to manually modify the index.php and templateDetails.xml every time you create a new template. I keep the CSS in system/css/general.css, so at least that doesn't have to be added every time.
I followed Dane Suggestion with making a new layer and put the search box on the layer. this solution seems to work but the problem is the search box falls behind the menu as you see in the picture below.
so i wonder if any one here have some idea how to move the search box on the front of menu?
http://i48.tinypic.com/2qbynub.png
Your help is much appreciated!
|
| |
Enboy
|
HEllo, this may work for you, its working for me.
First you will have to create the position in the template.
Open “templateDetails.xml” which is in the root of your template.
Locate line: <positions>
Add (anywhere after the above line and before </positions>)
<position>headerbox1</position>
Note: I have named my position bytesearch, you can rename yours, however you will need to amend this change in the next file also.
Next…
Now we must create a space for it to show in your header (a div)
Open: index.php (also in the templates root)
locate line: <div class="art-Header">
Add below: <div class="bytesearch"><jdoc:include type="modules" name="bytesearch" /></div>
Note: At this stage if you have renamed your position you will need to change name=”bytesearch” to the name you have given it in the first file we edited.
Also I have named the div (space for the position) bytesearch, as with the position name you can change this, however you will need to make an amendment in the next step.
And finally…
Open: template.css (located in your CSS folder within the template folder.)
Locate Lines:
div.art-Header
{
margin: 0 auto;
position: relative;
z-index:0;
width: 898px;
height: 250px;
}
(This text may look a little different to yours depending on your design, but it will be named div.art-Header)
Add the following after the }
div.bytesearch
{
float: right;
margin: 0;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
}
Note: As before if you have renamed the div, you will need to rename bytesearch to your custom name.
To move the position of the box, play around with the margin-top and margin-right
Thank you
Enboy
|
| |
Simon
|
Enboy, i appreciate your help, i followed your guide every step. the results were the same, the search box still falls behind the menu  . still need som way to move the search box on the front of menu :/
Any idea how to do this?
Many thanks.
|
| |
Enboy
|
@Simon, thats very strange cos it works for me, you may try this tut i came accros at http://jeffkelley.blindvalet.fr/?p=3, otherwise you can email me your exported template and then i can see whats wrong, endjala at gmail dot com
Thank you
|
| |
Shawn Gadwa
|
Quote Simon:
Enboy, i appreciate your help, i followed your guide every step. the results were the same, the search box still falls behind the menu . still need som way to move the search box on the front of menu :/
Any idea how to do this?
Many thanks.
This here:
{
float: right;
margin: 0;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
}
Is for you to configure where you want the search box to show up. So, play with it a little. Use float right for it to show up on the right, or left for the left. Change the margin-rop... more to be further from the top, less to be closer. Same with the right, bottom, and left.
Also, one obvious thing that Enboy did not mention is that you need to set the search module to use the module that you just configured. Searchbox in my case, bytesearch in Enboy's case. If you don't do that then all of the above will not change a thing.
|
| |
Simon
|
@Enboy
your method work perfectly but the problem is that div.bytesearch falls behinde the menu as you see in this picture---> http://i48.tinypic.com/2qbynub.png.
I need div.bytesearch stand on the menu as this picture--> http://i49.tinypic.com/2aet2r8.jpg.
Do you think that will be possible?
Many thanks!
|
| |
Shawn Gadwa
|
Quote Simon:
Well, it looks like you want the search box to be in the menu. Enboy gave instructions for putting it in the header. I don't know how you can put it in the menu but my guess is that you should make your entries in the css file under the menu section instead of the header section.
|
| |
Peter
|
Quote :Well, it looks like you want the search box to be in the menu. Enboy gave instructions for putting it in the header
Funny.. since Simon wrote: Wonder if there is any way to place the search box in the right side of top menu. or make a new module and place it on the right side of menu.
However I am looking for the same function? So if anyone, ex. the artisteer team could elaborate on how to achieve this, it would be great. Again, we are talking about placing the joomla search IN the menu bar NEXT to the menuitems themselves  NOT in the header.
Thanks, 
|
| |
Shawn Gadwa
|
Yeah, funny... nobody has the time to read everything now a days!
Anyhow, here is what you are looking for: http://myartisteer.com/
Its the "search me" article.
|
| |
Simon
|
Quote Shawn Gadwa:
Yeah, funny... nobody has the time to read everything now a days!
Anyhow, here is what you are looking for: http://myartisteer.com/
Its the "search me" article.
That's exactly what i need :) works perfectly!
Thank you very much Shawn!!
|
| |
Micke
|
I have placed a search field in my menu.. But it doesn't move with the rest of the page when resizing the browser window. Any thoughts on that
|
| |
Shawn D.
|
I'm so glad i found this topic because I am having this exact problem. Good news is I think I also know what other people are having trouble with when it comes to things being in front or behind other things.
If anyone is having trouble with whether the menu is popping up in front or behind the header, you may want to try to add a z-index line into the CSS
{
float: right;
margin: 0;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
z-index: 2;
}
Cheers!
|
| |
overmars
|
Dear Shawn,
I have followed your instructions as written in the "search me" website http://myartisteer.com
but the search box still does not occupy the right of the menu block. what is wrong from what I do? What suggestions do you have for me?
this is the capture --> http://tinypic.com/view.php?pic=dr6ys8&s=5
|
| |
Mel
|
Hi,
before I downloaded the latest version of Artisteer I was able to place my search box anywhere without a problem. Now, no matter what I do, the search box width is stretched. I have followed the above from myartisteer (which was how I was doing it originally too, except without the input box bit in CSS) but it makes no difference. I want my search box to be approx 15px width, with the search button to the right. Nothing I try works - my search box is stretched and the search button will only go above or below the seach box. Could it be something caused by changes in the upgrade? Any idea what else I can try to rectify this?
|
| |
Lotti
|
Hi, I'm following this but don't know how to edit this file:
Then, of course, add <position>search</position> to the templateDetails.xml file, and lastly, assign the search module properly.
can I do that within the Joomla administration or do I need to do in dreamweaver or something?
Thanks
|
| |
Fahad
|
Quote Simon:
Quote Shawn Gadwa:
Yeah, funny... nobody has the time to read everything now a days!
Anyhow, here is what you are looking for: http://myartisteer.com/
Its the "search me" article.
Thanks Alot Simon,, You have solved a big problem of mine. Ton of thanks
That's exactly what i need :) works perfectly!
Thank you very much Shawn!!
|
| |
Anton
|
Quote Mel:
Hi,
before I downloaded the latest version of Artisteer I was able to place my search box anywhere without a problem. Now, no matter what I do, the search box width is stretched. I have followed the above from myartisteer (which was how I was doing it originally too, except without the input box bit in CSS) but it makes no difference. I want my search box to be approx 15px width, with the search button to the right. Nothing I try works - my search box is stretched and the search button will only go above or below the seach box. Could it be something caused by changes in the upgrade? Any idea what else I can try to rectify this?
Hey Guys, Same problem as Mel here - anyone got any ideas? I'm running ver 2.4.0.27666 Standard Edition
|
| |
Zhanna Zabello
|
http://myartisteer.com/
Read updated "Search me" article. It is for "...Those of us who use Joomla are accustomed to having a Search or News Flash module in our website’s header."
BRAVO!
|
| |
Zhanna Zabello
|
One more tiny tip. With Shawns above directions, IE and Firefox were showing Search box differently. I have changed position from "absolute" to "relative" and to adjust distance from the top had to go into negative numbers as such:
div.module_search
{
position: relative;
top: -26px; /* position */
left: 815px; /*position*/
z-index: 1000;
}
Of course you have to tweek your numbers for correct position on your site. Hope it is useful.
|
| |
David Johnson
|
Hello All,
There are bunches of ways to get this done. It would take minutes to describe the different approaches to an experienced JOOMLA and CSS developer. If you are not experienced, this would take HOURS.
The basic approach described above by several other contributors is correct. You can enable your search module and publish to a position that already exists then use absolute positioning in your CSS to locate the search box where you want it. Or, you can create a new position and and publish to it.
But what I can tell you is that if you publish to USER3, where the menu goes, you will have issues in Artisteer 2.4 and lower (don't know if the same issues exist in 2.5). The only way I have found to get around this issue is to change the width of the menu bar such that it does not overlap with the location of the search box. See this website for an example: http://www.allaboutfoip.com/.
As a final note, anyone trying this level of editing needs to have the right tools. One such tool is a Firefox browser plugin called FireBug. Get it here: http://getfirebug.com/downloads. Now, with firebug, you will be able to inspect and modify formatting and HTML in your local browser before committing code to your real files.
So get FireBug and start inspecting what others have done and then clone for your own use.
Sorry if this sounds harsh, but if you don't understand XHTML and CSS then you really should not expect to be able to modify Artisteer templates beyond that of simple things.
|
| |
ZenkoGuy
|
I added an article in our blog that covers how to add a google search box and results in your menu (or header). Hope it helps someone.
http://bit.ly/artisteer-search
Take care!
|
| |
AlpArt
|
Hello Enboy,
Your tip work perfectly on ie and opera, but it's not working on safari and mozilla. The search area is stretched and it's not clickable. What can be the problem?
Thanks.
|
| |
joomie
|
Hi. I've been reading over what everyone is writing... thought I would also shed some light to clarify. I am new to working back-end xhtml/css. So creating a new module position was an advanced feat for me.
Anyhow here is what I did:
3 files you will need to work in: templatedetails.xml, index.php and your template.css.
open the file:
templateDetails.xml (specific details file for your template) Here you are going to tell the template that you are adding a new module position. When you open this file, look for the long list of positions already in the template. Add one more. As example I will call my module: joomie
Add <position>joomie </position>
close this file - your done here.
Open:
template.css here you are giving the template the directions on where exactly on the page you want the new module to appear. your going to go back to this and tweek it to fit your location need once you have the new module appearing on your page. Once you have that part down, the specific placement is easy
add this code in the header section. Change the joomie to what ever you named your position in the templatedetails.xml
copy this:
div.joomie
{
float: right;
margin: 0;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 0px;
margin-left: 0px;
z-index: 2;
}
2. index.php - (this is the specific index file for your template). This is the one that throws everyone off. I think it is because everything is squashed together and its hard to see where to add the additional code. remember from step 1. I named my position "joomie" you can call your module position what ever makes sense to your template.
Also, as I learned from playing around with where I dropped the code in, it will change the part of the page where the new module will appear. If you need a module in the header area, drop it in the the <head> area. I needed my code in the header area so I dropped it in right after USER 3. Right before the </div> tags. A
The code you need to add is:
<div class="joomie"><jdoc:include type="modules" name="joomie" /></div>
_____________________________________________________________
so the reason i waited to add the instructions to to the index.php file until the very end is because you might have to remove where you placed it and place it somewhere else.
every time you save you will notice it will be in a different part of the page.
I imagine you do not want to do this too much though. You might mess up the file. Just do it till you get it right 
hope this helps. Im no pro but I appreciate the help that others provided on here. thought i would share the love too.
|
| |
Joep
|
Search above header instead of under (hidden)
1.Open your template.css file on the line 392
2.Find the following class: div.art-header-jpeg
3.Add the following option to that class:
z-index:-1;
|
| |
malek
|
how to add my css file in Artisteer 3.0
|
| |