Social Network mit Style aero

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.0.x, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
phpBB Styles Demo
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich, besser noch die URL vom betroffenen Forum.
Antworten
LisaserstesForum
Mitglied
Beiträge: 996
Registriert: 28.08.2008 20:20
Wohnort: Kassel

Social Network mit Style aero

Beitrag 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?
Benutzeravatar
Miriam
Mitglied
Beiträge: 12310
Registriert: 13.10.2004 07:18
Kontaktdaten:

Re: Social Network mit Style aero

Beitrag 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.
Gruss, Miriam.
Ich schmeiß' alles hin und...
... lasse es liegen
LisaserstesForum
Mitglied
Beiträge: 996
Registriert: 28.08.2008 20:20
Wohnort: Kassel

Re: Social Network mit Style aero

Beitrag 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>
Benutzeravatar
archivar
Mitglied
Beiträge: 572
Registriert: 07.08.2008 08:25
Wohnort: Deutschland

Re: Social Network mit Style aero

Beitrag 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 />
V. G. archivar
LisaserstesForum
Mitglied
Beiträge: 996
Registriert: 28.08.2008 20:20
Wohnort: Kassel

Re: Social Network mit Style aero

Beitrag 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?
Benutzeravatar
archivar
Mitglied
Beiträge: 572
Registriert: 07.08.2008 08:25
Wohnort: Deutschland

Re: Social Network mit Style aero

Beitrag 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;
}
Zuletzt geändert von archivar am 20.05.2013 14:21, insgesamt 1-mal geändert.
V. G. archivar
Benutzeravatar
Miriam
Mitglied
Beiträge: 12310
Registriert: 13.10.2004 07:18
Kontaktdaten:

Re: Social Network mit Style aero

Beitrag von Miriam »

Gruss, Miriam.
Ich schmeiß' alles hin und...
... lasse es liegen
LisaserstesForum
Mitglied
Beiträge: 996
Registriert: 28.08.2008 20:20
Wohnort: Kassel

Re: Social Network mit Style aero

Beitrag von LisaserstesForum »

Danke, jetzt sieht es wieder chic aus. :)
Antworten

Zurück zu „[3.0.x] Styles, Templates und Grafiken“