Danke explanator,
an das joomlaportal habe ich micht bereits gewandt. Ich versuche mal irgendwie die Eigenschaft background-image einzuarbeiten.
Hey Bandit,
Tut mir leid die Forenregel war mir nicht bekannt. Das kommt nicht mehr vor! Danke für den Hinweiß.
Wenn ich weiter gekommen bin, Poste ich das Ergebniss.
Mit freundlichen Grüßen,
Markus
Guten morgen HTML Gemeinde,
ich verwende für das Content Management System Joomla, ein Modul das sich "Letzte Events" nennt. Da mir das Modul im originalen Zustand nicht gefällt, bin ich gerade dabei das gute Stück umzugestalten. Allerdings fehlen mir dazu ein paar Kentnisse.
Das Event Bild das von einer weiteren Komponente angegeben wird, möchte ich als Hintergrundbild verwenden damit der Text und die Links auf dem Bild sind und nicht seperat dadrunter um Platz zu sparen. Ich habe bereits ein paar varianten versucht, allerdings hat nichts davon wirklich funktioniert. Auf der Seite FLYING PISTONS e.V. - Willkommen auf Flying Pistons e.V. (rechte seite "Events) befindet sich das Modul.
Hier die default.php
<?php
/**
* @package Upcoming Events Module
* @copyright (C) 2008 by Slashes & Dots Sdn Bhd - All rights reserved!
* @license GNU/GPL, see LICENSE.php
*/
defined('_JEXEC') or die('Restricted access');
?>
<?php
if( !empty( $events ) )
{
?>
<ul class="latestevents<?php echo $params->get('moduleclass_sfx'); ?>">
<?php
foreach( $events as $event )
{
$handler = CEventHelper::getHandler( $event );
$tipslength = $params->get( 'tipslength');
if ($event->description != '') {
$tooltips = $event->description;
} else if ($event->summary != '') {
$tooltips = $event->summary;
} else {
$tooltips = $event->title;
}
$tooltips = strip_tags($tooltips);
$tooltips = CStringHelper::escape($tooltips);
$tooltips = CStringHelper::truncate($tooltips, $tipslength, '...');
?>
<li class="jsRel jomNameTips tipFullWidth" title="<?php echo $tooltips;?>">
<div class="event-date jsFlLf">
<div>
<a href="<?php echo $handler->getFormattedLink( 'index.php?option=com_community&view=events&task=viewevent&eventid=' . $event->id );?>">
<img class="cAvatar jsFlLf" src="<?php echo $event->getThumbAvatar();?>" alt="<?php echo CStringHelper::escape( $event->title );?>" /></a>
</div>
<div><?php echo CEventHelper::formatStartDate($event, $config->get('eventdateformat') ); ?></div>
</div>
<div class="event-detail">
<div class="event-title">
<a href="<?php echo $handler->getFormattedLink( 'index.php?option=com_community&view=events&task=viewevent&eventid=' . $event->id );?>">
<?php echo $event->title;?>
</a>
</div>
<div class="event-loc">
<?php echo $event->location;?>
</div>
<div class="event-attendee small">
<a href="<?php echo $handler->getFormattedLink('index.php?option=com_community&view=events&task=viewguest&eventid=' . $event->id . '&type='.COMMUNITY_EVENT_STATUS_ATTEND);?>"><?php echo JText::sprintf((cIsPlural($event->confirmedcount)) ? 'COM_COMMUNITY_EVENTS_ATTANDEE_COUNT_MANY':'COM_COMMUNITY_EVENTS_ATTANDEE_COUNT', $event->confirmedcount);?></a>
</div>
</div>
<div class="clr"></div>
</li>
<?php
}
?>
</ul>
<?php
}
else
{
?>
<div><?php echo JText::_( 'COM_COMMUNITY_EVENTS_NO_EVENTS_ERROR' );?></div>
<?php
}
?>Dieser Code ist zuständig für das Event Bild das ich als Hintergrundbild angeben möchte:
<div>
<a href="<?php echo $handler->getFormattedLink( 'index.php?option=com_community&view=events&task=viewevent&eventid=' . $event->id );?>">
<img class="cAvatar jsFlLf" src="<?php echo $event->getThumbAvatar();?>" alt="<?php echo CStringHelper::escape( $event->title );?>" /></a>
</div>Wie formatiere ich denk Link so um, das dieses als Hintergrund Bild dargestellt wird? Hier auch die dazugehörige CSS (style.css):
ul.latestevents {
margin:0;
padding:0;
width:100%;
}
ul.latestevents .event-date div + div {
background:none repeat scroll 0 0 #eeeeee;
border-top:1px solid #dddddd;
font-size:80%;
padding:3px 0;
}
ul.latestevents .event-date{
float: left;
}
ul.latestevents .event-date div {
background:none repeat scroll 0 0 #EEEEEE;
font:bold 18px Arial,sans-serif;
text-align:center;
}
ul.latestevents .event-attendee {
font-size:80%;
}
ul.latestevents li {
margin-top:10px;
padding-top:10px;
background: none !important;
list-style: none;
z-index: 0;
}
ul.latestevents li + li {
border-top:1px solid #DDDDDD;
}
ul.latestevents .event-date {
border:1px solid #dddddd;
width:144px;
}
ul.latestevents .event-date a:hover {
background:none;
}
ul.latestevents .event-date img.cAvatar {
width:140px;
padding:2px;
}
ul.latestevents .event-detail {
margin-left:55px;
}
ul.latestevents .avatar {
height:auto;
width:40px;
}
ul.latestevents .profile-event-actions{
text-align: right;
margin-top: 10px;
}
ul.latestevents .profile-event-actions a + a {
border-left: 1px solid #000;
padding-left: 5px;
}
ul.latestevents .profile-events-info {
float:left;
}
ul.latestevents .profile-events-action{
text-align: right;
outline:medium none;
padding:0 5px;
}
ul.latestevents .profile-events-action a {
background:none repeat scroll 0 0 transparent;
padding-left:10px;
}
ul.latestevents .profile-events-footer {
margin:0;
border-top:1px solid #DDDDDD;
font-size:90%;
padding: 5px 0 0;
margin: 10px 0 0;
}Über jede Hilfe bin ich sehr dankbar! Mit freundlichen Grüßen,
Markus 