mobiele weergaven tweaken

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB3.
Plaats reactie
Brammetje
Berichten: 45
Lid geworden op: 03 aug 2015, 07:43

mobiele weergaven tweaken

Bericht door Brammetje » 19 aug 2015, 21:30

Wellicht kan iemand mij een klein beetje op weg helpen.

Ik wil in de mobile-view (max width: 550px) onder de gebruikersnaam, links bovenin, de locatie of een ander aangepast profielveld weergeven.
Ook wil ik daar de PM knop plaatsen

Om dit aan te passen heb ik een aantal classes gemaakt die alleen weergegeven worden in de @media only screen and (max-width: 550px), only screen and (max-device-width: 550px)

De forumlist_body heb ik op die manier goed kunnen aanpassen.
Maar hoe dan ik de juiste variable uit viewtopic_body halen?
Waar kan ik hardcopy de waarde van het profielveld vervangen, zodat niet alle profielvelden worden weergegeven?

{postrow.custom_fields.PROFILE_FIELD_VALUE}

Gebruikersavatar
Theriddler
Berichten: 1103
Lid geworden op: 20 apr 2012, 07:47
Contacteer:

Re: mobiele weergaven tweaken

Bericht door Theriddler » 21 aug 2015, 20:12

Brammetje schreef:Wellicht kan iemand mij een klein beetje op weg helpen.

Ik wil in de mobile-view (max width: 550px) onder de gebruikersnaam, links bovenin, de locatie of een ander aangepast profielveld weergeven.
Ook wil ik daar de PM knop plaatsen

Om dit aan te passen heb ik een aantal classes gemaakt die alleen weergegeven worden in de @media only screen and (max-width: 550px), only screen and (max-device-width: 550px)

De forumlist_body heb ik op die manier goed kunnen aanpassen.
Maar hoe dan ik de juiste variable uit viewtopic_body halen?
Waar kan ik hardcopy de waarde van het profielveld vervangen, zodat niet alle profielvelden worden weergegeven?

{postrow.custom_fields.PROFILE_FIELD_VALUE}
volgens mij is de juiste css code hiervoor:

Code: Selecteer alles

.section-viewtopic dd.profile-naam_profiel_veld {display:none; }
naam_profiel_veld veranderen naar de naam van het profiel veld welke je dan verborgen wil hebben.

Brammetje
Berichten: 45
Lid geworden op: 03 aug 2015, 07:43

Re: mobiele weergaven tweaken

Bericht door Brammetje » 26 aug 2015, 23:25

Ik bedoel eigenlijk welke waarde ik moet vervangen met PROFILE_FIELD_VALUE in de onderstaande code als ik alleen mijn extra toegevoegde veld (phpbb_test) wil laten weergeven.
Want wat ik wil bereiken is dat met een view onder de 550 er onder de naam een custom profiel veld wordt weergegeven ten samen met een knop om een PM te versturen.

Code: Selecteer alles

		<!-- BEGIN custom_fields -->
				<!-- IF not postrow.custom_fields.S_PROFILE_CONTACT -->
				<dd class="profile-custom-field profile-{postrow.custom_fields.PROFILE_FIELD_IDENT}"><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</dd>
				<!-- ENDIF -->
		<!-- END custom_fields -->

Gebruikersavatar
Theriddler
Berichten: 1103
Lid geworden op: 20 apr 2012, 07:47
Contacteer:

Re: mobiele weergaven tweaken

Bericht door Theriddler » 28 aug 2015, 16:39

whoei dat gaat me boven de pet vrees ik, maar ik weet niet of je engels goed is ,dan zou je het eens kunnen vragen op phpbb.com

https://www.phpbb.com/community/viewforum.php?f=481

Brammetje
Berichten: 45
Lid geworden op: 03 aug 2015, 07:43

Re: mobiele weergaven tweaken

Bericht door Brammetje » 01 sep 2015, 11:06

Daar krijg ik geen reacties. Het werkt nu, maar is niet echt flexible, meer hardcode. Maar deel hem toch maar.,

Op de plek van *NAAM* geef je de werkelijke naam in van het veld, zoals bijvoorbeeld Locatie

OPEN
viewtopic_body.html

FIND

Code: Selecteer alles

				<!-- IF not postrow.U_POST_AUTHOR --><strong>{postrow.POST_AUTHOR_FULL}</strong><!-- ELSE -->{postrow.POST_AUTHOR_FULL}<!-- ENDIF -->
ADD AFTER

Code: Selecteer alles

				<!-- BEGIN custom_fields -->		
					<!-- IF postrow.custom_fields.PROFILE_FIELD_NAME eq "*NAAM*" -->
					<div class="customprofilemobile"><strong>{postrow.custom_fields.PROFILE_FIELD_NAME}{L_COLON}</strong> {postrow.custom_fields.PROFILE_FIELD_VALUE}</div> 
					<!-- ENDIF -->
				<!-- END custom_fields -->	
OPEN
responsive.css

FIND

Code: Selecteer alles

/* Forums and topics lists
----------------------------------------*/
ADD AFTER

Code: Selecteer alles

.customprofilemobile {
		display: block;
	}
FIND

Code: Selecteer alles

@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
ADD AFTER

Code: Selecteer alles

.customprofilemobile {
		display: block;
	}
OPEN
content.css

FIND

Code: Selecteer alles

/* Content Styles
---------------------------------------- */
ADD AFTER

Code: Selecteer alles

.customprofilemobile {
		display: none;
	}

Plaats reactie