Inline CSS

  • Ersteller des Themas Gelöschter Benutzer 39624
  • Erstellungsdatum

Gelöschter Benutzer 39624

Guest
Hallo,

wieso um alles in der Welt sind die Templates voll mit Inline CSS? Das ist nicht nur schlechter Stil, sondern erschwert die Aktualisierung der Templates ungemein. Bei jedem Shop Update (wie jetzt auf 3.16) muss ich jedes Custom-Template per Hand durchgehen...

Schaut euch mal Style-Guides für saubere Trennung von HTML und CSS an. So wie ihr das macht seid ihr unflexibel und ärgert alle, die Custom-Templates nutzen.
 

Gelöschter Benutzer 39624

Guest
AW: Inline CSS

Also Blödsinn find ich das nicht :)

Code: 
./tpl_inc/auswahlassistent_inc.tpl:31:                {$smarty.session.AuswahlAssistent->oAuswahl_arr[$nFrage]->cWert}<a href="{aaURLEncode nReset=1 nFrage=$nFrage kKategorie=$kKategorie}"><span class='edit' title="{lang key='edit' section='global'}" style="display: block;"></span></a>./tpl_inc/jtl_bestellung.tpl:198:            <div class="container tleft" style="width: 600px;">
./tpl_inc/seite_versand.tpl:28:    <table width="100%" border="0" cellspacing="0" cellpadding="5" style="height: 25px; border-color:#929292;border-width:1px; border-style:dotted;border-right-width:0px;border-left-width:0px;background: #F2F2F4">
./tpl_inc/seite_versand.tpl:33:        <tr><td style="font-weight:bold;"><b>{lang key="estimateShippingCostsTo" section="checkout"}</b></td></tr>
./tpl_inc/seite_versand.tpl:41:                <span class="standard" style="padding-left:10px;"><b>{lang key="plz" section="forgot password" alt_section="account data,"}:</b></span>
./tpl_inc/seite_versand.tpl:42:                <input type="text" name="plz" maxlength="20" class="login" style="width:50px;" value="{$Kunde->cPLZ}"> 
./tpl_inc/seite_versand.tpl:47:        <tr><td style="font-weight:bold;"><b>{lang key="estimateShippingCostsTo" section="checkout"} {$Versandland}, {lang key="plz" section="forgot password" alt_section="account data,"} {$VersandPLZ}</b></td></tr>
./tpl_inc/inc_extension.tpl:3:        <div class="imagemap" style="background: #fff url('{$oImageMap->cBildPfad}') top left no-repeat; width:{$oImageMap->fWidth}px; height: {$oImageMap->fHeight}px;position:relative;">
./tpl_inc/seite_newsarchiv.tpl:10:   <h2 class="title"><img src="{$currentTemplateDir}gfx/configTPL.png" alt="" style="vertical-align:middle" /> <span>{$cMonat}</span></h2>
./tpl_inc/seite_newsarchiv.tpl:11:   <div style="border-bottom: 1px solid #000000"></div>
./tpl_inc/seite_newsarchiv.tpl:22:         <td valign="top" align="left" style="background: #F2F2F2;width: 33%;">
./tpl_inc/seite_newsarchiv.tpl:49:<div style="border-bottom: 1px solid #000000"></div><br>
./tpl_inc/modules/clickandbuy/bestellabschluss.tpl:1:<div style="margin:10px 0;">
./tpl_inc/modules/paymentpartner/bestellabschluss.tpl:1:<div style="margin:10px 0";>
./tpl_inc/modules/wirecard/bestellabschluss.tpl:1:<div style="margin:10px 0";>
./tpl_inc/modules/wirecard/bestellabschluss.tpl:7:   <div style="margin:10px 0";>
./tpl_inc/modules/iclear/bestellabschluss.tpl:1:<div style="margin:10px 0";>
./tpl_inc/modules/saferpay/bestellabschluss.tpl:1:<div style="margin:10px 0;">
./tpl_inc/modules/uos/bestellabschluss.tpl:1:<div style="margin:10px 0";>
./tpl_inc/modules/heidelpay/bestellabschluss.tpl:1:<div style="margin:10px 0";>
./tpl_inc/modules/paypal/bestellabschluss.tpl:9:<div style="margin:10px 0;">
./tpl_inc/modules/paypal/bestellabschluss.tpl:15:   <div style="margin:10px 0;" id="paypal_text">
./tpl_inc/modules/ut/bestellabschluss.tpl:1:<div style="margin:10px 0";>
./tpl_inc/modules/eos/bestellabschluss.tpl:1:<div style="margin:10px 0;">
./tpl_inc/modules/postfinance/bestellabschluss.tpl:1:<div style="margin:10px 0";>
./tpl_inc/modules/moneybookers_qc/bestellabschluss.tpl:1:<div style="margin:10px 0;">
./tpl_inc/modules/moneybookers_qc/bestellabschluss.tpl:6:      <div style="margin:10px 0;">
./tpl_inc/artikel_finanzierung_popup.tpl:3:<div style="text-align: center;">
./tpl_inc/artikel_finanzierung_popup.tpl:4:   <table style="width: 100%;">
./tpl_inc/artikel_finanzierung_popup.tpl:34:   <table style="width: 100%" cellspacing="1">
./tpl_inc/artikel_finanzierung_popup.tpl:35:      <tr style="background-color: #DDDDDD ! important;">
./tpl_inc/artikel_finanzierung_popup.tpl:51:      <tr style="background-color: #CCCCCC ! important;">
./tpl_inc/jtl_wunschliste.tpl:107:         <input type="text" id="wunschliste_public_url" value="{$ShopURL}/index.php?wlid={$CWunschliste->cURLID}" style="width:100%" />
./tpl_inc/rma_overview.tpl:60:                  <div style="position: relative;">
./tpl_inc/rma_overview.tpl:61:                     <div style="position: absolute; top: 0; right: 0;" align="right">
./tpl_inc/rma_overview.tpl:75:                                    <li style="list-style-type: disc;">
./tpl_inc/artikel_matrix.tpl:72:                     <input name="variBoxAnzahl[{$oVariationWert1->kEigenschaft}:{$oVariationWert1->kEigenschaftWert}_{$oVariationWert0->kEigenschaft}:{$oVariationWert0->kEigenschaftWert}]" type="text" value="{$smarty.session.variBoxAnzahl_arr[$cVariBox]->fAnzahl|replace_delim}" onblur="javascript:gibAbnahmeIntervall(this, {$Artikel->fAbnahmeintervall});"{if $smarty.session.variBoxAnzahl_arr[$cVariBox]->bError} style="background-color: red;"{/if} /><br />  
./tpl_inc/artikel_matrix.tpl:74:                     <input name="variBoxAnzahl[{$oVariationWert1->kEigenschaft}:{$oVariationWert1->kEigenschaftWert}_{$oVariationWert0->kEigenschaft}:{$oVariationWert0->kEigenschaftWert}]" type="text" value="{$smarty.session.variBoxAnzahl_arr[$cVariBox]->fAnzahl|replace_delim}"{if $smarty.session.variBoxAnzahl_arr[$cVariBox]->bError} style="background-color: red;"{/if} /><br />
./tpl_inc/artikel_matrix.tpl:135:                     <input name="variBoxAnzahl[_{$oVariationWertHead->kEigenschaft}:{$oVariationWertHead->kEigenschaftWert}]" type="text" value="{$smarty.session.variBoxAnzahl_arr[$cVariBox]->fAnzahl|replace_delim}" onblur="javascript:gibAbnahmeIntervall(this, {$Artikel->fAbnahmeintervall});"{if $smarty.session.variBoxAnzahl_arr[$cVariBox]->bError} style="background-color: red;"{/if} /> 
./tpl_inc/artikel_matrix.tpl:137:                     <input name="variBoxAnzahl[_{$oVariationWertHead->kEigenschaft}:{$oVariationWertHead->kEigenschaftWert}]" type="text" value="{$smarty.session.variBoxAnzahl_arr[$cVariBox]->fAnzahl|replace_delim}"{if $smarty.session.variBoxAnzahl_arr[$cVariBox]->bError} style="background-color: red;"{/if} /> 
./tpl_inc/artikel_matrix.tpl:193:                     <input name="variBoxAnzahl[_{$oVariationWertHead->kEigenschaft}:{$oVariationWertHead->kEigenschaftWert}]" type="text" value="{$smarty.session.variBoxAnzahl_arr[$cVariBox]->fAnzahl|replace_delim}" onblur="javascript:gibAbnahmeIntervall(this, {$Artikel->fAbnahmeintervall});"{if $smarty.session.variBoxAnzahl_arr[$cVariBox]->bError} style="background-color: red;"{/if} /> 
./tpl_inc/artikel_matrix.tpl:195:                     <input name="variBoxAnzahl[_{$oVariationWertHead->kEigenschaft}:{$oVariationWertHead->kEigenschaftWert}]" type="text" value="{$smarty.session.variBoxAnzahl_arr[$cVariBox]->fAnzahl|replace_delim}"{if $smarty.session.variBoxAnzahl_arr[$cVariBox]->bError} style="background-color: red;"{/if} /> 
./tpl_inc/boxes/box_finanzierung.tpl:6:   <div class="subbox_content" style="padding:5px">
./tpl_inc/boxes/box_zuletzt_angesehen.tpl:20:      <div class="sidebox_content" style="position:relative;">
./tpl_inc/boxes/box_trustedshops_siegel.tpl:5:         <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111">
./tpl_inc/boxes/box_trustedshops_siegel.tpl:9:                  <div id="tsBox" style="font-size:80%;">
./tpl_inc/boxes/box_trustedshops_siegel.tpl:10:                  <div style="background-color:#FFFFFF;font-family: Verdana, Arial, Helvetica, sans-serif;background-image: url({$Boxen.TrustedShopsSiegelbox->cBGBild});background-repeat: repeat;background-position: left top;vertical-align:middle;width:150px;margin-top:0px;border:1px solid #C0C0C0;padding:2px;" id="tsInnerBox">
./tpl_inc/boxes/box_trustedshops_siegel.tpl:11:                  <div style="text-align:center;width:150px;float:left; border:0px solid; padding:2px;" id="tsSeal"><a target="_blank" href="{$Boxen.TrustedShopsSiegelbox->cLogoURL}"><img style="border:0px none;" src="{$Boxen.TrustedShopsSiegelbox->cBild}" title="{lang key='ts_seal_classic_title' section='global'}"></a></div>
./tpl_inc/boxes/box_trustedshops_siegel.tpl:12:                  <div style="text-align:center;line-height:125%;width:150px;float:left;border:0px solid; padding:2px;" id="tsText"><a style="font-weight:normal;text-decoration:none;color:#000000;" title="{lang key='ts_info_classic_title' section='global'} {$cShopName}" href="{$Boxen.TrustedShopsSiegelbox->cLogoSiegelBoxURL}" target="_blank">{$cShopName} {lang key="ts_classic_text" section="global"}</a></div>
./tpl_inc/boxes/box_trustedshops_siegel.tpl:13:                  <div style="clear:both;"></div>
./tpl_inc/suche_finanzierung.tpl:3:<div style="text-align: center;">
./tpl_inc/suche_finanzierung.tpl:4:   <table style="width: 100%; border: 1px solid lightyellow;">
./tpl_inc/suche_finanzierung.tpl:30:   <table style="width: 100%" cellspacing="1">
./tpl_inc/suche_finanzierung.tpl:31:      <tr style="background-color: #DDDDDD ! important;">
./tpl_inc/suche_finanzierung.tpl:47:      <tr style="background-color: #CCCCCC ! important;">
./tpl_inc/artikel_uploads.tpl:38:               <td class="tcenter" style="width:91px">
./tpl_inc/bestellvorgang_bestaetigung.tpl:57:            <fieldset style="margin: 0 5px 0 0">
./tpl_inc/bestellvorgang_bestaetigung.tpl:65:            <fieldset style="margin: 0 0 0 5px">
./tpl_inc/bestellvorgang_bestaetigung.tpl:77:            <fieldset style="margin: 0 5px 0 0">
./tpl_inc/jtl_wunschliste_emailversand.tpl:27:      <td valign="top"><textarea name="email" rows="5" style="width:100%"></textarea></td>
./tpl_inc/artikel_inc.tpl:218:            <div class="financing tleft" id="commerz_financing" {if !isset($Artikel->oRateMin)}style="display:none"{/if}>
./tpl_inc/artikel_inc_ex.tpl:68:   <div class="article_details" style="width:300px;float:left;padding: 0 10px 0 0">
./tpl_inc/artikel_inc_ex.tpl:70:      <h1 style="margin:0 0 3px 0;font-size:1.4em">{$Artikel->cName}</h1>
./tpl_inc/artikel_inc_ex.tpl:71:      <p style="font-size:0.9em">{lang key="productNo" section="global"}: {$Artikel->cArtNr}</p>
./tpl_inc/artikel_inc_ex.tpl:73:      <p style="font-size:0.9em;margin:10px 0">{$Artikel->cKurzBeschreibung}</p>
./tpl_inc/artikel_inc_ex.tpl:90:         <fieldset class="article_buyfield" style="background-color:#fff;padding:0;">
./tpl_inc/artikel_inc_ex.tpl:104:            <div class="variations" style="padding: 10px 0;border-top: 1px dotted #ccc">
./tpl_inc/artikel_inc_ex.tpl:107:                  <li class="label" style="font-weight:normal;font-size:0.9em">{$Variation->cName}</li>
./tpl_inc/artikel_inc_ex.tpl:110:                        <select style="width:220px" class="variation" id="eigenschaftwert_{$Variation->kEigenschaft}" name="eigenschaftwert_{$Variation->kEigenschaft}" onchange="{if $Artikel->nIstVater != 1}var_sel({$Variation->kEigenschaft});{/if} {if !$Artikel->Preise->strPreisGrafik_Detail}aktualisierePreis(); aktualisiereGewicht();{/if} {if $Artikel->nIstVater == 1}xajax_checkVarkombiDependencies({$Artikel->kArtikel}, '{$Artikel->cURL}', {$Variation->kEigenschaft}, this.options[this.options.selectedIndex].value);{/if}">
./tpl_inc/artikel_inc_ex.tpl:195:   <div style="overflow:hidden;text-align:left;background-color:whiteSmoke;-webkit-border-radius:10px;padding:15px">
./tpl_inc/artikel_inc_ex.tpl:197:      <div class="box_plain" style="border-bottom: 1px dotted #ccc;padding: 0 0 20px 0;margin: 0 0 20px 0;">
./tpl_inc/artikel_inc_ex.tpl:214:               <p style="font-size:0.9em;color:#666">
./tpl_inc/artikel_inc_ex.tpl:227:                     <span class="price updateable" id="price" style="font-size:24px;font-family:segoe ui, arial, helvetica, clean, sans-serif;color:#222">{$Artikel->Preise->cVKLocalized[$NettoPreise]}</span>
./tpl_inc/artikel_inc_ex.tpl:237:               <p style="padding: 2px 0 0 0"><span class="vat_info" style="">{$Artikel->cMwstVersandText}</span></p>
./tpl_inc/artikel_inc_ex.tpl:274:                  <button name="inWarenkorb" type="submit" value="{lang key="addToCart" section="global"}" class="submit" style="width:100%;height:30px !important"><span>{lang key="addToCart" section="global"}</span></button>
./tpl_inc/artikel_inc_ex.tpl:309:   <div style="clear:both"></div>
./warenkorb.tpl:116:                                 <p style="font-size:1.1em;line-height:1.6em">
./warenkorb.tpl:119:                                 <p style="color:#666">&bull; {lang key="productNo" section="global"}: {$oPosition->Artikel->cArtNr}</p>
./warenkorb.tpl:121:                                    <p style="color:#666">&bull; {lang key="pricePerUnit" section="productDetails"}: {$oPosition->cEinzelpreisLocalized[$NettoPreise][$smarty.session.cWaehrungName]}</p>
./warenkorb.tpl:127:                                 <p class="base_price" style="color:#666">&bull; {lang key="basePrice" section="global"}: {$oPosition->Artikel->cLocalizedVPE[$NettoPreise]}</p>
./wunschliste.tpl:38:               <td style="width:10%"><a href="{$CWunschlistePos->Artikel->cURL}"><img src="{$CWunschlistePos->Artikel->Bilder[0]->cPfadKlein}" class="image"></a></td>
 

david

Administrator
Mitarbeiter
16. Juli 2010
2.310
170
AW: Inline CSS

Zitat von themroc:
Also Blödsinn find ich das nicht :)
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.
Wenn du dir die gelisteten Dateien mal anschaust, mit dem Gesamtumfang des Templates vergleichst und überlegst, wieviel Inline-CSS-Code im Shop-Frontend davon wirklich ankommt, ist die Behauptung "voll mit Inline CSS" maßlos übertrieben.

Trotzdem danke für die Auflistung, an der ein oder anderen Stelle lässt sich hier definitiv auf inline-CSS verzichten.
 

Gelöschter Benutzer 39624

Guest
AW: Inline CSS

Zitat von Thomas Lisson:
Warum? Deine Tpls haben doch _custom als Suffix und werden nicht überschrieben bei einem Update.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Ich kann meine Customs doch nicht einfach unverändert lassen wenn eine neue Shop-Version rauskommt (z.B. header.tpl)...
In meinen Custom Templates habe ich im Zuge meiner Anpassungen das Inline CSS natürlich entfernt. Wenn ich jetzt ein Diff meines Templates und dem neuen von euch analysiere, muss ich jedesmal zusätzlich mit der älteren Version vergleichen.
 

Gelöschter Benutzer 39624

Guest
AW: Inline CSS

