How to make the news summary fully clickable?

[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,

[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

[Wishbone]

Will that validate? Putting a block tag inside an inline tag?

[spcherub]

You can change the normally inline <a> tag into a block tag by adding the following to stylesheet:

Code: Select all

a.your_class {display:block;}

-S

[Wishbone]

True, but validators don't read CSS.. XHTML validation is only about XHTML.

[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

[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...

[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

[Dr.CSS]

Use the first one but change all the div to span to get it to validate...