Joomla Templates Club 406,261 posts

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

#722554

Hi @tomc

No problem at all, I’m very grateful for the above and beyond help from everyone at JA. 🙂

Thanks,
Richard

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

#753936

Hi @tomc

No problem at all, I’m very grateful for the above and beyond help from everyone at JA. 🙂

Thanks,
Richard

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#723313

Hi @gringo211985,

Unfortunately, in order to achieve your goal (to make the layout like this), we will have to adjust almost everything for both desktop and mobile layout so I’m afraid that you might have to hire a developer to implement it for you.

Otherwise, we can guide you to add more positions and adjust the default layout a little bit.

1. To make the left / right sidebar sticky when scroll down, please open file templatesubertplsblocksmainbodytwo-sidebar.php then look for this line :

<div class="t3-sidebar t3-sidebar-1 col-xs-6 col-md-3 col-md-pull-6 <?php $this->_c($vars['sidebar1']) ?>">

and update as below :

<div class="t3-sidebar t3-sidebar-1 col-xs-6 col-md-3 col-md-pull-6 <?php $this->_c($vars['sidebar1']) ?>" data-spy="affix" data-offset-top="250">

the same for right sidebar :

<div class="t3-sidebar t3-sidebar-2 col-xs-6 col-md-3 <?php $this->_c($vars['sidebar2']) ?>">

update as below :

<div class="t3-sidebar t3-sidebar-2 col-xs-6 col-md-3 <?php $this->_c($vars['sidebar2']) ?>" data-spy="affix" data-offset-top="250">

the attribute data-spy=”affix” is to apply fixed position to this block and data-offset-top=”250″ indicate that the fixed position only applied when visitor scroll down 250px from top.

2. Next, open file templatesubercsscustom.css (if you don’t have this file, just create a new one) then add this code :

.t3-sidebar.t3-sidebar-1.affix {
top: 50px;
left: 0;
right: auto;
}
.t3-sidebar.t3-sidebar-2.affix {
top: 50px;
right: 0;
}

This is only a basic step to achieve your goal, for further customization, you might have to adjust it by yourself.

1 user says Thank You to Adam M for this useful post

1. TomC

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#754021

Hi @gringo211985,

Unfortunately, in order to achieve your goal (to make the layout like this), we will have to adjust almost everything for both desktop and mobile layout so I’m afraid that you might have to hire a developer to implement it for you.

Otherwise, we can guide you to add more positions and adjust the default layout a little bit.

1. To make the left / right sidebar sticky when scroll down, please open file templatesubertplsblocksmainbodytwo-sidebar.php then look for this line :

<div class="t3-sidebar t3-sidebar-1 col-xs-6 col-md-3 col-md-pull-6 <?php $this->_c($vars['sidebar1']) ?>">

and update as below :

<div class="t3-sidebar t3-sidebar-1 col-xs-6 col-md-3 col-md-pull-6 <?php $this->_c($vars['sidebar1']) ?>" data-spy="affix" data-offset-top="250">

the same for right sidebar :

<div class="t3-sidebar t3-sidebar-2 col-xs-6 col-md-3 <?php $this->_c($vars['sidebar2']) ?>">

update as below :

<div class="t3-sidebar t3-sidebar-2 col-xs-6 col-md-3 <?php $this->_c($vars['sidebar2']) ?>" data-spy="affix" data-offset-top="250">

the attribute data-spy=”affix” is to apply fixed position to this block and data-offset-top=”250″ indicate that the fixed position only applied when visitor scroll down 250px from top.

2. Next, open file templatesubercsscustom.css (if you don’t have this file, just create a new one) then add this code :

.t3-sidebar.t3-sidebar-1.affix {
top: 50px;
left: 0;
right: auto;
}
.t3-sidebar.t3-sidebar-2.affix {
top: 50px;
right: 0;
}

This is only a basic step to achieve your goal, for further customization, you might have to adjust it by yourself.

1 user says Thank You to Adam M for this useful post

1. TomC

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

#723509

Hi @adam M

That works to get the 2 sidebars sticky without them moving, thank you for the help.

Quick question, do you think it would be possible to use the block from Techzone for the left sidebar menu? That menu is near perfect to how I want and was thinking it may be possible to port it into Uber.

Thanks for the help, it’s much appreciated I’m sure I’ll get there with this.

Thanks,
Richard

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

#754064

Hi @adam M

That works to get the 2 sidebars sticky without them moving, thank you for the help.

Quick question, do you think it would be possible to use the block from Techzone for the left sidebar menu? That menu is near perfect to how I want and was thinking it may be possible to port it into Uber.

Thanks for the help, it’s much appreciated I’m sure I’ll get there with this.

Thanks,
Richard

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

#723540

Hi @tomc @adam M

I have created a new layout file and have gotten this far,

(note; the sidebar-2 does show on the right hand side if you check the site)

I don’t suppose you guys could help me with a couple of things?

1. I need help to set the “position-0, sidebar-1, sidebar-2” to sticky/fixed position (I tried Adams previous fix, but it’s not working)

2. On mobile and small screens under 380px the layout seems to break. Above 380px and it works perfect see screenshot below,

Once I have figured out these bits I should be good to go on the styling, which hopefully I won’t need help with 🙂

