Register Members List Search Today's Posts Mark Forums Read

Reply
 
Article Options
[HOW TO - vB4] Customize the look of your modifications options page in adminCP
LifesGreatestGift
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.

Last edited by LifesGreatestGift; 30 Apr 2012 at 18:24..
Views: 3575
Reply With Quote
Comments
  #2  
Old 01 May 2012, 11:36
kh99 kh99 is offline
 
Join Date: Aug 2009
Real name: Kevin
Clever idea, well done.
Reply With Quote
  #3  
Old 01 May 2012, 13:02
Princeton's Avatar
Princeton Princeton is offline
 
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!
Reply With Quote
  #4  
Old 01 May 2012, 19:18
abdobasha2004's Avatar
abdobasha2004 abdobasha2004 is offline
 
Join Date: Aug 2008
this is nice and new idea
thanks
__________________
Egypt News website, latest Egyptian news updated instantly.
Reply With Quote
  #5  
Old 03 May 2012, 01:52
ozzy47's Avatar
ozzy47 ozzy47 is offline
 
Join Date: Aug 2009
Real name: Chris
I like it adds a certain flavor to the pages, thanks for sharing.
Reply With Quote
  #6  
Old 04 Aug 2012, 17:47
Scanu's Avatar
Scanu Scanu is offline
 
Join Date: Nov 2010
Location: Italy
Real name: Andrea Scanu
Very nice idea i will do something similiar in all my mods i hope every coder will. It makes vbulletin vivider
Reply With Quote
  #7  
Old 27 Oct 2012, 04:50
Dorgham's Avatar
Dorgham Dorgham is offline
 
Join Date: May 2012
It's so wonderful
good job
__________________
AdSense revenue sharing 100% - [ Hanan ]
News, egypt : أخبار مصر - Photo, picture : صور
Reply With Quote
Reply

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



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

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?

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

Layout Options | Width: Wide Color: