[KIJK]Aphrodite in phpBB 3

Bezig met een stijl voor je website? Of voor heel de community? Laat hem ons zien.
Forumregels

LEES: Algemene Voorwaarden. Denk aan tags [KIJK] voor je eigen site, [DEV] voor als je hem wilt vrijgeven!
phpBB3.0.x
Plaats reactie
Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

[KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 27 dec 2008, 12:57

Ik ben de afgelopen tijd vooral bezig met het ontdekken van de mogelijkheden binnen phpBB 3 qua styling en ik ben al jaren gecharmeerd van Aphrodite Stijl die beschikbaar was in phpBB 2. Deze heb ik nu geprobeerd om te zetten naar phpBB 3. Er moet nog heel veel gebeuren maar wil jullie wel laten zien hoe ver het gevorderd is.

NOTE: Ik breng deze stijl niet uit, mocht je hem toch willen hebben, neem dan contact op met CyberAlien en misschien dat ik hem dan met zijn permissie hem alsnog uitbreng, het is nu nog voor eigen gebruik.

Mijn website is: http://brandsrus.byethost32.com/

Je kunt inloggen met een testaccount, maak er alstublieft geen misbruik van, anders lock ik de account!
gebruikersnaam: tester
wachtwoord: tester

Je mag natuurlijk je kritiek of verbeteringen altijd aan mij doorgeven in dit topic, misschien hebben jullie nog ideeen! Laat van je horen!

Jim
Berichten: 3900
Lid geworden op: 21 feb 2007, 14:53
Locatie: Groningen
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door Jim » 27 dec 2008, 13:06

Mooi gedaan, lijkt sprekend op de Aphordite van phpBB2. Tipje, misschien even in de stijl copyright zetten dat het origineel is gemaakt door CyberAlien, en dat jij hem omgezet hebt naar phpBB3, dan krijg je daar geen problemen mee.
Jim Mossing Holsteyn - Beheerder
Documentatie | Algemene voorwaarden | Wiki

Heb je suggesties over het verbeteren van phpBB.nl of andere site-gerelateerde vragen? Stuur me een PB!

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 29 dec 2008, 12:20

Ik heb idd de stijl copyright aangepast.

Vandaag verder gegaan met sommige tweaks in de stijl Aphrodite. Nu moet ik de stylesheet zo klein mogelijk proberen te maken en misschien hier en daar tables vervangen door divs.

Maar vind dat wel lastig om tables te vervangen door div's, wie heeft daarmee wat meer ervaring of een tutorial?

Gebruikersavatar
Dmeijer13
Berichten: 1074
Lid geworden op: 25 jan 2008, 22:20
Locatie: Raamsdonksveer (NB)

Re: [KIJK]Aphrodite in phpBB 3

Bericht door Dmeijer13 » 29 dec 2008, 12:22

Ziet er inderdaad goed uit! =)
Oude gebruikersnaam: Splashing Mudkip

Helpt graag bij support maar geeft geen support via MSN of PM
Domme vragen bestaan niet, dus zul je niet dom zijn als je vraagt, je bent dom als je niet vraagt
http://www.forums.jongerenblogs.nl

Gebruikersavatar
DoubleJ
Berichten: 502
Lid geworden op: 22 jan 2005, 17:20
Locatie: Enschede
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door DoubleJ » 29 dec 2008, 15:13

Ik had eerst ook inderdaad de waan dat je stiekem een phpbb2 board had opgezet, met andere woorden je hebt hem heel mooi overgezet.

Paar... kleinigheidjes:
Forumrules:
-> paddingleft iets verhogen.
-> Valt niet heel erg op, misschien een tintje rood toevoegen(bijvoorbeeld, geen paarse cellpic maar die witte gebruiken en dan daar een rode kleur van de links op toepassen waardoor hij iets meer opvalt en niet wegvalt zoals nu... of misschien rooie border..

Attachmentboxes
-> Mischien ook hier tenopzichte van de randen van de tabel, meer horizontale padding, dus dat de box niet tegen der anden van de content tabel aandrukt.

Polls..
-> Ik meende dat de poll plaatjes van aphrodite ook vierkant waren...(deze lijken op die van subsilver).

Search
Ik kan me van phpbbstyles nog herrineren dat de searchbox aan de rechterkant van de pagina stond. Misschien dat dat hier ook mooier staat, dus :
[postbutton]ppagination] -------- [search-rechtsuitgelijnd]

------------------------

Goed, dit zijn een aantal kleinigheidjes die ik zo op het oog eventjes zie. Verder heb je met de port mooi werk geleverd, en ik zou denk ik toch even vragen aan CA of je hem mag porten/uitbrengen, echter weet ik niet zeker in hoeverre dit allemaal mag gezien de overname van templatemonster toendertijd en of toen aphrodite wel of niet is meegegaan, want hij voert juist die stijl ook niet op zijn eigen site van (stsoftware.biz).

JJ.
DoubleJ - "Waarom makkelijk doen, als het ook moeilijk kan."

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 29 dec 2008, 17:59

Bedankt DoubleJ voor je opmerkingen
DoubleJ schreef: Paar... kleinigheidjes:
Forumrules:
-> paddingleft iets verhogen.
-> Valt niet heel erg op, misschien een tintje rood toevoegen(bijvoorbeeld, geen paarse cellpic maar die witte gebruiken en dan daar een rode kleur van de links op toepassen waardoor hij iets meer opvalt en niet wegvalt zoals nu... of misschien rooie border..
Ik heb ze een rode cellpic meegegeven, nu vallen ze tenminste op, misschien kan ik het nog wat subtieler doen maar in ieder geval verbeterd.
DoubleJ schreef: Attachmentboxes
-> Mischien ook hier tenopzichte van de randen van de tabel, meer horizontale padding, dus dat de box niet tegen der anden van de content tabel aandrukt.
Ik heb de complete attachmentboxen heringedeeld. Ik denk dat dit ook zo moet hoe ik nu heb.

De Polls moet ik nog even naar kijken, de plaatjes van die bars e.d. heb ik in mijn bezit even kijken hoe dat uitkomt in de template :)

Gebruikersavatar
DoubleJ
Berichten: 502
Lid geworden op: 22 jan 2005, 17:20
Locatie: Enschede
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door DoubleJ » 29 dec 2008, 20:40

brandsrus schreef:Bedankt DoubleJ voor je opmerkingen
DoubleJ schreef: Paar... kleinigheidjes:
Forumrules:
-> paddingleft iets verhogen.
-> Valt niet heel erg op, misschien een tintje rood toevoegen(bijvoorbeeld, geen paarse cellpic maar die witte gebruiken en dan daar een rode kleur van de links op toepassen waardoor hij iets meer opvalt en niet wegvalt zoals nu... of misschien rooie border..
Ik heb ze een rode cellpic meegegeven, nu vallen ze tenminste op, misschien kan ik het nog wat subtieler doen maar in ieder geval verbeterd.
Ik zou zowiezo hier en daar nog eventjes naar je paddings kijken, je forumrules, raken nu nog de onderste border aan, wat niet heel erg mooi staat.

Die attachment boxen zien er nu inderdaad beter uit dan eerst.
DoubleJ - "Waarom makkelijk doen, als het ook moeilijk kan."

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 29 dec 2008, 20:48

Ik ga zo eerst zoals je in de broncode gezien heb, eerst de <table> layout omzetten naar <div> tags, opzich al een behoorlijk karwei (CSS ombouwen e.d.), maar goed lijkt me wel de moeite waard om daar energie in te steken.

Ik moet sowieso overal goed kijken naar de padding, het klopt hier en daar nog niet echt.

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 30 dec 2008, 10:59

Ik heb viewtopic even flink onder handen genomen, maar zit nog met 1 probleempje :P

Ik krijg de bericht en auteur niet even hoog zie afbeelding

Afbeelding

In mijn afbeelding hierboven kun je zien dat de auteur div niet hoog genoeg is hij moet tegen de divje van de spacer aankomen, maar andersom gebeurd het ook niet als het bericht kleiner is dan de auteurskolom.

Wat voor JavaScript of CSS heb ik nodig om het toch beide even hoog te krijgen?

Gebruikersavatar
Johan
Berichten: 2376
Lid geworden op: 05 mei 2007, 15:24
Locatie: memberlist.php

Re: [KIJK]Aphrodite in phpBB 3

Bericht door Johan » 30 dec 2008, 11:30

Misschien kan je dit artikel gebruiken? Of zelf even zoeken over hoe je iets helemaal onderaan krijgt. Hetzelfde probleem heb je namelijk soms met footers. :mrgreen:
Voormalig Support Teamlid

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 30 dec 2008, 12:01

Ja, ik heb alleen een probleem aangezien ik alleen maar met div's werk, volgens mij is jouw oplossing alleen voor als de footer in dezelfde div zit. Mijn footer zit in een andere div die daaronder wordt weergegeven, zie afbeelding.

Het probleem is dat de hoogte van div a eigenlijk net zo groot moet zijn als die van div b, en andersom.

Ik heb met rot gezocht maar kan niets vinden wat helpt (zelfs JavaScript oplossingen geprobeerd maar dat werkt niet)
Wijziging: Voor de duidelijkheid een stukje code toegevoegd
CSS
Spoiler: bekijk

Code: Selecteer alles

/* CSS Document */

/* hoofdcontainers */
* {
	margin:0;
	padding:0;
}

html {
	height:100%;
	margin:0;
	padding:0;
}

body {
	background: #FFF url(images/bg_body.gif) top left repeat-x;
	margin:0 auto;
	padding: 0 10px;
	height: 100%;
}

#content {
	width: 100%;
	margin : auto;
	padding: 2px;
	text-align: center;
}

#forum {
	background-color: #F8F8F8;
	border: solid 1px #A0A0A0;
	border-width: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	width: 100%;
}

/* table viewtopic */
#forumline {
	border: solid 1px #2B438F;
	margin: 5px 0;
	background-color: #F8F8F8;
	overflow:hidden;
}

#forumline .row-header {
	background: #354883 url(images/bg_hdr1.gif);
	border: solid 1px #DCE1EE;
	border-right-color: #CFDADE;
	border-bottom-color: #CFDADE;
	text-align: left;
	vertical-align: top;
	height: 27px;
}

#forumline .row-header span {
	background: url(images/bg_hdr2.gif) top left no-repeat;
	padding-left: 17px;
	color: #EDEFF4;
	display: block;
	padding-top: 4px;
	font-weight: bold;
	font-size: 12px;
	line-height: 1.2em;
}

#forumline .th {
	background: url(images/bg_th.gif) top left repeat-x;
	color: #455995;
	font-weight: bold;
	font-size: 11px;
	padding: 2px;
	text-align: center;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
}

/*kolommen */

.auteur {
	vertical-align:top;
	text-align:left;
	float:left;
	position:relative;
	width: 15%;
}

.bericht {
	vertical-align:top;
	text-align:left;
	float:right;
	position: relative;
	width:85%;
}


/* post */
.row-post-author, .row-post {
	background: #FFF url(images/bg_post.gif) top left repeat-x;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	position:relative;
	vertical-align: top;
	min-height:100%;
}

.row-post-author {
	text-align: center;
}

.row-post {
	text-align: left;
}

.catBottom {
	background: #FDFDFD url(images/bg_catbottom.gif) top left repeat-x;
	text-align: center;
	float: left;
	width:100%;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	height: 28px;
}

.spaceRow {
	background: #3D4E81 url(images/bg_spacerow.gif);
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	float:left;
	width:100%;
	height: 3px;
	padding: 0;
	clear:both;
}

.post-name {
	font-weight: bold;
	color: #455995;
	font-size: 12px;
	line-height: 1.6em;
}

.post-rank {
	color: #888;
	font-size: 10px;
}

.post-details-block {
	text-align: left;
	margin: 5px;
	padding: 5px;
	font-size: 11px;
	border: #DDDDDD solid 1px;
	background: #FFF url(images/bg_post.gif) top right repeat-x;
}

.post-details-block a, .post-details-block a:visited {
	text-decoration: none;
}

.post-details {
	text-align: left;
	margin: 1px;
	color: #666;
	font-size: 10px;
	line-height: 1.4em;
}

.post-images img {
	display: block;
	margin: 1px auto;
}

.post-buttons-top {
	float: right;
}

.row-post-date, .row-post-buttons {
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	vertical-align: middle;
	font-size: 10px;
	line-height: 12px;
	color: #666;
	background: url(images/bg_postbottom.gif);
	white-space: nowrap;
	padding: 1px;
	clear:both;
}

.post-buttons a img, .post-buttons a:visited img, .post-buttons-single a img, .post-buttons-single a:visited img {
	background-color: #455995;
}

