phpBB.de • Social Network mit Style aero

Seite 1 von 1

Social Network mit Style aero

Verfasst: 20.05.2013 09:27

von LisaserstesForum

Hi, ich hab überlegt wo ich den Beitrag posten soll, es geht aber mehr um den Style als um den MOD, deshalb schreibe ich es hier rein.

Wir benutzen den Style Aero (http://www.phpbb.com/community/viewtopi ... 5&t=639995) und haben den MOD phpbb Social Network installiert (http://phpbbsocialnetwork.com/).

Die Activitypage sieht nach dem Einbau von dem MOD so aus: http://img4.fotos-hochladen.net/uploads ... mx7o1c.png

In unserem Style muss man bei neuen MODs den Rahmen noch in die Templatedateien einfügen, das
geht normalerweise mit {$A_BLOCK_START} und {$A_BLOCK_END}.

Das habe ich auch für die Activitypage versucht, ich habe in der Datei /styles/aero/template/socialnet/activitypage_body.html den Rahmen eingefügt: Original / mit Rahmen

Leider sieht das dann so aus, dass der Rahmen über den ganzen Bildschirm gezogen wird:
http://img5.fotos-hochladen.net/uploads ... 6hysz8.png

Habt ihr eine Idee, woran das liegen könnte und wie ich das lösen kann?

Re: Social Network mit Style aero

Verfasst: 20.05.2013 10:54

von Miriam

Das sind zu viele "Rahmen". Du solltest / kannst sie am besten nur einmal einsetzen, denn diese vorgegebenen Rahmen erstrecken sich über die ganze Breite der Seite (wie Du selbst schon bemerkt hast).

Finde also in der \styles\aero\template\socialnet\activitypage_body.html:

Code: Alles auswählen

<!-- DEFINE $BLOCK_HEADER_TYPE = 'forabg' -->

danach füge ein:

Code: Alles auswählen

{$A_BLOCK_START}

finde:

Code: Alles auswählen

<!-- INCLUDE overall_footer.html -->

davor füge ein:

Code: Alles auswählen

{$A_BLOCK_END}

finde außerdem in der \styles\aero\theme\socialnet.css:

Code: Alles auswählen

.sn-menu .ui-menu-item {
	border-bottom: 1px solid #e4e4e4;

danach füge ein:

Code: Alles auswählen

	list-style: none;

Beherzige ggf.: KB:tippstyles, dann sieht Dein Flashen-Forum wieder chic aus.

Re: Social Network mit Style aero

Verfasst: 20.05.2013 11:38

von LisaserstesForum

Hi Miriam, danke für deine Hilfe.
Ich finde es so aber noch nicht wirklich chic, schöner wäre es, wenn jeder einzelne Block einen Rahmen bekommen würde.

Ich hab jetzt mal ein bißchen rumprobiert, und statt mit {$A_BLOCK_START} hiermit gearbeitet:

Code: Alles auswählen

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="tl"></td>
    <td class="tm"></td>
    <td class="tr"></td>
  </tr>
  <tr>
    <td class="ml"></td>
    <td>

</td>    <td class="mr"></td>
  </tr>
  <tr>
    <td class="bl"></td>
    <td class="bm"></td>
    <td class="br"></td>
  </tr>
</table>

Dort habe ich width auf 22% gesetzt, das sieht dann so aus: http://img4.fotos-hochladen.net/uploads ... suen31.png

Leider schiebt es trotzdem die anderen Blöcke nach unten, kann man das beheben?

Ich habe auch noch den ursprünglichen Code für die Rahmen, vielleicht kann man damit was ändern?

Code: Alles auswählen

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="18" height="18"><img src="{T_THEME_PATH}/images/tl.png" width="18" height="18" alt="" /></td>
    <td height="18" style="background:url('{T_THEME_PATH}/images/tm.png');"></td>
    <td width="18" height="18"><img src="{T_THEME_PATH}/images/tr.png" width="18" height="18" alt="" /></td>
  </tr>
  <tr>
    <td width="18" style="background:url('{T_THEME_PATH}/images/ml.png');"></td>
    <td>

</td>
    <td width="18" style="background:url('{T_THEME_PATH}/images/mr.png');"></td>
  </tr>
  <tr>
    <td width="18" height="18" align="right"><img src="{T_THEME_PATH}/images/bl.png" width="18" height="18" alt="" /></td>
    <td height="18" style="background:url('{T_THEME_PATH}/images/bm.png');"></td>
    <td width="18" height="18"><img src="{T_THEME_PATH}/images/br.png" width="18" height="18" alt="" /></td>
  </tr>
</table>

Re: Social Network mit Style aero

Verfasst: 20.05.2013 12:12

von archivar

Versuche es in der activitypage_body.html mal so:

Code: Alles auswählen

	<div id="sn-page-columnRight" class="sn-page-columnRight">
    {$A_BLOCK_START}
		<!-- INCLUDE socialnet/block_friends_suggestions.html -->		
		<!-- INCLUDE socialnet/block_friend_requests.html -->		
		<!-- INCLUDE socialnet/block_birthday.html -->		
		<!-- INCLUDE socialnet/block_recent_discussions.html -->
		{SN_ADDONS_PLACEHOLDER_ACTIVITYPAGE_RIGHTCOLUMN_CONTENT}
		<!-- INCLUDE socialnet/block_statistics.html -->		
    {$A_BLOCK_END}
	</div>

Und hinter:

Code: Alles auswählen

<!-- INCLUDE socialnet/block_myprofile.html -->

noch das hier dahinter, damit man das Avatar voll sieht:

Code: Alles auswählen

<br /><br />

Re: Social Network mit Style aero

Verfasst: 20.05.2013 12:49

von LisaserstesForum

Hi archivar, danke das war ein guter Tip.

Der Quellcode sieht jetzt so aus: https://www.phpbb.de/support/pastebin.p ... iew&s=1269
Und so sieht es jetzt aus: http://img5.fotos-hochladen.net/uploads ... pktjm4.png

So gefällt es mir besser, nur links ist der Rahmen noch irgendwie abgeschnitten oder der Block hat zu wenig Platz.
Hast du dafür vielleicht auch noch eine Idee?

Re: Social Network mit Style aero

Verfasst: 20.05.2013 14:10

von archivar

LisaserstesForum hat geschrieben: So gefällt es mir besser, nur links ist der Rahmen noch irgendwie abgeschnitten oder der Block hat zu wenig Platz.
Hast du dafür vielleicht auch noch eine Idee?

Bitte schön:
suche in root/styles/aero/theme/socialnet.css:

Code: Alles auswählen

.sn-page-columnLeft {
	width: 230px;
}

ersetze damit:

Code: Alles auswählen

.sn-page-columnLeft {
	width: 255px;
}

suche:

Code: Alles auswählen

.sn-menu {
	border: none;
	display: block;
	margin: 5px 0;
	width: 99%;
}

ersetze damit:

Code: Alles auswählen

.sn-menu {
	border: none;
	display: block;
	margin: 5px 0;
	width: auto;
}

suche:

Code: Alles auswählen

.sn-ap-search input,.sn-ap-search input:hover,.sn-ap-search input:focus {
	border: none;
	width: 200px;
}

ersetze damit:

Code: Alles auswählen

.sn-ap-search input,.sn-ap-search input:hover,.sn-ap-search input:focus {
	border: none;
	width: auto;
}

Re: Social Network mit Style aero

Verfasst: 20.05.2013 14:18

von Miriam

Entweder so oder so: Alle Anpassungen für den Social MOD im Aero Style

Re: Social Network mit Style aero

Verfasst: 21.05.2013 12:54

von LisaserstesForum

Danke, jetzt sieht es wieder chic aus.