5 replies to this topic

[Broni]

You can check the above kind of design by switching to Smartest skin:



Note. The above screenshot shows some vertical lines. If you check the actual skin, they don't show.


This is how the original branding bar looked like:



Now, you need to use some program to create small gradient image.
I used Photoshop to create this image:



Save the file as gradient_branding.png.

Let's take a closer look...





Just make sure, that the gradient image height is the same as the branding background field height. Width doesn't matter.


Now, you need to upload gradient_branding.png file to your board, using FTP client.
Upload the file to /public_html/public/style_images/your_skin folder.

Next, go ACP>Look & Feel>your_skin>CSS tab>ipb_styles.css
Find:

#branding {
	background: #CDAA7D repeat-x 50%;
	min-height: 80px;

Note. #CDAA7D is my actual color; yours will be different.

Change the code to:

#branding {
	background: url({style_images_url}/gradient_branding.png);
	min-height: 80px;

Refresh your browser page and....you're done :)

[JohnT]

I have software that can create any gradient color you want?

[Broni]

What's the name of it?
Photoshop works pretty good for me.
That's how the banner in Smartest skin was created.

[JohnT]

PhotoImpact by Corel X3 version

[micmin]

I use Paint Shop pro X2 - It is also Coral. Fantastic program

[Zhaan]

This was meant for an older version of the board (I use 3.2.2), but the branding code is still the same, so I tried it just like it detailed here to see if it would work. Unfortunately, no dice. What I would actually like to do is to have that gradient at the top, and replace the category bars with an image. Leaving the image part out for now, what changes would need to be made to achieve the results of this tutorial with 3.2.2?