[SOLVED] Fine tuning User Profile layout

Hi Kyle,

I am trying to edit the layout of my users' profile page. I have placed the Avatar, User Status and Menu (edit profile button) tabs, one under the other in the L1C1 position and all the other tabs in the L1C2 position - see attached file 'current-layout.jpg'.

I need to change the CSS so that the L1C2 position is aligned just to the right of L1C1 (without the big gap) and also make the L1C2 position extend right to fill the remaining available width - see attached file 'desired-layout.jpg'.

I also need to fine tune the position of the User Profile Page Title and the [Edit] profile button.

I've been trying to figure out how to do this using FireBug but am not having any success.

I'm using the Luna profile template.

Can you help?

Thanks,

Phil.

You should be just using the Left and Middle or Middle and Right positions to have that display. Aside from that you'll need to inspect the page using Chrome or Firebug for Firefox to review and alter the CSS as needed.

Ok - setting the various tab positions to either Left Side (of middle area) or Right Side (of middle area) gives me a very similar layout to the my earlier attached file 'desired-layout.jpg) but the large gap between the two blocks remains.

Inspecting these elements with Firebug/Firefox I can see (in the Firebug HTML panel) that each block has its width set to 49%. Changing (the HTML in Fidebug) cbPosLeft parameter to 25% and cbPosRight to 75% gives me exactly the layout I want! *However* I still cannot locate what bit of the Luna template.css file I need to edit to make these changes permenant. I'm not familliar with CSS and would really appreciate a little help!

Thanks,

Phil.

I finally figured out how to edit the layout of the User Profile page (Luna template) from the default cbPosLeft: 49% / cbPosRight: 49% layout.

You can either edit the CSS file directly: components/com_comprofiler/plugin/templates/luna/template.css

Note - the header remarks in the Luna template.css contain the following warning - /* Name: Luna. DO NOT MODIFY: also used for backend. */ ...so treat this hack with caution!

---

Original template.css:
Line 97 .cbPosLeft, .cbPosGrid { float: left; text-align: left; }
Line 99 .cbPosRight { float: right; text-align: right; }
Note - the default width for both of these two elements is 49%.

Edited template.css:
Line 97 .cbPosLeft, .cbPosGrid { float: left; text-align: left; width: 25% !important; }
Line 99 .cbPosRight { float: right; text-align: right; width: 75% !important; }
Note - if you don't include "!important" then your new width settings will be overwritten by other css elsewhere - I nearly went crazy until I discovered this trick!

---

**OR** as I later discovered...!... just go to your CB Comfiguration Manager - User Profile tab and set the '2 colums layout widths:' to 'Left: 25% Right: the rest!'

The learning curve can be a tough climb sometimes!