[HOW TO - vB4] Customize the look of your modifications options page in adminCP

Article Options

[HOW TO - vB4] Customize the look of your modifications options page in adminCP

LifesGreatestGift

Designer

Join Date: Jul 2009

Posts: 885

Louisville, KY USA

by LifesGreatestGift LifesGreatestGift is offline

30 Apr 2012

Customizing the look and feel of your modifications options page is quite easy and can be used as a signature look or for advertising. We all know what the default options page looks like:

default.jpg

But with a little creativity you could be on your way to creating a cool customized look. The following image is a style I personally designed and will used for my mods as a 'signature' feel.

default2.jpg

To do this, you will be inserting CSS into a settings block. Once you are done with your mod options, add one more setting block. Be sure to choose a unique varname and associate it with your group and product and make the title whatever you'd like. For me, my title is "Custom CSS for this page". Now the fun part. The description block can accept HTML and render it accordingly. Seeing as how our options page is its own page in an iframe, our custom CSS will only affect our options page. Here is what I put in my description block to get my custom signature look.

Block Disabled: (Update License Status)
Suspended or Unlicensed Members Cannot View Code.

If you are going to use my code as a reference, please be creative and come up with a style of your own. For Option Code just enter whatever, I put a copyright in my block.

Block Disabled: (Update License Status)
Suspended or Unlicensed Members Cannot View Code.

Leave everything else default and hit save. Now you can see your custom style come to life. It will take some time with Firebug to get the right classes/IDs for the elements you would like to alter.

default5.jpg

default3.jpg

Now you are wondering, how am I going to advertise if all I can do is alter CSS? Well, I'll tell you.

If you add the following CSS:

Block Disabled: (Update License Status)
Suspended or Unlicensed Members Cannot View Code.

It will create a gap at the top of your options page. You can now set a background image to the body element and display what you'd like. My recommendation would be news about your mod, site etc and to host the image on your site so that if you want to update it for everyone who uses your mod then you can by overwriting the initial file.

Then I changed my original 'body' css declaration to

Block Disabled: (Update License Status)
Suspended or Unlicensed Members Cannot View Code.

My image was 800px by 200px.

default4.jpg

I feel I don't need to say this but I will anyways. Yes, it is possible to embed external files with this method. I would recommend you not doing so, not only to protect the community, but to protect your reputation.

It's a mod, that being said I don't expect everyone who installs my mods to keep checking the mod options page and you should have the same perspective. That being said, make your styling worth it. First impressions are everything.

The following members like this post: Lynne, ProFifaLeagues, Boofo, ozzy47, Michael.A and 2 others.

Last edited by LifesGreatestGift; 30 Apr 2012 at 18:24..

Comments

01 May 2012, 11:36

kh99

Senior Member

Join Date: Aug 2009

Real name: Kevin

Clever idea, well done.

No members have liked this post.

01 May 2012, 13:02

Princeton

Coder/Designer

Join Date: Nov 2001

Real name: Joe Velez

thank you for sharing

__________________
Former vBulletin.org Staff Member

Latest Articles:
Liquid Layout = Less Ad Revenue?
How to Monetize Your Site
Improve Web Page Performance
How To Write For The Web

If it needs instructions, there's room for improvement.
Give users what they actually want, not what they say they want. And whatever you do, don't give them new features just because your competitors have them!

No members have liked this post.

01 May 2012, 19:18

abdobasha2004 abdobasha2004 is offline

Member

Join Date: Aug 2008

this is nice and new idea
thanks

No members have liked this post.

03 May 2012, 01:52

ozzy47

Member

Join Date: Aug 2009

Real name: Chris

I like it adds a certain flavor to the pages, thanks for sharing.

No members have liked this post.

04 Aug 2012, 17:47

Scanu

Coder

Join Date: Nov 2010

Very nice idea i will do something similiar in all my mods i hope every coder will. It makes vbulletin vivider

__________________
http://twitter.com/scanu_account

No members have liked this post.

27 Oct 2012, 04:50

Dorgham

Member

Join Date: May 2012

It's so wonderful
good job

__________________
AdSense revenue sharing 100% - [ Hanan ]
News, egypt : أخبار مصر - Photo, picture : صور

No members have liked this post.

Similar Article
Article	Author	Type	Replies	Last Post
Administrative and Maintenance Tools [tk] Super Menu: Organize and customize your AdminCP menus	hambil	Modification Graveyard	67	02 Dec 2011 20:31
Customize AdminCP via Admin Permissions	House_of_Crazed	vBulletin 3.0 Full Releases	16	18 Apr 2005 17:07

« Previous Article | Next Article »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Article Options
Show Printable Version Email this Page

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts BB code is On Smilies are On [IMG] code is On HTML code is Off

New To Site?	Need Help?
About vBulletin.org You will need to register to Participate Review Our Site Rules	Mark Forums Read Do Your Research Before Hiring! Site Map Meet Our Staff Do Not Sell or Share My Personal Information

All times are GMT. The time now is 23:35.

The Official vBulletin Modifications Site.

[HOW TO - vB4] Customize the look of your modifications options page in adminCP