Page 1 of 1
How to make the news summary fully clickable?
Posted: Tue Sep 27, 2011 11:33 pm
by nick2000
Hi all!
I'm using Cmsms 1.9.4.3 with BrightSide theme.
I would like to make the entire box of a News Summary to act as a link towards the News Detail.
Which method would you suggest?
thanks in advance,
Re: How to make the news summary fully clickable?
Posted: Wed Sep 28, 2011 4:19 pm
by spcherub
You will need to update HTML code in the news template. Basically you will be wrapping a <a> tag around the whole div and ensure that the href parameter is pulling from the actual news detail page. All the elements you need are already in the template - you just have rearrange the page elements.
If you paste your template code here, someone may be able to help you.
-S
Re: How to make the news summary fully clickable?
Posted: Wed Sep 28, 2011 8:42 pm
by Wishbone
Will that validate? Putting a block tag inside an inline tag?
Re: How to make the news summary fully clickable?
Posted: Wed Sep 28, 2011 9:34 pm
by spcherub
You can change the normally inline <a> tag into a block tag by adding the following to stylesheet:
-S
Re: How to make the news summary fully clickable?
Posted: Thu Sep 29, 2011 1:09 am
by Wishbone
True, but validators don't read CSS.. XHTML validation is only about XHTML.
Re: How to make the news summary fully clickable?
Posted: Thu Sep 29, 2011 3:02 am
by spcherub
Good point. If XHTML validation is key to the success of the project, then the original poster will need to find a different method to accomplish his need. I've had success with this non-validating method across different browsers, so it depends on what is higher priority.
One could also accomplish this by making the outer div "clickable" using JS, but that could get tricky.
HTML5 does allow block elements within inline elements, but that is a separate discussion.
-S
Re: How to make the news summary fully clickable?
Posted: Thu Sep 29, 2011 11:38 pm
by nick2000
Hi, here is my summary template:
Code: Select all
{foreach from=$items item=entry}
<div class="NewsSummary">
<div class="NewsSummaryLink">
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</div>
{if $entry->summary}
<div class="NewsSummarySummary">
{eval var=$entry->summary}
</div>
{/if}
</div>
<br>
{/foreach}
Any suggestion is appreciated...
Re: How to make the news summary fully clickable?
Posted: Fri Sep 30, 2011 11:39 am
by spcherub
Here are a couple of options:
Option #1: May not be validator-compliant, but works well in all browsers:
Code: Select all
{foreach from=$items item=entry}
<div class="NewsSummary">
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">
<div class="NewsSummaryLink">
{$entry->title|cms_escape}
</div>
{if $entry->summary}
<div class="NewsSummarySummary">
{eval var=$entry->summary}
</div>
{/if}
</a>
</div>
<br>
{/foreach}
CSS for Option #1:
Code: Select all
div.NewsSummary a {display:block;}
Option #2: Validator-friendly, but only makes the title and summary clickable:
Code: Select all
{foreach from=$items item=entry}
<div class="NewsSummary">
<a
<div class="NewsSummaryLink">
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</div>
{if $entry->summary}
<div class="NewsSummarySummary">
<a href="{$entry->moreurl}" title="{$entry->title|cms_escape:htmlall}">{eval var=$entry->summary}</a>
</div>
{/if}
</div>
<br>
{/foreach}
Hope that helps.
-S
Re: How to make the news summary fully clickable?
Posted: Sat Oct 01, 2011 6:52 pm
by Dr.CSS
Use the first one but change all the div to span to get it to validate...