Erweiterte Informationsseite: Icons einfügen

Seele · 8. September 2014

Hallo zusammen

ich habe im Forum mit der Erweiterten Informationsseite von hier, eine Seite "über uns" erstellt. Ging soweit auch alles gut sieht gut aus.

Würde nun gerne bei der Navigation (Links) Icons setzen, siehe Bild Markierte Stelle

Habe leider keine Ahnung wo und wie ich das anstellen soll das ich da Icons rein kriege.

Kann mir da jemand sagen wie ich das machen muss?

Lg Seelensturm

Seele · 9. September 2014

Kann mir da keiner weiterhelfen oder ist der Thread im falschen Bereich?
Wenn dem so sein sollte könnte das dann bitte jemand aus dem Team verschieben?

Lg Seele

Muschelkuh · 9. September 2014

Hmm, ich glaube das geht nur wenn du die informations.tpl bearbeitest.

Dann darfst du innerhalb des Template aber nicht nach "Wer sind wir" oder ähnliches suchen, sondern musst manuell zur richtigen Stelle gehen. Müsste denke ich der Abschnitt sein:

Code

{capture assign='sidebar'}
	<fieldset>
		<legend>{lang}wcf.informations.legend{/lang}</legend>
			<nav>
				<ul>
					{if INFORMATIONS_INFORMATION1_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION1_TITLE}">{INFORMATIONS_INFORMATION1_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION2_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION2_TITLE}">{INFORMATIONS_INFORMATION2_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION3_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION3_TITLE}">{INFORMATIONS_INFORMATION3_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION4_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION4_TITLE}">{INFORMATIONS_INFORMATION4_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION5_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION5_TITLE}">{INFORMATIONS_INFORMATION5_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION6_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION6_TITLE}">{INFORMATIONS_INFORMATION6_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION7_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION7_TITLE}">{INFORMATIONS_INFORMATION7_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION8_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION8_TITLE}">{INFORMATIONS_INFORMATION8_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION9_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION9_TITLE}">{INFORMATIONS_INFORMATION9_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION10_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION10_TITLE}">{INFORMATIONS_INFORMATION10_TITLE}</a>
						</li>
					{/if}																																													
				</ul>
			</nav>
	</fieldset>
{/capture}

Alles anzeigen

norse · 9. September 2014

Du könntest beispielsweise das Template informations.tpl entsprechend Deinen Vorstellungen bearbeiten und den ersten drei Links im Abschnitt sidebar fieldset jeweils ein Icon Deiner Wahl voranstellen.

Gruß norse

Seele · 9. September 2014

Hallo zusammen

danke für die Antworten. Wenn ich das richtig verstehe müsste ich also bei den ersten drei, da ja nur drei links da drin sind, ein Icon setzen. Das wäre dann das hier aus Informations.tpl

Code

{include file='headInclude'}

	<link rel="canonical" href="{link controller='Informations'}{/link}" />
</head>
<body id="tpl{$templateName|ucfirst}">


{capture assign='sidebar'}
	<fieldset>
		<legend>{lang}wcf.informations.legend{/lang}</legend>
			<nav>
				<ul>
					{if INFORMATIONS_INFORMATION1_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION1_TITLE}">{INFORMATIONS_INFORMATION1_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION2_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION2_TITLE}">{INFORMATIONS_INFORMATION2_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION3_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION3_TITLE}">{INFORMATIONS_INFORMATION3_TITLE}</a>
						</li>
					{/if}

Alles anzeigen

Da dann jeweils vor das

Code

<a href="{link controller='Informations'}........

das icon setzen? Wie müsste ich das dann schreiben wenn ich zb aus der Icon Auswahl der Foren das book icon setzen möchte?
Ist das dann dass hier

Code

<span class="icon icon32 icon-book pointer" data-icon-name="book"></span>

oder nur ein Teil davon?

Seele · 9. September 2014

Habe es im Testboard eben auf diese weise probiert.

Was ich eingetragen habe ist Farblich markiert

Smarty

{include file='documentHeader'}


<head>
	<title>{INFORMATIONS_TITLE} - {PAGE_TITLE|language}</title>

	{include file='headInclude'}

	<link rel="canonical" href="{link controller='Informations'}{/link}" />
</head>
<body id="tpl{$templateName|ucfirst}">


{capture assign='sidebar'}
	<fieldset>
		<legend>{lang}wcf.informations.legend{/lang}</legend>
			<nav>
				<ul>
					{if INFORMATIONS_INFORMATION1_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION1_TITLE}">[color=#660000]<span class="icon icon32 icon-book pointer" data-icon-name="book"></span>[/color]{INFORMATIONS_INFORMATION1_TITLE}
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION2_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION2_TITLE}">[color=#990000]<span class="icon icon32 icon-book pointer" data-icon-name="book"></span>[/color]{INFORMATIONS_INFORMATION2_TITLE}</a>
						</li>
					{/if}


					{if INFORMATIONS_INFORMATION3_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION3_TITLE}">[color=#990000]<span class="icon icon32 icon-book pointer" data-icon-name="book"></span>[/color]{INFORMATIONS_INFORMATION3_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION4_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION4_TITLE}">{INFORMATIONS_INFORMATION4_TITLE}</a>
						</li>
					{/if}

Alles anzeigen

und so sieht das dann aus

Lg Seelensturm

Seele · 15. September 2014

ich habe noch eine frage dazu.

Die Icons sind den Usern zu gross so wie ich sie auf dem Bild im oberen Beitrag habe. Hatte dann versucht beim Code etwas zu ändern das sie kleiner werden

Smarty

<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION1_TITLE}"><span class="icon icon32 icon-user pointer" data-icon-name="user"></span>{INFORMATIONS_INFORMATION1_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION2_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION2_TITLE}"><span class="icon icon24 icon-book pointer" data-icon-name="book"></span>{INFORMATIONS_INFORMATION2_TITLE}</a>
						</li>
					{/if}
					{if INFORMATIONS_INFORMATION3_TEXT}
						<li>
							<a href="{link controller='Informations'}{/link}#{INFORMATIONS_INFORMATION3_TITLE}"><span class="icon icon24 icon-home pointer" data-icon-name="home"></span>{INFORMATIONS_INFORMATION3_TITLE}</a>
						</li>
					{/if}

Alles anzeigen

Das erste ist mit der grösse 32 eben das wo zu gross ist. Habe dann wie man bei den zweite anderen sieht die grösse 24 rein gemacht aber das geht nicht entweder ist das Ding so gross wie das erste oder dann wieder winzig und klebt total mit dem Titel zusammen.

Wie kann ich dir Icons grösser als diese beiden Minidinger aber doch etwas kleiner als das grosse machen? Habe heute alle möglichen Dinge ausprobiert auch mit css code
aber entweder sind sie mini oder riesig oder gar nichts zu sehen. Weiss echt nicht mehr weiter.

Lg Seelensturm

norse · 15. September 2014

Da es die Klasse .icon24 von Haus aus nicht gibt, musst Du sie selbst deklarieren:

CSS

.icon24 {font-size: 21px;height: 24px;width: 24px;}

Gruß norse

Seele · 15. September 2014

Vielen Dank norse

nun sieht es gut aus.

Lg Seelensturm

Erweiterte Informationsseite: Icons einfügen

cls-design

Informationen

Demoinstallationen

Hilfe