Hello sauerlu

You can copy the file from templates/shaper_educon/html/com_content/article/default.php to Helix Ultimate. You also need to copy necessary CSS and other settings. The easier way is using the Educon template.

Best regards

Hello Ofi Khan,

thanks a lot for your replay on this. That exactly that what I've made. I've copied the default to Helix Ultimate, but I get the following error than (Please see screenshot):

Warning: Undefined array key "articleView" in C:\wamp64\www\helix\plugins\system\helixultimate\overrides\layouts\joomla\content\info_block\publish_date.php on line 13

I've started with the educon template, but a lot of people (also from you support team) has said that I would be better to build new sites on the Helix Ultimate Framework instead of the Helix3. So I want to be PHP 8 ready, but I want to use some style elements of the educon template.

I appreciate your amazing help.

Best regards.

Hi @sauerlu. No need to copy any files. And this cannot be done In the way that Ofi recommended. Since Helix Ultimate has a different overriding system. Вы должны поместить файлы в другую папку в Helix Ultimate templates/shaper_helixultimate/override/com_content/article/default.php. But you still have to look for CSS

It's easier simple write your own CSS witout copy default.php.

Here is example for Category Blog

.article-list .article-body {
    position: relative;
    display: flex;
    flex-direction: column;
}
.article-list .article-info {
    order: -1;
}
.article-list .published::before {
    display: none;
}
.article-list .published {
    position: absolute;
    top: -76px;
    left: 0;
    width: 70px;
    height: 70px;
    background-color: blue;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
}

Thanks a lot Parvel for your amazing help.

That was my base idea, but can you just show me maybe your override for default.php for seeing where exactly you've made the changes.

Thanks again sir.

There is no override. Only CSS code above makes such an appearance like on screenshot. You can copy and paste this code to the custom.css and you will get it

Ah okay thanks again

You are wellcome

Hi Parvel,

I have 2 more questions:

Regarding the CSS and the date. Is it somehow possible to format the content of

<time datetime="2022-11-23T12:19:42+01:00">23.11.22 </time>

to this:

<time datetime="2017-06-20T14:39:00+02:00" itemprop="datePublished">
        <span>20</span>
        Jun,2017    </time>

What adjustments need to be made and where? I know where I can adjust the date format, but I want to know how and where I can add the <span> tag between the <time>

And how can I apply/adapt this css for a single article instead of .article-list.

I've tried (with the structure of de default.php helix article) to adapt it for a single article like this:

.article-details {
  position: relative;
}

.article-details .published {
  position: absolute;
  top: 635px;
  left: 0;
  margin-top: -76px; /* to keep it on the same place */
  margin-left: 100px; /* to keep it in the same position */
  width: 70px;
  height: 70px;
  background-color: blue;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 16px;
  line-height: 1.2;
}


.article-details .article-full-image {
  position: relative;
}

.article-details .article-header {
  position: relative;
  z-index: 2;
}

But when I resize the browser window the .published is moving, and does not stay in place.

Have you an idea please?

Thanks again for your amazing support.

Greetings.

Hi. To wrap "day" in span tag you will need javascript codding. I can't help with this.

But when I resize the browser window the .published is moving, and does not stay in place.

So that you have a starting point for the positioning of the block with the date, it is necessary to give the block with the image fixed parameters and then change them in Media Queries

For example

.article-full-image {
    display: flex;
    height: 640px;
}
.article-details .article-full-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
@media (max-width: 1199px) {
    .article-full-image {
        height: NEW_VALUE;
    }
}
@media (max-width: 991px) {
    .article-full-image {
        height: NEW_VALUE;
    }
}
@media (max-width: 767px) {
    .article-full-image {
        height: NEW_VALUE;
    }
}
@media (max-width: 575px) {
    .article-full-image {
        height: NEW_VALUE;
    }
}

Then you can accurately configure the value of the top property for .article-details .published

Another method is the override article layout in order to place .article-details .published in a more convenient position for CSS coding.

Thanks a lot Parvel, it realy helps me a lot.

Have a nice day :)

Wow thanks again Parvel for your amazing support.

I'll try that tomorrow.

Have a nice day.