Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

Pages: (2) 1 2  ( Go to first unread post ) Add ReplyNew TopicNew Poll

 Skin coding question., Help appreciated.
#
http://pwetestsite.jcink.net/index.php?

/***********************************
CFS BY MISS TEXAS
***********************************/
.new-section:before, .new-section:after { content: " "; display: table; }
.new-section:after { clear: both; }
.new-section { *zoom: 1; background-color: #1C1A1A; padding: 10px;}
#indexcontainer{
width:630px;
margin: 2px;
height: 310px;
padding: 10px;
background-color: #0d0d0d;
float: center;
display: inline-block
vertical-align: bottom;
}
float: center


Can anyone help me figure out how to center the forums and not make them lean to the left or right? I've tried what I know so far nothing has worked.

PM
#
Find this in your CSS:

#main{width:1000px; height:100%; position: relative; center: 0px; left: 250px;}

Change it to this:

#main{position:relative; margin:0 auto}

If you want to center the whole board. If you're just looking to center the forums themselves, find this:

#indexcontainer{
width:630px;
margin: 2px;
height: 310px;
padding: 10px;
background-color: #0d0d0d;
float: center;
display: inline-block
vertical-align: bottom;
}

Change it to this:

#indexcontainer{
width:630px;
margin: 2px auto;
height: 310px;
padding: 10px;
background-color: #0d0d0d;
display: inline-block
vertical-align: bottom;
}

This post has been edited by owl: Jun 15 2017, 10:32 PM

signature
user posted image
#
Thank you.
I have a follow up question if anyone can help.

http://pwetestsite.jcink.net/index.php?

I am trying to get the green scroll bar with the marquee text to be placed underneath the banner where the grey one is but I can not find where to put it in the coding.

http://prntscr.com/flofj8

Also, how do I add a background to the skin? I can not find the background-url tag anywhere to add something?

This post has been edited by Mir88: Jun 19 2017, 01:09 PM
PM
#
1. The grey one is the site ad, so you're probably going to want to put the marquee above the <% BOARD HEADER %>

2. Find this:

body {
font-family: 'Calibri', sans-serif;
font-size: 10px;
color: #C4C4C4; margin:0px;
padding:0px;
background-color:#0D0D0D;
text-align:center;
}

And change it to this (include the background URL you want where indicated):

body {
font-family: 'Calibri', sans-serif;
font-size: 10px;
color: #C4C4C4; margin:0px;
padding:0px;
background:#0D0D0D url('BACKGROUND URL HERE');
text-align:center;
}

signature
user posted image
#
Awesome thank you!

Could you help me figure out how to make the side bar bigger and not look so squished? I would like to keep more well proportioned than all cluttered thank you for all the help so far.
PM
#
What do you mean bigger? Like, wider?

signature
user posted image
#
Yes wider so it's not so squished. http://files.b1.jcink.com/html/emoticons/smile.gif
PM
#
First you need to go into your HTML (board wrapper) and change this:

<div id="leftNav" style="z-index: 51; width: 235px;">

To this:

<div id="leftNav">

It's going to look more squished for a second. Then go into your CSS (stylesheet) and change this:

#leftNav {
width: 100px;
height: 100%;
top: 0px;
right: auto;
left: 0px;
position: fixed;
_position: absolute;
}

To this:

#leftNav {
width: 300px;
height: 100%;
top: 0px;
right: auto;
left: 0px;
position: fixed;
_position: absolute;
}

I've underlined the number changed - if you want it even wider than that, simply make the number bigger.

signature
user posted image
#
#leftNav {
width: 2000px;
height: 100%;
top: 0px;
right: auto;
left: 0px;
position: fixed;
_position: absolute;
}

I changed the underlined thing and did the board wrapper change as well but no result? Did I mess something up?
PM
#
It looks like it might be something to do with the Javascript code you're using for the sidebar. Can you post that here?

And, I mean, presumably, it's Javascript. I only know a little Javascript, but I think I can at least narrow it down to there, and if you can post the relevant info here then I might be able to help narrow it down further / someone with more Javascript knowledge might be able to help.

While I'm asking for relevant info, however, about how wide are you hoping to make the sidebar?

signature
user posted image
#
/***********************************
Sidebar
************************************/

#main{width:1000px; height:100%; position: relative; center: 0px; left: 250px;}

