WS 3.0 Footer Box

Danke. Lässt sich auch ohne Probleme im WSC 3.0 installieren und läuft.

Zitat von Pacco

Discord Button optional hinzugefügt

Leider gibt es kein Font Awesome Symbol dafür - oder besser, es wurde erst mit V5.0.0 eingeführt. Aber die Version wird nicht vom WSC unterstützt.

Nun dachte ich mir, ich nutze die Grafik, die du mitlieferst, aber damit sieht meine Social Bar gar nicht gut aus...

Discord.jpg

In der Box nutze ich folgenden Code dafür:

<div class="boxFooterSocial">
	<ul class="boxFooterSocialIcon48">


		...	


		<li class="boxIconsstyle4"><a href="https://steamcommunity.com/groups/compiware/" rel="nofollow" target="_blank" class="jsTooltip" title="CompiWare auf Steam"><span class="icon icon48 fa-steam-square"></span></a></li>
		<li class="boxIconsstyle4"><a href="https://discord.gg/tUM5h92" rel="nofollow" target="_blank" class="jsTooltip" title="CompiWare in Discord"><span class=""><img src="https://www.compiware-forum.de/images/discord.png" style="width: 32px; height: 32px;"></span></a></li>			
	</ul>
</div>

Hat jemand einen Tipp für mich, wie ich das mit dem Discord Icon besser hinbekomme?

Zitat von Pacco

Ich habe für dich mal was in der Holzwerkstatt geschnitzt. Evtl.kannst du es ja noch verbessern.

Habe das Logo noch ein wenig bearbeitet und nun sieht das Ganze gut aus. Super. Ich danke dir vielmals!

Zitat von PoooMukkel

Habe das Logo noch ein wenig bearbeitet und nun sieht das Ganze gut aus. Super. Ich danke dir vielmals!

Hi @PoooMukkel,

jetzt wirkt das Symbol von Discord recht unscharf auf der Seite. Habe mal was gebastelt guck mal ob das besser wirkt

Wenn du noch eine höhere Auflösung brauchst sag bescheid.

Grüße

Danke! Das Symbol sieht tatsächlich besser aus. Allerdings passt es nun nicht mehr mit der Größe...

Da muss ich jetzt mal schauen.

Zitat von PoooMukkel

Danke! Das Symbol sieht tatsächlich besser aus. Allerdings passt es nun nicht mehr mit der Größe...

Da muss ich jetzt mal schauen.

Ich kann dir gerne die PSD-Datei zur Verfügung stellen. Oder dir dass auf deine Größe Anpassen.

Gruß
Mark

Zitat von Pacco

Du musst doch nur deine Style-Größe in der HTML ändern, dann sollte das auch passen

style="width: 43px; height: 43px;"

und erhöhst dein margin-bottom auf 24px

Danke. Sieht so auf jeden Fall besser aus als vorher. Aber die FA Icons sehen noch einen Tick schärfer aus.

Ich habe mal wieder ein optisches Anliegen. Ich nutze 3 Footer Boxen die jeweils auf 33% gestellt sind.

Bin ich auf dem Desktop unterwegs, sieht das auch alles so weit stimmig aus.

Sobald ich das Browser Fenster jedoch schmaler mache, kann ich zuschauen, wie sich die Optik zum Schlechten ändert. Ist das Fenster noch relativ breit, schiebt sich die dritte Box nur unter die beiden anderen Boxen.

Damit kann ich ja noch leben. Aber sobald es dann noch schmaler wird - so wie es auch auf meinem iPhone aktuell zu sehen ist, geht das für mich nun gar nicht mehr.

Die dritte Box ist komplett zerfetzt...

Folgenden CSS Code nutze ich bezüglich der Größenanpassung der Boxen:

/* Footer-Boxen - Größe der Boxen anpassen */
@include screen-lg { /*@media (min-width:1025px)*/
  	.footerBoxRow1 {
    	padding-left: 70px;
  	}
  	.footerbox2 h2, .footerbox3 h2 {
    	padding-left: 35px;
  	}
  	.footerbox2 {
    	padding-left: 30px;
  	}
  	.boxFooterSocial {
    	text-align: left;
  	}
	.footerbox1 .box1Content {
    	padding-right: 30px;
    	padding-left: 30px;
  	}
	.footerbox1 .boxContentHeader {
    	padding-left: 30px
  	}
}
@include screen-sm-md { /*@media (min-width: 545px) and (max-width:1024px)*/
  	.footerBoxRow1 {
    	padding-left: 20px;
  	}
  	.footerbox2 h2, .footerbox3 h2 {
    	padding-left: 35px;
  	}
  	.footerbox2 {
    	padding-left: 20px;
  	}
  	.boxFooterSocial {
    	text-align: left;
  	}
}

Vielleicht liegt hier schon der Hund begraben? Den Code hatte ich hier im Thema auch mal bekommen.

Hätte jemand vielleicht einen Tipp für mich? Macht es Sinn, die Boxen vielleicht einfach ab einer bestimmten Breite des Browsers ausblenden zu lassen? So sieht das jedenfalls gerade sehr unprofessionell aus.