.post-buttons a:hover img, .post-buttons a:active img, .post-buttons-single a:hover img, .post-buttons-single a:active img {
	background-color: #FF1010;
}

.post-buttons-single {
	text-align: center;
	vertical-align: middle;
}

.post-images img {
	display: block;
	margin: 1px auto;
}

img {
	border: 0;
}

.img-main a img, .img-main a:visited img {
	background-color: #FF1010;
}

.img-main a:hover img, .img-main a:active img {
	background-color: #444;
}

.post-subject {
	color: #455995;
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 5px;
}

.post-text {
	font-size: 12px;
	line-height: 1.2em;
}

/* links */
a {
	color: #455995;
	text-decoration: underline;
}

a:visited { color: #303F6B; }
a:hover, a:active { color: #FF1010; }
HTML
Spoiler: bekijk

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<title>Proef Aphrodite met div-tags</title>
	<link rel="stylesheet" href="aphrodite.css" type="text/css" />
</head>
<body>

<div id="forum">

<div id="content">
	<div id="forumline" style="margin:6px;">
		<div class="row-header"><span>Onderwerp</span></div>
			<div id="container">
			<div class="auteur">
				<div class="th">Auteur</div>
					<div class="row-post-author">
						<span class="post-name">Brandsrus</span><br />
						<span class="post-rank">Site Admin</span>	
						
						<div class="post-details-block">
							<a href="javascript:ShowHide('p-show','p-hide','p-details');"><b>Poster Details</b></a>
							<div class="post-details" id="p-show" style="display: ''; position: relative;">
								<br /><b>Geregistreerd op:</b> 12 juni 1930
								<br /><b>Berichten:</b> 50
							</div>
						</div>	
						<br />	
                		<img src="images/spacer.gif" width="150" height="1" alt="" />	
					</div>	
					<div class="row-post-date">
					28 augustus, 13:58
					</div>
			</div>
			
			<div class="bericht">
				<div class="th">Bericht</div>
					<div class="row-post">
						<div class="post-buttons-top post-buttons" style="margin: 3px;">
							<img src="images/icon_post_edit.gif" alt="" />
						</div>
						<div class="post-subject" style="margin: 3px;">
							Onderwerp
						</div>
						<div class="post-text" style="margin:3px">
							This is an example post in your phpBB3 installation. Everything seems to be working. You may delete this post if you like and continue to set up your board. During the installation process your first category and your first forum are assigned an appropriate set of permissions for the predefined usergroups administrators, bots, global moderators, guests, registered users and registered COPPA users. If you also choose to delete your first category and your first forum, do not forget to assign permissions for all these usergroups for all new categories and forums you create. It is recommended to rename your first category and your first forum and copy permissions from these while creating new categories and forums. Have fun!
							<br />
							Oke dan!
							<br /><br />
							_________________<br />
							Een onderschrift
						</div>
					</div>
					
					<div class="row-post-buttons post-buttons" style="margin-left:2px">
						<img src="images/icon_post_edit.gif" alt="" />
					</div>
			</div>
			</div>
			
			<div class="spaceRow"><img src="images/spacer.gif" width="1" height="3" alt="" /></div>
			
			<div class="auteur">
					<div class="row-post-author">
						<span class="post-name">Brandsrus</span><br />
						<span class="post-rank">Site Admin</span>	
						
						<div class="post-details-block">
							<a href="javascript:ShowHide('p2-show','p2-hide','p2-details');"><b>Poster Details</b></a>
							<div class="post-details" id="p2-show" style="display: ''; position: relative;">
								<br /><b>Geregistreerd op:</b> 12 juni 1930
								<br /><b>Berichten:</b> 50
							</div>
						</div>	
						<br />	
                		<img src="images/spacer.gif" width="150" height="1" alt="" />		
					</div>
					<div class="row-post-date">
					28 augustus, 13:58
					</div>
			</div>
			<div class="bericht">
					<div class="row-post">
						<div class="post-buttons-top post-buttons" style="margin: 3px;">
							<img src="images/icon_post_edit.gif" alt="" />
						</div>
						<div class="post-subject" style="margin: 3px;">
							Onderwerp
						</div>
						<div class="post-text" style="margin:3px">
							This is an example post in your phpBB3 installation. Everything seems to be working. You may delete this post if you like and continue to set up your board. During the installation process your first category and your first forum are assigned an appropriate set of permissions for the predefined usergroups administrators, bots, global moderators, guests, registered users and registered COPPA users. If you also choose to delete your first category and your first forum, do not forget to assign permissions for all these usergroups for all new categories and forums you create. It is recommended to rename your first category and your first forum and copy permissions from these while creating new categories and forums. Have fun!
							<br />
							Oke dan!
							<br /><br />
							_________________<br />
							Een onderschrift
						</div>
					</div>
					
					<div class="row-post-buttons post-buttons" style="margin-left:2px">
						<img src="images/icon_post_edit.gif" alt="" />
					</div>
			</div>
			
			<div class="spaceRow"><img src="images/spacer.gif" width="1" height="3" alt="" /></div>
			
			<div class="catBottom">
			Hier komt een nog iets :D
			</div>
	</div>
</div>
				
</div>

</body>
</html>

Gebruikersavatar
Johan
Berichten: 2376
Lid geworden op: 05 mei 2007, 15:24
Locatie: memberlist.php

Re: [KIJK]Aphrodite in phpBB 3

Bericht door Johan » 30 dec 2008, 12:28

En line-height verhogen lukt ook niet? :( Anders moet je met margin-bottom: -Xpx; werken, maar dan kan IE flauw doen ;)
Voormalig Support Teamlid

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 30 dec 2008, 13:52

Nou ja, laat eerst maar even zo, zonder tabellen is wel erg ingewikkeld, dan zou ik echt alles meoten verbouwen zie ik. Maargoed, misschien voor later :)

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 31 dec 2008, 13:34

DoubleJ schreef: Goed, dit zijn een aantal kleinigheidjes die ik zo op het oog eventjes zie. Verder heb je met de port mooi werk geleverd, en ik zou denk ik toch even vragen aan CA of je hem mag porten/uitbrengen, echter weet ik niet zeker in hoeverre dit allemaal mag gezien de overname van templatemonster toendertijd en of toen aphrodite wel of niet is meegegaan, want hij voert juist die stijl ook niet op zijn eigen site van (stsoftware.biz).
Nog even terugkomen op bovenstaande, ik heb een e-mail gestuurd naar CA, misschien dat ik hem idd toch uit ga brengen, mits ik zijn toestemming krijg! Anders gaat het feest niet door.

Gebruikersavatar
DoubleJ
Berichten: 502
Lid geworden op: 22 jan 2005, 17:20
Locatie: Enschede
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door DoubleJ » 31 dec 2008, 15:52

Ik zou die permissie boxen gewoon zo laten zoals het origineel ook was. (de You can ... You can ...) dus geen blokje er om heen. Naar mijn mening staat dat mooier, anders gaat die paarse cellpic nogal overheersen).
brandsrus schreef:Ik heb viewtopic even flink onder handen genomen, maar zit nog met 1 probleempje :P

