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

		vb.org Archive > vBulletin Article Depository > Read An Article > vBulletin 4 Articles
[HOW TO - vB4] Customize the look of your modifications options page in adminCP

Thread Tools

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

LifesGreatestGift

Join Date: Jul 2009

Posts: 885

Louisville, KY USA

LifesGreatestGift LifesGreatestGift is offline

04-29-2012, 10:00 PM

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:

Attachment 138102

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.

Attachment 138103

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.

HTML Code:

<style type="text/css">
body { background:#555;color:white; }
a:link, a:visited, a:active { color:white; }
.optiontitle { background:#10a113;color:#FFF;border:none; }
.button { background:#10A113;border:none;color:white;padding:6px 12px;}
.button:hover { background:#057c08; }
.tcat { color:white;background: #111;border:none; }
.tcat a:link, .tcat a:visited, .tcat a:active { color:white; }
.tfoot { background:#111;border:none; }
.alt1 { color:white;background:#333; }
.tborder { border:1px solid #000; -moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;-moz-box-shadow: 2px 2px 8px #000;-webkit-box-shadow: 2px 2px 8px #000;box-shadow: 2px 2px 8px #000; }
textarea, .bginput, input.col-c, input.col-i, input.col-g { border:1px solid #000;color:#EEE;background:#444; }
.pagetitle { background:#111;color:white;border:1px solid #000;-moz-box-shadow: 2px 2px 8px #000;-webkit-box-shadow: 2px 2px 8px #000;box-shadow: 2px 2px 8px #000; }
</style>

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.

Code:

Coded/Designed by: KryptoDesigns

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.

Attachment 138107

Attachment 138104

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:

HTML Code:

form#groupForm { margin-top:200px; }

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

HTML Code:

body { background:url(http://i50.tinypic.com/w0t760.png) no-repeat 50% 32px #555; }

My image was 800px by 200px.

Attachment 138105

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.

05-01-2012, 09:36 AM

kh99

Join Date: Aug 2009

Location: Maine

Posts: 13,185

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

Clever idea, well done.

05-01-2012, 11:02 AM

Princeton

Join Date: Nov 2001

Location: Vineland, NJ

Posts: 6,693

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

thank you for sharing :up:

05-01-2012, 05:18 PM

abdobasha2004 abdobasha2004 is offline

Join Date: Aug 2008

Posts: 541

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

this is nice and new idea
thanks

05-02-2012, 11:52 PM

ozzy47

Join Date: Jul 2009

Location: USA

Posts: 10,929

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

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

08-04-2012, 03:47 PM

Scanu

Join Date: Nov 2010

Posts: 829

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

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

10-27-2012, 02:50 AM

Dorgham

Join Date: May 2012

Location: Egypt

Posts: 69

Благодарил(а): 0 раз(а)

Поблагодарили: 0 раз(а) в 0 сообщениях

It's so wonderful
good job

« Previous Thread | Next Thread »

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 Forum Rules

Forum Jump

All times are GMT. The time now is 10:09 AM.

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.06452 seconds Memory Usage 2,278KB Queries Executed 21 (?)
More Information
Template Usage: (1)SHOWTHREAD (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (1)ad_showthread_beforeqr (1)bbcode_code (3)bbcode_html (1)footer (1)forumjump (1)forumrules (1)gobutton (1)header (1)headinclude (1)modsystem_article (1)navbar (4)navbar_link (120)option (7)post_thanks_box (7)post_thanks_box_bit (7)post_thanks_button (1)post_thanks_javascript (1)post_thanks_navbar_search (1)post_thanks_postbit (7)post_thanks_postbit_info (6)postbit (7)postbit_onlinestatus (7)postbit_wrapper (1)spacer_close (1)spacer_open (1)tagbit_wrapper Phrase Groups Available: global inlinemod postbit posting reputationlevel showthread	Included Files: ./showthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/functions_bigthree.php ./includes/class_postbit.php ./includes/class_bbcode.php ./includes/functions_reputation.php ./includes/functions_post_thanks.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete showthread_start showthread_getinfo forumjump showthread_post_start showthread_query_postids showthread_query bbcode_fetch_tags bbcode_create showthread_postbit_create postbit_factory postbit_display_start post_thanks_function_post_thanks_off_start post_thanks_function_post_thanks_off_end post_thanks_function_fetch_thanks_start fetch_musername post_thanks_function_fetch_thanks_end post_thanks_function_thanked_already_start post_thanks_function_thanked_already_end post_thanks_function_fetch_thanks_bit_start post_thanks_function_show_thanks_date_start post_thanks_function_show_thanks_date_end post_thanks_function_fetch_thanks_bit_end post_thanks_function_fetch_post_thanks_template_start post_thanks_function_fetch_post_thanks_template_end postbit_imicons bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete postbit_display_complete post_thanks_function_can_thank_this_post_start tag_fetchbit_complete forumrules navbits navbits_complete showthread_complete
Messages:

The Arcive of Official vBulletin Modifications Site.

It is not a VB3 engine, just a parsed copy!