How to change the size of the entry box of a search module?

Question

I am quite new to Joomla, and for me it is still difficult to move around, for example to change the style of some module or template by searching through the folders in the file system, but I guess that, this time, the only option is to modify directly the code.

I am using the template Purity III and a module called Search for a search box. I have placed this last one on the top right corner of the template, in the main menu, but the problem is the size of (the font and) cursor of the search box, as you can see from the following picture:

I guess this is a problem related to the template (and not the module), because if I put the search module in another position, the cursor's size has the "right" proportions.

So, I guess I need to modify the template's code somewhere, but I really don't know where, there tons of .css files long thousands of lines... These are basically the contents of the Purity 3 template's folder

Since I am not a php programmer, even if I can understand part of its syntax, this doesn't help too much, but I guess I have just to modify a .css file, so I would need to go into the css folder...

Apart from this, is there a tutorial that explains how easily we can find and modify the files directly of a templte/module/extension, at least a guide that explains what the folders usually contain, etc?

Answer 1

I managed to do it, so I will describe the process that I followed, in case other newbies like me have similar problems. I am on a Mac OS X, and I am using Safari, which allows me to inspect the code and modify it in real time. The process should be similar with Chrome/Firebug/Dev Tools...

First, I opened the website page with the search box. Over the search box, I right-clicked, and I selected Inspect Element, like in the following picture (note that in the picture, the style of the search box/cursor has already been modified!)

and an integrated window pops up with both the html and css code related to the element we want to inspect, that is the search box. The html code that we are interest in should by default be highlighted, like in the following picture

On the right side, the code related to this html element should also appear, and this is actually the code that I modified. In the css code, click on template.css:2582, like in the following picture:

The middle editor should now be set to edit the css code (instead of the html code), like in the following picture:

Try to modify the code and see the results immediately. Note that these modifications will not change the actual files with the code, you have to do it later manually!

Note on the right side, there's a grey panel. You can see from there the file you are now modifying temporarily:

Go there, using for example the terminal, and modify the actual code with the code you want your search box to look like.

You my need to change the file permissions to make that file writable.

I had also to modify the file with the same name (template.css), under /templates/purity_iii/css/. Don't ask me why, but if I didn't, it would have not worked.