Ik krijg de bericht en auteur niet even hoog zie afbeelding
Dan wat betreft dit onderstaande probleem waarbij je verderop ook code hebt geplaatst.
Afbeelding

In mijn afbeelding hierboven kun je zien dat de auteur div niet hoog genoeg is hij moet tegen de divje van de spacer aankomen, maar andersom gebeurd het ook niet als het bericht kleiner is dan de auteurskolom.

Wat voor JavaScript of CSS heb ik nodig om het toch beide even hoog te krijgen?

Code: Selecteer alles

<div> Content | Datum</div><div>Content | Profile_img</div>
In deze constructie zul je nooit de datum evenhoog krijgen als de profile img. Simpel weg omdat de 'hieght: 100%;" niet werkt zoals je zou hopen dat hij werkt.
Immers, in de tabel wordt die dergelijke constructie ook niet gebruikt.
In de tabel heb je:

Code: Selecteer alles

<tr><td>Content</td><td>Content</td></tr>
<tr><td>Datum</td><td>Profile_img</td></tr>
Waarom zou je voor je dividers niet precies hetzelfde gaan doen?

Code: Selecteer alles

<div>Content</div><div>Content</div>
<div class"eromheen"><div>Datum</div><div>Profile_img</div></div>
Op deze wijze kun je ze wel evenhoog krijgen en dit scheelt jouw een enorme hoeveelheid hoofdpijn.
DoubleJ - "Waarom makkelijk doen, als het ook moeilijk kan."

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 31 dec 2008, 18:42

