AppSite search field style

Hello Admins, moderators and others!
I just finish a fresh AppSite quickstart setup (Joomla 2.5.1) and I found a small issue related to search field, looks like module class sufix is missing and I dont know what is the right class sufix. please take a look at file attachment. Can you help me please?

searchissue.jpg

Can you also explain how to move/duplicate this module to main menu bar? I mean how to add it @ right site of main menu.. is this possible?

searchmenubar2.jpg

Thank you.

Hi

Please show me Your site.

Hi

Please show me Your site.

You can see it @ http://www.ksc.com.br/site/

Thank you

ps: Sorry about report your post, wrong button

Hi

To change the look please add this to css:

Code: Select all

input#mod-search-searchword {
    background: none repeat scroll 0 0 #444444;
    border: medium none;
    border-radius: 0 0 0 0;
    color: #C0C0C0;
    font-family: Arial,Helvetica,sans-serif;
    padding: 7px;
}


to move it next to menu You nned to first use "banner1" position and let me know when You do this, so I'll be able to come up with a rest css changes.

Hi teitbite,

To change the look please add this to css:

Code: Select all

input#mod-search-searchword {
    background: none repeat scroll 0 0 #444444;
    border: medium none;
    border-radius: 0 0 0 0;
    color: #C0C0C0;
    font-family: Arial,Helvetica,sans-serif;
    padding: 7px;
}


Works, but I changed

Code: Select all

padding: 7px;

to

Code: Select all

margin-top: 8px;

This way I can align vertically right

to move it next to menu You nned to first use "banner1" position and let me know when You do this, so I'll be able to come up with a rest css changes.

Done, but the new search box appears below menu bar.

Thank you again!

Hi

Ok. Now You need to add this small trik:

Code: Select all

#mainPage {
    position: relative;
}

.search {
    position: absolute;
    right: 10px;
    top: -45px;
    z-index: 100000;
}


Hi teitbite,

Yes, the code did the trick but affected both search modules, the new one @ top bar and the original one @ bottom bar, so I edited the class sufix and add it to to the top module adv parameters setup as folow:

Code: Select all

#mainPage {
        position: relative;
}

    .search_top{
        position: absolute;
        right: 10px;
        top: -45px;
        z-index: 100000;
}

now I have both search fields working fine @ right places, but with same color styles, there is a way to set another font and background style just to the new search field? Is it easy?

Thanks again for your very helpful support!

Hi

You can use a main layer names to select right search. Lke "#gkBanner1", but Your solution is good too.

Sure You can change anything, just add a css code to the desired search:

Code: Select all

font-family:tahoma;
font-size:10px;
color:red;