Profile
Personal Photo

No Photo

Options
Custom Title
Cucco Herder
Personal Info
Location: No Information
Born: 8 June 1991
Website: No Information
Interests
No Information
Other Information
Gender:: Female
Test:: No Information
Statistics
Joined: 09/24/2014
Status: (Online) (Active in topic: Forum HTML Templates?)
Last Seen: 54 minutes ago
Local Time: May 23 2018, 07:21 PM
29 posts (0 per day)
( 0.02% of total forum posts )
Contact Information
AIM No Information
Yahoo No Information
GTalk No Information
MSN No Information
SKYPE No Information
Unread Message Message: Click here
Unread Message Email: Private
Signature
View Signature

freakshow

Members

Topics
Posts
Comments
Friends
Video
My Content
May 9 2018, 08:54 PM
I'm trying to code my own forum layout, which I have had no problem doing in the past. However, I'm having a lot of trouble with the layout of the forum this time. I'm trying to get the boards to align with three in a single row, like this, but no matter what I've tried, they won't cooperate. I'm also having a strange issue where only the first board is included in the category toggle. If you click the plus/minus sign, it only hides the first forum.

Forum: https://symra.jcink.net/index.php
Board Wrappers:
CODE
<!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<link href="https://fonts.googleapis.com/css?family=Cookie" rel="stylesheet">
   </head>
   <body>

<div id="n-toggle"></div>
<div id="n-cbox">

content goes here!

<table align="center">
<tr>
<td colspan="2">
<div id="sidehead">Title</div>
texty text
</td>
</tr>
<tr>
<td>
<div id="doublesidehead">Title</div>
texty text
</td>
<td>
<div id="doublesidehead">Title</div>
texty text
</td>
</tr>
<tr>
<td colspan="2">
<div id="sidehead">Title</div>
texty text
</td>
</tr>
</table>

</div>
<div id="wrapper">
    <div id="logo">
 <a href="index.php"><{LOGO}></a>
 <div id="searchbar">
     <div class="search-container">
  <form action="index.php?act=Search&amp;CODE=01" method="post">
   <input type="hidden" name="forums" value="all">
   <input type="text" name="keywords" class="search-input" onfocus="this.value=''" value="Search...">
   <input type="submit" class="search-button">
         </form>
     </div>
 </div>
    </div>
    <% BOARD HEADER %>
    <div id="innerwrapper">
     <div id="navi">
     <% NAVIGATION %>
     </div>
     <% BOARD %>
     <div id="skin_selector">
         <% SKIN_SELECTOR %>
     </div>
     <% COPYRIGHT %>
     <script>$('#logo a img[src="style_images/1/spacer.gif"]').replaceWith('<!-- |board_name| -->');</script>
    </div>
</div>

<script type='text/javascript'>
// toggle by nicole/thunderstruck of cttw.jcink.net
$(document).ready(function () {  
   var cookieName = 'tCpcO652018n';

   function setCookie(key, value) {
       var expires = new Date();
       expires.setTime(expires.getTime() + 31536000000); //1 year
       document.cookie = key + '=' + value + ';expires=' + expires.toUTCString();
   }

   function getCookie(key) {
       var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
       return keyValue ? keyValue[2] : null;
   }
   if (getCookie(cookieName) === '1') {
       $('#n-cbox').show();
   } else if (getCookie(cookieName) === '0') {
       $('#n-cbox').hide();
   } else {
       setCookie(cookieName, '1');
       $('#n-cbox').show();
   }
   $('#n-toggle').on('click', function () {
       if ($('#n-cbox').is(':visible')) {
           $('#n-cbox').fadeOut(300);
           setCookie(cookieName, '0');
       } else {
           $('#n-cbox').fadeIn(300);
           setCookie(cookieName, '1');
       }
   });
});
</script>
   </body>
</html>


CSS:
CODE
/*=============================================== *
* Jcink.com Forum Hosting Stylesheet
* ==============================================
* #Version: 1.0.2
*=============================================== */

html { overflow-x: auto; }
form { display:inline; }

/****************************************
Body Background & Text Style
*****************************************/

