[opgelost] pad en plaats css van het forum made simple

[demaster]

Nadat ik het forum had bijgewerkt naar een nieuwere versie 0.9.4 bleek dat het stylesheet mede veranderd was en de layout hierdoor veranderd. Ik had nl. enkele plaatjes gekoppeld. Nu toont het forum de plaatjes (achtergrond opmaak niet meer). Ik denk dat het te maken heeft met de plaats waar nu het forum stylesheet staat. Ik kan het stylesheet van Forum_Made _Simple niet vinden (het staat wel gewoon bij het tabblad stylesheets en dat kan ik bewerken, maar het pad naar de plaatjes, staan bij mij in uploads/images, werkt niet meer. Hier het voorbeeld van het huidige pad.
#forum td.forum_alternate1{ background-image:url(uploads/images/doorzicht.png) }

Ik hoor graag!

[compufairy]

Hoi,

Kun je een link plaatsen naar de bedoelde site?

Overigens valt het mij op dat er in dat lijntje css code geen ;  achter .../doorzicht.png) staat.

Groet,

Anne-Mieke

[demaster]

Dag Anne-Mieke,

site is www.ikelpie.com

ik heb ; erachter gezet, maar geen verandering gezien.

[compufairy]

In de bijlage zie je een screenshot van wat ik zie als ik de site open met de laatste versie van FF. Ik zie daar dat je in de achtergrond van de forum berichten deze image hebt staan: http://www.ikelpie.com/uploads/images/d ... wittig.png

Ik kan niet beoordelen wat je nu precies mist in deze pagina.

Verder zie ik dat deze css er aan hangt:

/* Start of CMSMS style sheet 'Forum_Made_Simple' */
#forum .forum_title{ font-weight:bold; }
#forum .forum_link{ font-size: 1.0em; }
#forum a.forum_link{ text-decoration:none; }
#forum form textarea{ border:1px inset #eee; font-size:.9em; background-image:url(uploads/images/doorzicht-wittig.png); width:600px; height:200px; }

#forum table.forum_pagetable{ width:100%; margin:4; padding:4; border:0; }
table.forum_pagetable th,td{ padding:4px; }

.forum_head_table{ background-image: url(uploads/images/doorzicht-wittig.png); repeat-x; }
.forum_head_icon{ width:22px; }
.forum_head_name{ width:60%; text-align:left; }
.forum_head_count{ width:14%; text-align:center; }
.forum_head_subject{ width:47%; text-align:left; font-weight:bold}
.forum_head_views{ width:14%; text-align:center; }
.forum_head_info{ width:21%; text-align:center; }
.forum_head_topic{ font-weight:bold; }
.forum_head_reply{ text-align:right; }

.forum_icon{ vertical-align:top; }
.forum_name{ vertical-align:top; font-weight:bold; }
.forum_count{ text-align:center; vertical-align:top; }
.forum_subject{ vertical-align:top; }
.forum_views{ text-align:center; vertical-align:top; }
.forum_info{ width:21%; font-size:.7em; text-align:center; vertical-align:top; }
.forum_content{ width:66%; vertical-align:top; }
.forum_edit{ width:13%; text-align:center; vertical-align:top; }
.forum_bodypost{ width:76%; vertical-align:top; }

#forum td.forum_alternate1{ background-image:url(uploads/images/doorzicht.png); repeat;}
#forum td.forum_alternate2{ background-image:url(uploads/images/doorzicht-wittig.png);repeat; }

.forum_pagination{ font-size:.9em; }
.forum_quote{ padding:0 7px; border:1px solid #000; background-color:#dce; }
.forum_center{ margin:0; padding:0; border:0; text-align:center; }

#forum a.reply_link{ font-size:.8em; text-decoration:none; }
#forum span.reply_link{ font-size:.8em; }
/* End of 'Forum_Made_Simple' */

Leuke site trouwens!

[demaster]

Dat klopt, dank voor opmerking over de site

handig zo'n overzicht, waar het omgaat is dat bij deze code
#forum td.forum_alternate1{ background-image:url(uploads/images/doorzicht.png); repeat;}
#forum td.forum_alternate2{ background-image:url(uploads/images/doorzicht-wittig.png);repeat; }

er wisselend een licht geel en wit achtergrondbalk onstaat, zodat de vraag en de reactie duidelijker van elkaar te onderscheiden zijn. Ik had er al even ook repeat achter gezet omdat het een heel klein png is die herhaald wordt in de achtergrond.

Toch geeft het die opmaak nog niet, kan het zijn dat het pad niet klopt?
demaster

[Acorna078]

Als ik je vraag zo lees wil je graag onderscheid maken tussen de even en oneven rijen in de forum tabel.

Bedoel je dit effect?

[compufairy]

Lang leve de fantastische functionaliteiten in dit forum Ik was een reply aan het schrijven om te vertellen dat ik zelf geen CSS whizzkid ben (besteed ik altijd uit) en kreeg bericht dat er intussen een nieuwe reply geplaatst was. Door Acorna078. Volgens mij is dat precies wat je zoekt.

@Acorna078 Hoe krijg je dit effect voor elkaar?

Grote dank alvast,

Anne-Mieke

[Rolf]

dat valt wel mee, compufairy... ik kom er vanmiddag nog wel even op terug. nu is dat even wat lastig. grt. rolf.

[demaster]

Ja dat bedoelde ik, hoe heb je het voor elkaar gekregen?
Hoor graag,
demaster

[Rolf]

google maar eens naar foreach en cycle. Grt. Rolf.

[Acorna078]

@compufairy : Gelukkig ben ik bijna dagelijks bezig met CSS. Hoort bij mijn werk...

Een paar opmerkingen vooraf:

1) Ik kom de classes 'forum_alternate1' en 'forum_alternate2' niet tegen in de HTML code van het forum (CTRL+F alternate). Voor een goede werking moeten deze classes worden toegevoegd. Dit is waarschijnlijk een instelling in de Forum template. Er zit dus geen fout in het aanroepen van de afbeeldingen!

2) Voor het 'zebra' effect bij rijen in een tabel, moet de styling op de TR (rij) gezet worden en niet op de TD (tabelcel)

3) De gebruikte CSS syntax is niet correct. Je kan binnen het attribuut 'background-image' geen 'repeat' aanroepen. Dit kan alleen bij het verzamel attribuut 'background'.

#forum td.forum_alternate1{ background-image:url(uploads/images/doorzicht.png); repeat;}
#forum td.forum_alternate2{ background:url(uploads/images/doorzicht-wittig.png) repeat; }

Ik zou eerst even checken of de juiste classes daadwerkelijk worden toegevoegd en dan de volgende CSS code proberen:

Code: Select all

#forum tr.forum_alternate1{ background:url(uploads/images/doorzicht.png) repeat; }
#forum tr.forum_alternate2{ background:url(uploads/images/doorzicht-wittig.png) repeat; }

Ter info: Voor het maken van de screenshot heb ik gebruik gemaakt van IE Developer Toolbar

[demaster]

Dank, heb het veranderd, mij is alleen nog onduidelijk wat ik bij 1) moet toevoegen in het forum template (classes).
demaster

[Rolf]

Zo, dit gaat wat gemakkelijker dan met een telefoon...  :D

Door het gebruik van de Smarty {Cycle} tag, kun je variabelen wisselen.
In onderstaand geval wordt aan $background wisselend de waarde van background1 en background2 gegeven. Hierdoor krijgt de eerste regel een andere kleur als de tweede regel. Eerst wit en dan grijs, en dan weer wit... enz.

Voorbeeld Sjabloon

Code: Select all

<table>
{foreach from=$items item="item"}
{cycle values="background1,background2" assign="background"}
<tr class="{$background}">
<td>
...
</td>
<td>
...
</td>
</tr>
{/foreach}
</table>

Stylesheet

Code: Select all

.background1 {
background: #fff;
}

.background2 {
background: #ccc;
}

Dit kun je natuurlijk ook toepassen met div's en met meerdere kleuren en andere (CSS) functies.

grt. Rolf

[demaster]

Bedankt Rolf,
dit gaat me wat boven m'n pet op dit moment. Ik begrijp de oplossing. Ik ga er wel even op studeren, moet 'm nu nog toepassen in bestaande code.
Kan weer even vooruit,
demaster.

[Rolf]

dit gaat me wat boven m'n pet op dit moment. Ik begrijp de oplossing. Ik ga er wel even op studeren, moet 'm nu nog toepassen in bestaande code.

Kijk maar even en anders moet je het sjabloon hier even neer zetten... 

®