[3.2.x] Site-Logo ändern

[vfrblue]

Ich habe mal folgende Sachen probiert: (Style: prosilver)

in der "overall_header.html" habe ich folgendes eingefügt:

Code: Alles auswählen

<!-- EVENT overall_header_headerbar_before -->
			<div class="inner">

			<div id="site-description" class="site-description">
				<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->"><span class="site_logo"></span></a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
			</div>

			<!-- EVENT overall_header_searchbox_before -->
			<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box" class="search-box search-header" role="search">
				<form action="{U_SEARCH}" method="get" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
					<button class="button button-search" type="submit" title="{L_SEARCH}">
						<i class="icon fa-search fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH}</span>
					</button>
					<a href="{U_SEARCH}" class="button button-search-end" title="{L_SEARCH_ADV}">
						<i class="icon fa-cog fa-fw" aria-hidden="true"></i><span class="sr-only">{L_SEARCH_ADV}</span>
					</a>
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
			<!-- ENDIF -->
			<!-- EVENT overall_header_searchbox_after -->
          <a id="oc_header" class="oc_header" ><span class="oc_header"></span></a>
			</div>
			<!-- EVENT overall_header_headerbar_after -->

Dann in der "common.css":

Code: Alles auswählen

.oc_header {
   display: inline-block;
   widht: auto;
   hight: 80px;
   position: right;
   margin-right: 4px;  
   }

/* Site description and logo */

und in der "colours.css":

Code: Alles auswählen

.oc_header {
   background-image: url("./images/ocheader.png")
   }

/* Horizontal lists

Das Ergebnis sieht man in meinem Testforum: Ein kleiner, rechteckiger Kasten, oben, mittig rechts. Das ist das ganze Logo.

[Kirk]

Hallo
Die Klasse oc_header finde ich bei dir nur in der common.css und dort ist nur ein margin-right eingetragen.
Wenn du ein background-image definierst, musst du auch die Breite width und die Höhe height eintragen.

[vfrblue]

Ich habe mal was anderes ausprobiert.
Aber das klappt auch nicht.
Ich setze es wieder so, wie beschrieben, zurück.

[Kirk]

Du hast keine Breite und Höhe angegeben.
Ändere in der overall_header.html das hier:

Code: Alles auswählen

<a id="oc_header" class="oc_header"><span class="oc_header"></span></a>

in das um:

Code: Alles auswählen

<div class="oc_header"></div>

In der colours.css trägst du das hier ein:

Code: Alles auswählen

.oc_header {
    background-image: url("./images/ocheader.png");
    height: 80px;
    width: 622px;
}

In der common.css trägst du das hier ein:

Code: Alles auswählen

.oc_header {
    float: right;
    margin-right: 5px;
    margin-top: 6px;
}

[vfrblue]

Habe ich ausgeführt, aber kein Bild.

[Talk19zehn]

Hi, es fehlt die Anweisung der Grafik in der colour.css und auch die Angabe für die Höhe kann ich nicht entdecken. Das margin-top (common.css) muss dann m.E. negativ sein: ca. -86px

Wenn ich das via Firebug durchspiele klappt´s zunächst, daher ohne Gewähr.

Grüße

===

Edit: Deinen zahleichen Neuerungen und erneuten Änderungen, quasi im Minutentakt, konnte ich leider von außerhalb und unter Bezug all der genannten Aspekte nicht weiter bearbeiten.

LG

[vfrblue]

@Talk19zehn
Welche Grafik-Anweisung meinst du?

[Kirk]

Du hast kein background-image eingetragen.
Mache es so wie ich geschrieben habe, dann passt es auch.
[ externes Bild ]

Edit:
Da du die search-box wieder im header hast, passt das margin-top: 6px; natürlich nicht mehr.

Edit2:
Ändere in der common.css das hier:

Code: Alles auswählen

.site-description {
    float: left;
    width: 65%;
}

in

Code: Alles auswählen

.site-description {
    float: left;
    width: 55%;
}

um.

[vfrblue]

Hallo Kirk,
Habe ich so gemacht.
Das Ganze sieht jetzt so aus: https://forum-preview.vfr-oc.de/testforum.png

Ein wenig zu hoch.

[Kirk]

Siehe mein Edit!