Lay-out uit de pas
Puzzelen bij slecht weer 😉 Zoiets was dit. Ik zag nl. dat in mijn testblog er bij berichten waar nog een "Verder Lezen" mogelijkheid onder zat de lay-out uit de pas liep. Tja hoe los je dat nu op?
Update: ik heb deze posting geupdated, aangezien de informatie die ik hieronder vermeldde niet correct is.
CSS knutselen
Met behulp van de Webdeveloper Toolbar in Firefox met daarin de mogelijkheid je CSS (waarmee je de layout dus bepaalt) te bekijken kwam ik er achter dat er ergens een foutje zat in de standaard templates die geinstalleerd worden bij de stijl. Daarvoor heb ik in de Information sectie in de developer toolbox de optie div order aangezet. Want dan zie je de verwijzingen naar allerlei zaken die in die CSS file staan.
class="asset-more" moet zijn class="asset-more-link"
En toen zag ik dat er bij er een verkeerde verwijzing staat in de template Bericht. Zo staat daar bij extended entry nl. class=asset-more en in de CSS class="asset-more-link" en dat is toch wel een verschil. Onder .asset-more-link staat nl. precies aangegeven hoe de layout moet zijn. En tja als je de verwijzing naar dat stukje niet correct neerzet wordt ie ook niet gevonden.
Dus even de verwijzing asses-more aangepast naar asset-more-link en daarna stond alles keurig in het gelid.
Zo nu weet ik zelf wat ik gedaan heb en kunnen anderen er wellicht ook iets mee. Ik hoop tenminste dat het dit was 😉
Recap
In template Bericht (of Entry), net voor <$MTEntryMore$> moet je:
<div id="more" class="asset-more">
veranderen in:
<div id="more" class="asset-more-link">
Het blijkt in heel iets anders te zitten. Toen ik mijn testblog opnieuw publiceerde was de layout niet goed. Het blijkt dat in de CSS file van Mid-century stijl de asset-more tag niet is gedefinieerd. Daardoor wordt dus na de “verder lezen knop” of “Continue Reading” of “More” de layout niet goed weergegeven. Onderstaande blokken dienen aangepast te worden. De asset-more tag wordt er in gedefinieerd zoals je ziet. Het grootste gedeelte staat al in de screen.css file. De asset-more opties zijn toegevoegd.
.entry-asset .asset-body,
.page-asset .asset-body,
.entry-asset .asset-more {
margin-left: 55px;
padding-top: 5px;
font-family: Georgia;
font-size: 13px;
margin-bottom: 10px;
}
.asset .asset-body p,
.asset .asset-body blockquote,
.asset .asset-body ul,
.asset .asset-body ol,
.asset .asset-more p,
.asset .asset-more blockquote,
.asset .asset-more ul,
.asset .asset-more ol {
margin-bottom: 15px;
}
.entry-asset .asset-body blockquote,
.entry-asset .asset-more blockquote {
margin: 0 25px 15px 25px;
padding-left: 15px;
color: #333;
border-left: 1px dotted #ddddd9;
}
.entry-asset .asset-body ul,
.entry-asset .asset-body ol,
.entry-asset .asset-more ul,
.entry-asset .asset-more ol {
list-style: disc;
margin-left: 25px;
Laatste reacties