The file that contains the layout is /tpls/blocks/mainbody/phanes-two-sidebar.php I would really appreciate if you guys could help me fix these bits and I will be forever in your debt 🙂

Thanks,
Richard

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

#754095

Hi @tomc @adam M

I have created a new layout file and have gotten this far,

(note; the sidebar-2 does show on the right hand side if you check the site)

I don’t suppose you guys could help me with a couple of things?

1. I need help to set the “position-0, sidebar-1, sidebar-2” to sticky/fixed position (I tried Adams previous fix, but it’s not working)

2. On mobile and small screens under 380px the layout seems to break. Above 380px and it works perfect see screenshot below,

Once I have figured out these bits I should be good to go on the styling, which hopefully I won’t need help with 🙂

The file that contains the layout is /tpls/blocks/mainbody/phanes-two-sidebar.php I would really appreciate if you guys could help me fix these bits and I will be forever in your debt 🙂

Thanks,
Richard

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#723599

Hi @gringo211985,

1. Yes, it’s possible to migrate the block on JA Techzone to your site but in my opinion, customize your current layout to add sidebar there is less complicated than migrate from another template.

2. Currently, the sidebar-2 was adjusted to stay on right side, you can try to switch position of sidebar-2 with main content in file templatesubertplsblocksmainbodytwo-sidebar.php but please note that, you will have to customized the template CSS rules to match with new layout as well.

3. Yes, indeed. As you customized the layout, you will have to adjust it for tablet / mobile layout too. If you don’t want to touch default style, you can write your own custom CSS rules in custom.css file as mentioned before for tablet / mobile layout.

4. I gave you an example about how to make any block as fixed position when scroll in previous reply already, so you might want to work around with it. I’m afraid that is all we can assist you now as such customization task is beyond our support scope. For further customization, you might want to hire a developer to do it for you if you’re not familiar with this task instead.

1 user says Thank You to Adam M for this useful post

1. TomC

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#754129

Hi @gringo211985,

1. Yes, it’s possible to migrate the block on JA Techzone to your site but in my opinion, customize your current layout to add sidebar there is less complicated than migrate from another template.

2. Currently, the sidebar-2 was adjusted to stay on right side, you can try to switch position of sidebar-2 with main content in file templatesubertplsblocksmainbodytwo-sidebar.php but please note that, you will have to customized the template CSS rules to match with new layout as well.

3. Yes, indeed. As you customized the layout, you will have to adjust it for tablet / mobile layout too. If you don’t want to touch default style, you can write your own custom CSS rules in custom.css file as mentioned before for tablet / mobile layout.

4. I gave you an example about how to make any block as fixed position when scroll in previous reply already, so you might want to work around with it. I’m afraid that is all we can assist you now as such customization task is beyond our support scope. For further customization, you might want to hire a developer to do it for you if you’re not familiar with this task instead.

1 user says Thank You to Adam M for this useful post

1. TomC

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

#723666

<em>@Adam M 501555 wrote:</em><blockquote>Hi @gringo211985 ,

. . . I’m afraid that is all we can assist you now as such customization task is beyond our support scope. For further customization, you might want to hire a developer to do it for you if you’re not familiar with this task instead.</blockquote>

If you decide to go this route, gringo, try posting your project on –> JOOMLANCERS

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

#754158

<em>@Adam M 501555 wrote:</em><blockquote>Hi @gringo211985 ,

. . . I’m afraid that is all we can assist you now as such customization task is beyond our support scope. For further customization, you might want to hire a developer to do it for you if you’re not familiar with this task instead.</blockquote>

If you decide to go this route, gringo, try posting your project on –> JOOMLANCERS

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

#723668

Hi @tomc @adam M

I thought it was better to learn rather than hiring a dev, that way in the future I don’t need to ask for help.

I did manage to finish the position layout, (see video for sneak peek)

I just have one little problem with CSS in the top menu if you wouldn’t mind helping where near the end of the video you will notice the header jumps and the background elements are visible, how can I fix that so there’s no jumping?

Thanks again for the help,
Richard

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

#754160

Hi @tomc @adam M

I thought it was better to learn rather than hiring a dev, that way in the future I don’t need to ask for help.

I did manage to finish the position layout, (see video for sneak peek)

I just have one little problem with CSS in the top menu if you wouldn’t mind helping where near the end of the video you will notice the header jumps and the background elements are visible, how can I fix that so there’s no jumping?

Thanks again for the help,
Richard

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

#723817

Hi guys,

I’ve managed to fix the layout now, I have all of the positions in place and I have fixed the header jumping issue by adding the following to my custom.css,

.uber-header.highlight-color {
border-color: #0089CE !important;
position: fixed;
}

All I have to do now is my css styling to give it a nice look and once finished I may submit to site of the month, depending on how nice it looks 🙂

Thanks again Tom and Adam, you guys pointed me in the right direction and now I’ve learned a lot more about t3 and layouts using php, I also learned about the col-md-push setting too which is extremely important when creating layouts.

In all honesty it’s not that difficult once you’ve spent a lot of time researching and I’m not confident I can layout pretty much any grid format I want 🙂

Thanks,
Richard

1 user says Thank You to gringo211985 for this useful post

1. TomC

[Author]

Posts