Zitat von david:
Wenn du dir die gelisteten Dateien mal anschaust, mit dem Gesamtumfang des Templates vergleichst und überlegst, wieviel Inline-CSS-Code im Shop-Frontend davon wirklich ankommt, ist die Behauptung "voll mit Inline CSS" maßlos übertrieben.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

Naja gut, "voll" ist tatsächlich übertrieben. Aber trotzdem: sowas sollte grundsätzlich eliminiert werden!
 

Gelöschter Benutzer 39624

Guest
AW: Inline CSS

Mir ist ja klar, dass hier alle vollauf vom JTL Shop begeistert sind und meine Kritik als Lappalie angesehen wird... trotzdem bleibe ich dabei: Inline CSS bleibt einzig und allein Javascript-Manipulationen vorbehalten. Ein einziges Style-Attribut im HTML ist schon zu viel :)
 

ag-websolutions.de

Sehr aktives Mitglied
29. Dezember 2009
14.548
233
AW: Inline CSS

seh es doch anderes und sei froh dass JTL quellcode-offene templates auf smarty-Basis integriert hat, die du nach Lust und Laune verändern kannst
 

Thomas Lisson

Administrator
Mitarbeiter
24. März 2006
15.574
300
Köln
AW: Inline CSS

Ist hier berechtigte Kritik unerwünscht?
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.
Keineswegs

Ist halt eine Frage wie man sie rüberbringt.

wieso um alles in der Welt sind die Templates voll mit Inline CSS?
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.
Schaut euch mal Style-Guides für saubere Trennung von HTML und CSS an.
Klicke in dieses Feld, um es in vollständiger Größe anzuzeigen.

So jedenfalls machst du dir keine Freunde im ersten Post.
 
Du musst Dich einloggen oder registrieren um hier antworten zu können.
Top Bottom