Animated banner for site

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
2/19/2008 3:23:13 PM
Gravatar
Total Posts 5

Animated banner for site

Hi, this is Elena with hapasmama.com, one of the newer MojoPortal sites. I am using the TurnItUp skin, and it's working great, but I want to replace the "volume controls" header with an animated banner that fits the theme of my site.

I have someone who can help me, but they do not know how to write Flash, so they'll use one of the other applications. Also, they live on the opposite coast, so they will need to email me the HTML so I can paste it.

Once I have the animation code, how do I paste it in? How do I access the TurnItUp skin's file? How do I take out the "volume control" graphic first? And, what are the size dimensions of that banner box, so my animator can make his stuff the right size?

Thank you for your help!

2/20/2008 9:39:44 AM
Gravatar
Total Posts 18439

Re: Animated banner for site

Hi Elena,

First thing you should do is create a custom skin so that later if you upgrade it won't overwrite your customization. In other words if you customize your copy of the turniup skin and then you upgrade your custom files will be overwritten.

Skin files are located under webroot/Data/Sites/[SiteID]/skins/skinname

skinname corresponds to folder name, in a single site installation the [SiteID] = 1

so for you all the turnitup skin files are located under /Data/Sites/1/skins/turnitup

what you should do is create a new folder with a custom name like hapasmama1 and copy all the files from turnitup into that folder, then go into site settings and change the skin, the new one will show up in the list so you can set it to hapasmama1 (or whatever you name it). Don't use any special characters or spaces in the folder name.

Now you can customize with no fear of losing your customizations on the next upgrade.

To learn more about designing skins read the documentation beginning here:

http://www.mojoportal.com/creatingskins.aspx

The image in the header of turnitup is placed there by css in the styleimages.css file in the skin folder, its set as a background image on a div whith the id wrapheader. I don't know its exact size but you can find out using an image editor like photoshop. If you create an animated gif you may be able to set that as the backrground (I'm not sure) but you definitely can't add a Flash movie that way. If you use a Flash movie you'll want to clear the background image from thecss and just put the object tag for the flash inside the layout.master file of your skin and inside the div with the id wrapheader

Hope it helps,

Joe

3/18/2008 3:53:43 PM
Gravatar
Total Posts 5

Re: Animated banner for site

My friend finally made me the banner, but it's a non-animated JPEG the same size as the original banner for TurnItUp. I referenced your instructions for changing the site logo banner. What I thought you were asking me to do is go to styleimages.css, remove site_logo (just after Wrapheader), and replace it with the name of the new file (Banner_closed.jpg). I uploaded the new banner JPEG to the site (obviously) but can't get it in the right place. Also, when I access the layout_master file, all that comes up is the website of the designer. Can you help? Thanks, E. Stevenson

3/19/2008 6:46:23 AM
Gravatar
Total Posts 18439

Re: Animated banner for site

Hi,

Make sure you are editing the right set of files, ie, under web/Data/Sites/1/skins/turnitup

or actually hipefully you have copied the files from turnitup into a newe folder like

web/Data/Sites/1/skins/hapasmama1

and then set your site skin to hapasmama1

yes, that is correct, you would edit this part:

#wrapheader { background: url(site_logo.jpg) no-repeat ;}

replacing the name of the image file with the name of your new one. Note that the path is relative to the css file so its best to put the image in the skin folder so its in the same folder as the css files.

I'm not sure what you mean by "access" the layout.master file, sounds like you mean open it but you don't mention what you are trying to open it with. You don't need to touch that file to change the image. If you do need to edit that file just open it with a text editor like notepad.

Hope it helps,

Joe

3/19/2008 2:11:11 PM
Gravatar
Total Posts 5

Re: Animated banner for site

Step by step, this is what I'm doing, and it's not working.

-Log in to site

-Admin menu

-File manager

-Skins

-Turn it up

I have already uploaded the new file (Banner_closed.jpg) into the TurnitUp folder. But when I click on styleimages.css and the Notepad comes up, and I go to wrapheader and replace (site_logo.jpg) with (Banner_closed.jpg), and save it, nothing happens. The old image is still at the top of my web page.

Can you tell me where I am going wrong? There must be a way to do this...

Also, you recommended that I copy all 70 files from the turnitup skin into a new file called hapasmama1. I created the new file, but have not figured out how to get the turnitup files into this folder.

Thanks for your help.

 

3/20/2008 9:21:40 AM
Gravatar
Total Posts 18439

Re: Animated banner for site

Hi,

The file manager is just a crude tool for downloading and uploading files. Its much easier to use an FTP Client like FileZilla so you can download and upload whole folders at a time easy with drag and drop.

No matter which tool you use, the process is download, edit, then upload.

Sounds like you are just clicking a file in file manager and maybe it opens in something usefull like Notepad, but then when you save it, its being saved on your local drive somewhere not on the server. You can't edit files directly on the server. Best to download the files to a local folder, make your edits then upload.

So ideally, you connect with FileZilla, download the turnitup folder, rename it to happasmama1 then upload the whole folder and then got to site settigns and change your skin to hapapasmama1.

Now you can download the individual css files as needed, edit them locally on your machine and then upload it back to the server.

Be careful making edits to layout.master, if you do something wrong there it can break your site, be sure and make backups of any files before you change them.

Hope it helps,

Joe

You must sign in to post in the forums. This thread is closed to new posts.