Professional Joomla templates and extensions club

cylee77

Anyone know how to change the dropdowns that come with Rational Magic into something that looks more like this site: www.divinecaroline.com? Notice there are thin borders around each dropdown.

would someone be able to point me to which part of the template I\'m supposed to change to get this?

Leckenby

Well its very hard to say really, because I don\'t know exactly how you want it, but have you used Firebug, a firefox extension? You can use it to select elements (such as suckerfish) on the page and change the CSS and HTML (in your case you want to change CSS). Try using it and achieving what you want, then work out what you changed, and transfer them into the template files

waseem

im sure you could play arround with the menu.css (menu styling in there),

control your hover states, add / remove border etc.

are you looking for help with the css or just wanted to be pointed to the right file?

Matt

deeeaaaad link

waseem

he had in mind something similar to the \"Vector\" template dropdown

link was working this afternoon

cylee77

I tried using Firebug. I am a newbie and don\'t quite understand how it all works. When I open firebug, I see the file it is pointing to, but that doesn\'t seem to be the correct file.

cylee77

I\'m looking for help with the css. I don\'t know where in the css to do this or what to change in order to achieve this. I\'m very new to development and don\'t really know how to do that much. Can you help?

I\'d like to add a border and change the colors of the dropdown menus so that each menu has a different color when it drops down. Similar to the dropdowns at this site: www.divinecaroline.com

Thanks for any help you can give me in advance.

Andy

OK, here is what you do...

1. Turn gzip off in the settings of the template - this will make editing the css easier as it wont all be in one file..
2. Install the web developer toolbar - it is similar to fireug but allows you to edit the css and see what is happening as you change things

https://addons.mozilla.org/en-US/firefox/addon/60

3. Open the site in firefox - then press \"ctrl shift e\" or look in the web developer toolbar for the css drop down and hit \"edit\"
4. Click on the menu.css tab and you will see all the css that controls the menu, try delete it and you will see the menu change in the browser.... cool hey
5. So now you can edit things and see what happens, for the menu you will start editing from the line \"/*FIRST LEVEL*/\" and on.
6. When you are done editing, just copy and replace the css with the one on your server (dont forget to backup)
8. Lastly - a useful tip... when you open the css edit view, you will notice the images on the page dissapear, this is because in the css they are referenced as \"../images/imagename.jpg\" and it needs the full path url. What i generally do when developing is replace all \"../images/\" in my css files with \"www.sitename.com/templates/rational-magic/images\" (right click on any image and click view or copy path to get this for your site)

That should get you going with editing the css easily and firebug is useful to dig around and modify the html (and css, js etc) But essentially with both tools you can edit css and html on the fly, so pretty nifty.

I may just turn this into a blog post, I would like to get your feedback on if this helps you or not. Or suggestions from anyone else?

Cheers,

Andy

cylee77

Thanks for the detailed instructions. This is really helpful.
Sorry to ask one more question, but unfortunately, I don\'t know how to turn gzip off in the settings. Is that in the Joomla admin or somewhere else? Can you tell me where to find it?

Thanks again! I really appreciate it.

Andy

In Joomla 1.5 this is in the template manager, just open the template manager and click the template thumbnail and it will load the options..

In 1.0 you have to edit the templateDetails.xml file, the details are in there..

I think this info is in the guide..