Joomla feed weergave css stijlen

Naast de syndicate module en de feed lijst is het ook mogelijk om een feed (module) van een externe website direct in de website te tonen met een introtekst. Deze weergave is niet geschikt om in een smalle (menu) kolom te plaatsen, dus hebben we deze weergave in de contentkolom geplaatst alleen op de homepagina.  Van ieder onderwerp worden de eerste 50 woorden en/of afbeeldingen getoond. Deze weergave lijkt op de hiervoor vermelde feedlijst, maar dan met een gedeelte van de inhoud erbij. De feedweergave in de voorbeeld website is van Dutch Joomla en ziet er zonder aanvullende stijling als volgt uit.

Structuur 

Stijlen
Er zijn voor deze module 3 stijlen aangegeven. De suffix voor deze module table is "_feed".

div.moduletable_feed
Voor de voorbeeld website is voor deze module een border top gestijld om de feed los te maken van de artikelen er boven. Verder is padding en marge toegevoegd om de feedinhoud te laten lijnen met de overige tekst van de voorpagina. De stijlen zijn in het blok hierna aangegeven.

ul.newsfeed_feed
Voor deze stijl is top marge ingevoerd om meer ruimte te verkrijgen. De listitems zijn gestijld met een clear: both, omdat we de images in de tekst willen plaatsen (zie blok met stijlen hieronder).

div.newsfeed_item_feed
Voor de afbeelding van de feed is marge ingevoerd, een border en een float:left, omdat we de afbeeldingen in de tekst willen plaatsen.  

div.moduletable_feed {
   border-top: 1px #660000 dotted;
   padding: 10px;
   margin-bottom: 15px;
}

div.moduletable_feed h3 { }
table.moduletable_feed {}

table.moduletable_feed td a,
table.moduletable_feed td a:visited { }
table.moduletable_feed td a:hover { }

table.moduletable_feed td ul.newsfeed_feed {
   margin-top: 5px;
}
table.moduletable_feed td ul.newsfeed_feed li  {
   margin-bottom: 5px;
}

table.moduletable_feed td ul.newsfeed_feed li div.newsfeed_item_feed { 
}

table.moduletable_feed td ul.newsfeed_feed li div.newsfeed_item_feed img {
   margin: 10px 10px 10px 0;
   border: 1px #660000 dotted;
}

table.moduletable_feed td ul.newsfeed_feed li a,
table.moduletable_feed td ul.newsfeed_feed li a:visited { }
table.moduletable_feed td ul.newsfeed_feed li a:hover { }

Na stijling ziet de feed weergave er als volgt uit. 

U zou er ook voor kunnen kiezen om de stijl van de img (table.moduletable_feed td ul.newsfeed_feed li div.newsfeed_item_feed img) een display:none te geven, om geen afbeeldingen van de feed over te nemen.

table.moduletable_feed td ul.newsfeed_feed li div.newsfeed_item_feed img {
   display: none;
}

Na deze stijling ziet de feed weergave er wel iets saaier uit, maar het bespaart u webpagina ruimte.

• Toevoegen
• Zoeken

Commentaar (0)

Schrijf commentaar

Uw contact gegevens:

Naam:

Email: geen bericht bij reactiehoud me op de hoogte bij reactie

Website:

Commentaar:

Onderwerp:

Bericht:

Beveiliging

Voer de anti-spam code in die in het plaatje staat.

Powered by !JoomlaComment 4.0 beta2