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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Paul RiskoAuthor Commented:
So I've added that. But how do you get it in between the logo and position top?
0
Exploring SQL Server 2016: Fundamentals

Learn the fundamentals of Microsoft SQL Server, a relational database management system that stores and retrieves data when requested by other software applications.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Joomla

From novice to tech pro — start learning today.