Media Gallery image-info-wrapper
Eingetragen von knork (76)am 22.10.2012 - 09:35 Uhr in
Hallo!
ich setze die media gallery ein. funktioniert soweit gut..
die bilder werden wie folgt angezeigt:
das-bild (media-gallery-detail) die-bild-beschreibung (field field-name-media-description field-type-text-long field-label-above)
bild x von y zurück vor
den teil "bild x von y zurück vor" das ist der media-gallery-detail-image-info-wrapper. diesen will ich unter die beschreibung verschieben.
ich blick aber nicht durch in welcher config ich das ändern muss. hab schon versucht die media_gallery.theme.inc zu ändern, hab aber nicht hinbekommen.
kann mir jemand weiter helfen?
- Anmelden oder Registrieren um Kommentare zu schreiben
Es ist keine gute Idee, die
am 22.10.2012 - 10:30 Uhr
Es ist keine gute Idee, die media_gallery.theme.inc. zu ändern, denn beim nächsten Update des Moduls Medai Gallery würden deine Änderungen ja überschrieben werden und du müsstest wieder von vorne anfangen.
Kannst du dieses Objekt nicht per CSS verschieben ?
In der Regel funktioniert das ganz einfach und diese Änderung würde auch nicht bei einem Update des Moduls überschrieben werden.
Gruß
Berthold
ich hab keine ahnung ob das
am 22.10.2012 - 14:34 Uhr
ich hab keine ahnung ob das geht und wenn ja wie....
hier ma der code aus der css
/* @group Node edit form styles */
.settings-group {
clear: both;
margin-top: 1.5em;
}
.settings-group > img {
float: left;
margin-bottom: 2em;
margin-right: 2em;
}
.settings-group .group-label {
font-weight: bold;
margin-bottom: 0.75em;
}
.settings-group .form-item {
padding: 0;
}
.settings-group .form-item label {
font-weight: normal;
}
.settings-group .form-item label.option {
font-size: 1em;
vertical-align: middle;
}
.settings-group .form-item div.description {
font-size: 0.87em;
margin-top: 0;
}
.settings-group .form-inline {
float: left;
}
.settings-group .form-inline label {
display: none;
}
.settings-group .form-inline select {
margin: 2em 1em 0 0;
}
.settings-group .form-inline.label label {
display: block;
position: absolute;
}
.settings-group .form-select.enhanced {
margin-right: 1em;
}
.no-overflow {
overflow: hidden;
}
.field-name-media-gallery-format .form-type-radio label.option,
.field-name-media-gallery-lightbox-extras .form-type-checkbox label.option {
font-size: 0.94em;
line-height: 1.2em;
}
.field-name-media-gallery-format .form-type-radio label.option .description {
color: #666666;
display: block;
font-size: 0.86em;
}
.no-label label,
.no-group-label > .form-item > label {
display: none;
}
.setting-icon {
background: url('images/gallery-icon-sprite.png') no-repeat left top transparent;
display: block;
float: left;
height: 44px;
margin: 0 0.5em;
width: 42px;
}
.settings-group .setting-icon {
height: 109px;
width: 104px;
}
.gallery-settings .setting-icon {
background-position: -442px -57px;
}
.presentation-settings .setting-icon {
background-position: 0 -57px;
}
.block-settings .setting-icon {
background-position: -331px -57px;
}
.galleries-settings .setting-icon {
background-position: -552px -57px;
}
/* @end */
/* @group Galleries form styles */
.form-media-gallery-collection .field-name-field-license {
clear: both;
}
#edit-media-gallery-lightbox-extras {
margin-left: 2em;
margin-top: -1em;
}
.presentation-settings .setting-icon.display-page {
background-position: -221px -57px;
}
.presentation-settings .setting-icon.display-lightbox {
background-position: 0 -57px;
}
.presentation-settings .setting-icon.display-extras {
background-position: -110px -57px;
}
/* @end */
/* @group Gallery thumbnail styles */
.media-gallery-collection a.media-gallery-thumb,
.media-gallery-media a.media-gallery-thumb,
.media-gallery-thumb img {
display: block;
overflow: hidden;
position: relative;
}
.media-gallery-media > .field-items > .field-item {
float: left;
position: relative;
}
.media-gallery-media .media-gallery-item-wrapper {
margin: 0.5em;
position: relative;
}
.media-gallery-media .media-gallery-item {
background: #FFFFFF;
border: 1px solid #666666;
padding: 2%;
}
.meta-wrapper,
.meta-wrapper:link,
.meta-wrapper:hover,
.meta-wrapper:visited,
.meta-wrapper:active {
font-size: 0.8462em;
line-height: 1.5em;
min-height: 3em;
vertical-align: top;
}
.meta-wrapper .media-title * .field-item,
.meta-wrapper .media-title {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
-moz-binding: url('ellipsis.xml#ellipsis');
}
.meta-wrapper {
display: block;
padding: 0 9%;
}
.meta-wrapper.hover {
line-height: 1em;
padding: 0;
}
.meta-wrapper .media-description span {
white-space: nowrap;
}
.media-license {
display: block;
float: right;
font-size: 0;
line-height: 14px;
}
.media-gallery-media .media-license {
float: left;
margin: 4px 0 0;
}
.media-license span {
background: url('') no-repeat left top transparent;
display: inline-block;
font-size: 1em;
height: 0;
padding: 7px;
width: 0;
}
.media-license span + span {
margin-left: 3px;
}
.media-license.dark .copyright {
background-position: -95px -1px;
}
.media-license.dark .attribution {
background-position: -2px -1px;
}
.media-license.dark .non-commercial {
background-position: -25px -1px;
}
.media-license.dark .share-alike {
background-position: -49px -1px;
}
.media-license.dark .no-deriv {
background-position: -72px -1px;
}
.media-license.light .copyright {
background-position: -95px -51px;
}
.media-license.light .attribution {
background-position: -2px -51px;
}
.media-license.light .non-commercial {
background-position: -25px -51px;
}
.media-license.light .share-alike {
background-position: -49px -51px;
}
.media-license.light .no-deriv {
background-position: -72px -51px;
}
.media-license.medium .copyright {
background-position: -95px -26px;
}
.media-license.medium .attribution {
background-position: -2px -26px;
}
.media-license.medium .non-commercial {
background-position: -25px -26px;
}
.media-license.medium .share-alike {
background-position: -49px -26px;
}
.media-license.medium .no-deriv {
background-position: -72px -26px;
}
.meta-wrapper.hover {
color: #666;
display: none;
left: -2px;
line-height: 1.25em;
margin: -7px 0 0;
min-height: 0;
min-width: 100%;
position: absolute;
*right: -2px;
top: 100%;
z-index: 1;
}
.meta-wrapper.hover .slider {
background: url('images/hover-bubble.png') no-repeat left top transparent;
display: block;
}
.meta-wrapper.hover .slider.top {
padding-left: 53px;
}
.meta-wrapper.hover .slider.top-inner {
background-position: right -48px;
height: 14px;
}
.meta-wrapper.hover .slider.meta-outer {
background: url('images/hover-bubble-middle.png') repeat-y left top transparent;
padding-left: 0.5em;
}
.meta-wrapper.hover .slider.meta-inner {
background: url('images/hover-bubble-middle.png') repeat-y right top transparent;
padding-right: 0.5em;
}
.meta-wrapper.hover .slider.bottom {
background-position: left -42px;
padding-left: 53px;
}
.meta-wrapper.hover .slider.bottom-inner {
background-position: right bottom;
height: 5px;
}
.meta-wrapper .media-title {
display: block;
font-size: 12px;
font-weight: bold;
height: 1.5em;
line-height: 1.5em;
white-space: nowrap;
}
.meta-wrapper.hover .media-title {
color: #000;
}
.meta-wrapper.hover .media-title a,
.meta-wrapper.hover .media-title a:hover {
color: #000;
}
.media-gallery-item-wrapper:hover .meta-wrapper.hover,
.media-collection-item-wrapper:hover + .meta-wrapper.hover,
.meta-wrapper.hover:hover {
display: block;
}
.meta-inner span {
display: block;
}
.media-description span {
display: inline;
line-height: 1em;
}
/* @end */
/* @group Gridding styles */
.media-gallery-media {
}
.mg-col {
display: inline-block;
margin: 0 -0.5em 3em;
width: 100%;
}
.mg-col > .field-items {
width: 100%;
}
a.media-gallery-thumb img,
.media-gallery-detail img {
height: auto;
overflow: auto;
width: 100%;
}
/**
* The following widths are inflected with !important to
* prevent users in the ThemeBuilder from destroying the
* presentation of their galleries if they alter the width
* of items with the .field class.
*/
.mg-col-1 > .field-items > .field-item,
.mg-col-1 .mg-gallery,
.media-gallery-detail .field-items > .field-item {
width: 100% !important;
}
.mg-col-2 > .field-items > .field-item,
.mg-col-2 .mg-gallery {
width: 50% !important;
}
.mg-col-3 > .field-items > .field-item,
.mg-col-3 .mg-gallery {
width: 33.3% !important;
}
.mg-col-4 > .field-items > .field-item,
.mg-col-4 .mg-gallery {
width: 24.96% !important;
}
.mg-col-5 > .field-items > .field-item,
.mg-col-5 .mg-gallery {
width: 20% !important;
}
.mg-col-6 > .field-items > .field-item,
.mg-col-6 .mg-gallery {
width: 16.6666666665% !important;
}
.mg-col-7 > .field-items > .field-item,
.mg-col-7 .mg-gallery {
width: 14.2857142857% !important;
}
.mg-col-8 > .field-items > .field-item,
.mg-col-8 .mg-gallery {
width: 12.5% !important;
}
.mg-col-9 > .field-items > .field-item,
.mg-col-9 .mg-gallery {
width: 11.1111111111% !important;
}
.mg-col-10 > .field-items > .field-item,
.mg-col-10 .mg-gallery {
width: 10% !important;
}
.mg-col .mg-gallery.mg-teaser {
float: left;
}
.mg-col .mg-gallery.mg-teaser,
.mg-col .mg-gallery.mg-teaser .content {
margin: 0;
outline: none;
position: relative;
}
.mg-col .mg-gallery.mg-teaser h2 {
display: none;
}
.mg-col .mg-gallery.mg-teaser .float-overflow {
margin: 0.5em;
overflow: visible;
position: relative;
}
/* @end */
/* @group Detail page styles */
.media-gallery-detail-wrapper {
margin-top: 1em;
}
.media-gallery-detail {
float: left;
margin-right: 1em;
line-height: normal;
max-width: 70%;
}
.media-gallery-detail-wrapper .field-name-media-description .field-item {
word-wrap: break-word;
}
.media-gallery-detail-info {
clear: both;
display: inline-block;
margin-top: 0.5em;
position: float;
overflow: hidden;
width: 100%;
}
.media-gallery-detail-info .media-license {
position: absolute;
top: 0;
right: 0;
}
.media-gallery-detail-info + .media-gallery-detail-info {
margin-top: 1em;
}
.media-gallery-detail-image-info-wrapper {
clear: right;
float: right;
}
.media-gallery-image-count {
padding-right: 1em;
}
/* @end */
Warum postest du denn die
am 22.10.2012 - 13:12 Uhr
Warum postest du denn die ganze css-Datei..... ?
Wenn es darum geht, wie man ein HTML-Objekt positioniert, dann kannst du z.B. hier nachschauen.
Und wie man eigene CSS-Dateien einbindet, dazu gibt es auch viele viele Tutorials, die auch sehr leicht zu verstehen sind, denn das ist eine ziemlich einfach Sachen.
Es ist nicht ratsam, die original-CSS-Datei des Moduls zu verändern, denn wie schon oben beschrieben führt das ja bei einem Update des Moduls automatisch dazu, dass die Änderungen überschrieben werden.
Deswegen: Nie eine Datei ändern, die man nicht selbst angelegt hat.
Gruß
Berthold
damit mir jemand zeigen kann
am 22.10.2012 - 14:02 Uhr
damit mir jemand zeigen kann wo ich was verändern muss.
ich bekomm das nicht hin und hab schon einige stunden arbeit investiert...
hab schon öfter css dateien editiert, aber hier steh ich aufm schlauch
desweiteren bin ich der meinung das ich das was ich ändern will, in dieser datei garnicht ändern kann, da die seitentahlen in nem anderen bereich dargestellt werden. oder irre ich mich da?
Ich versuche den Weg noch
am 22.10.2012 - 14:27 Uhr
Ich versuche den Weg noch einmal zu beschreiben:
1. Lege eine neue CSS-Datei an (falls du noch keine "eigene" CSS-Datei für deine "eigenen" Styles hat) und registriere diese.
Dazu brauchst du in der Theme Info - Datei nur einfügen:
stylesheets[all][] = meine_styles.css
wenn deine CSS-Datei im gleichen Verzeichnis wie die Info-Datei liegen sollte, ansonsten ergänzt du eben den Pfad, z.B. so
stylesheets[all][] = css/meine_styles.css
Es ist ratsam, dass deine eigene CSS-Datei nach den anderen CSS-Dateien geladen wird, denn sonst werden ja deine Änderungen von irgendwelchen Eigenschaften der Selektoren von den folgenden CSS-Dateien wieder überschrieben, aber das kannst du leicht im Quelltext nachschauen und auch der Firebug gibt Auskunft darüber, ob eine CSS-Eigenschaft überschrieben wurde oder nicht (das ist dann immer so durchgestrichen, dass hast du bestimmt schon mal gesehen).
2. Du stellst fest, welchen Selektor du bei der Anzeige verschieben willst, dazu hilft die z.B. der Firebug von Mozilla Firefox oder auch andere Tools, die es in Hülle und Fülle gibt.
3. Du positionierst das HTML-Element nach deinen Wünschen, ich hatte dir oben ja schon einen Link geschickt, wo beschrieben wird, wie man per CSS HTML-Elemente positionieren kann.
Die Vorgehensweise ist sehr einfach und es ist auch schnell gemacht und schon stehst du auch nicht mehr auf dem Schlauch.
Wenn...
am 22.10.2012 - 14:32 Uhr
... ich dich richtig verstanden habe, dann willst du diesen Bereich verschieben:
"bild x von y zurück vor" das ist der media-gallery-detail-image-info-wrapper
Mit "media-gallery-detail-image-info-wrapper" hast du ja im Grunde schon den richtigen Selektor gefunden. Den kannst du jetzt mittels CSS wie gewünscht positionieren. Dafür bitte aber eine eigene CSS-Datei anlegen und nicht in der CSS-Datei des Moduls arbeiten. Berthold hat das ja schön erklärt.
Viele Grüße
Philip
Edit: Berthold hat es noch schöner und ausführlicher erklärt... ;)
danke für eure mühe. hab hier
am 22.10.2012 - 14:51 Uhr
danke für eure mühe. hab hier ma was gezaubert:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>position</title>
<style type="text/css">
#media-gallery-detail-image-info-wrapper
{ position:absolute; top:0px; right:0px;
}
<div id="media-gallery-detail-image-info-wrapper" text-align:right></div>
bin ich auf dem richtigen weg?
hab die css datei eingebunden wie beschrieben..
Entschuldige die krasse
am 22.10.2012 - 15:21 Uhr
Entschuldige die krasse Kritik von mir, aber besorge Dir Bitte ein Einführungsbuch zu HTML und CSS und arbeite das durch. Du verstehst ja nicht mal, wovon hier geredet wird. Für alle Änderungen am Aussehen einer Webseite sind das aber Basiskenntnisse, ohne die man einfach nicht weiterkommt. Ohne gewisse Grundkenntnisse deinerseits ist Dir nicht zu helfen.
Beste Grüße
Werner
deine krasse kritik
am 22.10.2012 - 18:31 Uhr
deine krasse kritik entschuldige ich nicht.
deine art und weise ist unangemessen und frech!
niemand hat dich genötigt etwas zu meinem beitrag zu schreiben.
als systemintegrator ist man in der lage verschiedenen code in teilen anzupassen, was mir bisher immer gelungen ist.
und auch wenn du es dir nicht vorstellen kannst, jaa!! auch in drupal-css-dateien habe ich schon erfolgreich änderungen vorgenommen.
jedoch einen bereich an andere stelle neu zu beschreiben hab ich noch nie gemacht.
wegen einer änderung lese ich kein buch. ich schreibe in ein forum in welchem hilfbereite user anderen usern helfen.
und wenn alles so einfach ist kann man auch mal 4 zeilen code posten. auch dazu sind foren da.
das ist gang und gebe in einem forum mit hilfsbereiter community.
nicht jeder der drupal nutzt kommt direkt aus dem bereich webprogrammierung sondern nutzt nur einen kleinen teil.
anhand der anzahl deiner beiträge gehe ich davon aus das du ein fachmann bist. jedoch anstand und hilfbereitschaft sind über die anzahl an beiträgen über den jordan gegangen. auch geduld ist eine eigenschaft mit der du dich auseinander setzen solltest.
wie ich bereits oben geschrieben habe: niemand hat dich genötigt etwas zu meinem beitrag zu schreiben.
also entweder man hilft oder man läßt es.vielleicht bist du auch so zu deinen beiträgen gekommen.
schönen abend
knork schrieb als
am 22.10.2012 - 21:42 Uhr
als systemintegrator ist man in der lage verschiedenen code in teilen anzupassen, was mir bisher immer gelungen ist.
und auch wenn du es dir nicht vorstellen kannst, jaa!! auch in drupal-css-dateien habe ich schon erfolgreich änderungen vorgenommen.
jedoch einen bereich an andere stelle neu zu beschreiben hab ich noch nie gemacht.
Das solltest du nicht so machen, es widerspricht ganz eindeutig der Philosophie von Drupal und ist zum Scheintern verurteilt.
Ich möchte aber auch noch zu etwas anderem Stellung nehmen.
Warum Werner so verdrossen über dein Posting ist, hat in meinen Augen folgenden Grund:
Ich habe dir ganz genau beschrieben, wie du das Problem lösen kannst, aber offenbar bist du gar nicht daran interessiert, dass Problem selbst in den Griff zu bekommen, sondern versuchst ein paar Code-Zeile zu erheischen, die dich da weiterbringen.
Das ist in meinen Augen keine gute Herangehensweise, sondern du solltest versuchen nachzuvollziehen, wie man in Drupal Elemente auf einer Webseite durch CSS beeinflussen kann, sprich wie selektiert man so eine Element (eben, indem man es mit dem richtigen Selektor ansprich) und wie beeinflusst man dann das Aussehen (eben mit der passenden CSS-Eigentschaft).
Falls du mit irgendwelchen Codezeilen in irgendwelchen Dateien "herumwerkelst", dann führt das dazu, dass das System womöglich instabil wird, das es nicht mehr gewartet werden (Updates) kann und und und.
Das passiert womöglich nicht in den ersten paar Wochen, wenn die Seite im Netz ist, aber dann plötzlich, dann paßt irgendwas nicht mehr so richtig. Dann ist "Holland in Not" und guter Rat teuer.
Es ist auch gar nicht die Frage, ob dir die Vorgehensweise in Drupal paßt oder nicht, sondern die Vorgehensweise ist alternativlos (um mal ein Wort aus der aktuellen Tagespolitik zu bemühen).
In diesem Sinne :-)
danke für deinen beitrag. das
am 23.10.2012 - 09:37 Uhr
danke für deinen beitrag.
das einbinden einer zusätzlichen css-datei werde ich zukünftig vornehmen, das habe ich auch nicht in frage gestellt,sondern einfach nicht besser gewußt.
jetzt wo ich das weiss macht alles andere auch keinen sinn.
der rest der diskussion ist damit dann abgehakt.