XF2.2 html Syntax bei xf_macro einbindung

McAtze schrieb:
6) Als nächsten Schritt muss die CSS/LESS Anpassung gemacht werden. Hierzu öffnest du in deinem Style die extra.less und trägst das folgende ein:
CSS: 
 /**** LESS for SPS Header Ads ****/
.p-header-content .spsHeaderAds
{
    vertical-align:middle;
    margin-left:auto;
}

.p-header {
    .samBannerUnit.listInline
    {
        float:none;
        max-width: 100%;
    }
}

.listInline
{
    .m-listPlain();
 
    .sameDisplayInline
    {
        display: inline;
        margin: 0;
        padding: 2px;
    }
}
/**** LESS for SPS Header Ads ****/
Zum Vergrößern anklicken....

OK, ich lerne... :)
Kannst du mir etwas genauer erklären was hier passiert?
Danke!
 
Mit dem ersten Part .p-header-content . spsHeaderAds wird der Block im Header definiert. D.h. dieser wird vertikal zentriert und nach links automatisch angepasst.

Der zweite Part ist nur eine direkte Anpassung bzw. Verhinderung das hier XF-CSS eingreift in den listInline.

Der dritte Part greift auf die XF Einstellungen zu listInline, also die vertikale Liste ohne Zeichen (z.B. -).
Und .sameDisplayInline ist dann das jeweilige Element, also Banner, in der Liste. Hier gilt dann auch mit display: inline das die Elemente in der Liste keine Listenzeichen haben.
 
OK...

.spsHeaderAds hast du ja quasi selbst deklariert.
Und die anderen? Woher kennst du die?
Sorry - das Thema wird zäh - ich fange zwar an die Sytanx zu begeifen, aber das Konzept ist mir noch fremd.


Dann eine weiter Frage.
Warum "baust" due den .listInLine für das Package?
Das Package ist diesbezüglich doch bereits Konfigurierbar und macht das schon.
Siehe Screen:

B_listinline.png



Nochmal:
Ich bin nie auf ein Problem dabei gestoßen mehrere Banner in einem Package nebeneinander anzuzeigen.

Mein Problem ist es mehrere Packages nebeneinander anzuzeigen.
Mir ist klar das dein Code das nicht so vorsieht weil wir uns da Anfangs missverstanden haben.
Es ist auch nicht meine Absicht dich irgendwie zu kritisieren oder gar undankbar zu sein - ich möchte es lediglich verstehen.

Danke!
 
Ist alles kein Thema. Ich kenne mich mit XenForo auch nur relativ gut aus weil ich seit 11 Jahren dabei bin. Ich werde mir morgen Abend mal ein wenig mehr Zeit nehmen und auf dich und deine Fragen eingehen.
 
Warte mal noch etwas bevor du dir dir Finger wund schreibst.
Ich habe mich mal mit diesem "neumodischem" :) div, less, css,... beschäftigt.
Habe es verstanden, zumindest soweit, dass ich meine Fragen hier besser präzisieren kann,

Unabhängig davon will Siropu sich das mal ansehen.
Habe ihm nen Admin Acc im Testforum gemacht.

Bin mal gespannt ob er das selbe vorhat.

Vielen Dank!
Ich durfte mal wieder einiges neues lernen!
 
sps-forum schrieb:
Ich habe mich mal mit diesem "neumodischem" :) div, less, css,... beschäftigt.
Zum Vergrößern anklicken....
:(
Dein HTML ist wohl noch von vor der Jahrtausendwende? CSS gibt ja schon ewig, und mit less/sass arbeite ich auch bereits sehr über fünf Jahren.
Es gibt kaum etwas, wo es noch schneller Veränderungen gibt, und wenn man da nicht dran bleibt ist man ganz schnell weg.
 
Hoffi schrieb:
:(
Dein HTML ist wohl noch von vor der Jahrtausendwende? CSS gibt ja schon ewig, und mit less/sass arbeite ich auch bereits sehr über fünf Jahren.
Es gibt kaum etwas, wo es noch schneller Veränderungen gibt, und wenn man da nicht dran bleibt ist man ganz schnell weg.
Zum Vergrößern anklicken....

Das bringt es sehr genau auf den Punkt! :)
Ich habe das in meiner Welt ja auch nie so richtig benötigt...

ABER! Ich arbeite das im Moment etwas auf.
Und ich finde Spass daran.


Vielleicht etwas Offtopic Hintergrundinfo dazu:
Um das Forum haben sich bisher andere Leute gekümmert.
Derjenige, der diesen Account hier eröffnet hat war ein sehr guter Mann - er hat das Unternehmen damals leider aus privaten Gründen verlassen.
Sein Nachfolger war nicht so berauschend...
Ich lebe aktuell mit meiner Familie in einem LKW mit dem wir durch die Weltgeschichte reisen.
Auf diese Reise habe ich mir Arbeit mitgenommen die sich von Unterwegs erledigen lässt - dazu gehört unter anderem das Thema SPS-Forum.
Aktuell sitze ich an einem einsamen Strand in der Türkei und habe 4G :)
Wenn euch das genauer interessiert, meine Frau berichtet regelmäßig auf Instagram: #puddlejumer_on_tour


Ich hoffe ihr seid jetzt nicht stinksauer vor Neid und werdet mir trotzdem noch helfen ;-)
Ich danke euch!

Markus
 
Ich habe mir mal ein wenig den Instagram Stream angeschaut und muss dir leider sagen das ich aufgrund Neid nicht mehr weiterhelfen kann... :p:D:p
 
sps-forum schrieb:
Aktuell sitze ich an einem einsamen Strand in der Türkei und habe 4G :)
Wenn euch das genauer interessiert, meine Frau berichtet regelmäßig auf Instagram: #puddlejumer_on_tour
Zum Vergrößern anklicken....
Mit drei Kindern dabei? Respekt. Und das in Zeiten von Corona?

Viel Spaß noch.
 
McAtze schrieb:
CSS: 
 /**** LESS for SPS Header Ads ****/
.p-header-content .spsHeaderAds
{
    vertical-align:middle;
    margin-left:auto;
}

.p-header {
    .samBannerUnit.listInline
    {
        float:none;
        max-width: 100%;
    }
}

.listInline
{
    .m-listPlain();
 
    .sameDisplayInline
    {
        display: inline;
        margin: 0;
        padding: 2px;
    }
}
/**** LESS for SPS Header Ads ****/
Zum Vergrößern anklicken....

OK, hier mal ein paar Fragen dazu:

1. Welche dieser Klassen sind von XF?

2. Welche dieser Klassen hast du neu angelegt?

3. Gibt es eine Doku dazu welche Klassen XF von Haus aus hat und wo die verwendet werden bzw. wozu die gedacht sind?

4. Warum mache ich nicht eine eigene Klasse wie du vermutlich mit der .spsHeaderAds und beschreibet diese so, dass die 4 Makros (Packages) nebeneinander angezeigt werden? Dann baue ich in den Header Werbeblock vom XF zwei div mit jeweils dieser Klasse und 4 Makros bzw. Packages. ggf noch einen div um beide rum mit einer weiteren Klasse, die dafür sorgt, dass die Abstände der beiden anderen div passen.
Ist das zu einfach gedacht?

Ich danke mit sonnigen grüßen! ;-)
 
Ich habe jetzt mal folgendes zum testen gebaut:


Code im XF Werbeblock im Header:
Code: 
<div class="BannerRow">
    <div class="BannerElement">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_1" />   
    </div>
    <div class="BannerElement">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_2" />   
    </div>
    <div class="BannerElement">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_3" />   
    </div>
    <div class="BannerElement">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_4" />   
    </div>
</div>

<div class="BannerRow">
    <div class="BannerElement">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_5" />   
    </div>
    <div class="BannerElement">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_6" />   
    </div>
    <div class="BannerElement">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_7" />   
    </div>
    <div class="BannerElement">
    <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_8" />   
    </div>
</div>


Einstellung für jedes Package (Hier habe ich auch eine Klasse eingetragen):

AM_C_CSS.png


Und die EXTRA.LESS sieht so aus:

Code: 
.BannerRow
{
    display: inline;
    margin-top: 0px;
    padding: 0px;
//    width: 980px;
//    height: 200px;
    background-color: black;
//    border: solid green 3px;
}

.BannerElement
{
    margin: auto;
    padding: 0px;
//    width: 240px;
//    height: 60px;
    float: left;
    background-color: red;
//    border: solid blue 3px;
   
}

Ergenbis:

B_V1.png


1. Warum ist BannerRow so hoch?
Auch als ich dort Heigth = 60px (Bannerhöhe) eingestellt habe hat das nicht gepasst.
Alternative habe ich auch keine Werte an .BannerElement übergebe und Stattdessen mit den Parametern von .AdsManagerCustom (Das im Addon konfigurierte) gespielt. So richtig erfolgreich war ich nicht.


2. Responsive
Die Banner verschinden ab einer bestimmten Fentergröße (kleineres Fenster) komplett.
Ich vermute McAtze wollte dem mit seiner Einstellungen in der EXTRA.LESS vorbeugen.
Diesen Code verstehe ich aber noch nicht.
Wie gesagt würde es mir helfen etwas über die verwendeten Klassen zu erfahren.

3. "Verschachtelungen"
Code: 
.p-header {
    .samBannerUnit.listInline
    {
        float:none;
        max-width: 100%;
    }
}

.listInline
{
    .m-listPlain();
    .sameDisplayInline
    {
        display: inline;
        margin: 0;
        padding: 2px;
    }
}

Ich bin noch nicht dahintergestiegen wie das mit den "Verschachtelungen" in dem Beispiel funktioniert.
Und was ist ".m-listPlain();"


DANKE!
 
sps-forum schrieb:
Und was ist ".m-listPlain();"
Zum Vergrößern anklicken....
Das ist ein XF Internes LESS Makro welches die Liste auf ein paar Basiswerte setzt.

Mit F12 startest du um Browser die Konsole. Dann kannst du den HTML Aufbau untersuchen, da zeigt er dann an aus welchem Teil der Rand kommt und welcher Art dieser Abstand ist. Nur aus den Angaben zu deuten kann man machen, aber ein Untersuchen ist da Sinnvoller.

In deinem Fall hat die Klasse .samAlignCenter eine 10px Margin nach oben und unten.
 
Und tu dir und uns einen gefallen.
Immer nach einem Öffnenden Tag die nächste Zeile einrücken. Bei deinem HTML bekomme ich Augenkrebs. Unsere Azubis dürfen bei so einem Code eine Extra Runde drehen. :D

Das macht auch eine spätere Wartung erheblich einfacher, wenn es so aussieht.

HTML: 
<div class="BannerRow">
    <div class="BannerElement">
        <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_5" />
    </div>
    <div class="BannerElement">
        <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_6" />
    </div>
    <div class="BannerElement">
        <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_7" />
    </div>
    <div class="BannerElement">
        <xf:macro template="siropu_ads_manager_ad_macros" name="ad_unit" arg-position="Banner_8" />
    </div>
</div>
 
sps-forum schrieb:
Ich bin noch nicht dahintergestiegen wie das mit den "Verschachtelungen" in dem Beispiel funktioniert.
Zum Vergrößern anklicken....
Das dient einfach nur dazu das es aufgeräumter ist. Als Beispiel schreibe ich dir erstmal das HTML, dann CSS und dann LESS.
HTML: 
/***** HTML *****/
<div class="first">
  <a href="">First Class</a>
  <div class="second">Second Class</div>
  <div class="third">Third Class</div>
</div>
CSS: 
/***** CSS *****/
.first {
  padding: 10px;
}
.first a {
  color: red;
}
.first a:hover {
  decoration: none;
}
.first .second {
  margin: 5px;
}
.first .third {
  margin: 10px
}
CSS: 
/***** LESS *****/
.first {
  padding: 10px;

  a {
    color: red;
    &:hover {
      decoration: none;
    }
  }
  .second {
    margin: 5px;
  }
  .third {
    margin: 10px;
  }
}
sps-forum schrieb:
Und was ist ".m-listPlain();"
Zum Vergrößern anklicken....
Wie @Hoffi schon sagte handelt es sich hier um eine Macro oder aber auch um eine globale Klasse. Ist vor allem hilfreich wenn ein und die selben Einstellungen immer wieder benötigt werden, wie z.B. bei Listen oder Blocks.
Als Beispiel hierzu mal ein kleiner Code-Snippet:
CSS: 
/***** Definiere Globale Klasse zB Liste *****/
.m-listPlain() {
  margin: 10px;
}

/****** Aufrufen der globalen Klasse für zB Listen ****/
.inlineList {
  .m-listPlain();
  padding: 10px;
}

/****** Ausgabe im Template *****/
.inlineList {
  margin: 10px;
  padding: 10px;
}
 
McAtze schrieb:
Vielen Dank euch, ich glaube ich steige durch...


CSS: 
/***** CSS *****/
.first .second {
  margin: 5px;
}
.first .third {
  margin: 10px
}
Zum Vergrößern anklicken....

Warum machst du das:
Bedeutet das, dass .second und .third nur "beachtet" werden wenn sie im html innerhalb von .first verwendet werden?

Warum machst du nicht:

CSS: 
/***** CSS *****/
.second {
  margin: 5px;
}

.third {
  margin: 10px
}

[/QUOTE]

Ja mir ist klar, dass du mir anhand dieses Beispiels nur die Variante in LESS erklären wolltest.
Das ist dir auch gelungen! ...glaube ich :)

Grundsätzlich ist es in LESS ja strukturell das selbe Thema das ich noch nicht verstehe.
Was für einen Grund hat diese Verschachtelung?

Danke!


Nach wie vor die Frage:
Sind die Klassen in XF irgendwo dokumentiert, oder kennt man die halt nachdem man man oft genug F12 gedrückt hat?

Danke!
 
sps-forum schrieb:
Sind die Klassen in XF irgendwo dokumentiert, oder kennt man die halt nachdem man man oft genug F12 gedrückt hat?
Zum Vergrößern anklicken....
Dokumentiert ist hier nichts was die CSS-Klassen angeht. Da musst du notgedrungen dir die einzelnen Beispiele anschauen.

sps-forum schrieb:
Was für einen Grund hat diese Verschachtelung?
Zum Vergrößern anklicken....
Du sparst dir zum einen viele Zeilen Code wenn du dich nicht ständig wiederholen musst. Aber die Verschachtelung ist nur ein Beispiel was LESS kann.
 
McAtze schrieb:
Dokumentiert ist hier nichts was die CSS-Klassen angeht. Da musst du notgedrungen dir die einzelnen Beispiele anschauen.


Du sparst dir zum einen viele Zeilen Code wenn du dich nicht ständig wiederholen musst. Aber die Verschachtelung ist nur ein Beispiel was LESS kann.
Zum Vergrößern anklicken....

Das bzw. die auch die erweiterten Möglichkeiten von LESS in Verbindung mit CSS glaube ich verstanden zu haben.

Mir geht es um die Deklaration an sich, als unabhängig von CSS mit oder ohne LESS:


Warum machst du das so:
Code: 
/***** CSS *****/
.first .second {
  margin: 5px;
}
.first .third {
  margin: 10px
}

Und nicht so:
Code: 
/***** CSS *****/
.second {
  margin: 5px;
}
.third {
  margin: 10px
}


Warum werden .second und .third hinter .first geschrieben.
Mir ist klar das die DIV im html auch so strukturiert sind.

Wenn ich es richtig verstanden habe, dann würden die so Übergebenen Eigenschaften der Klasse nur übernommen werden wenn im html gleich strukturiert/verschachtelt wird. Richtig?

Ich begreife die Syntax noch nicht wenn mehrere Klassen hintereinander geschrieben werden.
Also konkret das hier:
Code: 
.first .second
und das hier:
Code: 
.first .third

Was macht das? :)


Um mich etwas solidarisch mit euch zu zeigen bin ich jetzt für 2 Wochen sesshaft in Izmir und helfe einem Kunden hier an einer Anlage.
Ich sehe also aktuell auch keinen Strand sondern nur halbfertige Maschinen in einer Halle.
Ihr dürft mir als jetzt wieder reinen Gewissens bei meinen html/CSS/LESS Basics helfen, ihr müsst nicht mehr neidisch sein :)

Danke!
 
Du schreibst die Klassen hintereinander damit diese auch nur in dieser Konstellation im HTML greift. Andernfalls würde die Klasse überall greifen wo sie vorkommt.

Im Prinzip ähnlich wie AND OR NOR. Also nur wenn .first und .second hintereinander kommen.
 
McAtze schrieb:
Du schreibst die Klassen hintereinander damit diese auch nur in dieser Konstellation im HTML greift. Andernfalls würde die Klasse überall greifen wo sie vorkommt.

Im Prinzip ähnlich wie AND OR NOR. Also nur wenn .first und .second hintereinander kommen.
Zum Vergrößern anklicken....

OK, dann habe ich das richtig verstanden.
Nur wenn die Struktur im html gleich ist greifen sie.


Also quasi gleich wie wenn ich
P .xyz schreiben würde.

DANKE!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben