Button near header section

[jomungos]

Hi

I have searched everywhere but cannot work this one out! I want to place a button in the header part of the website.

basically, I want to a small button to the right of the logo in the orange part and just above and to the right of where it says, login/logout but I cannot find any answers.

www.mungosmarket.co.uk

Can someone please help before I go bonkers!

Thanks
Jo

[nikkyg]

Hi Jo,

There are many ways of doing the same.. I would let just give the simplest of all solutions.
(Hoping that you don't need anything fancy or to run a script using that button)
1. Create a Module (Custom HTML)
2. Place your button there (It could be an image for that matter)
3. Select the module position as User-4 (That's the header)
4. Play around with CSS to give it an exact position.

* Try keeping the module position as absolute in CSS
* Make sure that you position the elements in user-4 appropriately for the button to work

Thanks
Nikky

[jomungos]

Hi

Thanks you.

I would not know how to create a module. I found in joomla a module called "display any button" and used user4 but it does not go where I need it. Please take a look. www.mungosmarket.co.uk

Could you tell me how I could position this mod.

Thanks Joanne

[nikkyg]

Hi,

Right now the image/button is tagged along the search button.

All I can suggest right now is to make changes to the 'template.css' file
For doing that log in to the Joomla backend :
1. Extensions -> Template Manager
2. Check what is your default template (Location -> Site & Default * is highlighted)
3. Click on 'Templates' on the top where it says Styles | Templates
4. Click on <your template> details
Note: If you are not too sure of what you are about to do and would like to keep a backup.. Copy the entire code and keep it in a text editor on your local machine. You may always go back to the CSS file and replace the entire code with the one that you saved.
5. Towards the right it would say Stylesheets - Select "Edit css/template.css"
6. Search for: #ja-search
7. Replace the code within immediate braces after '#ja-search' with the one provided below - it would take the button to a seemingly better place.
8. Hit 'Save'
9. Play around with 'margin-top' and 'right' attributes to find a decent position to your liking.

/* If you want to get rid of the magnifying glass button try this code */
#ja-search {
background: none repeat scroll 0 0 transparent;
margin-top: -120px;
padding-left: 20px;
position: absolute;
right: 150px;
}

/* If you want to keep the magnifying glass there try the one below */
#ja-search {
background: url("../images/icon-search.gif") no-repeat scroll left center transparent;
margin-top: -120px;
padding-left: 20px;
position: absolute;
right: 150px;
}

/* You may further change the values of 'right' attribute (increase it to take it to left) */
/* You may also change the value of 'margin-top' attribute (move it towards 0 for moving it down) */

Hope this helps!

[jomungos]

Hi Nikky

Thank you very much! Fantastic! It's taken me days to try and work that one out.

Thank you again

Jo