Getting the Gradiant on Custom Colors

Heya, gang. Okay, pretend I am completely stupid.

See the part of this picture that has the gradiant to it? It's the part containing the word "site" in the first attachment.





It's in this menu in the CSSMain (see second attachment):

By default it reads: #869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left



Now what if I want to make the red from the picture in attachment three (where no text is) into a gradiant?

How do I tell this machine to do that?

Thanks in advance for any help.

Depending on your style, it is either the .tcat or .thead class. Create a gradient image for this, upload and amend the appropriate class to that image.

^^ what he said

Depending on your style, it is either the .tcat or .thead class. Create a gradient image for this, upload and amend the appropriate class to that image.

From my first post:

Okay, pretend I am completely stupid.

It's okay to treat me as though I am an ingorant user, because I am.

There's this thing I say to my programmers that work for me... "When explaining something or making a tool for a user who is not a programmer, it must pass the 'grandma test.' If your grandma couldn't reproduce what you want her to based on the instructions provided, your instructions have failed the 'grandma test.'"

Pretend I'm a grandma, please?

Your answer sounded cool, but I understood nae damn of it.

And kindly forgive my lack of computer education. Apologies for that.

You need to open up some image editing software and create a red gradient .gif (the same dimentions as the blue one that ic called from the url in your CSS main file (second screen shot) . You then either upload that to a different loaction on your server and alter the url in the Main css to point to it, or call it the same thing as your existing gradient and upload it to the same location, overrighting the old one. The first method is the preferred as it doesn't remove your existing gradient and 'break' any existing styles that rely on it.

Hope that helps?

Ok, I'm gonna do as asked and put it as basic as I can

vBulletin gradients are "tiles" of one image file repeated along the table cell background to create a visual effect.

By default it reads: #869BBF url(images/gradients/gradient_tcat.gif) repeat-x top left
Let me break that line to use as example:

#869BBF <--- This is the solid color that will appear in the cell background if the browser doesn't load images. I think you've already changed that.

url(images/gradients/gradient_tcat.gif) <--- this part tells the browser where to look the image file that's gonna be used as a tile. This file, as already explained, you have to create yourself and upload to your preferred location into your web server.

repeat-x <--- this part is telling the browser how the "tile" is going to be repeated to create the visual effect, in this example is just being repeated along the "x-axis", or "horizontally" to the cartesian (sp?) challenged people.

top left <--- this part is telling the browser where is going to start placing the first "tile", most modern web browsers won't really need this to be stated since the default placing for the first tile is always top and left, but I guess it's kept for compatibility.

I hope this helps.

Excellent!

Thank you both very much. I understood every word!

Big helps there, you guys rock!

Pity it's such a pain to alter this image, you'd think they'd program it to be a tad easier to customize.

What are you finding difficult about creating a red gradient image Alastor?

What are you finding difficult about creating a red gradient image Alastor?

Well... I'm honestly kind of embarrassed to say.

First... I don't know where to find the file in question, or how, from within my boards.

Steve said:

You need to open up some image editing software and create a red gradient .gif (the same dimentions as the blue one that ic called from the url in your CSS main file (second screen shot) .

I can't make one on my own. I'm not very talented. So I have to use the one that came with the boards. But I don't know how to get it out and copy it onto my computer from my site to manipulate it.


I also don't have anything beyond paint to work with here in terms of design or anything, which probably wouldn't get it done.

Then... Presuming I made it that far, once I made the changes to it, I could put it back I guess... Like Steve said:

You then either upload that to a different loaction on your server and alter the url in the Main css to point to it

Put it in a different location? Like... What location? And what exactly do I type in the box to tell the Main CSS to point to it?

Yeah... I mean the answers make sense... I just don't know how to execute them.

I like cars. I can tell you how to change your oil. Remove the pin, drain the pan, use a filter wrench to remove the filter, put a new one in, tighten it, replace the cap, refill with oil and you're done!

Sounds easy... But if you don't know what a filter wrench is, where the pin is, what a pan is, or how to use the tools in question...

Worse I may forget to mention the filter wrench, which is a special tool. Using it means this entire thing takes ten minutes. Not using it means you'll be there 6 hours, and you probably won't get the filter in right and eventually your car will break down and the engine will be shot because you leaked oil all over the place.

So it makes sense to hear, right? And it seems easy to follow, but if you don't actually know how to perform the tasks in question I may as well be telling you to pray and hope God does it for you, right?

Ok, ok... don't panic here. Listen - we all started one time so you have nothing to be concerned about by asking whatever questions you need to find the answers for. The only stupid qns are those not asked OK :)

So, can I advise you take this one step at a time here. Take it easy, chill out and don't panic.

You will need some good image manipulation software - most costs dosh, but there are some out there that are free. Try the gimp for one - I don't use it, but I hear it is good. I use PhotoShop which is a super graphic app. If you can't get hold of this software, then ask someone here or on a graphics forum to make a gradient for you. I am sure several people here are able to help out.

As for finding the file on your boards - there are a few wways to do this. You can get the file from your webserver, or if you uploaded vB yourself, then you already have the image on your local machine. Do a search on your machine for a file called gradient_tcat.gif - it's there somewhere. Then simply edit that one. Once yuo have edited that one, upload it to the correct location on your web and the new image will be there.

Try deciding what you want to learn how to do yourself or what you'd prefer others to do for you (the less you do yourself, the more it costs you in the end) and then as I said, one step at a time.

So... over to you... :)

Ok, ok... don't panic here.

No problem. My back-up plan was just to use two different colors of red, rather than a gradient so it's not a big deal if I can't put lip-stick on this pig. No worries in the panic area.

Listen - we all started one time so you have nothing to be concerned about by asking whatever questions you need to find the answers for. The only stupid qns are those not asked OK :)

