Beiträge von Foxly

Foxly · 10. Dezember 2017

Zitat von DominikPinzenoehler

Danke für den Code. Das sieht schon sehr gut aus

Also ohne .gridLayout img {width: 100%;} zeigt es mir die Bilder in Original Größe an. Somit müsste das mit .gridLayout img {width: 100%;} schon passen.

Könntest du mir noch bei der Anpassung der Bildergröße behilflich sein? Am besten wäre wenn man einfach eine maximal Höhe festlegt? Das wäre dann auch für Smartphones gut.
Auf Desktop und Tablet sieht es gut aus, nur auf dem Smartphone sind die Bilder ja logischerweise alle untereinander und sehr groß.

Alles anzeigen

Jetzt ohne es ausprobiert zu haben:

CSS

@include screen-lg { /*DESKTOP */


.gridLayout img {
	width: 100%;
	}
}


@include screen-md-down { /*Smartphone/Tablet */


.gridLayout img {
	width: 50%;
	}
}

Alles anzeigen

probier es mal aus und spiel mit dem Wert 50% bisschen rum

grüße

Foxly · 10. Dezember 2017

@Tom,

reicht hier nicht einfach der Code für drei Spalten? Es wirkt nämlich dann sehr erdrückend mit width: 100%;
Die Bilder über CSS einzubinden ist zwar besser zum anpassen, aber so ist es erstmal möglich, wenn ich deinen Post richtig verstanden habe @DominikPinzenoehler

HTML

<div class="gridLayout row">
	<div class="gridBox col-md-4">
		<div class="gridBoxContent gridBoxIcon gridBoxJustify">
			<div class="gridBoxContentHeroIcon gridBoxCenter">
				<a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
			</div>
		</div>
	</div>
<div class="gridBox col-md-4">
	<div class="gridBoxContent gridBoxIcon gridBoxJustify">
		<div class="gridBoxContentHeroIcon gridBoxCenter">
			<a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
		</div>
	</div>
</div>
	<div class="gridBox col-md-4">
		<div class="gridBoxContent gridBoxIcon gridBoxJustify">
			<div class="gridBoxContentHeroIcon gridBoxCenter">
				<a href="deinLink.tld"><img src="LinkZumBild" alt="Bild-Beschreibung-wenn-einer-Bilder-deaktiviert-hat" /></a>
			</div>
		</div>
	</div>	
</div>

Alles anzeigen

Grüße

Foxly · 7. Dezember 2017

Huhu Tom,

vielleicht war die Wortwahl nicht die richtige. Bilder sagen hier wohl mehr als tausend Worte.

Beispiel:

Hinter der "Quelle:" stand eigentlich noch der Name der Seite. Jetzt ist es nur noch ein Link aber das war es auch schon. Langsam bin ich mir allerdings nicht mehr ganz sicher, ob es nicht ein PlugIn ist welches diesen Fehler verursacht. Sobald ich meine Nutzungsbestimmungen überarbeitet habe werde ich das weiter prüfen.

Grüße

Foxly · 6. Dezember 2017

Huhu @Tom,
~~genau das dachte ich auch.Aber leider ist dieses Template für den RSS-Feed von Woltlab rekursive meinerSeite zuständig. Mal sehen ich werde mir das nochmal kleinlichst ansehen~~

Edit: unter ACP - Anpassen - Texte verwalten - wbb.acp.rssFeed.template. Ok die Einstellungen sind richtig, dennoch wird die Quelle nur mit einem Link ohne Zeichensatz dargestellt. Dieses liegt aber an dem Feed selber. Dennoch stört mich es . Nuja Hauptsache der Link zur Quelle ist vorhanden.

Danke erstmal und Grüße
Mark

Foxly · 6. Dezember 2017

Huhu,

ich habe ein Problem, nach dem letzten Update der Suite, wird die Quelle meines RSS-Feeds nicht mehr angegeben bzw. nur noch der Link ohne Beschreibung. Ich weiß ich habe diesen damals angepasst damit er nicht als Zitat gepostet wird... nur weiß ich nicht mehr wo ich diese Anpassung getätigt habe. Genau dass habe ich anscheinend in meiner Dokumentation auch nicht erfasst. Jetzt die Frage wie heißt das Template dazu bzw. wo kann ich es einstellen

Grüße

Foxly · 8. November 2017

Klasse hat super funktioniert jetzt klappt das auch mit der Mobilen-Ansicht

CSS

@include screen-lg { /*DESKTOP */


     .boxpn {
     position: relative;
     width: 100%; 
     min-height: 80px;
     height: 110px;
     background-color: rgba(245, 245, 245, 1);
     margin-top: 13px;
     border-radius: 3px;
     }


}
@include screen-md-down { /*Smartphone/Tablet */


     .boxpn {
     position: relative;
     width: 100%; 
     min-height: 80px;
     height: 200px;
     background-color: rgba(245, 245, 245, 1);
     margin-top: 13px;
     border-radius: 3px;
     }
}
@include screen-lg { /*DESKTOP */


	.pnhinweis {
	margin-left: 75px;
	float: left;
    }


}
@include screen-md-down { /*Smartphone/Tablet */


	.pnhinweis {
		margin-left: 75px;
		float: left;
	}


}
@include screen-lg { /*DESKTOP */


	.pnhinweis1 {
	margin-left: 25px;
	float: left;
    }


}
@include screen-md-down { /*Smartphone/Tablet */


	.pnhinweis1 {
		margin-left: 75px;
		float: left;
		padding-top: 5px;
	}


}


.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2D98F0 0%, #3291FF 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #3291FF;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #3291FF;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #3291FF;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #3291FF;
}

Alles anzeigen

Foxly · 8. November 2017

Danke @Tom,

ich versuche mich mal

Gruß Mark

Foxly · 7. November 2017

Zitat von Tom

Hilft dir das weiter:

https://docs.woltlab.com/view_css.html

?

Danke Tom ^^, ja etwas. Also ich muss also für Desktops (@include screen-lg) und für Smartphones/Tablets (@include screen-md-down) setzen. Somit wäre quasi als Beispiel

Code

@include screen-lg .pnhinweis1 {
	margin-left: 25px;
	float: left;
}


@include screen-md-down .pnhinweis1 {
	margin-left: 5px;
	float: left;
}

das richtig?

Foxly · 7. November 2017

Hallo Zusammen,

ich probiere gerade bisschen rum. Ich habe mir eine Hinweiß-Box erstellt. In dieser Hinweiß-Box benutze ich folgenden HTML-Code:

Code

<div class="boxpn">
   <div class="ribbon"><span>Blizzard</span></div>
<br>
<div class="pnhinweis">
   <span class="labelpatchnotes labelpatchnotes-ver">WoW-Patchnotes</span><br>
   <img class="linkpn" src="images/favicon-16x16.png"> <a href="https://kotoc.de/index.php?patchnotes-732/">WoW Legion Patch 7.3.2</a>
<br>
   <img class="linkpn" src="images/favicon-16x16.png"> <a href="https://kotoc.de/index.php?hotfix-24-okt/">Hotfix-Tracker</a>
<br>
</div>
<div class="pnhinweis1">
   <span class="labelpatchnotes labelpatchnotes-ver">M+ Affixe | Diese Woche 01/11/17</span>
<br>
   <a href="http://de.wowhead.com/affix=7/anstachelnd" id="EU-mythicaffix-1" class="icontiny">Anstachelnd</a><br>
   <a href="http://de.wowhead.com/affix=2/launisch" id="EU-mythicaffix-2" class="icontiny">Launisch</a><br>
   <a href="http://de.wowhead.com/affix=10/verstarkt" id="EU-mythicaffix-3" class="icontiny">Verstärkt</a>
<br>
</div>
</div>

Alles anzeigen

mit diesem CSS-Code:

Code

/* Patchnotes */
.labelpatchnotes {
    display: inline;
    padding: 0.2em 0.6em 0.3em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25em;
	background-color: #6969ff;
}
.labelpatchnotes-patch {
    background-color: #2c8fed;
}
.labelpatchnotes-neu {
    background-color: #b22222;
}
.labelpatchnotes-ver {
	background-color: #558936;
}


.patchnotes {
	background-color: rgba(245, 245, 245, 1);
	margin: 20px 0; 
	color: white; 
	padding: 15px;
	border-radius: 5px 5px 5px 5px;
}
.boxpn {
  position: relative;
  width: 100%; 
  min-height: 80px;
  height: 110px;
  background-color: rgba(245, 245, 245, 1);
  margin-top: 13px;
  border-radius: 3px;
}
.pnhinweis {
	margin-left: 75px;
	float: left;
}
.pnhinweis1 {
	margin-left: 25px;
	float: left;
}


.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2D98F0 0%, #3291FF 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #3291FF;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #3291FF;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #3291FF;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #3291FF;
}

Alles anzeigen

Jetzt zu meiner Frage :), wie passe ich die Mobile Ansicht an? Habt ihr Ansätze wo ich mich belesen kann, dass wäre klasse.

Gruß Mark

Foxly · 28. September 2017

Zitat von TomPiXX

???

Müsste doch über die Zugangsbeschränkung der Box selber gehen, oder? ->

Beiträge von Foxly

WS 3.0 Layout Extension Kit

WS 3.0 Layout Extension Kit

Rss-feed

Rss-feed

Rss-feed

Eigene Box - Mobile Darstellung

Eigene Box - Mobile Darstellung

Eigene Box - Mobile Darstellung

Eigene Box - Mobile Darstellung

WS 3.0 Statusanzeige

cls-design

Informationen

Demoinstallationen

Hilfe