Styling a relation item on front end
11 years 7 months ago - 11 years 7 months ago #41486
by erix
Adishatz, érix
www.agerix.fr : développeur d'applications métier pour Joomla
Styling a relation item on front end was created by erix
Hello,
I have migrated a J!1.5 to a J! 2.5 and everything is fine excepting one things. On the J! 1.5 site a relation item was styled like that :
[attachment=1:hlspuau6]<!-- ia1 -->2013-10-26_08h45_07.png<!-- ia1 -->[/attachment:hlspuau6]
And the source code was this one :
On the new site the item is displayed like that :
[attachment=0:hlspuau6]<!-- ia0 -->2013-10-26_08h53_51.png<!-- ia0 -->[/attachment:hlspuau6]
And the source code is this one :
To display the image in the item I use the item HTML in the List Creation (Frontend Views)option and add these lines :
My question is : how can I do to insert the "fond_bloc" css class in this relation item ?
Thx for answers
I have migrated a J!1.5 to a J! 2.5 and everything is fine excepting one things. On the J! 1.5 site a relation item was styled like that :
[attachment=1:hlspuau6]<!-- ia1 -->2013-10-26_08h45_07.png<!-- ia1 -->[/attachment:hlspuau6]
And the source code was this one :
Code:
<div class="bloc_entreprendre_milieu">
<div style="padding-left:10px;padding-top:10px">
<a href='/entreprendre/agriculture-et-forets/item/254-actualite-forestiere.html' style='' title='Lire la suite de::Actualité forestière'>
<div class='fond_bloc' style='float:left;position:relative;overflow:hidden; height:69px;'>
<div style='width:64px;height:65px;overflow:hidden;margin-top:5px;margin-left:5px;position:absolute;'><img src='http://courpiere.itnt.fr/images/stories/flexicontent/s_bois-ciel-60.jpg'/></div>
<div style='font-size:10px;text-align:center;position:absolute;width:75px;left:65px;top:5px;'>Actualité forestière</div>
</div>
<a href='/entreprendre/agriculture-et-forets/item/9-aides-financieres-pour-lagriculture.html' style='' title='Lire la suite de::L\'exploitation forestière'>
<div class='fond_bloc' style='float:left;position:relative;overflow:hidden; height:69px;'>
<div style='width:64px;height:65px;overflow:hidden;margin-top:5px;margin-left:5px;position:absolute;'><img src='http://courpiere.itnt.fr/images/stories/flexicontent/s_bois-60.jpg'/></div>
<div style='font-size:10px;text-align:center;position:absolute;width:75px;left:65px;top:5px;'>L'exploitation forestière</div>
</div>
<a href='/entreprendre/agriculture-et-forets/item/10-lexploitation-forestiere.html' style='' title='Lire la suite de::Les aides financières pour l\'agriculture'>
<div class='fond_bloc' style='float:left;position:relative;overflow:hidden; height:69px;'>
<div style='width:64px;height:65px;overflow:hidden;margin-top:5px;margin-left:5px;position:absolute;'><img src='http://courpiere.itnt.fr/images/stories/flexicontent/s_aides-pour-lagriculture-carr.jpg'/></div>
<div style='font-size:10px;text-align:center;position:absolute;width:75px;left:65px;top:5px;'>Les aides financières pour l'agriculture</div>
</div>
</div>
<div style="clear:both"></div>
</div>
On the new site the item is displayed like that :
[attachment=0:hlspuau6]<!-- ia0 -->2013-10-26_08h53_51.png<!-- ia0 -->[/attachment:hlspuau6]
And the source code is this one :
Code:
<div class="bloc_entreprendre_milieu">
<div style="padding-left:10px;padding-top:10px">
<img src="http://agorafm34.com/images/stories/flexicontent/s_bois-ciel-60.jpg" alt ="Actualité forestière" class="fc_field_image" />
<a href="/index.php?option=com_flexicontent&view=item&cid=191:agriculture-et-forets&id=254:actualite-forestiere&Itemid=13" class="hasTip relateditem" title="Lire la suite::Actualité forestière" >Actualité forestière <img src="http://agorafm34.com/images/stories/flexicontent/s_bois-60.jpg" alt ="L'exploitation forestière" class="fc_field_image" />
<a href="/index.php?option=com_flexicontent&view=item&cid=191:agriculture-et-forets&id=9:aides-financieres-pour-lagriculture&Itemid=13" class="hasTip relateditem" title="Lire la suite::L'exploitation forestière" >L'exploitation forestière <img src="http://agorafm34.com/images/stories/flexicontent/s_aides-pour-lagriculture-carr.jpg" alt ="Les aides financières pour l'agriculture" class="fc_field_image" />
<a href="/index.php?option=com_flexicontent&view=item&cid=191:agriculture-et-forets&id=10:lexploitation-forestiere&Itemid=13" class="hasTip relateditem" title="Lire la suite::Les aides financières pour l'agriculture" >Les aides financières pour l'agriculture
</div>
<div style="clear:both"></div>
</div>
To display the image in the item I use the item HTML in the List Creation (Frontend Views)option and add these lines :
Code:
{{field15##display_small}}
__display_text__
My question is : how can I do to insert the "fond_bloc" css class in this relation item ?
Thx for answers
Adishatz, érix
www.agerix.fr : développeur d'applications métier pour Joomla
Last edit: 11 years 7 months ago by erix.
Please Log in or Create an account to join the conversation.
11 years 7 months ago #41490
by micker
FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]
Replied by micker on topic Styling a relation item on front end
hello
did you try
in open value field
and </div> in ending
!! not for each value
did you try
Code:
<div class='fond_bloc' style='float:left;position:relative;overflow:hidden; height:69px;'>
and </div> in ending
!! not for each value
FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]
Please Log in or Create an account to join the conversation.
11 years 7 months ago #41508
by erix
Adishatz, érix
www.agerix.fr : développeur d'applications métier pour Joomla
Replied by erix on topic Styling a relation item on front end
Great !!! Thank you so much ! 
Finaly the right code was this one, hope it helps for others
Finaly the right code was this one, hope it helps for others
Code:
<div class='fond_bloc' style='float:left;position:relative;overflow:hidden; height:69px;'>
<div style='width:64px;height:65px;overflow:hidden;margin-top:5px;margin-left:5px;position:absolute;'>
{{field15##display_small}}
</div>
<div style='font-size:10px;text-align:center;position:absolute;width:75px;left:65px;top:5px;'>
__display_text__
</div></div>
Adishatz, érix
www.agerix.fr : développeur d'applications métier pour Joomla
Please Log in or Create an account to join the conversation.
Time to create page: 0.340 seconds
Last FLEXI-site
... loading images 
