Profil Headerlogo, wie kann ich das realisieren?

Alles zu Styles, Templates, Icons und Smilies für phpBB 3.3, sowie allgemeine Designfragen zur Integration von phpBB in bestehende Websites.
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Antworten
Benutzeravatar
-motte-
Mitglied
Beiträge: 283
Registriert: 22.08.2006 18:36
Wohnort: Lüdinghausen
Kontaktdaten:
Kontaktdaten von -motte-

Profil Headerlogo, wie kann ich das realisieren?

Beitrag von -motte- »

Hallo, ich hab in einem Forum entdeckt das dort Benutzer für ihr Profil ein eigenes Headerlogo hochladen können es wird dann über den Userinfos dargestellt, wie kann ich das für das phpbb Forum möglich machen?

Die Idee kommt aus einem Xobor Forum.
Renault Scenic Forum 🚘 since 2003 ...

... lover of Modeltrains 🚂🚃🚃
Nach oben
Benutzeravatar
Dref
Mitglied
Beiträge: 98
Registriert: 13.01.2022 15:36

Re: Profil Headerlogo, wie kann ich das realisieren?

Beitrag von Dref »

meinst du dies https://www.suportephpbb.com.br/viewtopic.php?t=49558 ?
Nach oben
Benutzeravatar
-motte-
Mitglied
Beiträge: 283
Registriert: 22.08.2006 18:36
Wohnort: Lüdinghausen
Kontaktdaten:
Kontaktdaten von -motte-

Re: Profil Headerlogo, wie kann ich das realisieren?

Beitrag von -motte- »

Das sieht dem sehr ähnlich.

18.2.22 *edit*
22:26 ein paar Fehler behoben

Also ich hab dann mal angefangen und so sieht aktuell mein Ergebnis aus:
Die Veränderung der memberlist_view.html habe ich so eingefügt:

finde

Code: Alles auswählen

<!-- IF not custom_fields.S_PROFILE_CONTACT -->
ersetzte mit

Code: Alles auswählen

	<!-- IF not custom_fields.S_PROFILE_CONTACT and not custom_fields.S_PROFILE_USERHEAD  -->
finde

Code: Alles auswählen

<div class="panel bg1<!-- IF S_ONLINE --> online<!-- ENDIF -->">
und

Code: Alles auswählen

<!-- IF AVATAR_IMG -->
		<dl class="left-box">
			<dt class="profile-avatar">{AVATAR_IMG}</dt>
			<!-- EVENT memberlist_view_rank_avatar_before -->
			<!-- IF RANK_TITLE --><dd style="text-align: center;">{RANK_TITLE}</dd><!-- ENDIF -->
			<!-- IF RANK_IMG --><dd style="text-align: center;">{RANK_IMG}</dd><!-- ENDIF -->
			<!-- EVENT memberlist_view_rank_avatar_after -->
		</dl>
	<!-- ENDIF -->

	<dl class="left-box details profile-details">
		<dt>{L_USERNAME}{L_COLON}</dt>
		<dd>
			<!-- IF USER_COLOR --><span style="color: {USER_COLOR}; font-weight: bold;"><!-- ELSE --><span><!-- ENDIF -->{USERNAME}</span>
			<!-- IF U_EDIT_SELF --> [ <a href="{U_EDIT_SELF}">{L_EDIT_PROFILE}</a> ]<!-- ENDIF -->
			<!-- IF U_USER_ADMIN --> [ <a href="{U_USER_ADMIN}">{L_USER_ADMIN}</a> ]<!-- ENDIF -->
			<!-- IF U_USER_BAN --> [ <a href="{U_USER_BAN}">{L_USER_BAN}</a> ]<!-- ENDIF -->
			<!-- IF U_SWITCH_PERMISSIONS --> [ <a href="{U_SWITCH_PERMISSIONS}">{L_USE_PERMISSIONS}</a> ]<!-- ENDIF -->
		</dd>
		<!-- IF not AVATAR_IMG -->
			<!-- EVENT memberlist_view_rank_no_avatar_before -->
			<!-- IF RANK_TITLE --><dt>{L_RANK}{L_COLON}</dt> <dd>{RANK_TITLE}</dd><!-- ENDIF -->
			<!-- IF RANK_IMG --><dt><!-- IF RANK_TITLE -->&nbsp;<!-- ELSE -->{L_RANK}{L_COLON}<!-- ENDIF --></dt> <dd>{RANK_IMG}</dd><!-- ENDIF -->
			<!-- EVENT memberlist_view_rank_no_avatar_after -->
		<!-- ENDIF -->
		<!-- IF S_USER_INACTIVE --><dt>{L_USER_IS_INACTIVE}{L_COLON}</dt> <dd>{USER_INACTIVE_REASON}</dd><!-- ENDIF -->
		<!-- IF AGE !== '' --><dt>{L_AGE}{L_COLON}</dt> <dd>{AGE}</dd><!-- ENDIF -->
		<!-- IF S_GROUP_OPTIONS --><dt>{L_USERGROUPS}{L_COLON}</dt> <dd><select name="g">{S_GROUP_OPTIONS}</select> <input type="submit" name="submit" value="{L_GO}" class="button2" /></dd><!-- ENDIF -->
		<!-- EVENT memberlist_view_non_contact_custom_fields_before -->
		<!-- BEGIN custom_fields -->
			<!-- IF not custom_fields.S_PROFILE_CONTACT -->
				<dt>{custom_fields.PROFILE_FIELD_NAME}{L_COLON}</dt> <dd>{custom_fields.PROFILE_FIELD_VALUE}</dd>
			<!-- ENDIF -->
		<!-- END custom_fields -->
		<!-- EVENT memberlist_view_non_contact_custom_fields_after -->
		<!-- EVENT memberlist_view_zebra_before -->
		<!-- IF S_USER_LOGGED_IN and S_ZEBRA -->
			<!-- IF U_REMOVE_FRIEND -->
				<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_REMOVE_FRIEND}" data-ajax="zebra"><strong>{L_REMOVE_FRIEND}</strong></a></dd>
			<!-- ELSEIF U_REMOVE_FOE -->
				<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_REMOVE_FOE}" data-ajax="zebra"><strong>{L_REMOVE_FOE}</strong></a></dd>
			<!-- ELSE -->
				<!-- IF U_ADD_FRIEND -->
					<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_ADD_FRIEND}" data-ajax="zebra"><strong>{L_ADD_FRIEND}</strong></a></dd>
				<!-- ENDIF -->
				<!-- IF U_ADD_FOE -->
					<dt>&nbsp;</dt> <dd class="zebra"><a href="{U_ADD_FOE}" data-ajax="zebra"><strong>{L_ADD_FOE}</strong></a></dd>
				<!-- ENDIF -->
			<!-- ENDIF -->
		<!-- ENDIF -->
		<!-- EVENT memberlist_view_zebra_after -->
	</dl>
