Forum

Making a New Skin
 
Notifications
Clear all

Making a New Skin

Page 1 / 2
DanaRose31382
(@danarose31382)
Trusted Member

I have a picture ready to make into a skin. Where do I go from here? How do I get it into the efiction files? How do I start the programing (I'm using an ftp client called filezilla) I notice when I open up things it opens in notepad form so I figure I put the codes in notepad but how to I get them on the skin? I checked the wiki and it just gives the codes. Not how to get them on the files (or if it did I didn't see it) Can anyone help? Any advice?

Dana

Quote
Topic starter Posted : 09/07/2009 8:22 pm
Lyndsie
(@lyndsie)
Member Moderator

The first thing is that you need to know HTML and CSS. If you don't know those, then you're setting yourself up for a ton and a half of frustration. There are plenty of books out there, as well as free tutorials online.

When making a skin, many people take either the files from the default_tpls folder or one of the skins that comes with the eFiction download and start modifying from there. IMPORTANT NOTE: Never ever overwrite/modify the files in the default_tpls folder in a copy of eFiction running on a server. You could break your skins. You can, however, copy these and save them somewhere else to work with.

To edit the skins, something like Notepad is useful. A lot of people use special editors like Notepad++ or Crimson Editor, because these understand HTML and CSS and give you other capabilities, like color coding and a lot of other fancier stuff for developing. Don't ever work with them in MS Word or a similar program, because it will add lots of nasty stuff to the file.

I would suggest downloading a copy of eFiction from the downloads page, if you haven't already, and taking a look at the skin files. Also, check out the wiki section on skinning. Start with this page: https://efiction.org/wiki/index.php5?title=Creating_Skins_for_3.0. The wiki assumes you already have knowledge of HTML/CSS and attempts to explain how the skins work within in the program, and lists the useful variables for each with examples.

ReplyQuote
Posted : 09/07/2009 9:36 pm
DanaRose31382
(@danarose31382)
Trusted Member

I already read that wiki. My real question is this. How do I get the picture onto my efiction files and how do I save the programing onto the picture? From there I think I have a plan but I won't know if it works until I try it. If worse comes to worse I have a few friends who might be able to program this for me. But I wanted to try it myself. I figured I can put the codes like I said on notepad, but how do I get them on the skin and into the efiction files? And how do I get the picture into the efiction files?

Dana

ReplyQuote
Topic starter Posted : 10/07/2009 1:17 am
Lyndsie
(@lyndsie)
Member Moderator

I'm not really sure how to answer that. The way you're phrasing your questions tell me that you really should make some effort to learn HTML and CSS. Images go into the skin's images folder, usually. That's really choice, on where you put them. Of course it makes most sense to put it in the skin's individual folder, and most people create an images folder with in the skin's named folder to keep things organized. You'd get images to appear by adding them to the HTML with an img tag or by adding them to the CSS (usually as background) with the appropriate reference in the HTML.