DoubleJ, bedankt voor je input.

Ik ga zeker nog even kijken naar jouw mogelijkheid :D. Erg mooi dat je me op weg helpt!

Gebruikersavatar
brandsrus
Berichten: 1966
Lid geworden op: 01 jul 2005, 19:38
Locatie: r. Лeувapдeн
Contacteer:

Re: [KIJK]Aphrodite in phpBB 3

Bericht door brandsrus » 02 jan 2009, 10:25

Het werkt wel wat DoubleJ voorstelde met die dividers zo, alleen er zit een behoorlijke ruimte tussen de divider van de datum en profile_img en de hoofddividers daarboven. Hoe zou ik die weg krijgen?

CSS
Spoiler: bekijk

Code: Selecteer alles

/* CSS Document */

/* hoofdcontainers */
* html {
	margin:0;
	padding:0;
	height:100%;
}

body {
	background: #FFF url(images/bg_body.gif) top left repeat-x;
	margin:0 auto;
	padding: 0 10px;
	height:100%;
}

#content {
	width: 100%;
	padding-top:2px;
	text-align: center;
}

#forum {
	background-color: #F8F8F8;
	border: solid 1px #A0A0A0;
	border-width: 0 1px 1px 1px;
	margin: 0;
	text-align: left;
	padding: 0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000;
	width: 100%;
}

/* table viewtopic */
#forumline {
	border: solid 1px #2B438F;
	background-color: #F8F8F8;
	overflow:hidden;
}

#forumline .row-header {
	background: #354883 url(images/bg_hdr1.gif);
	border: solid 1px #DCE1EE;
	border-right-color: #CFDADE;
	border-bottom-color: #CFDADE;
	text-align: left;
	vertical-align: top;
	height: 27px;
}

#forumline .row-header span {
	background: url(images/bg_hdr2.gif) top left no-repeat;
	padding-left: 17px;
	color: #EDEFF4;
	display: block;
	padding-top: 4px;
	font-weight: bold;
	font-size: 12px;
	line-height: 1.2em;
}

#forumline .th {
	background: url(images/bg_th.gif) top left repeat-x;
	color: #455995;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	padding: 2px;
	text-align: center;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
}

/*kolommen */

.auteur {
	vertical-align:top;
	text-align:left;
	float:left;
	position:relative;
	width: 15%;
	min-height: 100%;
	height:100%;
}

.bericht {
	vertical-align:top;
	text-align:left;
	float:right;
	position: relative;
	width:85%;
	min-height: 100%;
	height:100%;
}


/* post */
.row-post-author, .row-post {
	background: #FFF url(images/bg_post.gif) top left repeat-x;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	position:relative;
	vertical-align: top;
	min-height: 100%
	height: 100%
}

.row1{
	background-color: #F8F8F8;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	text-align: left;
}

.row-post-author {
	text-align: center;
}

.row-post {
	text-align: left;
}

.catBottom {
	background: #FDFDFD url(images/bg_catbottom.gif) top left repeat-x;
	text-align: center;
	float: left;
	width:100%;
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	height: 28px;
}

.spaceRow {
	background: #3D4E81 url(images/bg_spacerow.gif);
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	float:left;
	width:100%;
	height: 3px;
	padding: 0;
	clear:both;
}

.post-name {
	font-weight: bold;
	color: #455995;
	font-size: 12px;
	line-height: 1.6em;
}

.post-rank {
	color: #888;
	font-size: 10px;
}

.post-details-block {
	text-align: left;
	margin: 5px;
	padding: 5px;
	font-size: 11px;
	border: #DDDDDD solid 1px;
	background: #FFF url(images/bg_post.gif) top right repeat-x;
}

.post-details-block a, .post-details-block a:visited {
	text-decoration: none;
}

.post-details {
	text-align: left;
	margin: 1px;
	color: #666;
	font-size: 10px;
	line-height: 1.4em;
}

.post-images img {
	display: block;
	margin: 1px auto;
}

.post-buttons-top {
	float: right;
}

.row-post-date, .row-post-buttons {
	border: solid 1px #FFF;
	border-right-color: #D6D6D6;
	border-bottom-color: #D6D6D6;
	vertical-align: middle;
	font-size: 10px;
	height: 12px;
	color: #666;
	background: url(images/bg_postbottom.gif);
	clear:both;
}

