The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to make a stylish legend

View previous topic View next topic Go down

How to make a stylish legend

Post by Luky on August 30th 2010, 7:16 pm

How to make a stylish legend
Hello there,

Today I will show you how to make a stylish legend. Make sure you have a nice legend image to put under your legend, where it displays New Posts, No New Posts, Locked. It is really simple but adds a lot of class to your site. To get a look at what you will get will be something like this...


First of all, make sure you have your image. In my case I will be using the legend specified above in the image. If you want to use the same image, the URL for it is: http://i34.tinypic.com/b80g87.png


Second, you must go into Admin Panel => Display => Picture and colors => Colors => Stylesheet tab
Once done, you must enter the following code to the Custom CSS box. Don't fret about positioning it; it will automatically go to the footer.

Code:
ul#picture_legend {
background-position: center;
background-repeat: no-repeat;
background-image: url('URL OF IMAGE OF CHOICE');
text-align: center;
padding: 24px 0;}

Spoiler:
ul#picture_legend = Identifies bottom of page, legend
background-position: center; = Makes the image centered
background-repeat: no-repeat; = If set as repeat, it will continually repeat along the page
background-image: url('URL OF IMAGE OF CHOICE'); = Put URL of image into the part marked as italic
text-align: center; = Centers the New posts, No new posts, Locked
padding: 24px 0;} = The softness around as table

If you wish to just use mine use this code:

1. For phpBB3
Code:
ul#picture_legend {
background-position: center;
background-repeat: no-repeat;
background-image: url('http://i34.tinypic.com/b80g87.png');
text-align: center;
padding: 24px 0;}

2. For punBB
Code:
ul#pun-legend {
background-position: center;
background-repeat: no-repeat;
background-image: url('http://i34.tinypic.com/b80g87.png');
text-align: center;
padding: 24px 0;}


Thanks for reading and I hope this comes in handy. Please feel free to PM me if you are experiencing any issues.

Thanks again.


Luky
Energetic

Male Posts : 6106
Reputation : 245
Language : Romanian, English
Location : Bucharest, Romania

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum