Plaats logo verbeteren

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB3.
Forumregels

LEES: Richtlijnen voor Support. Vul de support template in!phpBB3.0.x
Verschaf iemand geen servertoegang tenzij het niet anders kan. Maak altijd eerst een volledige backup en verander de inloggevens na afloop. Eigen risico.
Plaats reactie
Hans Kamp
Berichten: 470
Lid geworden op: 17 jan 2004, 08:39
Locatie: Enschede

Plaats logo verbeteren

Bericht door Hans Kamp » 20 jan 2008, 22:13

Ik ben weer met mijn forum aan het knutselen geweest, omdat de leden en ikzelf tijd vonden worden dat het logo vervangen moest worden. Het nieuwe logo is clickable terwijl bij het vorige logo alleen het WoW-logo en het woord "Nederland" clickable waren.

De problemen zijn het volgende:
- Het logo is te breed voor een scherm van 1280 bij 1024; dat is de relutie waarmee ik werk. Ik weet niet welke manieren de beste zijn om een te breed logo te verkleinen. Men kan het links en rechts afkappen, of men kan het logo verkleinen zodat het wel past. Het nadeel van afkappen is dat er een kans is dat de afkapping dwars door de Blood Elf links, en door de Draenei rechts kan gaan;
- Het logo is wat verschoven. Het logo zou naadloos moeten aansluiten in het bovenste gedeelte van de tabel, tezamen met Uitloggen [ Hans Kamp ], 0 nieuwe berichten, Help, Zoeken, Leden, Gebruikerspaneel.

De stijl was oorspronkelijk subSilver2 (een van de meegeleverde stijlen bij PHPBB3) maar die is grondig gewijzigd, dusdanig dat er van de oorspronkelijke stijl niet zo veel meer te zien is, alleen de knoppen en de icoontjes.

Het forum is te zien op http://www.wowforum.nl
Omhoog
Gebruikersavatar
Gamemaniak
Berichten: 1747
Lid geworden op: 14 nov 2005, 19:03
Locatie: Westdorpe
Contacteer:
Contacteer Gamemaniak

Re: Plaats logo verbeteren

Bericht door Gamemaniak » 21 jan 2008, 12:43

Wat gemakkelijker is, is dat je zorgt dat het op een resolutie van 1024x768 er fatsoenlijk uitziet, en dan ziet het er op verder resoluties ook goed uit ;)
Omhoog
Coen
Berichten: 5387
Lid geworden op: 03 aug 2004, 10:25

Re: Plaats logo verbeteren

Bericht door Coen » 21 jan 2008, 16:43

Gamemaniak schreef:Wat gemakkelijker is, is dat je zorgt dat het op een resolutie van 1024x768 er fatsoenlijk uitziet, en dan ziet het er op verder resoluties ook goed uit ;)
Dit is inderdaad een optie, een breedte van 950px tot 960px zorgt ervoor dat het optimaal weergegeven kan worden op de meeste, meest gangbare resoluties.
Hans Kamp schreef:- Het logo is te breed voor een scherm van 1280 bij 1024; dat is de relutie waarmee ik werk. Ik weet niet welke manieren de beste zijn om een te breed logo te verkleinen. Men kan het links en rechts afkappen, of men kan het logo verkleinen zodat het wel past. Het nadeel van afkappen is dat er een kans is dat de afkapping dwars door de Blood Elf links, en door de Draenei rechts kan gaan;
Maak je afbeelding eens achtergrond van de div/cel waar hij in staat. Zo word hij automatisch afgekapt. Met background-position zou je het bijvoorbeeld kunnen centreren. Ik ben wel bang dat je je plaatje iets zult aan moeten passen.
Hans Kamp schreef:- Het logo is wat verschoven. Het logo zou naadloos moeten aansluiten in het bovenste gedeelte van de tabel, tezamen met Uitloggen [ Hans Kamp ], 0 nieuwe berichten, Help, Zoeken, Leden, Gebruikerspaneel.
Probeer eerst bovenstaande oplossing, wellicht is het dan al opgelost. Anders moeten we daarna even opnieuw gaan positioneren! ;)
Omhoog
Hans Kamp
Berichten: 470
Lid geworden op: 17 jan 2004, 08:39
Locatie: Enschede

Re: Plaats logo verbeteren

Bericht door Hans Kamp » 21 jan 2008, 17:59