body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #222; margin:0px;
padding:0px;
       background-image: url('https://i.imgur.com/wvTBREs.png');
text-align:center;
}

/****************************************
  Table Styles
*****************************************/

table, tr, td {
font-family: Arial, sans-serif;
font-size: 12px;
color: #222;
}

/****************************************
  Board Width
*****************************************/

#wrapper {
text-align:left;
       width: 80%;
       margin: 20px auto 30px;
       background: transparent;
       padding: 5px;
}

#innerwrapper {
padding: 0 10px;
}

/****************************************
  Link colors
*****************************************/

a:link, a:visited, a:active {
text-decoration: none;
color: #800000;
}
a:hover {
color: gray;
text-decoration: none;
}


/****************************************
  Profile styles
*****************************************/

#profilename {
font-size:28px;
font-weight:bold;
}

#photowrap {
padding:6px;
}

#phototitle {
font-size:24px;
border-bottom:1px solid black;
}

#photoimg   {
text-align:center; margin-top:15px;
}

/****************************************
  UserCP/My Controls styles
*****************************************/

#ucpmenu {
line-height:150%;
width:22%;
border:1px solid #555;
background-color: #EFEFEF;
}

#ucpmenu p  {
padding:2px 5px 6px 9px;
margin:0px;  
}

#ucpcontent {
background-color: #EFEFEF;
border:1px solid #545454;
line-height:150%; width:auto;
}

#ucpcontent p  {
padding:10px;
margin:0px;
}

/****************************************
 Logo Strip
*****************************************/

#logostrip {
display: none;
}

#logo {
text-align: left;
margin-top: 5px;
padding: 5px;
}


#logo a, #logo a:hover {
font-size: 50px;
text-decoration: none;
color: #800000;
font-family: georgia;
font-style: italic;
text-align: center;
}

/****************************************
 Search Bar
*****************************************/

#searchbar {
display: block;
float: right;
position: relative;
right: 10px;
top: 8px;
}

#searchbar .search-container {
   background-color: #FFFFFF;
   box-shadow: 0 1px 3px rgba(0,0,0,0.4) inset;
   border: 1px solid #D8D8D8;
   display: block;
   height: 26px;
   position: relative;
   width: 200px;
}

#searchbar .search-input {
background: none repeat scroll 0 0 transparent;
border: 0;
color: #808080;
font-size: 12px;
width: 192px;
height: 26px;
font-family: Arial, sans-serif;
padding: 1px 0 0 8px;
}

#searchbar .search-input:focus {
   color: #000000;
}

#searchbar .search-button {
background: #800000 url(http://files.b1.jcink.com/themes/default/magnifying-glass.png) no-repeat 50% 50%;
border: 0;
bottom: 0;
margin: 0;
border-radius: 0;
display: block;
height: 26px;
padding: 0;
position: absolute;
right: 0;
text-indent: -3000em;
top: 0;
width: 26px;
cursor: pointer;
box-shadow: none;
}

/****************************************
 Navigation Bar / Submenu
*****************************************/

#submenu  {
font-size: 13px;
border: solid #555;
       border-width: 1px 0;
background-color: #800000;
       background-image: url(http://files.b1.jcink.com/themes/default/red-gradient-glass.png);
       background-position: center center;
       margin-bottom: 3px;
}

#submenu img {
display: none;
}

#submenu a:link, #submenu a:visited, #submenu a:active {
text-decoration: none;
color: #fff !important;
       padding: 7px 7px;
       font-weight: bold;
}

#submenu a:hover {
color: #fff !important;
text-decoration: underline;
}

#navi br {
display: none;
}

#navstrip  {
font-weight:bold;
padding:6px 0px 16px 0px;
}

/****************************************
  Calendar styling
*****************************************/

.caldate   {
text-align:right;
font-weight:bold;
font-size:11px;
color:#555;
background-color:#F2F2F2;
padding:4px; margin:0px;
}

#calendarname {
font-size:22px;
font-weight:bold;
}

#padandcenter {
margin-left:auto;
margin-right:auto;
text-align:center;
padding:14px 0px 14px 0px;
}


/**************************************************
User Links Menu (Messages / View new posts / etc )
***************************************************/

#userlinks {
border: 1px solid #545454;
background-color: #F2F2F2;
list-style: none;
width: 960px;
margin: 0 auto;
background-image:url(http://files.b1.jcink.com/themes/default/white-gradient.png);
}

#userlinks td {
color: #333;
}

#userlinks a {
text-decoration: underline; padding: 1px;
}

#userlinks a:hover {
text-decoration: none;
}


/****************************************
  Topic View styles
*****************************************/

.activeuserstrip {
background-color: #D6D6D6;padding:6px
}

.normalname {
font-size: 12px;
font-weight: bold;
color: #003;
}

.normalname a {
font-size: 12px;
}

.unreg {
font-size: 11px;
font-weight: bold;
color: #900;
}

.post1 {
background-color: #F2F2F2;
}

.post2 {
background-color: #F2F2F2;
}

.postdetails {
font-size: 10px;
}

.postcolor   {
font-size: 12px; line-height: 160%;
}

.postlinksbar {
       padding: 1px 5px;
background-color:#CCCCCC;
padding:1px;
margin-top:1px;
font-size:10px;
background-image:url(http://files.b1.jcink.com/themes/default/thin-gray-gradient.png);
}

.signature   {
font-size: 10px;
color: #339;
line-height:150%;  
}


/*******************************
Pagination e.g. [1],2,3 ...
*******************************/

.pagination .pagination_current, .pagination a {
    padding: 2px 5px;
}

.pagination a:link, .pagination a:visited, .pagination a:active {
    border: 1px solid #800000;
    border-radius:3px;
    background-color:#740300;
    padding-left:6px;
    padding-right:6px;
    color:#ffffff;
    text-decoration:none;
    box-shadow: 0pt 2px 3px rgba(0, 0, 0, 0.4);
}

.pagination a:hover {
background: #EFEEEE;
text-decoration: none;
color:#000000;
box-shadow: 0pt 2px 3px rgba(0, 0, 0, 0.4);
background-image:url(http://files.b1.jcink.com/themes/default/gray-gradient.png);
}

.pagination .pagination_current {
    background: none repeat scroll 0% 0% #FFFFFF;
    border: 1px solid #545454;
    border-radius:3px;
    padding-left:6px;
    padding-right:6px;
    background-image:url(http://files.b1.jcink.com/themes/default/gray-gradient.png);
}

.pagination_first, .pagination_last, .pagination_page {
    background: none repeat scroll 0% 0% #740300;
    border: 1px solid #800000;
}

.pagination_pagetxt {
   display:none;
}

/****************************************
  Global general table/div row styles
*****************************************/

.row1,.row3,.row4,.row2 {
background-color: #EFEFEF;
padding: 5px;
}

#boardstats .row2 {
text-align: center;
}

.darkrow1 {
background-color: #D6D6D6; color:black;
}

.darkrow2 {
background-color: #D6D6D6; color:black;
}

td.darkrow2 {
display: none;
}

.darkrow3 {
background-color: #D6D6D6;
color: #000;
padding: 3px;
}

.hlight { background-color: #EFEFEF; }
.dlight { background-color: #EFEFEF; }

/****************************************
  Top table bars / gradient holders
*****************************************/

.maintitle {
background-color: #333a3d;
color: #737648;
font-size: 30px;
font-family: 'Cookie', cursive;
font-style: italic;
padding: 15px;
text-align: center;
}

.maintitle a:link, .maintitle  a:visited, .maintitle  a:active {
text-decoration: none; color: #737648 !important;
}

.maintitle a:hover {
text-decoration: underline;  
}

/****************************************
 Bar directly below the maintitles
*****************************************/

.titlemedium {
display: none;
font-weight:bold; color:#222;
padding: 2px 6px; margin:0px;
background-color:#D8D8D8;
       background-image: url(http://files.b1.jcink.com/themes/default/gray-gradient.png);
}

.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active  {
text-decoration: none;
color: #222;
}

/****************************************
 Table & Div Borders
*****************************************/

.tableborder {
background-color: #C0C0C0;
border:1px solid #555; padding:0px; margin:0;
}

.tablefill {
background-color: #EFEFEF;
border:1px solid #555;
padding:6px;
}

.tablepad {
background-color: #EFEFEF;
padding:6px;
}

.tablebasic {
width:100%; padding:0; margin:0px; border:0px;
}

.plainborder {
border:1px solid #555;
background-color: #EFEFEF;
}

/****************************************
 QUOTE and CODE BBCode boxes
*****************************************/

#QUOTE {
white-space:normal;
font-family: Arial, sans-serif;
font-size: 11px;
color: #333;
background-color: #EFEFEF;
border: 0px;
padding:2px;
border:1px solid #555;
margin-top:2px;
}

#CODE  {
white-space:normal;
font-family: Courier, Courier New, Verdana, Arial;  
font-size: 11px;
color: #333;
background-color: #EFEFEF;
border: 0px;
padding:2px;
border:1px solid #555;
margin-top:2px;
}


/**********************************************
 Input buttons, e.g. submit, text input, etc
***********************************************/

.button-large {
background: #800000 url(http://files.b1.jcink.com/themes/default/red-gradient.png);  
border-radius: 3px;
       padding: 5px 12px;
text-align:center;
margin:0px 5px 0px 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
       color: #FFFFFF;
font-weight: bold;
       min-width: 75px;
       display: inline-block;
}


.button-small {
background: #800000 url(http://files.b1.jcink.com/themes/default/red-gradient.png);
border-radius:3px;
color: #FFFFFF;
font-weight: bold;
font-size: 11px;
margin: 3px;
padding: 4px 7px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
text-decoration: none;
       min-width: 50px;
       max-width: 80px;
}

.post-buttons-top { margin-top: 3px; }

.button-large.closed {
background: url(http://files.b1.jcink.com/themes/default/white-gradient.png);
       padding: 7px 12px;
text-align:center;
margin:0px 5px 0px 5px;
       border: 1px solid #d8d8d8;
       color: #660000;
font-weight: bold;
}

.forminput, .codebuttons, .textinput, .radiobutton, .checkbox {
border-radius: 2px;
background: #FFF; border: 1px solid #545454;
color: #000;
font-family: Arial, sans-serif;
font-size: 12px;
padding: 2px;
vertical-align: middle;
box-shadow: 0 1px 3px rgba(0,0,0,0.4) inset;
}


input[type=submit], input[type=button], input[type=reset] {
background: #800000 url(http://files.b1.jcink.com/themes/default/red-gradient.png);
border-radius:3px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
margin: 3px;
padding: 2px 6px;
text-decoration: none;
border: none;
}

.codebuttons  {
font-size: 10px;
}


/****************************************
 Form table cell styles, left/right/top
*****************************************/

.pformstrip {
background-image:url(http://files.b1.jcink.com/themes/default/gray-gradient.png);
background-color: #D6D6D6;
color:black; font-weight:bold;
padding: 2px 5px;
margin-top:1px
}

.pformleft  {
background-color: #EFEFEF;
padding:6px;
margin-top:1px;width:25%;
border-top:1px solid #545454;
border-right:1px solid #545454;
}

.pformleftw {
background-color: #EFEFEF; padding:6px;
margin-top:1px;width:40%;
border-top:1px solid #232323;
border-right:1px solid #232323;
}

.pformright {
background-color: #EFEFEF;
padding:6px; margin-top:1px;
border-top:1px solid #232323;
}


/****************************************
Tabs on the portal profiles + sections
*****************************************/

.opentab {
color: #FFF;
padding:8px;float: left; width: auto;
background-color: #800000;
       background-image: url(http://files.b1.jcink.com/themes/default/red-gradient.png);
margin-top:3px;
margin-right:2px;
font-size:11px;
border: #545454 1px solid;
}

.closedtab {
color: #FFF;
padding:7px;float: left;width: auto;
background-color: #800000;
       background-image: url(http://files.b1.jcink.com/themes/default/red-gradient.png);
margin-top:6px;
margin-right:2px;
font-size:11px;
border-top:   #545454 1px solid;
border-right: #545454 1px solid;
border-left:  #545454 1px solid;
}

.positiontab {
height: 34px; margin-left: 2px;
}

/****************************************
  Delete all cookies / mark read
*****************************************/

#delcookiesrow, #mark-as-read-subto {
background-color: #EFEFEF;
border: 1px solid #545454;
font-size: 10px;
padding: 5px;
       width: 260px;
       float: right;
       margin-top:-3px;
       padding-left:1px;
}

#mark-as-read-subto {
float: none;
padding-top: 3px;
}


/*******************************
    Board Statistics Links
*******************************/

.toplinks a {
color: #ffffff;
font-size: 11px;
text-decoration: none;
}

.toplinks {
margin: 0 11px -37px 0;
text-align: right;
color: transparent;
}

/*******************************
Mini Profile Seperators
*******************************/

.postbit {
border-bottom: solid 1px #C0C0C0;
color: black;
background: #EFEFEF;
font-size: 11px;
       padding: 6px 7px;
}

/********************************
Miscellaneous
********************************/

/* image tag styles */
img        { vertical-align:middle; border:0px }
img.attach { border:2px outset #555;padding:2px }

/* Forum Descriptions */
.desc { font-size:11px; color: #000; }

/* Edited by text */
.edit { font-size: 9px }

/* Topic Macros */

.wrapmini { float: left; }

/* Warning CSS */
.warngood { color:green }
.warnbad  { color:red }

/* Skin selector dropdown */
#skin_selector {
margin: 10px 0;
}


/* Online users list row */
.thin {
padding:6px 0px 6px 0px;
line-height:140%;
margin:2px 0px 2px 0px;
border-top:1px solid #545454;
border-bottom:1px solid #545454;
}

/* Latest news area */
.newstext {
background-color: #EFEFEF;
border: 1px solid #555;
padding: 6px 6px 2px 6px;
margin-bottom: 10px;
}

/* Highlighted text in search */
.searchlite {
color:#F00;
font-weight:bold;  
background-color:#FF0;
}

/****************************************
Mobile-specific Styles
*****************************************/

#mobile {
background-color: #FBFBFB;
}

/***********************************
Copyright: Removal is against Terms
************************************/

.copyright {
font-size: 10px; line-height: 12px;
}


/************************************************    CUSTOM CSS    *************************************************/

.new-row {width: 900px; display: inline-block;}

.subforums-macro, .subforums-macro a, .subforums-macro a:link { display: none; }

.blogo {
width: 1050px;
height: 500px;
background-image: url('https://i.imgur.com/J6RS3L6.png');
background-position: center;
background-repeat: no-repeat;
color: #cccccc;
font-family: 'Cookie', cursive;
letter-spacing: 2px;
line-height: 12px;
padding: 0px;
}

/** ID **/
#fboard {
width: auto;
background-image: url('http://i.imgur.com/e6Hjc3M.png');
padding: 5px 2px;
margin: 5px;
display: inline-table;
}
#ftit, #ftit a, #ftit a:link {
color: #181c1e;
font-size: 14px;
font-family: georgia;
font-style: italic;
padding: 10px;
border-bottom: 1px solid #181c1e;
margin-bottom: 2px;
}
#fdesc {
width: 250px;
text-align: justify;
padding: 5px;
}
#lastpost {
background-color: #bbbbbb;
color: #333a3d;
font-size: 9px;
text-align: center;
padding: 2px;
}
#laspost a, #lastpost a:link {
color: #0f1213;
font-weight: bold;
}
#subbies {
width: auto;
text-align: center;
}
#subbies a, #subbies a:link {
color: #333a3d;
font-size: 9px;
text-align: center;
padding: 4px;
}
#tp {
width: 30px;
height: 30px;
background-color: #0f1213;
color: #cccccc;
font-size: 11px;
font-family: georgia;
font-style: italic;
text-align: center;
padding: 15px;
border-radius: 80px;
}

