CSS Tipps

Navigation • •

Das Hinzufügen oder Ändern von CSS-Code ist der einfachste Weg, um die grafische Ausgabe eines E-Shops zu verändern.

Phoca Cart Image Zoom Plugin - ändert die Größe des Fensters, um Bilddetails anzuzeigen

.drift-zoom-pane {
  height: 15rem;
}

'Spinner' im Helium Template anzeigen (Gantry)

#ph-pc-checkout-box .form-inline .form-group .ph-input-quantity {
    width: 50px;
    height: 30px;
}

#ph-pc-item-box .bootstrap-touchspin .input-group-btn-vertical,
#ph-pc-checkout-box .bootstrap-touchspin .input-group-btn-vertical {
    z-index: 2;
}

Formular-Eingabefelder in der Administration ausblenden

Nehmen wir an, Sie haben einen Kunden, der bei der Bearbeitung eines Produkts nur sehr wenige Felder verwendet. Und Sie möchten ihm die Arbeit erleichtern, indem Sie die Verwaltung vereinfachen. In Phoca Cart können Sie CSS verwenden, um ganze Registerkarten, aber auch nur einzelne Parameter auszublenden.

Als Beispiel: Wir wollen bei der Produktbearbeitung alle Registerkarten außer der ersten ausblenden, und in der ersten Registerkarte blenden wir alle Formularfelder außer Titel, Alias und Preis aus. Erstellen Sie im Administrations-Template eine user.css (custom.css) und fügen Sie dort den folgenden CSS-Code ein.

/* Hide objects in edit - administration - Product edit example */

/* Entire tab */
/*#phocacartitem joomla-tab-element#general, #phocacartitem joomla-tab button[aria-controls="general"],*/
#phocacartitem joomla-tab-element#image, #phocacartitem joomla-tab button[aria-controls="image"],
#phocacartitem joomla-tab-element#attributes, #phocacartitem joomla-tab button[aria-controls="attributes"],
#phocacartitem joomla-tab-element#specifications, #phocacartitem joomla-tab button[aria-controls="specifications"],
#phocacartitem joomla-tab-element#related, #phocacartitem joomla-tab button[aria-controls="related"],
#phocacartitem joomla-tab-element#stock, #phocacartitem joomla-tab button[aria-controls="stock"],
#phocacartitem joomla-tab-element#discount, #phocacartitem joomla-tab button[aria-controls="discount"],
#phocacartitem joomla-tab-element#download, #phocacartitem joomla-tab button[aria-controls="download"],
#phocacartitem joomla-tab-element#size, #phocacartitem joomla-tab button[aria-controls="size"],
#phocacartitem joomla-tab-element#reward, #phocacartitem joomla-tab button[aria-controls="reward"],
#phocacartitem joomla-tab-element#publishing, #phocacartitem joomla-tab button[aria-controls="publishing"],
#phocacartitem joomla-tab-element#feed, #phocacartitem joomla-tab button[aria-controls="feed"],
#phocacartitem joomla-tab-element#metadata, #phocacartitem joomla-tab button[aria-controls="metadata"] { 
	display: none;
}

/* Individual parameters */
/*#phocacartitem .ph-par-title,
#phocacartitem .ph-par-alias,
#phocacartitem .ph-par-price,*/
#phocacartitem .ph-par-price_original,
#phocacartitem .ph-par-tax_id,
#phocacartitem .ph-par-catid_multiple,
#phocacartitem .ph-par-catid,
#phocacartitem .ph-par-manufacturer_id,
#phocacartitem .ph-par-sku,
#phocacartitem .ph-par-upc,
#phocacartitem .ph-par-ean,
#phocacartitem .ph-par-jan,
#phocacartitem .ph-par-mpn,
#phocacartitem .ph-par-isbn,
#phocacartitem .ph-par-serial_number,
#phocacartitem .ph-par-registration_key,
#phocacartitem .ph-par-external_id,
#phocacartitem .ph-par-external_key,
#phocacartitem .ph-par-external_link,
#phocacartitem .ph-par-external_text,
#phocacartitem .ph-par-external_link2,
#phocacartitem .ph-par-external_text2,
#phocacartitem .ph-par-access,
#phocacartitem .ph-par-group,
#phocacartitem .ph-par-featured,
#phocacartitem .ph-par-featured_background_image,
#phocacartitem .ph-par-video,
#phocacartitem .ph-par-public_download_file,
#phocacartitem .ph-par-public_download_text,
#phocacartitem .ph-par-public_play_file,
#phocacartitem .ph-par-public_play_text,
#phocacartitem .ph-par-condition,
#phocacartitem .ph-par-type_feed,
#phocacartitem .ph-par-type_category_feed,
#phocacartitem .ph-par-description,
#phocacartitem .ph-par-description_long,
#phocacartitem .ph-par-features 
#phocacartitem .ph-par-special_parameter,
#phocacartitem .ph-par-special_image { 
	display: none;
}

/* Additional box */
#phocacartitem joomla-tab-element#general .ph-admin-additional-box {
	display: none;
}

Jetzt werden alle benötigten Formularfelder, Registerkarten oder zusätzlichen Felder ausgeblendet.

Registerkarten, Parameter oder zusätzliche Felder in der Administration ausblenden