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!
LVL 2
Paul RiskoAsked:
Who is Participating?
 
Paul RiskoAuthor Commented:
I switched span3 to span9 and span 9 to span 3.  That will allow me to fill in the blank area between the two positions. I never could get the new position to work right.
0
 
Leo AlexanderCommented:
Hi,

Have you tried to modify the .css template for the template you are using? I believe it is: css/template.css
0
 
Peter HartCommented:
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
0
Improve Your Query Performance Tuning

In this FREE six-day email course, you'll learn from Janis Griffin, Database Performance Evangelist. She'll teach 12 steps that you can use to optimize your queries as much as possible and see measurable results in your work. Get started today!

 
Paul RiskoAuthor Commented:
So I've added that. But how do you get it in between the logo and position top?
0
 
Peter HartCommented:
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)
0
 
Paul RiskoAuthor Commented:
I can get it added and centered but then that forces the position top down.
0
 
Peter HartCommented:
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 .
0
 
Paul RiskoAuthor Commented:
Yeah. I'm still not sure what to change.
0
 
Paul RiskoAuthor Commented:
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.
0
 
Peter HartCommented:
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.
0
 
Paul RiskoAuthor Commented:
http://orderfiltersnow.com/

I'm not making much progress.
0
 
Peter HartCommented:
well it looks ok to me  but then  where do you want the new position ? and what will you eventually put in that position?
0
 
Paul RiskoAuthor Commented:
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.
0
 
Peter HartCommented:
what's at "position top" ?
0
 
Peter HartCommented:
ok got it.

if you change the width in
"row-fluid .span9"  to  width:40%;
and add
float:right;
its in template.css (line 5389)
and change the width in
".row-fluid .span3"  to width: 30%;
also in template.css (line 5553)

should work

basically span3, My_new_position and span9 need to share 100%
the span9 needs to float right
0
 
Paul RiskoAuthor Commented:
Changing span 9 will mess the main content of the page.
0
 
Peter HartCommented:
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)
0
 
Paul RiskoAuthor Commented:
Which span9 style do I copy?
0
 
Paul RiskoAuthor Commented:
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.
0
 
Paul RiskoAuthor Commented:
Any further instructions would be greatly appreciated.
0
 
Peter HartCommented:
find these  line 5528 of template.css

.row-fluid .span9 {
  width: 74.468085099%;
}
and line 5389 of template.css

.row-fluid .span3 {
  width: 23.404255317%;
}

and copy them and create a new one for the new position and between the 3 of them use up the  100%.
also check the device changes, maybe something like  @media screen and (max-width:300px)   and at these breakpoints the styles will be redefined for the screen size and adjust them to suit.

I can't seen that lnew posiotion on your link anymore
0
 
Paul RiskoAuthor Commented:
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>
0
 
Peter HartCommented:
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.
0
 
Paul RiskoAuthor Commented:
Anyway you can elaborate on your solution?

Is my <div class="span3"> going to be the new one be div class="spanNEW"> ?
0
 
Peter HartCommented:
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.
0
 
Paul RiskoAuthor Commented:
I figured it out on my own. No one contributed anything I didn't already know.
0
 
Peter HartCommented:
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
0
 
Paul RiskoAuthor Commented:
I did learn from this but I never added the position successfully as intended.
0
 
Paul RiskoAuthor Commented:
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.
0
 
Paul RiskoAuthor Commented:
The final result was swapping spans. While not exactly what I was looking for, it will work.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.