| We hope you enjoy your visit. You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free. Join our community! If you're already a member please log in to your account to access all of our features: |
| Board Width Coding; I need help changing the width | |
|---|---|
| Tweet Topic Started: Nov 20 2013, 09:43 PM (468 Views) | |
| Vanille | Nov 20 2013, 09:43 PM Post #1 |
|
Member
|
So I have a board that I'm setting up. I used a pre-made skin to some extent. But I have no idea how to make the width larger. This is the board. http://z13.invisionfree.com/Multiplayer/index.php? This is the coding I used. This is when I click on the Managing Style Sheets. html { overflow-x: auto; overflow-y: auto;} form { display:inline; } img { vertical-align:middle; border:0px } BODY { font-family: Verdana, sans-serif; font-size: 10px; color: #463D36; margin:0px 10px 0px 10px; background-color:#FFFDEE; background-image: url(http://fc03.deviantart.net/fs71/i/2012/267/1/1/large_format__incognito_by_cma3d-d5fsjp6.jpg);} TABLE, TR, TD { font-family: Verdana, sans-serif; font-size: 10px; color: #463D36; } a:link, a:visited, a:active { text-decoration:none; color: #000 } a:hover { color: #463D36; text-decoration:none; } fieldset.search { padding:6px; line-height:150% } label { cursor:pointer; } img.attach { border:2px outset #EEF2F7;padding:2px } .googleroot { padding:6px; line-height:130% } .googlechild { padding:6px; margin-left:30px; line-height:130% } .googlebottom, .googlebottom a:link, .googlebottom a:visited, .googlebottom a:active { font-size:11px; color: #3A4F6C; } .googlish, .googlish a:link, .googlish a:visited, .googlish a:active { font-size:14px; font-weight:bold; color:#00D; } .googlepagelinks { font-size:1.1em; letter-spacing:1px } .googlesmall, .googlesmall a:link, .googlesmall a:active, .googlesmall a:visited { font-size:10px; color:#434951 } li.helprow { padding:0px; margin:0px 0px 10px 0px } ul#help { padding:0px 0px 0px 15px } option.cat { font-weight:bold; } option.sub { font-weight:bold;color:#555 } .caldate { text-align:right; font-weight:bold;font-size:11px; background-color: #463D36; color:000000; text-align:center; padding:4px;margin:0px } .warngood { color:green } .warnbad { color:red } #padandcenter { margin-left:auto;margin-right:auto;text-align:center;padding:14px 0px 14px 0px } #profilename { font-size:28px; font-weight:bold; } #calendarname { font-size:22px; font-weight:bold; } #photowrap { padding:6px; } #phototitle { font-size:24px; border-bottom:1px solid black } #photoimg { text-align:center; margin-top:15px } #ucpmenu { line-height:150%;width:22%; background-color: #FFFDEE } #ucpmenu p { padding:2px 5px 6px 9px;margin:0px; } #ucpcontent { background-color: #FFFDEE;;line-height:150%; width:auto } #ucpcontent p { padding:10px;margin:0px; } #ipsbanner { position:absolute;top:1px;right:5%; } #logostrip { padding:0px; margin:0px; } #submenu {display:none; } #submenu a:link, #submenu a:visited, #submenu a:active { font-weight:bold;font-size:10px;text-decoration: none; color: #3A4F6C; } #userlinks { border:1px solid #463D36; background-color: #FDD017; color:#463D36;} #userlinks a {color:#463D36;} #userlinks a:link, #userlinks a:visited, #userlinks a:active { color:#000000; } #userlinks a:hover {color:#463D36;} #navstrip { font-weight:bold;padding:6px 0px 6px 0px; } .activeuserstrip { background-color:#463D36; padding:6px; text-transform:lowercase; } .pformstrip { text-align:center; font-weight:bold; color:#463D36; padding:1px; margin:0px; background-color:#FFFDEE;} .pformleft { background-color: #FFFDEE; padding:6px; margin-top:1px;width:25%; border-top:1px solid #FDD017; border-right:1px solid #FDD017; } .pformleftw { background-color: #FFFDEE; padding:6px; margin-top:1px;width:40%; border-top:1px solid #FDD017; border-right:1px solid #FDD017; } .pformright { background-color: #FFFDEE; padding:6px; margin-top:1px;border-top:1px solid #FDD017; } .post1 { background-color: #FFFDEE } .post2 { background-color: #FFFDEE } .postlinksbar { background-color:#463D36; padding:7px; margin-top:1px; font-size:10px; text-transform:lowercase; color:#FFFDEE; } .row1 { background-color: #FFFDEE; text-align:center; } .row2 { background-color: #FFFDEE; text-align:center; } .row3 { background-color: #FFFDEE; text-align:center; } .row4 { background-color: #FFFDEE; text-align:center; } .row4 a:link, .row4 a:visited, .row4 a:active, .row4 a:active { font-family:'Terminal Dosis', sans-serif; font-size:15px; font-weight:200; text-transform:lowercase;} .darkrow1 { background-color: #FDD017; color:#463D36; } .darkrow2 { background-color: #463D36; color:#FFFDEE; } .darkrow3 { background-color: #463D36; color:#FFFDEE; text-transform:lowercase; } .hlight { background-color: #DFE6EF } .dlight { background-color: #EEF2F7 } .titlemedium { text-align:center; font-weight:bold; color:#463D36; padding:1px; margin:0px; background-color:#463D36;} .titlemedium a:link, .titlemedium a:visited, .titlemedium a:active { text-decoration:none; color: #463D36 } .maintitle { font-weight:600; vertical-align:middle; font-family:'Wire One', sans-serif; text-transform:uppercase; font-size:40px; color:#000000;padding:2px 0px 2px 0px; background-color:#FDD017; text-align:center; letter-spacing:1px;} .maintitle a:link, .maintitle a:visited, .maintitle a:active { text-decoration: none; color:#000000; } .maintitle a:hover { text-decoration: none; color:#FFFDEE } .plainborder { border:1px solid #345487;background-color:#F5F9FD } .tableborder { border:1px solid #463D36;background-color:#463D36; padding:0px; margin:0px; width:100%; color:#FFFDEE; } .tablefill { border:1px solid #FDD017;background-color:#FFFDEE;padding:6px; } .tablepad { background-color:#FFFDEE; padding:6px; color:463D36; } .tablebasic { width:100%; padding:0px 0px 0px 0px; margin:0px; border:0px } .wrapmini { float:left;line-height:1.5em;width:25% } .pagelinks { float:left;line-height:1.2em;width:35% } .desc { font-size:10px; color:#463D36; display: block; text-align:center; text-transform:lowercase;} .desc a:link, .desc a:visited, .desc a:active { text-decoration:none; color: #FDD017 } .desc a:hover { color: #A0D8E8; text-decoration:none; } .edit { font-size: 9px } .signature { font-size: 10px; color: #463D36 } .postdetails { font-size: 10px } .postcolor { font-size: 12px; line-height: 160% } .normalname { font-size: 12px; font-weight: bold; color: #003 } .normalname a:link, .normalname a:visited, .normalname a:active { font-size: 12px } .unreg { font-size: 11px; font-weight: bold; color: #900 } .searchlite { font-weight:bold; color:#F00; background-color:#FF0 } #QUOTE { font-family: Verdana, Arial; font-size: 11px; color:#463D36; border-bottom: 20px solid #FDD017; border-radius:0px 0px 20px 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px } #CODE { font-family: Courier, Courier New, Verdana, Arial; font-size: 11px; color:#463D36; border-bottom: 20px solid #FDD017; border-radius:0px 0px 20px 0px; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px } .copyright { font-family: Verdana, Tahoma, Arial, Sans-Serif; font-size: 9px; line-height: 12px } .codebuttons { font-size: 10px; font-family: verdana, helvetica, sans-serif; vertical-align: middle } .forminput, .textinput, .radiobutton, .checkbox { font-size: 11px; font-family: verdana, helvetica, sans-serif; vertical-align: middle } .thin { padding:6px 0px 6px 0px; line-height:140%; margin:2px 0px 2px 0px;} .purple { color:purple;font-weight:bold } .red { color:red;font-weight:bold } .green { color:green;font-weight:bold } .blue { color:blue;font-weight:bold } .orange { color:#F90;font-weight:bold } .tablebg { width:800px; padding: 0px 5px 0px 5px; background-color: #FFFDEE; margin-top: 0px; margin-bottom: 0px; border-left:1px dashed #463D36; border-right:1px dashed #463D36; margin-left: auto; margin-right:auto;} .submenu { display:inline } .submenu a { background-color: #FDD017; color: #463D36; padding: 2px 5px 2px 5px; } .submenu a:hover { background-color: #463D36; color: #FDD017; padding: 5px; } #ipbwrapper { width: 800px; padding: 800px; margin-top: 800px; margin-bottom: 800px; margin-left:auto; margin-right:auto; } .unread { width:15px; height:15px; background-color:#FDD017; margin-left:auto; margin-right:auto; } .read { width:15px; height:15px; background-color:#463D36; margin-left:auto; margin-right:auto; } .pinned { width:15px; height:15px; background-color:#FDD017; margin-left:auto; margin-right:auto; border-radius:15px; } .locked { width:15px; height:15px; background-color:#463D36; margin-left:auto; margin-right:auto; border-radius:15px; } .slideShow { border:3px solid #463D36;background-color: #FFFDEE; text-align: center; margin-bottom: 10px; height:200px;} .slides { z-index: 1; display:none; } #slide1 { display:block; } Board Wrappers coding: Javascript <style type="text/css"> #popitmenu{ position: absolute; background-color: white; border:1px solid black; font: normal 12px Verdana; line-height: 18px; z-index: 100; visibility: hidden; } #popitmenu a{ text-decoration: none; padding-left: 6px; color: black; display: block; } #popitmenu a:hover{ /*hover background color*/ background-color: #CCFF9D; } </style> <script type="text/javascript"> /*********************************************** * Pop-it menu- © Dynamic Drive (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit http://www.dynamicdrive.com/ for full source code ***********************************************/ var defaultMenuWidth="150px" //set default menu width. var linkset=new Array() //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT linkset[0]='<a href="URL">link name</a>' linkset[0]+='<a href="URL">link name</a>' linkset[0]+='<a href="URL">link name</a>' linkset[0]+='<a href="URL">link name</a>' linkset[0]+='<a href="URL">link name</a>' linkset[1]='<a href="URL">link name</a>' linkset[1]+='<a href="URL">link name</a>' linkset[1]+='<a href="URL">link name</a>' linkset[1]+='<a href="URL">link name</a>' linkset[1]+='<a href="URL">link name</a>' linkset[2]='<a href="URL">link name</a>' linkset[2]+='<a href="URL">link name</a>' linkset[2]+='<a href="URL">link name</a>' linkset[2]+='<a href="URL">link name</a>' linkset[2]+='<a href="URL">link name</a>' ////No need to edit beyond here var ie5=document.all && !window.opera var ns6=document.getElementById if (ie5||ns6) document.write('<div id="popitmenu" onMouseOver="clearhidemenu();" onMouseOut="dynamichide(event)"></div>') function iecompattest(){ return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body } function showmenu(e, which, optWidth){ if (!document.all&&!document.getElementById) return clearhidemenu() menuobj=ie5? document.all.popitmenu : document.getElementById("popitmenu") menuobj.innerHTML=which menuobj.style.width=(typeof optWidth!="undefined")? optWidth : defaultMenuWidth menuobj.contentwidth=menuobj.offsetWidth menuobj.contentheight=menuobj.offsetHeight eventX=ie5? event.clientX : e.clientX eventY=ie5? event.clientY : e.clientY //Find out how close the mouse is to the corner of the window var rightedge=ie5? iecompattest().clientWidth-eventX : window.innerWidth-eventX var bottomedge=ie5? iecompattest().clientHeight-eventY : window.innerHeight-eventY //if the horizontal distance isn't enough to accomodate the width of the context menu if (rightedge<menuobj.contentwidth) //move the horizontal position of the menu to the left by it's width menuobj.style.left=ie5? iecompattest().scrollLeft+eventX-menuobj.contentwidth+"px" : window.pageXOffset+eventX-menuobj.contentwidth+"px" else //position the horizontal position of the menu where the mouse was clicked menuobj.style.left=ie5? iecompattest().scrollLeft+eventX+"px" : window.pageXOffset+eventX+"px" //same concept with the vertical position if (bottomedge<menuobj.contentheight) menuobj.style.top=ie5? iecompattest().scrollTop+eventY-menuobj.contentheight+"px" : window.pageYOffset+eventY-menuobj.contentheight+"px" else menuobj.style.top=ie5? iecompattest().scrollTop+event.clientY+"px" : window.pageYOffset+eventY+"px" menuobj.style.visibility="visible" return false } function contains_ns6(a, b) { //Determines if 1 element in contained in another- by Brainjar.com while (b.parentNode) if ((b = b.parentNode) == a) return true; return false; } function hidemenu(){ if (window.menuobj) menuobj.style.visibility="hidden" } function dynamichide(e){ if (ie5&&!menuobj.contains(e.toElement)) hidemenu() else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget)) hidemenu() } function delayhidemenu(){ delayhide=setTimeout("hidemenu()",500) } function clearhidemenu(){ if (window.delayhide) clearTimeout(delayhide) } if (ie5||ns6) document.onClick=hidemenu </script> <script language="Javascript" type="text/javascript"> first = 1; last = 3; current = 1; function nextPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; // Show next picture, if last, loop back to front if (current == last) { current = 1; } else { current++ } object = document.getElementById('slide' + current); object.style.display = 'block'; } function previousPicture() { // Hide current picture object = document.getElementById('slide' + current); object.style.display = 'none'; if (current == first) { current = last; } else { current--; } object = document.getElementById('slide' + current); object.style.display = 'block'; } </script> Header & footer <div class="tablebg"> <div style="border-left:15px solid #FDD017; border-right:15px solid #FDD017; padding-left:3px; padding-right:3px; "> <div style="border-left:15px solid #FDD017; border-left:10px solid #463D36; border-right:10px solid #463D36; padding-left:5px; padding-right:5px;"> <div class="submenu" align="center"> <a href="http://z13.invisionfree.com/multiplayer/index.php">index</a> <a href="http://z13.invisionfree.com/multiplayer/index.php?act=Search&f=">search</a> <a href="http://z13.invisionfree.com/multiplayer/index.php?act=Help">help</a> <a href="http://z13.invisionfree.comxf/multiplayer/index.php?act=Members">members</a> <a href="http://z13.invisionfree.com/multiplayer/index.php?act=calendar">calendar</a></div></align> <% BOARD HEADER %> </div> <% NAVIGATION %> <% BOARD %> <% STATS %> [*CODE] FOOTER----<div style="padding-left:45px;"></div> </div> </div> <script type='text/javascript' language='JavaScript'> <!-- // Remove 'Welcome back' text by ticlo // http://s4.invisionfree.com/Digitalized/ function removeWelcomeBack() { var c, n; var e = document.getElementsByTagName('DIV'); for (n = 0; n < e.length; n++) { if (e[n].innerHTML.indexOf('Welcome back; your last visit was on') != -1) { for (c = e[n].firstChild; c; c = c.nextSibling) { if ((c.nodeName == '#text') && (c.nodeValue.indexOf('Welcome back; your last visit was on') != -1)){ c.parentNode.removeChild(c); return; }}}}}; removeWelcomeBack(); // --> </script> <script type="text/javascript"> <!-- /* Remove Latest news Coded By Greg/Moose Don't edit or repost */ var div = document.getElementsByTagName('div'); for(d=0;d<div.length;d++){ if(div[d].getElementsByTagName('b').length == 1 && div[d].getElementsByTagName('a').length == 1 && div[d].getElementsByTagName('b')[0].innerHTML.match(/latest news:\s+<a/i)){ div[d].getElementsByTagName('b')[0].style.display = "none"; if(div[d].getElementsByTagName('br')[0]){ div[d].getElementsByTagName('br')[0].style.display = "none"; }}} //--> </script> I have no idea which of those I have to edit to expand the width. If anyone could help I'd appreciate it! Edited by Vanille, Nov 20 2013, 09:45 PM.
|
![]() |
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · zIFBoards - Skinning & Code Support · Next Topic » |







8:56 PM Jul 10