phpBB.de

phpBB.de - Die deutsche phpBB-Community
https://www.phpbb.de/community/

Profil Headerlogo, wie kann ich das realisieren?

https://www.phpbb.de/community/viewtopic.php?t=246005

Seite 1 von 1

Profil Headerlogo, wie kann ich das realisieren?

Verfasst: 17.02.2022 18:48
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.

Re: Profil Headerlogo, wie kann ich das realisieren?

Verfasst: 17.02.2022 19:22
von Dref
meinst du dies https://www.suportephpbb.com.br/viewtopic.php?t=49558 ?

Re: Profil Headerlogo, wie kann ich das realisieren?

Verfasst: 17.02.2022 19:46
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?

Re: Profil Headerlogo, wie kann ich das realisieren?

Verfasst: 20.02.2022 14:38
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
Alle Zeiten sind UTC+02:00
Seite 1 von 1

Powered by phpBB® Forum Software © phpBB Limited

Deutsche Übersetzung durch phpBB.de