Joomla Templates Club 406,261 posts

[holzlchr Friend holzlchrJoin date: December 2013Posts: 16Downloads:0Uploads:0 Thanks: 4 Thanked: 3 times in 1 posts]

#194140

The intro text behind the flipped image is restricted to 3-4 lines maximum.
I would like to use the whole space to write my intro text

With the “Inspect Element” function in Firefox, I discovered that this height is fixed in: “t3-assetsdevtheme-nametemplates.ja_fixel.less.joomla.less.css” on lines 1155 and 1252 for categories.

I replaced “Height: 60px;” by “Height: 100%;” and I solved the problem for categories…

I also saw the same properties for articles and categories in “templatesja_fixelcsstemplate.css“
– Lines 3979 and 4076 for categories
– Lines 5485 and 5564 for articles
But none of them produce any effect.

Could you please clarify how I should set this modification in a correct way ?

Thanks

Christian

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#520339

Hi Christian,

When you want to customise the css, please go the back-end >> template manager, set “OFF” to the Development Mode and Optimize CSS first and then modify /templates/ja_fixel/css/template.css file.

However, I recommend you create a new file “custom.css” in /templates/ja_fixel/css/ directory and add your custom CSS rules. This way will ensure all your customization will be retained when you update template later on.

---

Attachments:

1. 

1 user says Thank You to Nazario A for this useful post

1. holzlchr

[holzlchr Friend holzlchrJoin date: December 2013Posts: 16Downloads:0Uploads:0 Thanks: 4 Thanked: 3 times in 1 posts]

#520403

Hi Nazario
Thanks a lot, it works. Here is the complete procedure:
back-end >> template manager
Set OFF Development Mode
Set OFF Optimize CSS
Edit templatesja_fixelcsscustom.css:
==============================
.category-item.items.rotateY article .category-desc .category-intro {
height: 100%;
}
.category-item.items.rotateX article .category-desc .category-intro {
height: 100%;
}
.fixel-grid .items.image.rotateY article .back .article-intro {
height: 100%;
}
.fixel-grid .items.image.rotateX article .back .article-intro {
height: 100%;
}
==============================
Now the text in the back of my squares appears until the end

1 user says Thank You to holzlchr for this useful post

1. imarjukha

[imarjukha Friend imarjukhaJoin date: January 2014Posts: 14Downloads:0Uploads:3 Thanks: 9]

#520870

Hi! It’s perfect and simple solution! Do you know how to display full description in text grid?

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#521068

@imarjukha,

Do you mean that you want to display full description as this image ?

You try to open file: /templates/ja_fixel/css/template.css, then remove the code in red:

.fixel-grid .items.text .article_content .article-intro {
font-size: 14px;
font-weight: 300;
height: 80px;
overflow: hidden;
position: relative;
}

But if the description shows fuly, it makes your site not look nice.

---

Attachments:

1. 

1 user says Thank You to Nazario A for this useful post

1. imarjukha

[holzlchr Friend holzlchrJoin date: December 2013Posts: 16Downloads:0Uploads:0 Thanks: 4 Thanked: 3 times in 1 posts]

#521072

What do you mean exactly by “display full description in text grid” ?
Failing vocabulary, I use the terms “front of the square” “back of the square”.

Basically the back of the square is composed of :

1. the article title
2. the text located before the read-more line in the article

If you do not insert a read-more line, the article text will flow until disappearing at the bottom of the square.

[imarjukha Friend imarjukhaJoin date: January 2014Posts: 14Downloads:0Uploads:3 Thanks: 9]

#522116

Nazario, yes I mean exactly that. I understand that it can looks not good if description is long… So is it possible to make shown more than 4 lines of text?

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#522146

@imarjukha,

Yes, it is possible. Please open the /templates/ja_fixel/css/template.css file, then increase the value of ‘height’ in red as you wish:

.fixel-grid .items.text .article_content .article-intro {
font-size: 14px;
font-weight: 300;
height: 80px;
overflow: hidden;
position: relative;
}

1 user says Thank You to Nazario A for this useful post

1. imarjukha

[imarjukha Friend imarjukhaJoin date: January 2014Posts: 14Downloads:0Uploads:3 Thanks: 9]

#522266

Thank you! 🙂

[imarjukha Friend imarjukhaJoin date: January 2014Posts: 14Downloads:0Uploads:3 Thanks: 9]

#522267

<em>@Nazario A 410631 wrote:</em><blockquote>@imarjukha,

Yes, it is possible. Please open the /templates/ja_fixel/css/template.css file, then increase the value of ‘height’ in red as you wish:

.fixel-grid .items.text .article_content .article-intro {
font-size: 14px;
font-weight: 300;
height: 80px;
overflow: hidden;
position: relative;
}
</blockquote>

Hi, Nazario! It’s perfect for computer, but seems doesn’t working for smartphone screen resolution…

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#522289

@imarjukha,

Create a new file called: /templates/ja_fixel/css/custom.css and put the following line in it:

@media(max-width: 480px){
.fixel-grid .items.text .article_content .article-intro {
max-height: 160px;
height: 1600px;
}
}


You can increase the value of ‘height’ in red as you wish.

Let me know if this helps

1 user says Thank You to Nazario A for this useful post

1. imarjukha

[imarjukha Friend imarjukhaJoin date: January 2014Posts: 14Downloads:0Uploads:3 Thanks: 9]

#522429

@nazario Thank you very much! The problem is solved for iPhone and Computer!
But on iPad it’s still two lanes 🙁

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#522484

@imarjukha,

Try to open file: /templates/ja_fixel/css/custom.css then add this code:

/* Custom for iPhone*/
@media(max-width: 480px){
.fixel-grid .items.text .article_content .article-intro {
max-height: 160px;
height: 160px;
}
}

/*Custom for iPad*/
@media(min-width: 768px) and (max-width: 1024px){
.fixel-grid .items.text .article_content .article-intro {
max-height: 100px;
height: 160px;
}
}

Hope this clear and helpful to you.

2 users say Thank You to Nazario A for this useful post

1. phong nam
2. imarjukha

[holzlchr Friend holzlchrJoin date: December 2013Posts: 16Downloads:0Uploads:0 Thanks: 4 Thanked: 3 times in 1 posts]

#522507

Thanks guys, for making this thread evolve.

Now there is another issue: when one hovers over the text, the mouse becomes a hand (meaning link), but if you click, nothing happens. My client reported this as a bug.

I solved it with a quick and dirty trick: I defined all articles intro-text as a link, and changed the link color as identical to the text color. Of course, the link appears also inside the article, but my client didn’t notice and everybody is happy… up to now.

Ideally, all intro-text should automatically appear linked on the flipped side of the square.

Any solution to this ?

[imarjukha Friend imarjukhaJoin date: January 2014Posts: 14Downloads:0Uploads:3 Thanks: 9]

#522537

Now it’s perfect with all devices 🙂 Thank you!!!

[Author]

Posts