Bedankt, ik zal wat proberen... Maar ik ben niet erg thuis in de templates. De inhoud van overall_header.html is
Spoiler: bekijk

Code: Selecteer alles

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2002-2006 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<link rel="stylesheet" href="{T_STYLESHEET_LINK}" type="text/css" />

<script type="text/javascript">
// <![CDATA[
<!-- IF S_USER_PM_POPUP -->
	if ({S_NEW_PM})
	{
		popup('{UA_POPUP_PM}', 400, 225, '_phpbbprivmsg');
	}
<!-- ENDIF -->

function popup(url, width, height, name)
{
	if (!name)
	{
		name = '_popup';
	}

	window.open(url.replace(/&/g, '&'), name, 'height=' + height + ',resizable=yes,scrollbars=yes,width=' + width);
	return false;
}

function jumpto()
{
	var page = prompt('{LA_JUMP_PAGE}:', '{ON_PAGE}');
	var perpage = '{PER_PAGE}';
	var base_url = '{A_BASE_URL}';

	if (page !== null && !isNaN(page) && page > 0)
	{
		document.location.href = base_url.replace(/&/g, '&') + '&start=' + ((page - 1) * perpage);
	}
}

/**
* Find a member
*/
function find_username(url)
{
	popup(url, 760, 570, '_usersearch');
	return false;
}

/**
* Mark/unmark checklist
* id = ID of parent container, name = name prefix, state = state [true/false]
*/
function marklist(id, name, state)
{
	var parent = document.getElementById(id);
	if (!parent)
	{
		eval('parent = document.' + id);
	}

	if (!parent)
	{
		return;
	}

	var rb = parent.getElementsByTagName('input');
	
	for (var r = 0; r < rb.length; r++)
	{
		if (rb[r].name.substr(0, name.length) == name)
		{
			rb[r].checked = state;
		}
	}
}

<!-- IF ._file -->

	/**
	* Play quicktime file by determining it's width/height
	* from the displayed rectangle area
	*
	* Only defined if there is a file block present.
	*/
	function play_qt_file(obj)
	{
		var rectangle = obj.GetRectangle();

		if (rectangle)
		{
			rectangle = rectangle.split(',')
			var x1 = parseInt(rectangle[0]);
			var x2 = parseInt(rectangle[2]);
			var y1 = parseInt(rectangle[1]);
			var y2 = parseInt(rectangle[3]);

			var width = (x1 < 0) ? (x1 * -1) + x2 : x2 - x1;
			var height = (y1 < 0) ? (y1 * -1) + y2 : y2 - y1;
		}
		else
		{
			var width = 200;
			var height = 0;
		}

		obj.width = width;
		obj.height = height + 16;

		obj.SetControllerVisible(true);

		obj.Play();
	}
<!-- ENDIF -->

// ]]>
</script>

<script src="http://i.thottbot.com/power.js"></script>

</head>
<body class="{S_CONTENT_DIRECTION}">

<a name="top"></a>

<!--<div id="wrapheader">-->
<div id="wrapheader" align="center">

	<div id="logodesc">
		<table width="100%" cellspacing="0">
		<tr>
