Eigene CSS Tabellendefinition im custom_content

Shopsitters

Sehr aktives Mitglied
27. Juli 2011
1.385
77
Schleswig-Holstein
Hallo Forum,

ich möchte gerne auf einer eigenen Seite eine Tabelle einfügen, die jedoch optisch ansprechend ist.
Hierfür habe ich mir mittels eines CSS Generators eine CSS Beschreibung erstellt.

Code: 
#content.custom_content.datagrid {font: normal 12px/150% Verdana, Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 2px solid #CCCCCC; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#content.custom_content.datagrid table { border-collapse: collapse; text-align: left; width: 100%; } 
#content.custom_content.datagrid table td, 
#content.custom_content.datagrid table th { padding: 3px 10px; }
#content.custom_content.datagrid table tbody td { color: #525252; font-size: 12px;border-bottom: 1px solid #CCCCCC;font-weight: normal; }
#content.custom_content.datagrid table tbody td:first-child { border-left: none; }
#content.custom_content.datagrid table tbody tr:last-child td { border-bottom: none; }

Leider wird mir das Resultat leider nicht angezeigt.

im HTML (Eigene Seite) ist das wie folgt eingebaut

Code: 
<div class="datagrid">
    <table>
        <tbody>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
            <tr>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
                <td>
                    data</td>
            </tr>
        </tbody>
    </table>
</div>

Der Shop ist Version 3.15 und im Wartungsmodus
Link zum Shop: hier
Falls jemand sich das anschauen möchte Administrator :"forumtest" Passwort "forumtest"
Es geht mir um die Seite Versand.

Danke Euch - würde mich über eine Auflösuzng der Denkblockade freuen
Lars
 

frijk

Gut bekanntes Mitglied
16. Juni 2009
218
7
AW: Eigene CSS Tabellendefinition im custom_content

Hallo Lars,

da fehlen ein paar Leerzeichen bei den Selektoren - probiere es doch mal so:

Code: 
#content .custom_content .datagrid {font: normal 12px/150% Verdana,  Arial, Helvetica, sans-serif; background: #fff; overflow: hidden;  border: 2px solid #CCCCCC; -webkit-border-radius: 8px;  -moz-border-radius: 8px; border-radius: 8px; }
#content .custom_content .datagrid table { border-collapse: collapse; text-align: left; width: 100%; } 
#content .custom_content .datagrid table td, 
#content .custom_content .datagrid table th { padding: 3px 10px; }
#content .custom_content .datagrid table tbody td { color: #525252;  font-size: 12px;border-bottom: 1px solid #CCCCCC;font-weight: normal; }
#content .custom_content .datagrid table tbody td:first-child { border-left: none; }
#content .custom_content .datagrid table tbody tr:last-child td { border-bottom: none; }

Viele Grüße,
Michael
 

Shopsitters

Sehr aktives Mitglied
27. Juli 2011
1.385
77
Schleswig-Holstein
AW: Eigene CSS Tabellendefinition im custom_content

Hallo Michael,
danke Dir für die super schnelle Reaktion ...
Ich habe gerade Deine Änderung nochmal neu hochgeladen, aber leider ohne Erfolg.
Vielleicht hast Du ja noch eine Idee.

Gruss
Lars
 

frijk

Gut bekanntes Mitglied
16. Juni 2009
218
7
AW: Eigene CSS Tabellendefinition im custom_content

Hallo nochmal,

ich habe gerade nochmal draufgeschaut: die betreffenden css-Zeilen habe ich leider nirgendwo finden können. Wo und in welche Datei hast du diese denn eingefügt? Sollten am besten in die custom/theme.css...

Viele Grüße,
Michael
 

Shopsitters

Sehr aktives Mitglied
27. Juli 2011
1.385
77
Schleswig-Holstein
AW: Eigene CSS Tabellendefinition im custom_content

Hallo Michael,

ja, habe ich in die custom/theme.css eingefügt. Zur Sicherheit habe ich dort auch noch die folgende Änderung mi ">" hinzugefügt.