K. Thanks.

You will need some good image manipulation software - most costs dosh, but there are some out there that are free. Try the gimp for one - I don't use it, but I hear it is good. I use PhotoShop which is a super graphic app. If you can't get hold of this software, then ask someone here or on a graphics forum to make a gradient for you. I am sure several people here are able to help out.

Okay, I'll check around with my pals.

As for finding the file on your boards - there are a few wways to do this. You can get the file from your webserver, or if you uploaded vB yourself, then you already have the image on your local machine. Do a search on your machine for a file called gradient_tcat.gif - it's there somewhere. Then simply edit that one.

No problem. I have 9 of them (see attachment). Which one of the nine is best to use? I didn't even know they came in different colors...

So let's stop here for now. Which one of these files is the one I'm actually trying to work with?

Hrmm.. I posted a reply. I was distracted and a message came up, I think it said it needed to be moderated.

Not sure though.

Hrmm.. I posted a reply. I was distracted and a message came up, I think it said it needed to be moderated.

Not sure though.

Approved something triggered the spam filter...

So let's stop here for now. Which one of these files is the one I'm actually trying to work with?


OK... can you do as you did at the top here, and post an image with an arrow indicating the image you want to amend. Then we can create one for you. Also - post a link to your boards so we can see the full context (and the source) if needed.

OK... can you do as you did at the top here, and post an image with an arrow indicating the image you want to amend. Then we can create one for you. Also - post a link to your boards so we can see the full context (and the source) if needed.

Sure! Wonder why my attachment didn't get through...

Okay, the link to my boards is here (http://www.eternalkeep.com/vb/).

The part I am trying to change is where it says


The Pub
For variuous... Pubish stuff.

It's blue. I want two of them actually (I thought if I could make one, I could probably make the other pretty easily too). These are the colors I am after:

#dc143c
#FF0033

The first is sort of maroon. The second I believe is "true red."

You guys would really make it for me? Wow, that's service above and beyond! I do have friends that can help me if it's inconvenient for you. I sought guidance, and you've given me that and more already.

But I won't say "no" either.

Thank you very much.


Okay, and the image I want to amend I think is probably this one I have attached.

I must be uploading too many things. It got modded again, but it's there.

If that attached gif isn't what you were asking for, let me know.

It's here. So - what gradient colours do you want?

How's this...it uses the two colours you requested ;
#dc143c
#FF0033
956

Parfect!

You are mah hero!

Now what do I do with it?

Upload it to your images/gradients/ folder - with the same name.

PS: that's it from me for tonight - have been at it all day, need some time out with kids :)

Upload it to your images/gradients/ folder - with the same name.

PS: that's it from me for tonight - have been at it all day, need some time out with kids :)

Thanks for your help!

Have a good night.

Upload it to your images/gradients/ folder - with the same name.:)

I'm having difficulty. Upload it to my images/gradiants folder - with the same name as what?

I can't get it to work, so, "With the same name as what?"

I can name it gradiant_tcat.gif, which is what the blue version of the file was called, but then that replaces the blue one, no? I'd rather not replace the blue one. I'd rather have them both in there so that if a user wants to use the default style instead of my new fancy schmancy one, they may.

Nevermind, I named it gradient_tcat1. gif, and redirected the url to that.

Okay, now that I've done it I should be fine. I'm good to go!

Thank you!

I am glad you got it sorted :)

For future developments it is a good idea to keep your folders/files and naming structure to something descriptive. In 6 months/12 months time there is a good chance that you will not know what "gradient_tcat1.gif" is just by looking at its name in say your FTP program or file manager on your server, but if you called it "gradient_tcat_red.gif" it might be a little more descriptive. ;)

Once you begin to work with themes more, it is usual to create a new folder for each new theme. Then in that themes main folder create subfolders with all the themes buttons, images, gradients, icons etc. So you would have one folder for your default theme, in it would be several other folders with that themes buttons etc, then you would have another main folder for your red theme and again just as you have with your default theme it would have sub-folders with the red themes buttons, icons, gradients etc.

Hope that helps a little more for the future ;)

It does help, Steve. It's good advice and thank you very much!

Right now I'm only changing on gradient, a logo and some posting icons. In the future though, I'll probably start changing more stuff and I'll remember to section off my styles.

Once you begin to work with themes more, it is usual to create a new folder for each new theme.

I put it off until I had everything else done. Right now I only have the one custom gradient, so it's not hard to deal with. But in the next few days I will make a new logo, new posting icons, new buttons...

I'm going to need this new folder. When it was just the one gradient, we were fine... But it's becoming clear that I'll be needing more things custom made.

So, making the pictures is no problem, I can do that. But how do I make the folder to put them in?

And kindly let me know how I'll redirect. For example a typical redirect for a gradient that isn't modified is:

url(images/gradients/gradient_tcat2.gif)

Will I just add a folder so that this becomes:

url(images/cream/gradients/gradient_tcat2.gif)

That would make sense to me, but one never knows. I should be able to just add a subfolder and adjust my redirects accordingly, no?