Author Topic: Custom Furry Indexer (Read 2663 times)

Princess Rei · « **on:** May 16, 2005, 04:44:51 pm »

I know there was a topic posted regarding making furry gallery, and I have read this page:

http://www.furtopia.org/indexer/

But I don't understand css and how it works. I want to create the indexer page to match my normal web pages, and the only things I have been able to do is add the header (like mentioned in the Indexer tutorial thingy) and the background.

Now the problems are, the footer.html shows up on top of the header (not at the bottom at the page) and the main content shows behind the header images. Also, I want to align the main content along the background (In a layer, so that it's not overlapping the background, which looks like a lefthand bar.)

I'm not too good with html and coding and all that stuff, which is why my brain fries when I see the css stylesheet. I tried the alternative as previously mentioned in Carlos's post regarding the gallery, but the frames mess up the layer of my gallery and I can't figure the other one out.

Is there any way someone can help me figure css out?

Reathion_Arkidian_Nights · « **Reply #1 on:** July 14, 2005, 01:12:58 pm »

Cascading Style Sheet Example

Cascading Style Sheet can be a file by it self save as
" clasic.css ", or can be place on the html document as long you add these tags above the head tag. but not recomanded to add it to the html file it can slow the loading time of the page.

<style type="text/css">

</style>

This is the location for the menu
.navposition {
   position:absolute;
   z-index: 200;
   left: 27px;
   top: 91px;
   width: 136px;
   height: 49px;
}
-------------------------------------------

the bttons Container controlls the size.

.buttonscontainer {
   width: 135px;
}

-------------------------------------------

".Buttons a" Controls the style of the menu.

.buttons a {
   color: #000000;
   background-color: #B8B8B8;
   padding: 2px;
   padding-left: 3px;
   display: block;
   border-bottom-color:#000000;
   border-right: 2px solid #000000;
   border-top: 2px solid #000000;
   border-bottom: 2px solid #000000;
   border-top-color:#000000;
   border-right-color:#000000;
   border-left: 5px solid #000000;
   font: 12px Arial, sans-serif;
   font-weight: bold;
   text-decoration: none;
   text-align: left;
   margin-top: 4px;
}

----------------------------------------------------

This one controls the Mouse over event for the menu.
.buttons a:hover
{
   border-left: 5px solid #999999;
   border-top: 2px solid #999999;
   border-bottom: 2px solid #999999;
   border-right: 2px solid #999999;
   text-decoration: none;
   color: #FFFFFF;
   background-color: #777777;
}

-------------------------------------------

This is the link to the Cascading Style Sheet that is place in
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" type=text/css href=css/clasic.css />
<body>

This is the html source to the Cascading Style Sheet will work with.

<div class="navposition">
<div class="buttonscontainer"><div class="buttons">
<a href="index.html">Home</a>
</div>
</div>
</div>

</body>
<html>

I hope this information help you out. Â

'> if your confuse on how to do this let me know!

CarLOS · « **Reply #2 on:** July 14, 2005, 03:33:56 pm »

If you use the same style for many pages, you can save the stylesheet as a textfile named "styles.css" for example and call it from a this tag within your <head> tags:

<link rel="stylesheet" type="text/css" href="css/styles.css">

Here's the one for my site:
http://carlos.furtopia.org/css/styles.css

Here's a place to learn:
http://www.w3schools.com

There is also a Windows proggie (freeware) that asks you questions and generates it. But it's a BAD way to learn

'>

Kada-Ru · « **Reply #3 on:** July 15, 2005, 05:48:26 pm »

Here are some examples from my experiences with the indexer:

I use Macromedia Dreamweaver for all my web paging. It is very easy to use. You can see it as you create it or you can create it with html coding.

Another thing that Furtopia uses is the 'indexer'. VERY VERY simple to use for art galleries. I am switching all of my art pages over to it as I no longer have to have 3 files of each image. I would normally have my original sized image, a resized image at 500 pixels wide for web viewing then another resized image at anywhere between 100 x 100 pixels - 200 x 200 pixels for thumbnails. I no longer have to resize my pics. Which is VERY time consuming.

With the indexer, I just add my images to a folder and upload it to my site. Here is example 1.

This is the basic indexer. If it doesn't find an index.html in a folder it will created this page automatically. Which is fine for basic viewing and updating.

Now, for me, since I also know HTML, I use html with it on some of my pages, I just make it the header.html as in example 2.

Now example 2 is my main page for my g rated site on http://www.creativepaws.org, (also created by us) and I am redoing my website a little differently.

In example 3, I am using the indexer with the images and file option. The file option lists your files at the bottom of the page. I am still using a header.html so that I can pretty much make the page look anyway I wish but with all the photos, artwork etc., that I upload, this indexer has become my best friend. (smiles)

As for front page, I have never used it and I have seen a lot of people who have had problems with uploading it to their websites, and I think it is for the reasons that Reathion_Arkidian_Nights stated.

If you would like help with the indexer for using on your own website let me know and I can help you walk through the basics and you can take it from there.

You can contact me through here on PM or through one of these:

AIM: KadaRu00
ICQ: 142428267
MSN: Kada_Ru@hotmail.com
YIM: kaycyd

Kada-Ru · « **Reply #4 on:** July 15, 2005, 05:50:33 pm »

Where is a link to your webpage, Princess Rei? The way it looks now so I can help you with the indexer?