/****************************************
  TOGGLE SIDEBAR
*****************************************/
#n-toggle {
   word-break: break-word;
   display: inline-block;
   cursor: pointer;
   text-align: center;
   box-sizing: border-box;
   position: fixed;
   z-index: 1000;
   text-transform: uppercase;
   font-family: inherit;
   font-size: inherit;
   width: auto;
   height: 98%;
   background: #333a3d;
   color: #eee;
   padding: 5px;
   top: 10px;
   left: 0;
   right: auto;
   bottom: auto;
}

#n-cbox {
   position: fixed;
   display: none;
   z-index: 999;
   background: #333a3d;
   top: 10px;
   left: 10px;
   right: auto;
   bottom: auto;
   width: nullpx;
   padding: 10px;
}

#sidehead {
width: 230px;
background-color: #737648;
color: #cccccc;
font-size: 11px;
font-style: italic;
padding: 4px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 2px;
}

#doublesidehead {
width: 106px;
background-color: #737648;
color: #cccccc;
font-size: 11px;
font-style: italic;
padding: 4px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 2px;
display: block;
}


HTML Template:
CODE

<div id="row-<!-- |forum_id| -->" alt="" class="new-row">
<table align="center" id="fboard">
<tr>
<td colspan="2">
<div id="ftit">
<!-- |name| -->
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="subbies">
<!-- |subforums_list| -->
</div>
</td>
</tr>
<tr>
<td>
<!-- |description| -->
</td>
<td>
<div id="tp">
<!-- |total_posts| --><br>posts
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div id="lastpost">
<!-- |last_topic| --> by  <!-- |last_poster| -->  ( <i><!-- |last_post| --></i> )
</div>
</td>
</tr>
</table>
</div>
Sep 26 2016, 02:17 AM
I'm having a lot of trouble with the way my custom profile fields are appearing in the user profiles. I had to delete the default fields that were created beforehand and made entirely new ones, and I'm using Black's Custom Forum Structure code. They're all wonky on the actual site I plan to use the layout on, but on my testing forum they work fine and dandy. I have enabled the options for personal 'portal' style profiles, and for the Unreal Portal, and the fields still won't cooperate.

