Public Forums 71,145 posts

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#194607

Hi, I would like to assign a module which is only visible when a smartphone/tablet is being used.

For example: I would like to put a module in the off-canvas position which is only visible for smartphone/tablet users.

Is this possible?

[musicinme Friend musicinmeJoin date: September 2009Posts: 70Downloads:3Uploads:9 Thanks: 6 Thanked: 50 times in 23 posts]

#521875

Hi,

according to bootstrap docs http://getbootstrap.com/css/#responsive-utilities

you should add following classes to Module Class Suffix (in any module settings page)

visible-xs visible-sm – visible on small

or

hidden-md hidden-lg – hidden on large

Above link will provide more explanation and examples to your query 🙂

Hope it help you.

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#521893

Great 🙂 At least partially.

I got the module to hide on large devices, How do I get the module position (off-canvas) to hide as well?

[musicinme Friend musicinmeJoin date: September 2009Posts: 70Downloads:3Uploads:9 Thanks: 6 Thanked: 50 times in 23 posts]

#521895

Hide off canvas sidebar for large screen?

Open templatespurity_iiitplsblocksheader.php and find

[PHP]
<!– OFF-CANVAS –>
<?php if ($this->getParam(‘addon_offcanvas_enable’)) : ?>
<?php $this->loadBlock (‘off-canvas’) ?>
<?php endif ?>
<!– //OFF-CANVAS –>
[/PHP]

and add above classes (or any mix of them)

[PHP]
<!– OFF-CANVAS –>
<span class=”visible-xs visible-sm”>
<?php if ($this->getParam(‘addon_offcanvas_enable’)) : ?>
<?php $this->loadBlock (‘off-canvas’) ?>
<?php endif ?>
</span>
<!– //OFF-CANVAS –>
[/PHP]

Don’t forget to hit thanks button 😉

---

Attachments:

1. 

2 users say Thank You to musicinme for this useful post

1. carlosemuralles
2. fintan

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#521897

Hm… that also knocked out my navbar (mainmenu)

<blockquote><!– OFF-CANVAS –>
<span class=”visible-xs visible-sm”>
<?php if ($this->getParam(‘addon_offcanvas_enable’)) : ?>
<?php $this->loadBlock (‘off-canvas’) ?>
<?php endif ?>
<!– //OFF-CANVAS –></blockquote>

[musicinme Friend musicinmeJoin date: September 2009Posts: 70Downloads:3Uploads:9 Thanks: 6 Thanked: 50 times in 23 posts]

#521898

Strange, works perfect for me.
Then undo all changes, open purity_iiitplsblocksoff-canvas.php and change

<button class=”btn btn-default off-canvas-toggle

to

<button class=”visible-xs visible-sm btn btn-default off-canvas-toggle

same effect only hide toggle button.

Don’t forget to hit thanks button

1 user says Thank You to musicinme for this useful post

1. fintan

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#521899

Great 🙂
Only one slight glitch, the off-canvas appears inside the logo. Nothing big, just silightly bothering.

Speaking of which, how do I change that Icon? someone here told me to do this:
<blockquote>Open “tpls/blocks/off-canvas.php”, there you will see the markup of Off-Canvas.</blockquote>

That is not really helpful.

I am not great with PHP, as you have probably noticed 😉

[musicinme Friend musicinmeJoin date: September 2009Posts: 70Downloads:3Uploads:9 Thanks: 6 Thanked: 50 times in 23 posts]

#521900

Yes, open that file, and change

<i class=”fa fa-bars”></i>

to whatever you want, i.e:

<i class=”fa fa-heart”></i>

List of available icons http://fortawesome.github.io/Font-Awesome/icons/

Don’t forget to hit thanks button 😉

---

Attachments:

1. 

1 user says Thank You to musicinme for this useful post

1. fintan

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#521904

Great again 🙂 Now just one last issue. Is the any way to get this icon: fa-phone-square

Out of the logo and on to the same line as the menu button?

