Contents
[ hide ]
Create a smashing Home Page on XO
This tutorial will show step by step how to add a 3D banner to the XO header. As an example we will use Boruch Rappaport’s Ycademy Sandbox.
Preparation of the Project
The ingredients of our Project are first of all a WordPress with the XO theme loaded, then we need a flash component, the 3D banner and finally we need some images to load into the component to display on the home page of XO. Finally we need to properly embed the component.
Implementation
To start with I have loaded XO to Boruch’s ycademy sandbox and activated the theme. Then I have added some content by syndicating some posts from boruchrappaport.net. Quich configuration of XO includes a basic layout, a header and a background (which I copied in rom boruchrappaport.net).
The site width is defined at 1024 px and the sidebar at 300px to which I loaded a featured category using the XO Feature widget.
1 Download, unzip and rename the 3D Component
My asset folder is now called brapbanner and I will load this folder finally to the WordPress root; in this case it will be loaded to the sub-domain root ‘boruchrappaport’ at ycademy.net.
But before uploading we will clean out and configure our banner.
Opening the asset folder, this is what we get:
We delete now what we don’t need and get this:
Let’s go for the images now:
I crop 3 images (banners) to 1024 pixels wide:
… and I call them 01,02,03.jpg.
These Images we paste into the image folder under brapbanner and delete the existing default pictures.
Edit images.xml
Edit the images.xml file and delete lines 11-23; then edit the text as the case may be and you get this:
<images> <photo image="images/01.jpg" url="http://www.semiomantics.com" target="_blank"> <![CDATA[<head>Hello</head><body>Welcome to Brap Design</body>]]></photo> <photo image="images/02.jpg" url="http://www.semiomantics.com" target="_blank"> <![CDATA[<head>Thanks for visiting this site.</head><body>Enjoy!</body>]]></photo> <photo image="images/03.jpg" url="http://www.semiomantics.com" target="_blank"> <![CDATA[<head>Leave some feed-back</head><body>from the contact form.</body>]]></photo> </images>
Edit settings.xml
We adjust width and height and get:
<settings>
<General_Properties>
<componentWidth value="1024"/>
<componentHeight value="495"/>
<assets value="images.xml"/>
<preloader value="assets/preloaders/sequence.swf"/>
<slideShow value="true"/>
<delay value="2.5"/>
<imageFitting value="bestfit"/>
<useCustomColor value="false"/>
<customColor value=""/>
<showAbout value="true"/>
</General_Properties>
<Loading_Transitions>
<loadingTrans value="transitions/3D.xml"/>
<randomTrans value="true"/>
</Loading_Transitions>
<Text_Effects>
<textEff value="transitions/text.xml"/>
<randomTextEff value="false"/>
</Text_Effects>
<Playlist_Properties>
<position value="BR"/>
<orientation value="horizontal"/>
<spacing value="0"/>
<paddingV value="-20"/>
<paddingH value="-20"/>
<skin value="assets/skins/skin6.xml"/>
</Playlist_Properties>
<PlaylistBtn_Properties>
<textVisible value="false"/>
<textOutColor value="0xa6a6a6"/>
<textOverColor value="0xd82838"/>
<textDownColor value="0x424242"/>
<textActiveColor value="0x0"/>
<loaderColor value="0x0"/>
<textEmbedFonts value="false"/>
<textFontFamily value="Verdana"/>
<textSize value="0"/>
</PlaylistBtn_Properties>
<Text_Properties>
<textEffectDelay value="0"/>
<bodyTextDelay value="0.5"/>
<styleSheet value="assets/css/style.css"/>
<hPos value="left"/>
<vPos value="bottom"/>
<bodyDistance value="5"/>
<offset value="10"/>
<width value="0"/>
<headBgColor value="0xffffff"/>
<bodyBgColor value="0x000000"/>
<bgAlpha value="0.7"/>
<borderColor value="0xffffff"/>
<borderAlpha value="0"/>
<borderWidth value="0"/>
<cornerRadius value="0"/>
<paddingLeft value="5"/>
<paddingRight value="5"/>
<paddingTop value="5"/>
<paddingBottom value="5"/>
<embedFonts value="false"/>
</Text_Properties>
<Background_Properties>
<backgroundImage value="assets/skins/skin6/background6.png"/>
<fillType value="solid"/>
<backgroundColor1 value="0x000000"/>
<backgroundColor2 value="0xff0000"/>
<backgroundAlpha value="1"/>
<bgCornerRadius value="0"/>
<gradientRotation value="30"/>
<gradientRatio value="40"/>
<gradientPosX value="0"/>
<gradientPosY value="0"/>
</Background_Properties>
<Shadow_Properties>
<image value="assets/skins/skin6/display.png"/>
<height value="51"/>
<width value="600"/>
<alpha value="1"/>
<color value="0x444444"/>
<angle value="74"/>
<blur value="0"/>
<offset value="0"/>
</Shadow_Properties>
<Shade_Properties>
<useShade value="false"/>
<shadeColor value="0x000000"/>
<shadeAlpha value="0.2"/>
<shadeRatio value="40"/>
<shadeWidth value="0"/>
<shadeHeight value="0"/>
</Shade_Properties>
</settings>
Rename the swf file
I will now reneme the generic 3DBannerFX.swf to brapbanner.swf
Now we test the banner by clicking brapbanner.swf and we will see the result in Flash player.
We now upload the whole brapbannerfolder to boruchrappaport.ycademy.net using the FTP client (in my case SmartFTP) and we get:
Or, expanded:
Embed the Banner to the XO header
As you can see above, the brapbanner folder is located in the root of the sub-domain boruchrappaport. The path to the component is therefore ../brapbanner/ and the absolute URL is http://boruchrappaport.ycademy.net/brapbanner/.
Let’s now adapt the embed code accordingly to get the following result:
<script type="text/javascript" src="../brapbanner/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.folderPath = "http://boruchrappaport.ycademy.net/brapbanner/";
var params = {};
params.scale = "noscale";
params.salign = "tl";
params.wmode = "transparent";
var attributes = {};
swfobject.embedSWF("../brapbanner/brapbanner.swf", "BrapBanner", "1024", "495", "9.0.0", false, flashvars, params, attributes);
</script>
Watch now:
on line 1 we define the path to the swfobject.js – we add the relative path to the component’s folder.
on line 4 we enter the absolute url to the components folder, followed by a trailing slash!
on line 10 we first enter the relative path to the brapbanner.swf then we name the div “BrapBanner” (you can use any name here) and we set the width and height (without pixels or px)
This piece of code goes into your theme’s header.php, right before the closing </head> tag, in our case on line 34 of the XO header.php
Now the banner is enabled, we now need to define where we want to embed it and for that we just insert into the <body> part of the header a div like so:
<div id="BrapBanner"></div>
Now we need just to place the div where ever we want: before the header, after the header banner, after the navigation? In any case, you should place it in the header container and not before, which means now you insert it AFTER line 122 of the modified header.php!
For the purpose of the exercise I will insert it below the navigation on line 160:
For some cosmetics we can edit the settings.xml of the banner.
Here is the result:
Hope this helps:-).
Yorgo Nestoridis, Media Marketing & Publishing, Founder of YORGOO Publishing, YORGOO Press and Semiomantics. Author:
If you enjoyed reading the above, please consider following future tips and strategies by RSS reader, Email delivery, or Kindle subscription.
Related posts:
