Joomla Templates Club 406,261 posts

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#196326

Hi there,

I am used to the T3 Framework (which is great by the way), but it is the first time I want to use in the Template Manager the “Small Logo Image” parameter.

I was excited about this feature… but it seems it does not work (at least with JA Mero).

Have I missed something ?
Want to check for yourself ? See http://181.224.129.4/~lejourle/
Txs,

Marc

PS1 : of course, I have switched the “small logo” switch to “ON” 🙂
PS2 ; by the way, I have changed the “Logo Image” to my logo being 200x200px, and that works great because I have adapted the style.less file with the following lines :
@T3logoWidth: 200px;
@T3logoHeight: 200px;

[alexsmirnov Friend alexsmirnovJoin date: July 2012Posts: 786Downloads:1Uploads:226 Thanks: 226 Thanked: 163 times in 119 posts]

#529044

Hi Marc,

On what Joomla version are you running your “JA Mero” please?

Regards,

Alex

[ranashanu Friend ranashanuJoin date: September 2011Posts: 6Downloads:0Uploads:0 Thanks: 38 Thanked: 1 times in 2 posts]

#529045

<em>@woluweb 419089 wrote:</em><blockquote>Hi there,

I am used to the T3 Framework (which is great by the way), but it is the first time I want to use in the Template Manager the “Small Logo Image” parameter.

I was excited about this feature… but it seems it does not work (at least with JA Mero).

Have I missed something ?
Want to check for yourself ? See http://181.224.129.4/~lejourle/
Txs,

Marc

PS1 : of course, I have switched the “small logo” switch to “ON” 🙂
PS2 ; by the way, I have changed the “Logo Image” to my logo being 200x200px, and that works great because I have adapted the style.less file with the following lines :
@T3logoWidth: 200px;
@T3logoHeight: 200px;</blockquote>

What i have noticed is that there is a “style” being called which makes the code read:

<a href="/~lejourle" title="Le jour le plus COURT" style="background-image:url(/~lejourle/images/le_jour_le_plus_court.png);">
<span>Le jour le plus COURT</span>
</a>

It looks that you hardcoded your logo here using

style="background-image:url(/~lejourle/images/le_jour_le_plus_court.png)

If this is the case, no option will work form the template manager or LESS.
Better would be if you replace the mero logo with yours exactly the same name.
Once you do that, then we can look further if the small logo work or not.

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#529070

Joomla 3.2.3, Alex

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#529074

Hi Ranashanu,

Txs for helping !

Actually, I have not hardcoded anything.
In fact the template comes with several Themes. I had simply duplicated one of them and personnalized the logo by adding the following line
@T3LogoImage: “../images/themes/woluweb/logo.png”;

Then, seeing the “small logo” parameter of the Template backend would not work, I thought maybe I should try and select the image of the “big” logo also from the Theme tab of the Template backend.
This explains why you see the link to /~lejourle/images/le_jour_le_plus_court.png

But even if I disactivate both (the variable.less file AND the selection of my logo on the Theme tab of the template backend), the template still never shows the “small logo” I have selected just on the same Theme tab.

See for yourself (even in small viewports, you always see the standard JA Mero logo, not my small logo)…

Txs in advance

Marc

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

#529166

T3 framework has a new feature that allow to add normal logo and small in back-end. JA Mero Template could not upgrade to work with this feature, however you can try this workaround:

+ Add small logo in JA Mero template

+ Open the templates/ja_mero/tpls/blocks/header.php file and change as follows:

Change

$logoimage = $logotype == 'image' ? $this->params->get('logoimage', '') : '';
if ($logoimage) {
$logoimage = ' style="background-image:url('.JURI::base(true).'/'.$logoimage.');"';
}


To

$logoimage = $logotype == 'image' ? $this->params->get('logoimage', 'templates/' . T3_TEMPLATE . '/images/logo.png') : '';
$logoimgsm = ($logotype == 'image' && $this->params->get('enable_logoimage_sm', 0)) ? $this->params->get('logoimage_sm', '') : false;

and change:

<h1>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</h1>

To

<h1>
<a href="<?php echo JURI::base(true) ?>" title="<?php echo strip_tags($sitename) ?>"<?php echo $logoimage ?>>
<?php if($logotype == 'image'): ?>
<img class="logo-img hidden-mobile" src="<?php echo JURI::base(true) . '/' . $logoimage ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<?php if($logoimgsm) : ?>
<img class="logo-img hidden-wide hidden-normal hidden-xtablet hidden-tablet" src="<?php echo JURI::base(true) . '/' . $logoimgsm ?>" alt="<?php echo strip_tags($sitename) ?>" />
<?php endif ?>
<span><?php echo $sitename ?></span>
</a>
<small class="site-slogan hidden-phone"><?php echo $slogan ?></small>
</h1>

1 user says Thank You to Ninja Lead for this useful post

1. woluweb

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#529320

Hi Ninja Lead !

Thank you very, very, very much !
Your hack does the trick 🙂

Still, if I may, I would say it does the trick for the majority of viewports, but there is still something wrong/strange with the “hidden-mobile”.

I have made four screenshots to compare.

1. scenario 1 : the “big logo” has class “hidden-mobile” (as you suggest)

1.1. with viewport 734 : NOK (the big logo still appears while the layout has switched to a small screen layout)

1.2 with viewport 834 : OK

2. scenario 2 : the “big logo” has classes “hidden-mobile” and “hidden-tablet” (my trial of improvement)

1.1. with viewport 734 : OK

1.2 with viewport 834 : NOK (no logo appears at all !)

With other words, it seems that the “hidden-tablet” class falls between two layouts or something like that.
Do you see any mean to correct this ?

Thank you again. Your help has already been very precious.
Yours,

Marc

PS : by the way Ninja Lead, strangely enough, I did not get the notification of your reply (while I did get the notifications of the other replies. This happens very often when I use the forum. Is there anything I have missed (in the configuration or so ?) or is it a bug of the system ?

---

Attachments:

1. 
2. 
3. 
4. 

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

#529491

@woluweb: Here are the resolution hidden class defined in Bootstrap

@media (min-width: 1200px) {
.hidden-wide {
display: none !important;
}
} @media (min-width: 980px) and (max-width: 1199px) {
.hidden-normal {
display: none !important;
}
} @media (min-width: 768px) and (max-width: 979px) {
.hidden-xtablet {
display: none !important;
}
} @media (min-width: 600px) and (max-width: 767px) {
.hidden-tablet {
display: none !important;
}
} @media (max-width: 599px) {
.hidden-mobile {
display: none !important;
}
}

Please try to define new hidden css class for your site.

<blockquote>PS : by the way Ninja Lead, strangely enough, I did not get the notification of your reply (while I did get the notifications of the other replies. This happens very often when I use the forum. Is there anything I have missed (in the configuration or so ?) or is it a bug of the system ?</blockquote>

You can click the the setting within your account and scroll-down to end of page and click reset field button and Save. Don’t forget to check Junk folder of your mail.

[woluweb Friend woluwebJoin date: October 2012Posts: 196Downloads:18Uploads:69 Thanks: 68 Thanked: 31 times in 3 posts]

#529520

Hi Ninja Lead,

Txs again.
I think we almost get it.

… and after some time, I realised the following
It is exactly on the viewport “xtablet” that the problem would arise, namely : @media (min-width: 768px) and (max-width: 979px)

Then, if I would put the “hidden-xtablet” class to the big logo instead of the small logo, then I would have a logo for *all* layouts, ie for layout xtabel as well !
Great. Except for one thing : on that layout, it is the big logo I want to have, not the small one (does not match with the height of logo zone etc).

But then I had a clue.
I went playing again with
– plugins/system/t3/base/less/grid-ext-responsive.less
– responsive-utilities.less

Then I managed to find this workaround : in grid-ext-responsive.less, I changed

// XTablet only @media (min-width: 768px) and (max-width: 979px) {
// Hide everything else
.hidden-xtablet { display: none !important; }
}

// XTablet only @media (min-width: 768px) and (max-width: 979px) {
// Hide everything else
.hidden-xtablet { display: none !important; }
.hidden-tablet { display: inherit !important; }
}

And then it would work : I now *do* have the (big) logo on xtablet layout !

PS : as a reminder, in this solution
* big logo has the following classes : hidden-mobile hidden-tablet
* small logo has the following classes : hidden-wide hidden-normal hidden-xtablet

@ Ninja Lead : is there a better/cleaner way to solve this ?
I mean : in the templates less files, isn’t there a place where plugins/system/t3/base/less/grid-ext-responsive.less is overriden ?

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

#529754

<blockquote>
PS : as a reminder, in this solution
* big logo has the following classes : hidden-mobile hidden-tablet
* small logo has the following classes : hidden-wide hidden-normal hidden-xtablet
</blockquote>

Glad that you figure it out.

<blockquote>
@ Ninja Lead : is there a better/cleaner way to solve this ?
I mean : in the templates less files, isn’t there a place where plugins/system/t3/base/less/grid-ext-responsive.less is overriden ?
</blockquote>

It is not recommended to change it directly from T3 framework (as it will be overridden when you process upgrade to new T3 version), you can define .hidden-xtablet and hidden-tablet classes in the templates/ja_mero/css/custom.css file instead.

[Author]

Posts