#leftNav {
width: 2000px;
height: 100%;
top: 0px;
right: auto;
left: 0px;
position: fixed;
_position: absolute;
}
#leftNavTog {
position: sticky;
width: 210px;
height: 30px;
left: 20px;
bottom: 15px;
z-index: 999;
cursor: pointer;
background-position: right center;
font-family: 'open sans condensed', 'calibri', sans-serif;
font-size: 18px;
color: #217d34;
font-weight: 700;
}
#leftNavContent {
position: fixed;
left: 20px;
width: 230px;
height: 100%;
overflow: auto;
text-align: center;
padding-top: 30px;
color: #FFFFFF;
}
.flsbtitle a{
font-family: 'open sans condensed', 'calibri', sans-serif;
font-weight: 700;
color: #217d34;
line-height:100%;
font-size: 24px;
text-transform: uppercase;
}
.flsbtitle:first-letter{color:#fff;}
.flsbdesc{
padding: 0px 10px 0px 15px;
margin: 5px 0px 10px 0px;
background-color: #302F2F;
color: #c4c4c4;
text-align: justify;
font-size: 10px;
line-height: 110%;
max-height: 100px;
border-bottom: 15px solid #302F2f;
border-top: 15px solid #302F2f;
border-right: 15px solid #302F2f;
overflow: auto;
}
.flsblink{
width: 103px;
margin: 1px;
display: inline-block;
background-color: #217d34;
color: #c4c4c4;
padding: 4px 0px;
line-height: 100%;
font-family: 'calibri', sans-serif;
font-size: 8px;
text-transform: uppercase;
}
/***********************************





255 for the width most likely?
PM
#
Sorry, I think I worded that a little confusingly. Can you go into your board wrappers, and find something that starts like this:

CODE
<script type="text/javascript">
/* Peekaboo Side Tables (Left Side) by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */


And copy and paste everything that follow up until, and including, the next </script> ? Looking in the source code I believe we should be able to fix it from there.

signature
user posted image
#
<script>
customIndex.init({
page: "<!-- |input_act| -->",
html: "<div id='indexcontainer'><div class='indextitle'>{%link}</div><table><tr><td><div class='indexstats'><div class='statnumber'>{%topics}<div class='stattitle'>topics</div></div><div class='statnumber'>{%replies}<div class='stattitle'>replies</div></div></div><div class='indexstats'><div class='indexlastpost'>{%lp-title}<br> by {%lp-author}</div><div class='lastpostdate'>{%lp-date}</div></div></td><td><div class='indexdesc'>{%description}</div></td></tr></table></div>"
});
</script>
<script type="text/javascript">
/* Peekaboo Side Tables (Left Side) by SubDevo */
/* Global Footer - Please leave this header intact. Do not repost. */
/* interoceandesigns.proboards.com or lsdp.proboards.com */

var L_memOnly=0; // Members Only? 1=Yes, 0=No
var L_TogWidth=24; // Width of Clickable area.
var L_SideWidth=210; // Width of content.

function setLnavCook(a,http://files.b1.jcink.com/html/emoticons/cool.gif{ var n=(http://files.b1.jcink.com/html/emoticons/cool.gif?"L_NavTop=":"L_NavOpen=";
document.cookie=n+a+"; expires=Sat, 17 Jan 2050 12:12:12 UTC; path=/";
}
function scrollLT(){L_NavH.scrollTop=(document.cookie.match(/L_NavTop=(\d+)/))?RegExp.$1:0;}
function togL_Nav(a){ var m=document.body,b=L_Nav.style,c=L_NavH.style;
if(a!=true){if(is_IE){b.height=m.clientHeight;}
b.left=parseInt(m.scrollLeft)+"px"; b.top=parseInt(m.scrollTop)+"px";
}else{
if(c.display=="none"){c.display=""; b.width=L_wT;setLnavCook(1);
if(L_NavFirst){L_NavFirst=false;setTimeout("scrollLT()",200);}else{scrollLT();}
}else{setLnavCook(0);c.display="none"; b.width=L_TogWidth;}
}} var L_wT=1+L_TogWidth+L_SideWidth+"px",is_IE=(document.uniqueID)?true:false;
var L_Nav=document.getElementById ("leftNav"),L_NavH=document.getElementById ("leftNavContent");
if(!L_memOnly||pb_username!="Guest"){ L_Nav.style.display=""; var L_NavFirst=true;
if(document.cookie.match(/L_NavOpen=1/)){togL_Nav(true);}
if(is_IE){window.attachEvent("onscroll", togL_Nav); window.attachEvent("onresize", togL_Nav);}
}


</script>

<script>$('#logo a img[src="style_images/1/spacer.gif"]').replaceWith('<!-- |board_name| -->');</script>
</div>
</div></div>
</body>
</html>




Hope this helps.
PM
#
So in the above code I'd try changing:

CODE
var L_SideWidth=210; // Width of content.


to
CODE
var L_SideWidth=255; // Width of content.


And then in your CSS find this:

CODE
#leftNav {
width: 2000px;
height: 100%;
top: 0px;
right: auto;
left: 0px;
position: fixed;
_position: absolute;
}
#leftNavTog {
 position: sticky;
 width: 210px;
 height: 30px;
 left: 20px;
bottom: 15px;
z-index: 999;
 cursor: pointer;
 background-position: right center;
font-family: 'open sans condensed', 'calibri', sans-serif;
font-size: 18px;
color: #217d34;
font-weight: 700;
}


And change it to this:

CODE
#leftNav {
width: 255px;
height: 100%;
top: 0px;
right: auto;
left: 0px;
position: fixed;
_position: absolute;
}
#leftNavTog {
 position: sticky;
 width: 255px;
 height: 30px;
 left: 20px;
bottom: 15px;
z-index: 999;
 cursor: pointer;
 background-position: right center;
font-family: 'open sans condensed', 'calibri', sans-serif;
font-size: 18px;
color: #217d34;
font-weight: 700;
}


And let me know if anything needs to be adjusted from there.

This post has been edited by owl: Jun 20 2017, 11:49 PM

signature
user posted image
#
Changed still no increase on the side bar. Wonder if it's even possible then the way it's coded?
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

OptionsPages: (2) 1 2  Add ReplyNew TopicNew Poll