.post-buttons a img, .post-buttons a:visited img, .post-buttons-single a img, .post-buttons-single a:visited img {
	background-color: #455995;
}

.post-buttons a:hover img, .post-buttons a:active img, .post-buttons-single a:hover img, .post-buttons-single a:active img {
	background-color: #FF1010;
}

.post-buttons-single {
	text-align: center;
	vertical-align: middle;
}

.post-images img {
	display: block;
	margin: 1px auto;
}

img {
	border: 0;
}

.img-main a img, .img-main a:visited img {
	background-color: #FF1010;
}

.img-main a:hover img, .img-main a:active img {
	background-color: #444;
}

.post-subject {
	color: #455995;
	font-weight: bold;
	font-size: 13px;
	margin-bottom: 5px;
}

.post-text {
	font-size: 12px;
	line-height: 1.2em;
}

@media all and (min-width: 0px) {
	html>body .post-text { 
		overflow: auto; 
	}
}

/* links */
a {
	color: #455995;
	text-decoration: underline;
}

a:visited { color: #303F6B; }
a:hover, a:active { color: #FF1010; }

.gen { font-size: 12px; }
.genmed { font-size: 11px; }
.gensmall { font-size: 10px; }
Spoiler: bekijk

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<title>Viewtopic even hoog krijgen</title>
	<link rel="stylesheet" href="aphrodite.css" type="text/css" />
</head>

<body>
<div id="forum">
<div id="content">
	<div id="forumline" style="margin:8px;">
		<div class="row-header"><span>Onderwerp</span></div>
			<div class="auteur">
				<div class="th">Auteur</div>
				<div class="row-post-author">
						<span class="post-name">Brandsrus</span><br />
						<span class="post-rank">Site Admin</span>	
						
						<div class="post-details-block">
							<a href="javascript:ShowHide('p2-show','p2-hide','p2-details');"><b>Poster Details</b></a>
							<div class="post-details" id="p2-show" style="display: ''; position: relative;">
								<br /><b>Geregistreerd op:</b> 12 juni 1930
								<br /><b>Berichten:</b> 50
							</div>
						</div>	
						<br />	
                		<img src="images/spacer.gif" width="150" height="1" alt="" />		
				</div>
			</div>
			<div class="bericht">
				<div class="th">Bericht</div>
				<div class="row-post">
						<div class="post-buttons-top post-buttons" style="margin: 3px;">
							<img src="images/icon_post_edit.gif" alt="" />
						</div>
						<div class="post-subject" style="margin: 3px;">
							Onderwerp
						</div>
						<div class="post-text" style="margin:3px">
							This is an example post in your phpBB3 installation. Everything seems to be working. You may delete this post if you like and continue to set up your board. During the installation process your first category and your first forum are assigned an appropriate set of permissions for the predefined usergroups administrators, bots, global moderators, guests, registered users and registered COPPA users. If you also choose to delete your first category and your first forum, do not forget to assign permissions for all these usergroups for all new categories and forums you create. It is recommended to rename your first category and your first forum and copy permissions from these while creating new categories and forums. Have fun!
							<br />
							Oke dan!
							<br /><br />
							_________________<br />
							Een onderschrift
						</div>
					</div>
			</div>
			<div class="row-post-buttons"><div class="auteur"><div class="row-post-date">28 augustus, 13:58</div></div><div class="bericht"><div class="row-post-buttons"><img src="images/icon_post_edit.gif" alt="" /></div></div></div>
		
			<div class="spaceRow"><img src="images/spacer.gif" width="1" height="3" alt="" /></div>
			
			<div class="catBottom">Hier komt een nog iets :D</div>
	</div>
</div>
</div>
</body>
</html>
En ik moet iedereen teleurstellen die verwacht dat ik deze port uitbreng, ik krijg geen toestemming om dat te doen van de originele auteur, CyberAlien. Helaas maar dat is niet anders.
Wijziging: Zonder border worden de divtjes wel even lang, eens kijken hoe ik dat allemaal ga oplossen verder :P
Wijziging: Nu wel gelukt, linkerkolom margin-right: -1px meegegeven, en een border toegevoegd aan de rechterkolom aan de linkerkant, nu is het klaar!

Plaats reactie