<img src=""[insert" picture file path]"> is really basic HTML. That's really all the help I can give: learn the languages. It's not hard, and you won't regret it.

ReplyQuote
Posted : 10/07/2009 1:27 am
DanaRose31382
(@danarose31382)
Trusted Member

I think I figured out the programming and I figured out how to get everything on the efiction files in my ftp client. However, when I put the picture in I want to use for a banner (even when I do all the programming) The picture doesn't come up. All the programming is right but the banner part is blank. Am I doing something wrong?

Dana

ReplyQuote
Topic starter Posted : 15/07/2009 8:31 am
Carissa
(@carissa)
Member Moderator

Um..yes. I hate to say it but despite your insistence, your "programming" is probably not as right as you think. If it were right, it would be working. (However, a few days is really not enough time to master HTML/CSS. I'm a web designer, and I still learn something new nearly every day.)

Please provide a link so we can help you fix it.

ReplyQuote
Posted : 15/07/2009 11:32 am
DanaRose31382
(@danarose31382)
Trusted Member

Well I really just did a test to see if I could do it by making another Elegence skin but with my own banner. I took it down when it didn't work though. Tonight I'll make another one and try again and if it still doesn't work I'll provide the link. I would provide it now but I deleted all the work since it didn't work and that it was just a test. I don't really know if I figured EVERYTHING out but I think i figured some things out. I didn't mean to imply that I knew what I was doing exactly. I meant that I figured out certain things like how to get it to appear in the skin folder and stuff like that. I'll try again tonight to make another skin and then send you the link and all that so you can see what I've done. 🙂 Thanks so much for the help! I'll get back to you I proimise!

ReplyQuote
Topic starter Posted : 15/07/2009 12:32 pm
DanaRose31382
(@danarose31382)
Trusted Member

Okay I redid my test. Now the first problem I'm having is getting the whole picture on my ftp. When I put it on only half the picture transfers and the other half of it is a grey block. I don't know why that's happening so I cropped the picture to see if that would work. That allows the whole thing to transfer, but it still doesn't come up as a banner. Now I only did this as a test to see how things worked. It's just the Elegence skin again without the Elegence banner. So don't expect anything other than that. I have the picture in the files but it doesn't come up in the banner part at all. You can take a look at anenduringlove.net

However, it's hidden from non admins. So feel free to use my admin account. That's DanaRose31382 and the password is TinaDana  The skin you're looking for is named InuKag1. I don't know what else I could be doing wrong. Remember, this is just a test to see how things work. I plan to still fiddle with it and make it to my liking when I figure more things out, but so far this is what I was able to accomplish with my limited experience.

PS. Would it be easier to hire a web designer and if so how much does one cost? I'm definitely on a limited budget.

Dana

ReplyQuote
Topic starter Posted : 16/07/2009 6:17 am
Lyndsie
(@lyndsie)
Member Moderator

The greyish background is because the color for #bannerback is #B5C9BA. I think the reason no picture's showing up is because you haven't told it to. Simply putting the file in its place isn't enough. You have to add it to the CSS. The CSS still looks like the default. This will work, if you name your images the same as the ones that come with the skin. However, it seems as though your images folder doesn't exist. I get a 404 when I browse there: http://anenduringlove.net/skins/InuKag1/images  I bet if you check your error logs you'll see a bunch of 404s looking for and so on.

ReplyQuote
Posted : 16/07/2009 6:38 am
DanaRose31382
(@danarose31382)
Trusted Member

I did make an images folder. I tried changing the name of the picture to elegence. I tried changing the picture from jpg to gif. I tried putting it in the CSS and all that and nothing works. I have this in my CSS now.

/* the background of the banner. this allows us to make the banner fit the width of the page, no matter how wide */
#bannerback {
height: 150px;
margin: 0px; 
background: #B5C9BA url('images/anenguringlove.jpg') repeat top left;
}

It's still not working. I also tried to put it in the image on the banner part and that didn't work but thiat's not what I want I think. I want this picture not to be like the elegence word. I want it to be in the entire banner. So I stuck with this area. I even tried putting in and a combination of that like InuKag1/images/anenduringlove.jpg and such instead of just images/anenduringlove.jpg. I also tried making it a gif file. It didn't work. What can I be doing wrong? Sorry I'm such a dummy about this stuff. 🙁

Dana

ReplyQuote
Topic starter Posted : 17/07/2009 5:22 am
Elle
 Elle
(@jenny)
Honorable Member

  background: #B5C9BA url('images/anenguringlove.jpg') repeat top left;   

archive: dramione.org
site: accio.nu

Available for skin/mod commission! 🙂

ReplyQuote
Posted : 17/07/2009 1:51 pm
DanaRose31382
(@danarose31382)
Trusted Member

Okay, I finally got some of the picture to come up. I had to adjust the height. However, it's a really big picture and I'm having a problem getting it all to show. Is there a way to lower the menu bar and such so that the rest of the picture will show? Another problem is that the whole picture doesn't grow with the window. If you open the window more more of the picture shoes instead of the picture just getting bigger. Is there a way to fix that too?

ReplyQuote
Topic starter Posted : 18/07/2009 6:06 am
babaca
(@babaca)
Member Moderator

Your image is too large. It's 1692px × 1444px (scaled to 1150px × 981px) were you trying to use it as a background? The average banner sizes are stuff like 468 x 60 or 720 x 200 or 930 x 160. Resize your image and save it at a smaller pixel size. You should resize it to a more smaller size.

******************************************
Mucking around in eFiction since circa 2001 (ver. 1.0)
Now running v.3

ReplyQuote
Posted : 20/07/2009 7:28 pm
DanaRose31382
(@danarose31382)
Trusted Member

I was trying to use it as a banner, but I can live with it being a  backround. How small does it have to be? I need to know so that I can edit it. 🙂

ReplyQuote
Topic starter Posted : 22/07/2009 5:29 am
DanaRose31382
(@danarose31382)
Trusted Member

I never got a reply so I guess you guys missed my question. How big should a banner be? How big should a backround be? Please let me know so that I can have a new picture made to fit my skin.

Dana 🙂

ReplyQuote
Topic starter Posted : 27/07/2009 4:47 am
Page 1 / 2
Share: