Force big formatted Date (time) of Posts with Blog Layout

Hi! I did a little research on my own before posting. I also tried to modify the template's CSS on my own but no success. Ok, enough with the justifications, here's my problem:

The Blog Layout of (almost) all templates shows a "Big Date" tag besides the title of the post (the "time" class), but only appears when the screen is bigger than a certain threshold.

See screenshots below. (Click on the image to expand it, by default is not fully shown)

samples-timetag.png

Almost all new Templates (2.5 or 3.x) have this feature (the Big Date formatted time) and in all of them it hides when the screen is smaller than a given value. Where can I play with what triggers it? Or at least how can I force it, so it can be shown all the time? (even with mobile dimensions?).

I tried modifying the layout dimensions of the template... nothing. Is this something that I have to force on PHP, CSS? where?

Any guess? Thanks!

Hi,

The code responsible for this feature is available in the lib/framework/helper.layout.php file:

Code: Select all

// CSS to hide dates
$this->API->addCSSRule('@media (max-width: '.($tablet_width + 400).'px) {
.itemDate { display: block; }
article > time { display: none; }
}');


Thanks dziudek, this seems to be the solution, but...

The problem is that the <time> block is not even showing up (not even with a 17'' screen... ).

This is the page where I'm trying to show the big date: http://crossfittemecula.com/nws/index.php/template/lorem-ipsum/articles/category-blog

just like in the template's demo page: http://demo.gavick.com/joomla25/fest/index.php/template/lorem-ipsum/articles/category-blog

But nothing...

I tried with:

* the code as it was - nothing

* comment the whole block - nothing

Currently, I modified the code to:

Code: Select all

$this->API->addCSSRule('@media (max-width: '.($tablet_width).'px) {
  .itemDate { display: block; }
  article > time { display: inline; }
}');


but none of the options are working...

Any guess?

Oh, and one more thing, does the /lib/framework/helper.layout.php modifies also the K2 framework?

Seems like the K2 Categories are working, but don't know where to modify the behavior of the <time> item.

In fact you should only increase the 400 value in the mentioned code fragment:

Code: Select all

// CSS to hide dates
$this->API->addCSSRule('@media (max-width: '.($tablet_width + 400).'px) {
.itemDate { display: block; }
article > time { display: none; }
}');

because if you remove 400 then the date will display on the tablet devices, if you increase the 400 value i.e. to 800 then the date will be displayed on bigger screens.

Thanks dziudek.

because if you remove 400 then the date will display on the tablet devices, if you increase the 400 value i.e. to 800 then the date will be displayed on bigger screens.

I guess I didn't explain myself. The thing is that I want the date to be displayed on ALL devices: mobile, tablet and big screens. In the first two cases (mobile and tablet) I would like it to appear vertically (over or under the title), on big screens, it's "inline" default behavior.

I have two problems:

1) the default behavior (i.e. for big screens) is not working

1) how do I achieve the big date showing as intended?

3) does the helper.layout.php works for Joomla native layout or for K2 layouts?

As you say, if I lower the max-width, then the date should appear in smaller screens, furthermore I put "block" it should appear over/under the title right? I guess I'm still doing something wrong. The code is:

Code: Select all

       // CSS to hide dates
         $this->API->addCSSRule('@media (max-width: '.($tablet_width - 200).'px) {
         .itemDate { display: block; }
       article > time { display: block; }
       }');


The result is:

(k2) http://crossfittemecula.com/nws/index.p ... tems-1-col

(joomla's category blog layout) http://crossfittemecula.com/nws/index.p ... egory-blog

Did you read my posts carefully? I think you didn't - I've wrote that you have ADD to the $tablet_width BIGGER value, not SUBSTRACT it.

Thanks dziudek, yes I did read them carefully.

I also tried ADDING a bigger value (+600, +800 and even +1200!!) before posting my replies, the thing is that by adding it just didn't work the way I need it to work. So if I break down your post:

because if you remove 400 then the date will display on the tablet devices,...

Great, I do want it to show on tablet devices, so I should remove it...

...if you increase the 400 value i.e. to 800 then the date will be displayed on bigger screens.

Ok, I also want it on bigger screens, so... wait, are this statements mutually exclusive? I even read the comment right above the original code:

Code: Select all

// CSS to hide dates
$this->API->...


"to hide" i.e., if I delete the whole code it... they'll never be hidden, right?

Once again, I'm trying to show the date on ALL devices: mobile, tablet and big screens, so as of now, the code has a

Code: Select all

($tablet_width + 800)

and you can see the result here, it is NOT working : http://crossfittemecula.com/nws/index.p ... category-i

So please comment out the mentioned fragment:

Code: Select all

 // CSS to hide dates
         $this->API->addCSSRule('@media (max-width: '.($tablet_width - 200).'px) {
         .itemDate { display: block; }
       article > time { display: block; }
       }');

and also please comment out the code fragments connected with the selectors: ".itemDate" and "article > time" in the tablet.css and mobile.css files.