I have a problem with long article titles at my homepage. https://imgur.com/NhtkJh3

I've tried to condense it to one-line by putting the HTML/CSS code in plugins like sourcerer or rokcandy, however it causes a problem - HTML code is sent too for head's >title< and >meta< tags.

I have a "jm-lifestyle" template which shows 9 articles at homepage. Sadly, every element has the same class, so I'm trying to add different classes for all of them.

I found the path of php file which shows the title


<?php if ($params->get('show_title')) : ?>
<h2 class="item-title" itemprop="name">

So I'm trying to add a different class of h2 by this way:

foreach (range('a', 'i') as $letter);
<h2 class="item-title_<?php echo $letter  ?>" itemprop="name">

However it makes item-title_i everywhere. I'm not really familiar with php, could you help me how to get another letter in all nine paragraphs? It's important to being not random. I would like them to stay alphabetically (or just the same everytime), so I could make different CSS classes for them. Unless, maybe you have easier way to solve it.


Your output needs to be within the foreach loop:

foreach (range('a', 'i') as $letter) {
<h2 class="item-title_<?php echo $letter  ?>" itemprop="name">

If you do update default_item.php then make sure you override it in your template. Never override core files or changes are likely to be lost when you patch the site.

I think the simplest solution would actually to use the nth-child selector in CSS. I don't think you actually need to update the HTML to achieve what you are trying to do.

That said, your question seems to suggest a fundamental design mistake, and trying to solve it with code could come back to bite you. A CMS should be dynamic and handle various sizes of content - if you are writing new code each time you add an article, then it is not working as a CMS. Any aesthetic design decision that harms usability isn't a good design choice. Having titles not line up really isn't going to bother any user as long as all the text is skim-readable and clear. If the lack of vertical alignment really bothers, have them in a single column rather than two columns.

Trying to get too much vertical alignment in the days of responsive design seems a waste of time.

  • Thanks for your answer. You are right, it's not a good way to solve it, but I would like to end it. – jampjamp Oct 20 '16 at 9:09
  • Oh, I didn't know that "enter" will send the post :) – jampjamp Oct 20 '16 at 9:09
  • I've tried both methods (PHP and CSS). CSS's nth-child doesn't work well, I don't know why. I made something like this (with next children), but the first is shown at all h2.item-title. h2.item-title:nth-child(1){ background:red; letter-spacing:-1px; word-spacing:-1px; margin-left:10px; font-size:23px !important; } I've tested too for 'even' or 'odd' function of nth-child, but it works for all h2's or for nothing and I don't know why. – jampjamp Oct 20 '16 at 9:28
  • PHP method makes nine h2 classes for all nine paragraphs, but the right one which is shown is still with 'i' letter. ` <h2 class="item-title_a" itemprop="name"> </h2><h2 class="item-title_b" itemprop="name"> [TOO LONG POST SO I'VE DELETED IT] </h2><h2 class="item-title_h" itemprop="name"> </h2><h2 class="item-title_i" itemprop="name"> <a href="/dotkom_czerwiec2016/index.php?option=com_content&amp;view=article&amp;id=39:dd&amp;catid=21&amp;Itemid=211" itemprop="url"> Short title, no problem </a> </h2>` – jampjamp Oct 20 '16 at 9:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.