entferne diese beiden Einträge und ersetze durch

Code: Alles auswählen

<!-- INCLUDE userprofile_header.html -->
Die von mir neu erstelle userprofile_header.html sieht so aus:

Code: Alles auswählen

<!-- HEADER START -->
		<div class="profile-cover-image">
	<!-- IF S_PROFILE_USERHEAD -->
		<img src="{PROFILE_USERHEAD_VALUE_RAW}" class="custom-header" />
	<!-- ELSE -->
		<img src="{T_THEME_PATH}/images/userhead/no_cover.jpg" class="custom-header" />
<!-- ENDIF -->

<!-- Start of column with avatar and information -->
	<div class="column_Profile">
		<div style="display:block" class="column_Avatar">
		<!-- IF AVATAR_IMG -->
			{AVATAR_IMG}
		<!-- ELSE -->
			<img src="{T_THEME_PATH}/images/userhead/no_avatar.gif" />
		<!-- ENDIF -->
		</div>
<strong class="box-nick box-user"><!-- IF S_ONLINE --><i id="online" class="fa fa-circle" aria-hidden="true" title="Online"> </i><!-- ELSE --><i id="offline" class="fa fa-circle" aria-hidden="true" title="Offline"></i><!-- ENDIF --><span style="vertical-align:middle;display:inline;">{USERNAME}</span></strong>

<br/><br/>

<strong class="box-nick" style="line-height:0px;font-size:17px">{RANK_TITLE}</strong>

<br><br><br>

	<!-- IF S_USER_LOGGED_IN and S_ZEBRA -->
		<!-- EVENT memberlist_view_zebra_before -->
		<!-- IF U_REMOVE_FRIEND --><a href="{U_REMOVE_FRIEND}" data-ajax="zebra" class="hide-mobile button"><i class="fa fa-minus-circle"></i ><span>{L_REMOVE_FRIEND}</span></a><!-- ELSEIF U_REMOVE_FOE --><a href="{U_REMOVE_FOE}" data-ajax="zebra" class="hide-mobile button">< i class="fa fa-minus-circle"></i><span>{L_REMOVE_FOE}</span></a><!-- ELSE --><!-- IF U_ADD_FRIEND --><a href ="{U_ADD_FRIEND}" data-ajax="zebra" class="hide-mobile button"><i class="fa-smile-o"></i><span>{L_ADD_FRIEND}</span>< /a><!-- ENDIF --><!-- IF U_ADD_FOE --><a href="{U_ADD_FOE}" data-ajax="zebra" class="hide-mobile button"><i class=" fa fa-frown-o"></i><span>{L_ADD_FOE}</span></a><!-- ENDIF --><!-- ENDIF -->
	<!-- ENDIF -->
<!-- EVENT memberlist_view_zebra_after -->
	<!-- IF U_EDIT_SELF -->
		<a href="{U_EDIT_SELF}" class="hide-mobile button"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><span>{L_EDIT_PROFILE} </span></a>
	<!-- ENDIF -->
	<!-- IF U_USER_ADMIN -->
		<a href="{U_USER_ADMIN}" class="hide-mobile button"><i class="fa fa-pencil" aria-hidden="true"></i><span>{L_USER_ADMIN}</span> </a>
	<!-- ENDIF -->
	<!-- IF U_USER_BAN -->
		<a href="{U_USER_BAN}" class="hide-mobile button"><i class="fa fa-ban" aria-hidden="true"></i><span>{L_USER_BAN}</span> </a>
	<!-- ENDIF -->
	<!-- IF U_SWITCH_PERMISSIONS -->
		<a href="{U_SWITCH_PERMISSIONS}" class="hide-mobile button"><i class="fa fa-user" aria-hidden="true"></i><span>{L_USE_PERMISSIONS}</span> </a>
	<!-- ENDIF -->
	</div>
