Joomla Templates Club 406,261 posts

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#722493

Hi @tomc

I would like to create a custom layout for module positions and I find this a little tricky. What I would like to do is create a layout that resembles the following wire-frame,

Where it says “fixed pos” means fixed position and is not scrollable, the only area to be scrollable is the middle section that is marked with “scrollable”

I would be much appreciative and forever in your debt if you can help me create the module positions and layout containers for this. 🙂

Thanks,
Richard

PS – I will be fine with the styling, just I’m not sure how to achieve the fixed positions and layout correctly

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#722542

I’ll try to assist with some of the elements … though may need some further assist from my Support Team colleagues on others.

For the fixed header section, try this . . . .

Within file path —> /templates/uber/local/acm/header/css/themes/phanes/style.css
at line 291, modify as follows:


.uber-header {
height: 52px;
position: fixed;
}

Then, at line 328, modify the “background” property to whatever color code you wish:


.uber-header.dark-color, .uber-header.none-color.affix {
background: #27292e none repeat scroll 0 0;
border-color: #2b2e2e;
}

Then, within your custom.css file, at line 24, delete the “background” property altogether
– you don’t really need it.


.uber-header.dark-color, .uber-header.none-color.affix {
border-color: transparent !important;
}

You will also need to, of course, modify the site logo and – depending on what color you chose for your header background, the menu text color(s) . . . but this should get you started.

1 user says Thank You to TomC for this useful post

1. gringo211985

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#753924

I’ll try to assist with some of the elements … though may need some further assist from my Support Team colleagues on others.

For the fixed header section, try this . . . .

Within file path —> /templates/uber/local/acm/header/css/themes/phanes/style.css
at line 291, modify as follows:


.uber-header {
height: 52px;
position: fixed;
}

Then, at line 328, modify the “background” property to whatever color code you wish:


.uber-header.dark-color, .uber-header.none-color.affix {
background: #27292e none repeat scroll 0 0;
border-color: #2b2e2e;
}

Then, within your custom.css file, at line 24, delete the “background” property altogether
– you don’t really need it.


.uber-header.dark-color, .uber-header.none-color.affix {
border-color: transparent !important;
}

You will also need to, of course, modify the site logo and – depending on what color you chose for your header background, the menu text color(s) . . . but this should get you started.

1 user says Thank You to TomC for this useful post

1. gringo211985

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#722543

Hi TomC

Thanks for this much appreciated and I thank everyone that helps towards the end goal.

Just a note; the home-page is going to remain as the “landing” style with the container slideshow, so this layout will be applied to the inner pages only.

To get started I shall set up a new theme named “phanes default” so you know which one corresponds to this thread. Then I shall make the amends you have suggested and will also set up some modules and positions as best I can to get going.

Thanks again,
Richard

PS – I shall update this thread once I have got the amends done

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#753925

Hi TomC

Thanks for this much appreciated and I thank everyone that helps towards the end goal.

Just a note; the home-page is going to remain as the “landing” style with the container slideshow, so this layout will be applied to the inner pages only.

To get started I shall set up a new theme named “phanes default” so you know which one corresponds to this thread. Then I shall make the amends you have suggested and will also set up some modules and positions as best I can to get going.

Thanks again,
Richard

PS – I shall update this thread once I have got the amends done

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#722544

<em>@gringo211985 501084 wrote:</em><blockquote>

PS – I shall update this thread once I have got the amends done</blockquote>

Yes, please do . . . So we can take it step by step. 🙂

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#753926

<em>@gringo211985 501084 wrote:</em><blockquote>

PS – I shall update this thread once I have got the amends done</blockquote>

Yes, please do . . . So we can take it step by step. 🙂

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#722549

Hi @tomc

So I have cheated a little by using the ACM to create the fixed main menu, I have added some sample modules to the positions offered by default in Uber if you see the /shop page on my site.

I think the first place to start is the left menu sidebar module, it will need to be moved so that the main menu and topbar are at the side of it like in the wire-frame. Also it will need to become sticky/fixed.

When I use,

.t3-sidebar {
position: fixed;
}

The result is,

Notice how the right hand module has now moved to the left?

So 2 questions in this part,

1. How do I move the left sidebar so the menu is to the right like in the wire-frame?
2. How can I make both sidebars fixed without the right hand module moving to the left?

Thanks again,
Richard

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#753931

Hi @tomc

So I have cheated a little by using the ACM to create the fixed main menu, I have added some sample modules to the positions offered by default in Uber if you see the /shop page on my site.

I think the first place to start is the left menu sidebar module, it will need to be moved so that the main menu and topbar are at the side of it like in the wire-frame. Also it will need to become sticky/fixed.

When I use,

.t3-sidebar {
position: fixed;
}

The result is,

Notice how the right hand module has now moved to the left?

So 2 questions in this part,

1. How do I move the left sidebar so the menu is to the right like in the wire-frame?
2. How can I make both sidebars fixed without the right hand module moving to the left?

Thanks again,
Richard

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#722550

So you want to have both the left and right columns on the right?

Or just the menu currently displaying on the left reassigned over to the right?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#753932

So you want to have both the left and right columns on the right?

Or just the menu currently displaying on the left reassigned over to the right?

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#722551

Hi @tomc

Sorry for the confusion,

The left hand menu (white uber menu) should be fixed on the left
The right module (with text “This is the right hand module”) should be fixed on the right.

Hope that clears up the confusion.

I was also thinking would it be best to create the layout like in the template manager?

To go from this

To

Thanks,
Richard

[gringo211985 Friend gringo211985Join date: May 2012Posts: 678Downloads:197Uploads:121 Thanks: 77 Thanked: 123 times in 27 posts]

#753933

Hi @tomc

Sorry for the confusion,

The left hand menu (white uber menu) should be fixed on the left
The right module (with text “This is the right hand module”) should be fixed on the right.

Hope that clears up the confusion.

I was also thinking would it be best to create the layout like in the template manager?

To go from this

To

Thanks,
Richard

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#722553

This one may take some thinking . . . it’s not simply a CSS “position: fixed” solution.

I’ll also ask a few other Support Team members to take a look and chime in.

Hang in there – we’ll figure this one out. 😎

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#753935

This one may take some thinking . . . it’s not simply a CSS “position: fixed” solution.

I’ll also ask a few other Support Team members to take a look and chime in.

Hang in there – we’ll figure this one out. 😎

[Author]

Posts