tag:help.rocksolidthemes.com,2012-07-23:/discussions/contao/10730-verwendung-logo-zentrierenRockSolid Themes: Discussion 2019-05-28T12:56:28Ztag:help.rocksolidthemes.com,2012-07-23:Comment/371938762015-06-23T09:16:46Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Vielen Dank für Ihre Nachricht.</p>
<p>Ihre Frage betrifft eine individuelle Anpassung. In unseren
<a href="http://rocksolidthemes.com/support-richtlinien">Support-Richtlinien</a>
weisen wir darauf hin, dass wir leider keine Hilfe bei Umbauten
leisten können. Dennoch versuchen wir Ihnen, in diesem Fall,
im Rahmen unserer Möglichkeiten weiterzuhelfen:</p>
<p>Fügen Sie bitte folgenden CSS-Code in die Datei
<em>files/tao/css/custom.css</em> ein:</p>
<pre>
<code>.logo {
position: static;
text-align: center;
}
.logo > a {
display: inline-block;
}
.logo img {
height: 5em;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/371938762015-06-23T09:25:38Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Vielen Dank für die Rückmeldung obwohl Sie
individuelle Anpassungen eigentlich nicht unterstützen.<br>
Leider ist mir so nicht geholfen, da ich nicht weiss wie ich das
Menu darunter zentrieren kann. :-(</p>
<p>Liebe Grüsse aus dem nassen Deutschland</p></div>s.remmerstag:help.rocksolidthemes.com,2012-07-23:Comment/371938762015-06-23T13:23:41Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Mit folgendem CSS wird auch die Navigation zentriert:</p>
<pre>
<code>.logo {
position: static;
text-align: center;
}
.logo > a {
display: inline-block;
}
.logo img {
height: 5em;
}
.main-navigation {
display: inline-block;
float: none;
height: 3.125em;
height: calc(100% - 5.25em);
}
.header-navigation-inner {
height: 10.5em;
min-height: 8.125em;
text-align: center;
}</code>
</pre>
<p>Bitte beachten Sie, dass diese Anpassung eventuell weitere
Anpassungen nach sich ziehen kann um in allen Browsern und auf
allen Geräten einwandfrei zu funktionieren.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/371938762017-01-26T12:50:25Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Das Problem ist aber, dass beim Scrollen das Logo nicht
verkleinert wird.<br>
Es bleibt in der fixen Größe.</p>
<p>Wie kann ich es zentrieren und beim scrollen dennoch
verkleinern?</p>
<p>Ich bitte nochmals um euren Lösungsvorschlag.</p>
<p>Viele Grüße<br>
Dursun</p></div>Dursuntag:help.rocksolidthemes.com,2012-07-23:Comment/371938762017-01-27T07:37:29Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Bitte versuchen Sie es mit folgendem CSS-Code:</p>
<pre>
<code>.logo {
position: static;
text-align: center;
height: 50%;
}
.logo > a {
display: inline-block;
height: 100%;
}
.logo img {
height: 100%;
}
.main-navigation {
display: inline-block;
float: none;
height: 3.125em;
height: 50%;
}
.header-navigation-inner {
height: 10.5em;
min-height: 6.125em;
text-align: center;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/371938762017-02-02T13:58:23Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Ich habe das selbe vor. Das Logo zentriert und darunter auch
zentriert die Navigation. Mit dem obigen CSS-Code bleibt das Logo
links. Die Navigation ist zentriert, aber auf gleicher Höhe
wie das Logo.<br>
Über eine Lösung wäre ich dankbar.</p></div>V. Klemmtag:help.rocksolidthemes.com,2012-07-23:Comment/371938762017-02-02T14:29:47Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Vielen Dank für Ihre Frage.</p>
<p>Wenn der oben angeführte CSS-Code in Ihrer Installation
nicht funktioniert, schicken Sie uns bitte einen Link zur
betroffenen Seite, damit wir genauer untersuchen können warum
die Darstellung nicht zentriert ist.</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/371938762017-02-02T15:52:38Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Anscheinend haben Sie die <em>custom.css</em>-Datei mit der
Kodierung „UTF-8 mit BOM“ gespeichert, dadurch wird die
erste CSS-Regel ignoriert. Bitte speichern Sie die Datei als
„UTF-8“ (ohne BOM).</p></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/371938762017-02-14T14:15:37Z2017-02-14T14:51:26ZVerwendung: Logo zentrieren<div><p>Vielen Dank. Genau so war es.</p>
<p>Nun ist die Navigation leider nicht ganz zentriert, sondern
etwas weiter nach links versetzt (alle Browser).Außerdem
springt das Logo, wenn es beim herunterscrollen verkleinert
wird, etwas nach links. Dieser Versatz des Logos ist der Fall
bei Chrome und Internet Explorer.<br>
Über eine Lösung würde ich mich freuen.</p>
<p>Viele Grüße<br>
Vera Klemm</p></div>Vera Klemmtag:help.rocksolidthemes.com,2012-07-23:Comment/371938762017-02-15T08:34:33Z2017-02-15T08:34:33ZVerwendung: Logo zentrieren<div><p>Verwenden Sie bitte zusätzlich noch folgenden CSS-Code:</p>
<pre>
<code>.logo > a {
display: inline;
}
.logo img {
margin: 0 auto;
}
.main-navigation {
margin-right: 0;
padding-right: 0;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/371938762018-08-30T08:12:55Z2019-05-28T07:17:05ZVerwendung: Logo zentrieren<div><p>Sorry, wenn ich das Thema nochmals hochhole.<br>
Ich habe alles nach den o.g. Vorgaben gemacht. Passt alles prima.</p>
<p>Ich habe aber folgendes Problem. Die Navigation bleibt auch in der mobilen Ansicht stehen und verschwindet nicht.<br>
Folgenden Code habe ich in die custom.css eingefügt:</p>
<pre>
<code>.logo {
position: static;
text-align: center;
height: 50%;
}
.logo > a {
display: inline-block;
height: 100%;
}
.logo img {
height: 100%;
}
.main-navigation {
display: inline-block;
float: none;
height: 3.125em;
height: 50%;
}
.header-navigation-inner {
height: 10.5em;
min-height: 6.125em;
text-align: center;
}
.logo > a {
display: inline;
}
.logo img {
margin: 0 auto;
}
.main-navigation {
margin-right: 0;
padding-right: 0;
}</code>
</pre>
<p>Danke für die Hilfe bei der Problemlösung!</p></div>Jörgtag:help.rocksolidthemes.com,2012-07-23:Comment/371938762018-08-31T07:23:33Z2018-08-31T07:23:33ZVerwendung: Logo zentrieren<div><p>Fügen Sie bitte noch folgenden CSS-Code hinzu:</p>
<pre>
<code>@media screen and (max-width: 599px) {
.main-navigation {
display: none;
}
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/371938762018-08-31T07:40:27Z2018-08-31T07:40:28ZVerwendung: Logo zentrieren<div><p>Perfekt! Danke!</p></div>Jörgtag:help.rocksolidthemes.com,2012-07-23:Comment/371938762019-05-27T17:11:24Z2019-05-27T17:11:24ZVerwendung: Logo zentrieren<div><p>Liebes Rocksolid Team,</p>
<p>gibt es diesen workaround auch für Oneo?</p>
<p>Die Templates wären wesentlich flexibler aufgestellt, wenn die Positionierung des Logos und der Hauptnavigation im Theme Assistant gewählt werden könnten. Vielleicht findet diese Funktion in einem Update Berücksichtigung.</p></div>tomvstag:help.rocksolidthemes.com,2012-07-23:Comment/371938762019-05-28T07:25:23Z2019-05-28T07:25:23ZVerwendung: Logo zentrieren<div><p>Vielen Dank für Ihre Frage.</p>
<p>Im Theme Oneo können Sie dafür z. B. folgenden CSS-Code einsetzen:</p>
<pre>
<code>.logo {
position: static;
text-align: center;
}
.logo > a {
display: inline-block;
}
.logo img {
height: 50px;
}</code>
</pre></div>RockSolid Themestag:help.rocksolidthemes.com,2012-07-23:Comment/371938762019-05-28T07:44:27Z2019-05-28T07:44:27ZVerwendung: Logo zentrieren<div><p>Vielen Dank für die schnelle Rückmeldung!</p>
<p>Allerdings ist hierbei die Navigation und die Such-Lupe nicht berücksichtigt. Hätten Sie hier freundlicherweise auch noch eine Hilfestellung?</p></div>tomvstag:help.rocksolidthemes.com,2012-07-23:Comment/371938762019-05-28T12:56:24Z2019-05-28T12:56:24ZVerwendung: Logo zentrieren<div><p>Mit folgendem CSS wird auch die Navigation zentriert:</p>
<pre>
<code>.main-navigation-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logo {
position: static;
text-align: center;
width: 100%;
}
.logo > a {
display: inline-block;
}
.logo img {
height: 50px;
}
.main-navigation-search {
order: 1;
}</code>
</pre>
<p>Bitte beachten Sie, dass diese Anpassung eventuell weitere Anpassungen nach sich ziehen kann um in allen Browsern und auf allen Geräten einwandfrei zu funktionieren.</p></div>RockSolid Themes