Joomla Templates Club 406,261 posts

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#199118

Hello,
I want mobile users to see a different logo from the one used in desktop view. Can this be done using the LESS files? I do not plan to “compile.” My desire is to control the look and feel separately. My CSS/desktop customizations all have been done in the custom.css file.
Thanks to anyone who knows…!
-Jim G.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#540057

Jim,

Unless you ‘compile’ doing anything in the .less files is pointless. 🙂

You’ll need to say what mobile devices i.e. pad, phone etc but you can use media queries in your custom.css to do this. However without a url I can’t help as another member. If you posted in the hidden area then a mod will have to help.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#540059

Thanks. This is new to me. Used MobileJoomla for years. I guess I’ll have to learn all about media queries. And I am still not clear what exactly happens when you “compile.” I know it overwrites the CSS files with whatever customizations were done back in the LESS files. And I have some idea how to do them. As I have understood it, those LESS files serve up the mobile view. I guess that is not correct. If not, I wonder if Joomlart would offer a tutorial about customizing mobile view. Pretty much all of us who use Joomlart know how to write/customize css.
You can view the developmental site at newmyc.com.
Do you know of a good resource to educate myself about how to use media queries with this new T3 framework?
Thanks much!
-Jim G.

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#540061

Without getting too technical LESS is a CSS pre-processor. It allows you to define blocks of variables & mixins that make CSS theme-able if you like. It doesn’t overwrite the CSS files, it forms their core or base.

In reality, if you are using templates such as JA then you may as well leave it alone and do the customisation through custom.css, that ISN’T overwritten in an update.

As to media queries that’s down to bootstrap, CSS3 and html5 – today’s standards. Doesn’t matter if it is mobile or desktop these make new sites responsive. T3 is just a framework, albeit a great framework, on top of all that.

Some good resources for are :-

http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
http://cssmediaqueries.com

What you will need to do is to add css to call one logo for large devices and another (or none) for the mobile view. For example there are already media rules in there – e.g.

@media screen and (min-width: 768px)
.logo {

• text-align: left;

}

Which says that if the device is over 768px wide then align the text to the left.

Have a look at the links I sent. They should really help.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#540066

Thanks so much, this does help. I’m going to explore these resources. Now that I have a better feel for how it works, might not be so hard after all. Sounds like, I can specify screen size in the custom.css file and then put in my custom code. Basically, is that how it works? I am thinking that this runs all through the big template.css file and that’s why it’s so big.
-Jim Gribble

[swissa Friend swissaJoin date: November 2011Posts: 1955Downloads:7Uploads:277 Thanks: 175 Thanked: 717 times in 572 posts]

#540134

Yes, you are on the right track.

Just a quick thought (I don’t run Biz template)….

Go to the backend to template manager, Biz (whichever version you are using), and then click on the Theme tab.

There should be a switch to enable small logo where you can point to a different logo. Maybe that helps you quickly?

Regards

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#540169

Hmm, I tried it both ways and neither worked. In the theme settings, I enabled small logo and uploaded and selected my small logo for iphone. It’s not showing; I did clear browser (Safari) cache. I also tried the custom css route using the screen paramater and uploading my small logo to the correct image folder in the template files. Doesn’t work either.
I wonder if I could get some help on this from Joomlart support?
I’m sure I’m close to getting it working.
-Jim G.

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#540173

Besides enabling small logo and uploading my mobile-logo.png and selecting in the theme paramaeters, I also tried to hand code it as follows in the custom.css file.
}
/* All Smartphones in portrait and landscape ———– */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#logo-image {background: url(“../../../images/themes/blue/mobile-logo.png”);
}
Doesn’t work. Anybody out there have a tip?
Thanks,
-Jim g.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#540223

@gribblej: Please rollback what you have changed on your site regarding the logo and apply steps below:

+ Go to Admin site -> Extensions -> Template Manager -> ja_biz – Default -> Theme tabs:

Set ‘Enable Small Logo’ to Yes
Small Logo Image: select small logo

+ Extract my attached file and copy it to templates/ja_biz/tpls/blocks/header.php file (Remember to backup your old file)

You can apply the same that with all template styles in JA Biz: ja_biz – Home, ja_biz – Docs, ja_biz – Red Color…

Let me know if it helps.

---

Attachments:

1. 

1. header.zip

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#540316

Thanks! I am going to give it a try. But, is this something I messed up? And how to not mess it up going forward is my question. Finally, can the custom jquery media code be made to work if all else fails?
-Jim G.

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#540612

Please pm me URL, admin and FTP credentials of your site, I will help you check further.

Actually, you can add both logos: Logo Image and small logo image as in this screenshot:

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#540658

Am I correct that the only change is after line 13 with this addition?
$logoimgsm = ($logotype == ‘image’ && $this->params->get(‘enable_logoimage_sm’, 0)) ? $this->params->get(‘logoimage_sm’, ”) : false;
Thanks again.
-Jim G

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#540740

Hi Jim,

You can see the change from header.php file as mentioned previously here

If you could not solve this problem. Please pm me URL, admin and FTP credentials of your site, I will help you out.

---

Attachments:

1. 

[gribblej Friend gribblejJoin date: June 2011Posts: 208Downloads:28Uploads:6 Thanks: 4 Thanked: 10 times in 2 posts]

#547585

Ninja Lead has the answer for this… And now so do I, thanks to him. You are going to have to upload and overwrite the stock header.php file with the one that has been debugged. If you PM me and you’re having this problem I’d be happy to share the answer.
-Jim G.

[Author]

Posts