</div>

<!-- Start of column with social media informations -->
	<div class="column_socialmedia">
		<!-- facebook -->
		<div style="display:block" class="column_userhead_fb">
		<!-- IF S_PROFILE_USERHEAD_FB -->
			 <img src="{T_THEME_PATH}/images/userhead/fb.png" class="custom-header" />
		<!-- ENDIF -->
		</div>
		<!-- insta -->
		<div style="display:block" class="column_userhead_insta">
		<!-- IF S_PROFILE_USERHEAD_INSTA -->
			 <img src="{T_THEME_PATH}/images/userhead/insta.png" class="custom-header" />
		<!-- ENDIF -->
		</div>
		<!-- twit -->
		<div style="display:block" class="column_userhead_twit">
		<!-- IF S_PROFILE_USERHEAD_TWIT -->
			<dd><a href="{custom_fields.PROFILE_FIELD_CONTACT}"><img src="{T_THEME_PATH}/images/userhead/twit.png" class="custom-header" /></a></dd>
		<!-- ENDIF -->
		</div>
	</div>		
<!-- END OF HEADER -->
dazu habe ich eine userhead.css geschaffen:

Code: Alles auswählen

/* userhead */
@media (max-width: 700px) {
	.profile-cover-image {
		height: auto;
	}
}

@media (min-width: 700px) {
	.profile-cover-image {
		height: 310px;
	}
}

@media (max-width: 700px) {
	.hide-mobile {
		display: none;
	}
}

.profile-cover-image {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.profile-cover-image > .custom-header {
  width: 100%;
}

.column_Profile {
	color: #fff;
	padding: 12px;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 80px;
	box-sizing: border-box;
	flex-direction: row;
	flex: 0;
	flex-wrap: nowrap; 
}

.column_Avatar {
	top: 15px;
	left: 10px;
	width: 130px;
	height: 130px;
	overflow:hidden;
	margin-right:19px;
	float: left; 
}

.column_Avatar img {
	width: 130px;
	height: auto;
}

#online {
	color: #2ed92e;
	font-size: 27px;
	vertical-align: middle;
	margin-right: 6px;
}

#offline {
	color: #d31141;
	font-size: 27px;
	vertical-align: middle;
	margin-right: 6px;
}

.box-nick {
	/*background-color: rgba(0,0,0,.3);*/
	padding: 7px 10px;
	text-shadow: 0px 0px 4px rgba(0,0,0,0.5);
	width: auto;}

.box-user {
	color: #fff;
	font-size: 33px;
}

/* additional social media*/
.column_socialmedia {
    padding: 12px;
    position: absolute;
    margin-top: -322px;
    left: -100px;
    width: 100%;
    height: 100px;
    box-sizing: border-box;
    flex-direction: row;
    flex: 0;
    flex-wrap: nowrap;
}
	
/* fb */
.column_userhead_fb {
    /* top: 37px; */
    /* left: 10px; */
    width: 100px;
    height: 100px;
    overflow: hidden;
    /*margin-right: 15px;*/
    float: right;
}

/* insta */
.column_userhead_insta {
    /* top: 37px; */
    /* left: 10px; */
    width: 100px;
    height: 100px;
    overflow: hidden;
    /*margin-right: 115px;*/
    float: right;
}

/* twit */
.column_userhead_twit {
    /* top: 37px; */
    /* left: 10px; */
    width: 100px;
    height: 100px;
    overflow: hidden;
    /*margin-right: 215px;*/
    float: right;
}
ABER ... nun habe ich einen kleinen Hänger .... der User kann jetzt zum Headerlogo für sein Profil nun auch socialmedias zufügen ... wenn etwas eingetragen ist werden rechts oben im Headerlogo diese angezeigt, was muss ich machen damit diese auch direkt zu dem korrekten socialmediaaccount verlinkt werden?
Renault Scenic Forum 🚘 since 2003 ...

... lover of Modeltrains 🚂🚃🚃
Nach oben
Benutzeravatar
-motte-
Mitglied
Beiträge: 283
Registriert: 22.08.2006 18:36
Wohnort: Lüdinghausen
Kontaktdaten:
Kontaktdaten von -motte-

Re: Profil Headerlogo, wie kann ich das realisieren?

Beitrag von -motte- »

Ich schreib hier mal zu das ich eine Lösung mittels phpbb.com hier bekommen habe: https://www.phpbb.com/community/viewtop ... &t=2614961

Vielleicht hilft es anderen ja auch ;)

LG Ralph
Renault Scenic Forum 🚘 since 2003 ...

... lover of Modeltrains 🚂🚃🚃
Nach oben
Antworten

Zurück zu „Styles, Templates und Grafiken“