<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>MyBB Magyarország &#187; egyedi külső</title>
	<atom:link href="http://www.mybb-hungary.com/tag/egyedi-kulso/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.mybb-hungary.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Thu, 26 Aug 2010 12:47:01 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>MyBB sablon készítési útmutató 1. rész</title>
		<link>http://www.mybb-hungary.com/2010/01/19/mybb-sablon-keszitesi-utmutato-1-resz/</link>
		<comments>http://www.mybb-hungary.com/2010/01/19/mybb-sablon-keszitesi-utmutato-1-resz/#comments</comments>
		<pubDate>Tue, 19 Jan 2010 20:46:40 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[dizájn]]></category>
		<category><![CDATA[egyedi külső]]></category>
		<category><![CDATA[mybb sablon]]></category>
		<category><![CDATA[theme editor]]></category>

		<guid isPermaLink="false">http://www.mybb-hungary.com/?p=193</guid>
		<description><![CDATA[Sokan hiányolták már, hogy MyBB sablonkészítéshez nem készült eddig részletes magyar nyelvű leírás, elkövetkezendő írásaimban igyekszem ezt a hiányt pótolni. Teljesen az alapoktól kezdem a bemutatást, így aki most ismerkedik a rendszerrel annak is érthető lesz, viszont feltételezek egy kis HTML, valamint CSS tudást.

Használjunk Firebug-ot
Kezdésként ajánlanám, hogy aki sablon készítésbe kezd, az töltse le és [...]]]></description>
			<content:encoded><![CDATA[<p style="text-align: justify;"><img class="aligncenter size-full wp-image-200" title="mybb_hungary" src="http://www.mybb-hungary.com/wp-content/uploads/2010/01/mybb_hungary1.jpg" alt="mybb_hungary" width="430" height="215" />Sokan hiányolták már, hogy MyBB sablonkészítéshez nem készült eddig részletes magyar nyelvű leírás, elkövetkezendő írásaimban igyekszem ezt a hiányt pótolni. Teljesen az alapoktól kezdem a bemutatást, így aki most ismerkedik a rendszerrel annak is érthető lesz, viszont feltételezek egy kis HTML, valamint CSS tudást.</p>
<p><span id="more-193"></span></p>
<h2>Használjunk Firebug-ot</h2>
<p style="text-align: justify;">Kezdésként ajánlanám, hogy aki sablon készítésbe kezd, az töltse le és kicsit tanulgassa a <a title="Firebug" href="http://getfirebug.com/" onclick="pageTracker._trackPageview('/outgoing/getfirebug.com/?referer=');">Firebug</a> használatát, amely a Firefox egy bővítménye. Internet Explorer alá sajnos nem lehet telepíteni.  Sitebuildereknek mondhatni kötelező darab, ezen cikk kereteiben nem térek ki a részletes használatára.</p>
<p><strong>Miben nyújt segítséget?</strong></p>
<p style="text-align: justify;">A CSS fájl majdnem teljes (új szelektorokat úgy hozhatunk létre, ha a forrás css fájlba írjuk és elmentjük), valamint a HTML forrás részbeni módosítási lehetősége (pl. style elemek).</p>
<p style="text-align: justify;">Ennyit dióhéjban a Firebug-ról, aki még nem használta az szánjon rá pár órát, érdemes foglalkozni vele.</p>
<h2>A Sablon (Theme) megértése</h2>
<p style="text-align: justify;">Ahhoz, hogy látványos egyedi külsőt hozhass létre szükséged lesz képekre, változatos színű szövegekre és dobozokra.</p>
<p style="text-align: justify;">A képeket a fejlécnél, logónál, gomboknál, táblázatok hátterénél, stb. használjuk.</p>
<h2>A szükséges fájlok összegyűjtése</h2>
<p style="text-align: justify;">Ide tartoznak az előzőekben említett képek, ikonok, amelyeket vagy az internetről szerzünk be, vagy saját kezűleg hozunk létre. Segítségül még legyen a tarsolyunkban pár sablon, esetleg kódrészlet egyrészt ötletadásul, másrészt ha a böngészőkompatibilitási harcunk során valahol elakadnánk akkor ne kelljen este álmatlanul forgolódnunk az ágyban <img src='http://www.mybb-hungary.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> .</p>
<h2>Dolgozzunk a képeken</h2>
<p style="text-align: justify;">Vegyük elő kedvenc képszerkesztő eszközünket, és az ötletek, valamint az összegyűjtött képek segítségével alkossuk meg design tervünket. (<strong>Photoshop</strong>, Gimp, Ms Paint, stb.). Photoshophoz ajánlom a MyBB Image GDK használatát, ami egy egyszerű PSD fájl, ami tartalmazza az alap sablon ikonjait <a class="downloadlink" href="http://www.mybb-hungary.com/wp-content/plugins/download-monitor/download.php?id=4" title="Version1.4 downloaded 344 times" >MyBB Image GDK (344)</a>.</p>
<p style="text-align: justify;">A fórumunkra tévedt látogató először a logót és vele együtt a fejlécet látja meg, így szánjunk arra órákat, hogy minél ütősebb logónk legyen. Itt érdemes lehet meghallgatni designer ismerősünk tanácsát is (már ha mi magunk nem vagyunk teljesen azok).</p>
<p style="text-align: justify;">Következő pont maga a táblázatok átszerkesztése, háttérszínük módosítása az elkészített terv alapján, utána ehhez tudjuk a gombok színét és formáját igazítani. A gombokat az &#8230;/images mappában találjuk.</p>
<p style="text-align: justify;">Fontos, hogy a táblázatok fejléce színátmenetes legyen, ha olyan fórumot szeretnénk, ami igazodik a különböző képernyő felbontásokhoz. Alkothatunk fix méretű sablont is, ha olyat szeretnénk.</p>
<p style="text-align: justify;">A következő részben részletesen ismertetem a <strong>Theme Editor</strong> használatát, amellyel a megszerkesztett képeket a megfelelő helyre rakhatjuk. Segítség gyanánt a Firebugot fogom használni.</p>
<p style="text-align: justify;"><em>A cikk a http://community.mybboard.net/thread-5933-page-1.html oldalon található leíráson alapul.</em></p>
]]></content:encoded>
			<wfw:commentRss>http://www.mybb-hungary.com/2010/01/19/mybb-sablon-keszitesi-utmutato-1-resz/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
