|
[HOW TO - vB4] Customize the look of your modifications options page in adminCP
by
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: &d=1335799715" rel="Lightbox_2324901" id="attachment138102 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. &d=1335799846" rel="Lightbox_2324901" id="attachment138103 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> Code:
Coded/Designed by: KryptoDesigns &d=1335806633" rel="Lightbox_2324901" id="attachment138107 &d=1335800282" rel="Lightbox_2324901" id="attachment138104 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; }
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; }
&d=1335801272" rel="Lightbox_2324901" id="attachment138105 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. 
|