it-swarm.com.de

Anpassen von Protostar - Leerer Raum in der Joomla Protostar-Vorlage

OK, ich bin ganz neu in Joomla und finde es heraus, während ich weiter mache. Ich meine, dafür ist Joomla da, es selbst tun zu können.

Also habe ich zwei Tage am Ende gesessen und versucht, diese irritierende Platzverschwendung in meiner Protostar-Vorlage zu beseitigen. Um genau zu sein, befindet sich in der Vorlage ein Leerraum von etwa 1 Zoll über dem Position-1-Modul.

Angefügt ist ein Bild, das den rot hervorgehobenen Bereich anzeigt, den ich verschwinden lassen möchte. Ich habe nach Foren, Posts und allem gesucht, aber keine der Informationen dort hat mir geholfen

Empty Space at top of page

1
Barend

1. Betrachten Sie Ihr CSS

So entfernen Sie den Bereich über Ihrem Menü vollständig:

.body .container Hat einen Rand von 1px

.header Hat einen unteren Rand von 10px

.navigation Hat eine Polsterung von 5px für oben/unten.

.navbar Hat einen unteren Rand von 18px;

Diese müssen geändert/überschrieben werden. So etwas in Ihrer Custom Css Datei könnte funktionieren:

.body .container {border: 0;}
.header {margin-bottom: 0;}
.navigation {padding-top: 0;}
.navbar {margin-bottom: 0;}

Hinweis:
Wenn Sie Ihren benutzerdefinierten Regeln eine noch höhere Priorität geben möchten, können Sie den Selektor .site Vor den anderen hinzufügen. Zum Beispiel würden die obigen Regeln so enden:

.site .body .container {border: 0;}
.site .header {margin-bottom: 0;}
/*.... and so on....*/

Updates beantworten

Ändern der Protostar-Vorlage - Best Practices

Ich habe vergessen zu erwähnen, dass Sie anscheinend direkt die Protostar-Kernvorlage ändern. Beachten Sie, dass alle Änderungen, die Sie an den Kerndateien vornehmen, nach einem zukünftigen Update von Joomla möglicherweise überschrieben werden (verloren gehen) können.

Es gibt zwei Hauptoptionen, um dies zu tun, abhängig vom Grad der erforderlichen Anpassung:

1. Hinzufügen von benutzerdefiniertem CSS

Das Protostar-Vorlagen-CSS kann direkt im Vorlagen-Manager geändert werden. Das Problem beim Ändern von Kerndateien besteht jedoch darin, dass sie möglicherweise durch ein Update überschrieben werden. Um zu vermeiden, dass CSS-Anpassungen immer wieder hinzugefügt werden, sollten Sie eine benutzerdefinierte CSS-Datei hinzufügen. (Dies ist seit Joomla 3.5 implementiert. Alles, was Sie brauchen, ist eine neue Datei mit dem Namen user.css zu erstellen und in den css-Ordner der protostar template. Dort können wir unsere eigenen CSS-Regeln hinzufügen. Hier ist eine detailliertere Anleitung, wie dies über das Joomla-Backend gemacht wird:

2: Klonen von Protostar

Wenn Sie einen Schritt weiter gehen und die Protostar-Vorlage genauer anpassen möchten, indem Sie Layout und HTML ändern, können Sie kopiere/klone es und baue deine eigene Vorlage darauf.

Dies kann einfach über die Joomla Template Manager-Oberfläche erfolgen. Über die folgenden Links erfahren Sie, wie das geht:

2
FFrewin

Ok, Sie laden kein Modul auf die Position-0, oder?

Dies ist der Header-Teil in der index.php:

<header class="header" role="banner">
        <div class="header-inner clearfix">
            <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                <?php echo $logo; ?>
                <?php if ($this->params->get('sitedescription')) : ?>
                    <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                <?php endif; ?>
            </a>
            <div class="header-search pull-right">
                <jdoc:include type="modules" name="position-0" style="none" />
            </div>
        </div>
</header>

Es ist möglich, dass eines der Elemente eine Höhe, Polsterung oder einen Rand hat. Sie können dies sehr einfach mit den Dev-Tools überprüfen (F12 oder Rechtsklick -> Element überprüfen).

Wenn Sie den Header-Abschnitt hier nicht benötigen, können Sie ihn mit folgenden Änderungen ausschließen:

<?php if ($this->countModules('position-0')) : ?>   
<header class="header" role="banner">
            <div class="header-inner clearfix">
                <a class="brand pull-left" href="<?php echo $this->baseurl; ?>/">
                    <?php echo $logo; ?>
                    <?php if ($this->params->get('sitedescription')) : ?>
                        <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription'), ENT_COMPAT, 'UTF-8') . '</div>'; ?>
                    <?php endif; ?>
                </a>
                <div class="header-search pull-right">
                    <jdoc:include type="modules" name="position-0" style="none" />
                </div>
            </div>
    </header>
<?php endif; ?>

Dies geschieht mit der Überprüfung, ob ein Modul für Position-0 aktiviert ist. Wenn Sie diesen Teil nicht überspringen, wird der Header mit der Modulposition ausgegeben.

1
Dennis Heiden

Es gibt ein kostenloses Plugin, das die Protostar-Anzeige und -Funktionen erheblich verbessert, ohne die Kerndateien zu bearbeiten oder die Änderungen zu verlieren, wenn Joomla aktualisiert wird. Tatsächlich kann ein Benutzer viele benutzerdefinierte CSS-Designs und Anzeigevorlagen erstellen und diese aus einer Liste zur automatischen Erkennung auswählen.

Es ist auch entwicklerfreundlich, so dass installierbare Themen verteilt werden können. Zusätzliche Formularfelder können den Vorlagenparametern nach Wunsch hinzugefügt werden, indem Sie einfach eine benutzerdefinierte Datei mit einem eindeutigen Namen als Themenname.xml hinzufügen und die Werte über eine benutzerdefinierte Datei mit dem Namen Themenname.php ausgeben. Das Paket wird dann normal über den Erweiterungsinstaller von Joomla installiert. Es ist großartig für Kreativität und Erweiterbarkeit. Es macht es möglich, mit Protostar alles zu tun, was die kommerziellen Vorlagen tun. http://protostar.websitedons.net/

0
Nadal

Es gibt also drei Probleme:

  1. Wie @ Dennis Heiden erwähnt, müssen Sie eine PHP if Anweisung um Sie herum <header> wie es noch im DOM angezeigt wird. Befolgen Sie also zuerst die Anweisungen auf seiner Antwort.
  2. Ihre Navigationsleiste (.navigation) hat ein 5px Polsterung, die oben etwas mehr Platz bietet
  3. Das letzte Problem stammt aus dem folgenden Code:

`` `

ul.maximenuck {
    clear: both;
}

`` `

was, wie Sie sich vorstellen können, von der von Ihnen verwendeten Maximenu-Erweiterung herrührt, die ich von ganzem Herzen niemals empfehlen würde.

0
Lodder