Link to home
Start Free TrialLog in
Avatar of Paul Risko
Paul RiskoFlag for United States of America

asked on

Joomla - Add a new postion

So I've found info on how to add positions but none on how to move them around. I would like to add a position between the top left logo and position top (on the right).
http://orderfiltersnow.com/index.php?id=17&tp=1

Thanks!
Avatar of Leo Alexander
Leo Alexander
Flag of United States of America image

Hi,

Have you tried to modify the .css template for the template you are using? I believe it is: css/template.css
Avatar of Peter Hart
I assume you have edited the file in your template folder:
templateDetails.xml
and added a new position (say):
<position>My_new_position</position>

you then need to add to Index.php  the following code where you want position to be:

<jdoc:include type="modules" name="My_new_position" />

between the top left logo and the position top
Avatar of Paul Risko

ASKER

So I've added that. But how do you get it in between the logo and position top?
I think ( I haven't done this in a while)

look at the index.php file in the template folder you are changing and edit it and place


if ($view->containsModules(My_new_position))
  echo $view->position('My_new_position', 'some-style');


between the logo and the top position
you may need to write some CSS styles to do this depending on the template (some-style)
I can get it added and centered but then that forces the position top down.
do you know how to use firefox or chrome to change css styling of a web page locally?
so..if you use Chrome to display the page, then right click on the position top and 'inspect element' and see if there is any CSS style that can be changed or is there is style of the new position that can be changed .
Yeah. I'm still not sure what to change.
I had what I wanted by changing line 5528 in template.css to
.row-fluid .span9 {
width: 30%;
float: right;

But this obviously debunks the fluid layout and makes the rest of the page look a wreck.
yeah you may have to take a bit of space from the surrounding top and logo for the new position
so reducing some percentage but adding it to the new style for the new position so the total stays the same
can't advise much more than that without seeing the site.
http://orderfiltersnow.com/

I'm not making much progress.
well it looks ok to me  but then  where do you want the new position ? and what will you eventually put in that position?
It pushes position top down. It's not between the two. If I add more text it will continue to push position top down.

I want the new position between the logo and position top.

Another logo in my new position.

Thanks.
what's at "position top" ?
SOLUTION
Avatar of Peter Hart
Peter Hart
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Changing span 9 will mess the main content of the page.
I see, I  didn't look further down. the header usually has CSS just for the header.
you need to copy the span9  style and create a new style and call it say toprighheader and use that to wrap round the search and the social buttons.

maybe create a new set of styles for the header and use them.  (copy the ones that are there and change the names)
Which span9 style do I copy?
Would making the logo span to the edge of "position top" be easier? It has to look good on a mobile phone. The logo image would span that area. So it would be 650x 40 or something.
Any further instructions would be greatly appreciated.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I took it off.

If I get the css right  how do I write that on the index.php page?

<div id="My_new_position" class="mynewclass">
<jdoc:include type="modules" name="My_new_position" />
</div>
I usually do it by trial and error and use Chrome or Firefox to locally change the CSS until it works and then put the changers into the code.
Anyway you can elaborate on your solution?

Is my <div class="span3"> going to be the new one be div class="spanNEW"> ?
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I don't mind you closing the question but I object to the statement "I figured it out on my own. No one contributed anything I didn't already know."
I'm pretty sure you did learn from this.
I figured it out on my own. No one contributed anything I didn't already know.
the first half of the answers helped you add the new position.
the second half of the answers helped you understand the use of CSS.

accepting your own  final understanding is a bit selfish
I did learn from this but I never added the position successfully as intended.
You did help me chilternPC. I'd like to award you the points but I don't want this to show up as solved when it was not solved.
The final result was swapping spans. While not exactly what I was looking for, it will work.