This is how they're appearing:


and these are the custom field numbers:


all fields have these settings:


If needed, I can also provide the css and custom html that I have in the wrappers and style sheet for the skin being used. Please help! :'c
Mar 14 2016, 04:28 PM
In my main profile where I have the online/offline status displayed, there is a single parenthesis at the beginning of the status. I tried searching through the macros, but I couldn't find anything. Why is it displayed there, and is there any way I can remove it? My board is located here.

Here's a screen shot of where it's appearing.


This is my custom profile code
CODE
customProfile.init({
html: "<div id='probox'><div id='proname'>{%name}</div><table><tr><td>{%avatar}</td><td><div id='prostats'>{%field#10}</div><div id='prostats'>{%field#4}</div><div id='prostats'>{%field#5}</div><div id='prostats'>{%field#6}</div><div id='prostats'>{%field#7}</div><div id='prostats'>{%field#8}</div><div id='prostats'>{%field#9}</div><div id='prostats'>{%field#11}</div><div id='protitle'>Appearance</div><div id='proapp'>{%field#1}</td></tr><tr><td id='progroup'>{%group} is {%status}</td></tr></table></div>"


and this is the css I have for the online/offline status
CODE
#progroup {
width: auto;
height: auto;
background: #0e0812;
color: #a9a0a7;
font-size: 11px;
font-family: arial;
text-align: center;
padding: 4px;
}


If any more codes are needed, I will provide them.
Aug 2 2015, 12:12 AM
Is there a way to display custom images in custom profile fields?
Aug 1 2015, 11:14 PM
I'm not sure if a forum link is needed for this, but my forum is located here. I'm wondering if there's a way to display items that users hold in their inventory from purchasing items through the IBStore in the custom user profiles and the mini profiles that are displayed next to posts. More specifically, I'm curious as to if it might be possible to do using values. I can provide any wrappers or css if necessary~
Last Visitors


May 20 2018, 07:21 PM



Comments
No comments posted.
Add Comment