#content > .custom_content > .datagrid {font: normal 12px/150% Verdana, Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 2px solid #CCCCCC; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#content > .custom_content > .datagrid table { border-collapse: collapse; text-align: left; width: 100%; }
#content > .custom_content > .datagrid table td,
#content > .custom_content > .datagrid table th { padding: 3px 10px; }
#content > .custom_content > .datagrid table tbody td { color: #525252; font-size: 12px;border-bottom: 1px solid #CCCCCC;font-weight: normal; }
#content > .custom_content > .datagrid table tbody td:first-child { border-left: none; }
#content > .custom_content > .datagrid table tbody tr:last-child td { border-bottom: none; }

Gruß
Lars
 

frijk

Gut bekanntes Mitglied
16. Juni 2009
218
7
AW: Eigene CSS Tabellendefinition im custom_content

Hallo Lars,

in der eingebundenen theme.css steht der code aber nicht drin. Bist du sicher dass du im richtigen theme arbeitest?

Grüße,
Michael

Edith sagt: da war jemand schneller....
 

Shopsitters

Sehr aktives Mitglied
27. Juli 2011
1.385
77
Schleswig-Holstein
AW: Eigene CSS Tabellendefinition im custom_content

Hallo Michael, Hallo Casim,

hmm also ich habe die theme.css verwendet, die ich seit jetzt 1,5 Wochen nutze und laut Filezilla passt das Änderungsdatum + Änderungszeit mit meiner Anpassung zusammen. Muss ich vielleicht den Template Cache löschen oder hilft das nicht? Die theme.css finde ich unter /html/XXXXXXXXXXX/templates/JTL-Shop3-Tiny/custom

Gruss
Lars
 

Shopsitters

Sehr aktives Mitglied
27. Juli 2011
1.385
77
Schleswig-Holstein
AW: Eigene CSS Tabellendefinition im custom_content

Gerne, anbei die komplette CSS Datei - der Abschnitt für die Tabelle ist ganz unten
Basis ist das Lucid Theme

BTW: Danke für die rege Unterstützung *super*

Gruss
Lars

Code: 
/*     JTL-Shop3 Tiny Theme "Lucid" 
** 
**     @author JTL-Software.de
**    
*/

/* Tiny-Styles zuruecksetzen */
#headlinks, #headlinks.active { background: transparent url(images/main_backgrounds.png) no-repeat top left; height: 48px; border: none; }
#headlinks ul li > a, #headlinks ul li > a:hover, #headlinks li.basket > a, #headlinks li.basket > a:hover { background-color: transparent;  margin: 0; padding: 0 0 0 10px; -moz-border-radius: 0; border-radius: 0; }
#headlinks li { padding: 0; }
#speciallinks { display: none; }

#headlinks_wrapper { margin-left: 0;background:  url(images/header.png); background-position: top left; background-repeat: no-repeat;}

.form fieldset select, .form fieldset textarea, .form fieldset input[type="text"], .form fieldset input[type="password"] { font-size: 1em; }
#styled_view li.gallery { width: 32.9%; }

/* Base Styles */
.page_width { width: 980px; }
body { color: #444; background: #F4F4F4 url(images/page_bg.jpg) repeat-x top left; }
#page { background: transparent none; }
#content { background: #fff; border: 1px solid #ccc; padding: 10px; -moz-border-radius:5px 5px 5px 5px; }
.sidebox { background: #fff; }
a, a:visited, a:link { color: #666; }
a:hover, a:focus { color: #fc7f20; }
h1, h2 { text-transform: none; }
#breadcrumb, #breadcrumb a { color: #999; }
#logo a { position:relative; display: block; margin-top: 10px; z-index: 999; }
#logo img { position: inherit; top: 0; }
#headlinks ul li > a, .sidebox h3 { font: 14px /*"Trebuchet MS"*/Tahoma , sans-serif; font-weight: bold;  color: #fff !important; /*text-transform:uppercase;*/ text-shadow:0 0 1px #000000;}

#page_wrapper { margin-top: 10px; }

/* Eigene Header-Styles */

#header, #header_wrapper { height: 150px; position: relative; }
#style, #settings { top: 15px; right: 300px;  }

/* Suche */
#search { background:none repeat scroll 0 0 transparent; padding:0; position:relative; text-align:right; top:-100%; }
#search-form { width:300px; padding-right:10px; position:absolute; right:0; top:0; height: 40px; padding: 15px 0 0 0; }
#search input[type="text"], #submit_search { vertical-align: top; }
#search input[type="text"] { width:180px; border: none; background: transparent url(images/search_input_bg.png) top left no-repeat; height: 25px; line-height: 25px; padding: 0 10px; }
#submit_search { width: 76px; border: none; background: transparent url(images/search_button_bg.png) top left no-repeat; height: 25px; line-height: 25px; padding: 0 20px 0 0px; font-size: 12px; }
#submit_search:hover span, #submit_search:focus span { text-decoration: underline; }

/* Headlinks */
#headlinks ul li > a, #headlinks ul li > a > span { line-height: 48px; height: 48px; display: block; }
#headlinks ul li > a, #headlinks ul li.basket { background: transparent url(images/main_backgrounds.png) repeat-y 0 144px; padding-right: 0; }
#headlinks ul li > a:hover, #headlinks ul li > a:focus, #headlinks ul li.current > a { background-position: 0 96px !important; }

#headlinks ul li.first > a { background-position: top left; }
#headlinks ul li.first > a:hover, #headlinks ul li.first > a:focus, #headlinks ul li.first.current > a { background-position: 0 192px !important; }
#headlinks ul li > a > span { padding-right: 10px; }

#headlinks ul li.basket { position: relative; left: -10px; background-position: 9px 144px; }
#headlinks ul li.basket > a, #headlinks ul li.basket > a:hover { padding-left: 10px; position: relative; left: 10px; background: transparent url(images/main_backgrounds.png) top right !important; }
#headlinks li.basket.items > a { padding-right: 0; }
#headlinks ul li.basket > a > span { padding-left: 20px; background: transparent url(images/cart.png) no-repeat 0px 15px; }
#headlinks ul li.basket > a:hover, #headlinks ul li.basket > a:focus, #headlinks ul li.basket.current > a { background-position: right 192px !important; }

#headlinks li.basket div { top: 48px; }
#headlinks li.basket div.articles { border-color: #ccc; right: -10px; -moz-border-radius:5px 5px 5px 5px; }

/* Sidepanels */
.panel_left #sidepanel_left { width: 200px; }
.panel_left #content { margin-left: 210px; }
.panel_right #content { margin-right:210px; }

.sidebox { border: none; }
.sidebox h3 { background: transparent url(images/main_backgrounds.png) 0 288px repeat-y; border: none; }
.sidebox .sidebox_content { border: 1px solid #ccc; border-top: none; }

span.price
{
    color: #008000;
    font-size: 1.8em;
    font-weight: normal;
    vertical-align: middle;
    white-space: nowrap;
}

.financing, .comment, .differential_price, #article .article_matrix, #article fieldset.article_buyfield
{
     border: 1px solid #cccccc;
    margin-top: 1em;
    margin-right: 0px;
    margin-bottom: 1em;
    margin-left: 0px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    background-color: #f5f5f5;
    display: inline-block;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

ul.categories li a
{
    display: block;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-left: 0px;
    border-bottom: 1px solid #cccccc;
    list-style: none;
}

/* Line 36 */
ul.categories li a:hover a:visited
{
    background-color: #f2f5fa;
}

ul.categories li a:active
{
    background-color: #999;
}

#footer .footer_box
{
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    padding-top: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-left: 15px;
}

/* Line 209 */
#footer .footer_box fieldset.newsletter input[type="text"]
{
    width: 245px;
    background: transparent url(images/newsletter_input_bg.png) top left no-repeat; height: 25px;
    padding-bottom:7px;
    padding-top:0px;
    padding-left:5px;
    border: none;
}

#footer_wrapper
{
    text-align: center;
    background-color: #F4F4F4;
    clear: both;
}

.signal_image.a1
{
    color:  #FF9500;
    background-color: transparent;
    background-image: url(images/ampel1.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0px 0px;
    background-clip: border-box;
    background-origin: padding-box;
    background-size: auto auto;
    
}                            

#content .custom_content .attributes p {margin-bottom: 2px; padding-left: 28px;
background: transparent url(images/green_check.png) top left no-repeat; min-height: 25px;}
#content .custom_content .attributes {margin-top: 10px; padding-top: 25px; border-top : 1px solid #cccccc;}

button.wishlist {
   background: url(images/merkliste.png) no-repeat 0 50%;
   padding-left: 20px;
}


#content > .custom_content > .datagrid {font: normal 12px/150% Verdana,  Arial, Helvetica, sans-serif; background: #fff; overflow: hidden;  border: 2px solid #CCCCCC; -webkit-border-radius: 8px;  -moz-border-radius: 8px; border-radius: 8px; }
#content > .custom_content > .datagrid table { border-collapse: collapse; text-align: left; width: 100%; } 
#content > .custom_content > .datagrid table td, 
#content > .custom_content > .datagrid table th { padding: 3px 10px; }
#content > .custom_content > .datagrid table tbody td { color: #525252;  font-size: 12px;border-bottom: 1px solid #CCCCCC;font-weight: normal; }
#content > .custom_content > .datagrid table tbody td:first-child { border-left: none; }
#content > .custom_content > .datagrid table tbody tr:last-child td { border-bottom: none; }
 

casim

Sehr aktives Mitglied
26. Juni 2012
5.934
10
AW: Eigene CSS Tabellendefinition im custom_content

die css sieht gut aus ... trotzdem hört es in deinem shop mit der css-definition "button.wishlist" auf ... wenn du möchtest, schau ichmal mit ftp drauf ... dann schick mir bitte einen ftp-zugang per PN
 

casim

Sehr aktives Mitglied
26. Juni 2012
5.934
10
AW: Eigene CSS Tabellendefinition im custom_content

Fehler gefunden ... du bearbeitest die falsche theme.css!!

Deine falsche liegt unter ... /templates/JTL-Shop3-Tiny/custom ... (und hat auch Änderungsdatum von heute)

Die RICHTIGE liegt aber unter ... /templates/JTL-Shop3-Tiny/themes/custom ... und datiert vom 30.08.2012
 
Du musst Dich einloggen oder registrieren um hier antworten zu können.
Ähnliche Themen
Titel Forum Antworten Datum
Neu Eigene Übersicht - Artikelbestand alle Läger Eigene Übersichten in der JTL-Wawi 0
JT WAWI 1.9.6.1 Eigene Felder werden nicht mehr übertragen, bzw. gelöscht JTL-Wawi 1.9 11
Neu Eigene Kategorien für ebay Angebote oder JTL Wawi Kategorie Baum nutzen Einrichtung und Installation von JTL-eazyAuction 0
Neu List & Label - Eigene SQL-Abfrage als Grundlage für Tabelle im Berichtscontainer? User helfen Usern - Fragen zu JTL-Wawi 10
QR-Code Formel kann nicht in die eigene Vorlage hinzugefügt werden JTL-Wawi 1.9 1
Neu JTL Shop 5.4.0 eigene Inhalte/Seiten hinzufügen nicht möglich JTL-Shop - Fehler und Bugs 5
Neu SQL Eigener Export - Eigene Felder im Auftrag User helfen Usern - Fragen zu JTL-Wawi 7
Neu Eigene Felder aus dem Auftrag in der Packtisch+ / WMS Ausgabe JTL-WMS / JTL-Packtisch+ - Ideen, Lob und Kritik 4
Lieferscheine -versendet / Eigene Übersicht: Kundenkategorie aus den Kundenstammdaten JTL-Wawi 1.8 3
Neu Eigene Felder / Attribute spaltenweise exportieren JTL Ameise - Eigene Exporte 6
Neu Wie kann ich über eigene Felder eine Mehrfachauswahl erstellen? User helfen Usern - Fragen zu JTL-Wawi 4
Neu Eigene Übersichten - Beschaffung - Bestellvorschläge - nur Standardlieferant anzeigen Eigene Übersichten in der JTL-Wawi 4
Neu Eigene Übersicht Kunde QR Code Kundennummer Eigene Übersichten in der JTL-Wawi 4
Eigene USt-IdNr. fehlt in der Auftragsansicht bei Auslandsbestellungen (JTL-Wawi 1.8.12.2) JTL-Wawi 1.8 3
Neu Eigene Alerts im Template ausgeben bzw. hinzufügen Templates für JTL-Shop 0

Ähnliche Themen

Top Bottom