Search box position.

[Georld.com]

Hello everyone!I am relatively new to the whole idea of web developing,and I am currently learning most of the things.I've created a website using joomla,but I constantly have this problem,which I cannot find how to solve.Basically joomla has its administrator control panel where you can edit some things,but if you want to edit more than the basic you have to locate,and edit css or html (correct me if Im wrong). And this is where my problem starts. Although I can sometimes edit something using firebug tool of the browser,I cannot find the css file (through FTP) to edit and make my changes permanent.Could you please show me how I can do that step by step?What I am currently trying to do is change the position of the search box (I am trying to do exactly what this website here has done with its search box,so top right corner),but there is only one ''module position'' as its called in joomla,and this is the ''nav'' position.Once the search box is placed in the nav position,it is being placed directly underneath the home tab (as seen in the screenshot).You can see in the screenshot where I would like it to be with red letters.The website is: http://www.georld.com/Help guys !

[niche]

Here's the tutorial that will tell you how to find your css. Even if someone just gave you the correction you probably need, you'd still have to know how to find your css to make the change.

 

This willl show you how to find it:

 

http://www.w3schools.com/css/css_howto.asp

[dsonesuk]

Its in the templates folder, under your theme, in its css folder usually called template.css.But you also edit it in backend, template manager, select what would be your template and you should have list of css appear where can select and edit.

Edited September 15, 2015 by dsonesuk

[Georld.com]

Here's the tutorial that will tell you how to find your css. Even if someone just gave you the correction you probably need, you'd still have to know how to find your css to make the change.

 

This willl show you how to find it:

 

http://www.w3schools.com/css/css_howto.asp

 

 

Its in the templates folder, under your theme, in its css folder usually called template.css.But you also edit it in backend, template manager, select what would be your template and you should have list of css appear where can select and edit.

Thank you both for your answers.-Niche: the article you provided me shows how to insert CSS (if Im correct) not how to locate it. I've read it through and now I have some rough idea how to insert it,but I still dont understand how to find it ?-dsonesuk: I looked in the template.css file for the div: div.search. It doesnt exist (or my Notepad++ is buggered).Also,I do not know which value to put,so that the element will go to the right. I tried float: right; although all it does it slightly move the search box up.Also on the second attachment,you can see the supposedly source of the css file. It doesn't exist (using Filezilla).

Edited September 16, 2015 by Georld.com

[dsonesuk]

That is a css cached file, it combines all your css files together and minifies them, what you should do is as i suggest and identify your template folder then look for template.css in css folder, that is more than likely the one with css for search box, you amend that file, save it, then you have to clear you joomla cache so the css files are re-cached and your amendments will show, you also have the option to select developer mode, where the cache is turned off, and works directly from individual css files.

[Georld.com]

That is a css cached file, it combines all your css files together and minifies them, what you should do is as i suggest and identify your template folder then look for template.css in css folder, that is more than likely the one with css for search box, you amend that file, save it, then you have to clear you joomla cache so the css files are re-cached and your amendments will show, you also have the option to select developer mode, where the cache is turned off, and works directly from individual css files.

Ok, I have found the template.css file. Could you please tell me what css I should add in it ?

[dsonesuk]

Actually what you could do is just add class to menu container and search button container so they fit properly using percentage widths, it uses 12 grid layout so changing or adding

<div class="moduletable_menu">

to

<div class="moduletable_menu span10">

and

<table cellspacing="0" cellpadding="0" class="moduletable">

to

<table cellspacing="0" cellpadding="0" class="moduletable span2">

should fix the problem

[Georld.com]

Actually what you could do is just add class to menu container and search button container so they fit properly using percentage widths, it uses 12 grid layout so changing or adding

<div class="moduletable_menu">

to

<div class="moduletable_menu span10">

and

<table cellspacing="0" cellpadding="0" class="moduletable">

to

<table cellspacing="0" cellpadding="0" class="moduletable span2">

should fix the problem

 

Works perfect using firebug.However I cannot locate those lines in the template.css file. Here is my template css file:

Edited September 17, 2015 by Georld.com

[dsonesuk]

You do not edit css, you edit html, depending on joomla version (vast difference from 2 and 3) you can find thes html element and add class to index.php or find modules, menu and add/select these classes from backend.

[Georld.com]

You do not edit css, you edit html, depending on joomla version (vast difference from 2 and 3) you can find thes html element and add class to index.php or find modules, menu and add/select these classes from backend.

Sorry there are no html files in my website. They are either php,or css. I am literally lost when trying to find files. Where do I start from ? This is why I am here because I don't know.

[dsonesuk]

NOT HTML file name, html coding which is found in index.php see http://www.favthemes.com/tutorials-developers/49-how-to-change-the-width-of-the-menu.html step 3 to edit index.php, you will have to find elements shown in post #7 add add span class as shown.

[Georld.com]

NOT HTML file name, html coding which is found in index.php see http://www.favthemes.com/tutorials-developers/49-how-to-change-the-width-of-the-menu.html step 3 to edit index.php, you will have to find elements shown in post #7 add add span class as shown.

I did find the element: fav-nav,and once change the value to span 8 (which is smaller) the whole nav bar got smaller,but the search box stayed where it currently is (under the home button).The element: <table cellspacing="0" cellpadding="0" class="moduletable"> Does not exist in the index.php file,so I cannot edit it.

[dsonesuk]

Tell me you didn't change it to span8, but ADDED span8 and not span 8.What you should be able to do is look up main menu and search modules in module manager and add required class under the module class input box.

[Georld.com]

Tell me you didn't change it to span8, but ADDED span8 and not span 8.What you should be able to do is look up main menu and search modules in module manager and add required class under the module class input box.

PROBLEM SOLVED :D !Check the website it is perfect now (lol far from perfect)! Thank you so much for your time on this ! Basically all I had to do was to go,to the module called ''main menu'' through the module manager,and in the box ''Module class suffix'' I've added the simple word ''span10'' . It did the trick I have another question now. When using the search,the results I get are slightly irrelevalnt. For example the website has the meta tag ''pearl'' in it,as long as many other words. If a user searches ''pearl'' I don't want him to see all the pages that have the ''pearl'' meta tag,but I want him to see items that are named pearl,or have pearl in their text.Also in the search refinements there are unwanted options that I would like to remove as seen in the screenshot : news feeds,contacts,brands,tags because those stuff are irrelevant. Is that possible?

[dsonesuk]

Try looking under plugin manager search for 'search' and disable unwanted search plugins 'search - news feed' etc

[Georld.com]

Try looking under plugin manager search for 'search' and disable unwanted search plugins 'search - news feed' etc

That did the trick! Thank you very much!