T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. alfredopacino
  2. Sherlock Holmes
  3. General Discussion
  4. Sunday, 05 October 2014
  5.  Subscribe via email
hi, i want to add a module fixed on right (like facebook) it's ok so long.
But since the desktop size container has width: 1196px;
i set for my fixed module
@media (max-width: 1550px){.fixedmodule{display:none}}

obiouvsly that size is too much, nobody noticed that module but the users with fullhd resolution.
So i want to use the facebook solution: a padding-right (or margin) to the "whole site".
In this way, like facebook, the whole site container it isn't exactly centered but a little on the left..
But i need some t3 expert for doing that safely, it's not so easy as it looks...

The attachment explains the problem, the first screen is what i have, the second what i would to have
Attachments (1)
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi,

i mean it's more a bootstrap question and not t3. You're absolutely right, it's not so easy as it looks... I've really much experience with bootstrap and know that adding "padding to the whole site" will produce really many exceptions in responsive design (especially in mobile view). But nothing is impossible...

I have not too much time to give you an example but here is some ideas how to handle it.

1. use a full size container instead of normal container (.container-fluid class). We need the full width of the screen. So you need to override the default blocks (http://t3-framework.org/documentation/new-features#isolate-template) included in your template. In each block you need to change the 'container' class with 'container-fluid' class
2. We want some space on left side so you need to use the 'offsetting columns' (http://getbootstrap.com/css/#grid-offsetting). Maybe 'col-md-offset-1' is enough. You need to put it to the main body block.
3. Create your 'fixed' module with the sidebar position (sidebar-2 for right side)

After this modifications (i know it's a lot) you can use the affix plugin (from bootstrap) for your 'fixed' module. Just look at the bootstrap site with affix plugin on the right. http://getbootstrap.com/css/#grid

How i said, i can give you just some ideas but with a little bit work you can easily handle your 'problem'.

Regards,
Eugen
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
thanks, tomorrow i will take a look to your instruction..mean while, i didn't know i can override the blocks, it's a huge news for me, not just for this "hack" :)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
i sent you the site url, you can see the fixed module when you login user:t3support password:t3support
just to be sure your solution is doable :)
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
i tried "live" your solution, but i don't get where to place col-md-offset-1, as you can see i dont have a "main body" (if i get what you mean) there are some indipendent sections..
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Hi again,

damn, you are using bootstrap 2 and not 3! I mean you use the "old" t3. That is why you don't have the 'main body' and you also cannot use col-md-offset-1 and cannot override the blocks.

Hmm i need to think about it
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
yep, i know and i forgot to say.. :/
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
(i deminified all the css and js, please try to figure it out.. :) )
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.