<!--			<td width="100%" align="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>-->
<!--			<td width="100%" align="center" valign="center"><h1>{SITENAME}</h1><span class="gen">{SITE_DESCRIPTION}</span></td>-->
			<td width="100%" align="center" valign="center<span class="gen">{SITE_DESCRIPTION}</span></td>
			<td width="100%"><a href="{U_INDEX}">{SITE_LOGO_IMG}</a></td>
		</tr>
		<tr>
			<td colspan="2" width="100%" align="center"><h1>{SITENAME}</h1></td>
		</tr>
		</table>
	</div>

	<div id="menubar">
		<table width="100%" cellspacing="0">
		<tr>
			<td class="genmed">
				<!-- IF not S_IS_BOT --><a href="{U_LOGIN_LOGOUT}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_LOGIN_LOGOUT}</a>&nbsp;<!-- ENDIF -->
				<!-- IF U_RESTORE_PERMISSIONS --> &nbsp;<a href="{U_RESTORE_PERMISSIONS}"><img src="{T_THEME_PATH}/images/icon_mini_login.gif" width="12" height="13" alt="*" /> {L_RESTORE_PERMISSIONS}</a><!-- ENDIF -->
				<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN --> &nbsp;<span style="color: red;">{L_BOARD_DISABLED}</span><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_USER_LOGGED_IN -->
						<!-- IF S_DISPLAY_PM --> &nbsp;<a href="{U_PRIVATEMSGS}"><img src="{T_THEME_PATH}/images/icon_mini_message.gif" width="12" height="13" alt="*" /> {PRIVATE_MESSAGE_INFO}<!-- IF PRIVATE_MESSAGE_INFO_UNREAD -->, {PRIVATE_MESSAGE_INFO_UNREAD}<!-- ENDIF --></a><!-- ENDIF -->
					<!-- ELSE --> &nbsp;<a href="{U_REGISTER}"><img src="{T_THEME_PATH}/images/icon_mini_register.gif" width="12" height="13" alt="*" /> {L_REGISTER}</a>
					<!-- ENDIF -->
				<!-- ENDIF -->
			</td>
			<td class="genmed" align="{S_CONTENT_FLOW_END}">
				<a href="{U_FAQ}"><img src="{T_THEME_PATH}/images/icon_mini_faq.gif" width="12" height="13" alt="*" /> {L_FAQ}</a>
				<!-- IF S_DISPLAY_SEARCH -->&nbsp; &nbsp;<a href="{U_SEARCH}"><img src="{T_THEME_PATH}/images/icon_mini_search.gif" width="12" height="13" alt="*" /> {L_SEARCH}</a><!-- ENDIF -->
				<!-- IF not S_IS_BOT -->
					<!-- IF S_DISPLAY_MEMBERLIST -->&nbsp; &nbsp;<a href="{U_MEMBERLIST}"><img src="{T_THEME_PATH}/images/icon_mini_members.gif" width="12" height="13" alt="*" /> {L_MEMBERLIST}</a><!-- ENDIF -->
					<!-- IF S_USER_LOGGED_IN -->&nbsp; &nbsp;<a href="{U_PROFILE}"><img src="{T_THEME_PATH}/images/icon_mini_profile.gif" width="12" height="13" alt="*" /> {L_PROFILE}</a><!-- ENDIF -->
				<!-- ENDIF -->
			</td>
		</tr>
		</table>
	</div>

	<div id="datebar">
		<table width="100%" cellspacing="0">
		<tr>
			<td class="gensmall"><!-- IF S_USER_LOGGED_IN -->{LAST_VISIT_DATE}<!-- ENDIF --></td>
			<td class="gensmall" align="{S_CONTENT_FLOW_END}">{CURRENT_TIME}<br /></td>
		</tr>
		</table>
	</div>

</div>

<div id="wrapcentre">

	<!-- IF S_DISPLAY_SEARCH -->
	<p class="searchbar">
		<span style="float: {S_CONTENT_FLOW_BEGIN};"><a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a> | <a href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a></span>
		<!-- IF S_USER_LOGGED_IN -->
		<span style="float: {S_CONTENT_FLOW_END};"><a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a> | <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a></span>
		<!-- ENDIF -->
	</p>
	<!-- ENDIF -->

	<br style="clear: both;" />

	<!-- INCLUDE breadcrumbs.html -->

	<br />
Omhoog
Hans Kamp
Berichten: 470
Lid geworden op: 17 jan 2004, 08:39
Locatie: Enschede

Re: Plaats logo verbeteren

Bericht door Hans Kamp » 22 jan 2008, 20:06

Ik heb het probleem weten op te lossen, maar ik heb nu een ander (kleiner) probleem.

Hoe maak ik de banner scalable? D.w.z. op een groot scherm wordt de banner vergroot, op een klein scherm wordt ie verkleind, maar dusdanig dat de banner altijd even groot is als de menubalk en de rest van het forum eronder.
Omhoog
Coen
Berichten: 5387
Lid geworden op: 03 aug 2004, 10:25

Re: Plaats logo verbeteren

Bericht door Coen » 23 jan 2008, 00:32

Hans Kamp schreef:Hoe maak ik de banner scalable? D.w.z. op een groot scherm wordt de banner vergroot, op een klein scherm wordt ie verkleind, maar dusdanig dat de banner altijd even groot is als de menubalk en de rest van het forum eronder.
Je kunt met php en gd een afbeelding wel verkleinen, maar echt mooi zal dit niet worden.

Kun je misschien een praktisch voorbeeld geven, zodat we eventueel naar alternatieven kunnen kijken? :)
Omhoog
Plaats reactie

Terug naar “3.0 Stijlen”