http://www.intitaxi.ch/Test/

I owe you a large whatever 🙂

[musicinme Friend musicinmeJoin date: September 2009Posts: 70Downloads:3Uploads:9 Thanks: 6 Thanked: 50 times in 23 posts]

#521928

Sure, this is exactly the same issue I’ve had yesterday.

open style.less and change

.logo {
padding: 0;
margin: 0;

a {
display: inline-block;
line-height: 1;
margin: 0;
}
}

to

.logo {
padding: 0 0 0 100px;;
margin: 0;
float: left;

a {
display: inline-block;
line-height: 1;
margin: 0;
}
}

you can adjust paddings to your needs.

In my case I created small logo which is more suitable for mobile view, and I’ve added additional classes for logo (like mentioned already visible-xs visible-sm, etc…). So when user is viewin the page on small device, the big logo is replaced by smaller one.

1 user says Thank You to musicinme for this useful post

1. fintan

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#522037

Hmm…that moved my whole logo over to the right but left the icon where it was.

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#522133

Hi,

I made the Fix for you, I have just added this code to this path directly /t3-assets/dev/themeintitaxi/templates.purity_iii.less.style.less.css

@media screen and (max-width: 980px) {
.logo-img { width: 85% !important; }
.logo-image { width: 289px; height: 86px; position: absolute; border: none !important; left: 0 !important;}
#t3-mainnav .off-canvas-toggle { right: 17%; }
.t3-mainnav > .container { height: 85px;}
}
@media screen and (max-width: 900px) {
.logo-img { width: 85% !important; }
.logo-image { width: 289px; height: 86px; position: absolute; border: none !important; left: 0 !important;}
#t3-mainnav .off-canvas-toggle { right: 15%; }
.t3-mainnav > .container { height: 85px;}
} @media screen and (max-width: 800px) {
.logo-img { width: 85% !important; }
.logo-image { width: 289px; height: 86px; position: absolute; border: none !important; left: 0 !important;}
#t3-mainnav .off-canvas-toggle { right: 10%; }
.t3-mainnav > .container { height: 85px;}
} @media screen and (max-width: 360px) {
.logo-img { width: 75% !important; }
.logo-image { width: 289px; height: 86px; position: absolute; border: none !important; left: 0 !important;}
#t3-mainnav .off-canvas-toggle { right: 50px; }
.t3-mainnav > .container { height: 85px;}
}

Please check your site and confirm, if everything is as good as you suggested.

1 user says Thank You to chavan for this useful post

1. fintan

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#522373

Thanks Chavan. I’ll present this to my client 🙂

[fintan Friend fintanJoin date: October 2011Posts: 50Downloads:4Uploads:0 Thanks: 13 Thanked: 2 times in 1 posts]

#522735

Just one thing, I just went back to test again before I present this tomorrow.
when I click one the menu icon the menu is transparant and vritually not readable.

I need it as it was before with a blue (site background) BG.

Thanks again 🙂

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#522763

Go to this File : /t3-assets/dev/themeintitaxi/templates.purity_iii.less.style.less.css

Replace this code

@media screen and (max-width: 980px) {
.logo-img { width: 85% !important; }
.logo-image { width: 289px; height: 86px; position: absolute; border: none !important; left: 0 !important;}
#t3-mainnav .off-canvas-toggle { right: 17%; }
.t3-mainnav > .container { height: 85px;}
}

with

@media screen and (max-width: 980px) {
.logo-img { width: 85% !important; }
.logo-image { width: 289px; height: 86px; position: absolute; border: none !important; left: 0 !important;}
#t3-mainnav .off-canvas-toggle { right: 17%; }
.t3-mainnav > .container { height: 85px;}

#t3-mainnav .navbar-nav a{
background: #203272
}

#t3-mainnav .navbar-nav a:hover{
background: #AAB7E7
}
}

1 user says Thank You to chavan for this useful post

1. phong nam

[Author]

Posts