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.
Profil Headerlogo, wie kann ich das realisieren?
Forumsregeln
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Bei Style spezifischen Fragen ist der Stylename und die Downloadquelle des Styles erforderlich sowie die URL vom betroffenen Forum.
Re: Profil Headerlogo, wie kann ich das realisieren?
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
ersetzte mit
finde
und
entferne diese beiden Einträge und ersetze durch
Die von mir neu erstelle userprofile_header.html sieht so aus:
dazu habe ich eine userhead.css geschaffen:
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?
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 -->
Code: Alles auswählen
<!-- IF not custom_fields.S_PROFILE_CONTACT and not custom_fields.S_PROFILE_USERHEAD -->
Code: Alles auswählen
<div class="panel bg1<!-- IF S_ONLINE --> online<!-- ENDIF -->">
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 --> <!-- 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> </dt> <dd class="zebra"><a href="{U_REMOVE_FRIEND}" data-ajax="zebra"><strong>{L_REMOVE_FRIEND}</strong></a></dd>
<!-- ELSEIF U_REMOVE_FOE -->
<dt> </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> </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> </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>
Code: Alles auswählen
<!-- INCLUDE userprofile_header.html -->
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 -->
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;
}
Re: Profil Headerlogo, wie kann ich das realisieren?
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
Vielleicht hilft es anderen ja auch
LG Ralph