Really really weird main profil issue

Black Flag · April 30

For some odd reason, the coding and fields in the html template for the main profile, do not seem to match up with the actual profile on the site visually. And I cannot for the life of me figure out how or why. Any assistance on this would be greatly appreciated as its driving me mad 😭 If anyone is willing to help with this, a link to the site will be provided. I really have no idea what's going on with it.

c.widow · May 2

MyBB? Jcink? What software?

Please provide the code in question.

Black Flag · May 2

Sorry. The software is jcink.

And the html template in question is

<style>
		.g-1 .cp-heart-o:before { content: "\e9e1"!important; }
		.g-2 .cp-heart-o:before { content: "\e9e1"!important; }
		.g-3 .cp-heart-o:before { content: "\e9e1"!important; }
		.g-4 .cp-heart-o:before { content: "\ed18"!important; }
		.g-5 .cp-heart-o:before { content: "\ec28"!important; }
		.g-6 .cp-heart-o:before { content: "\ec02"!important; }
		.g-7 .cp-heart-o:before { content: "\eccd"!important; }
		.g-8 .cp-heart-o:before { content: "\eb17"!important; }
                .g-9 .cp-heart-o:before { content: "\eae9"!important; }
                .g-10 .cp-heart-o:before { content: "\ec03"!important; }
                .g-11 .cp-heart-o:before { content: "\ea3d"!important; }
                .g-12 .cp-heart-o:before { content: "\eb41"!important; }
                .g-13 .cp-heart-o:before { content: "\ec41"!important; }
                .g-14 .cp-heart-o:before { content: "\ea6a"!important; }
                .g-17 .cp-heart-o:before { content: "\e95b"!important; }
                .g-20 .cp-heart-o:before { content: "\e95e"!important; }
 }
</style>

<div id="mainprofile-ac" class="g-<!-- |g_id| -->">
        <div class="links-ac">
          <span class="x" isempty="link"><a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->"><!-- |posts| --> posts</a></span>
          <span class="x" isempty="link"><a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->&type=topics">topics</a></span>
          <span class="x" isempty="<!-- |field_16| -->"><a href="<!-- |field_16| -->">Ask Thread</a></span>
          <span class="x" isempty="<!-- |field_17| -->"><a href="<!-- |field_17| -->">aesthetics</a></span>
          <span class="x" isempty="<!-- |field_18| -->"><a href="<!-- |field_18| -->">Character Studies</a></span>
          <span class="x" isempty="<!-- |field_15| -->"><a href="<!-- |field_15| -->">Wanted</a></span>
          <span class="x" isempty="link"><a href="<!-- |pm| -->">message</a></span>
        </div>
        <div class="prof-name-ac">
          <span><span class="char-name-ac"><!-- |name| --></span><br><span class="char-mg-ac"><!-- |group| --></span></span>
          <i class="cp cp-wine"></i>
        </div>
        <div class="prof-quick-info-ac">
          <span><!-- |field_2| --></span><i class="cp cp-chevron-right"></i>
          <span><!-- |field_21| --></span><i class="cp cp-chevron-right"></i>
          <span><!-- |field_20| --></span><i class="cp cp-chevron-right"></i>
          <span><!-- |field_22| --></span><i class="cp cp-chevron-right"></i>
          <span>mature content:  <!-- |field_27| --></span>
        </div>
        <div class="prof-av-buttons-ac">
          <button class="tablinks" onclick="openProf(event, 'Basic')" id="defaultOpen"><i class="cp cp-pirate-swords-o"></i> At A Glance</button>
          <button class="tablinks" onclick="openProf(event, 'Psyche')"><i class="cp cp-pirate-skull-o"></i> Psyche</button>
          <button class="tablinks" onclick="openProf(event, 'Freeform')"><i class="cp cp-pistol-o"></i> Freeform</button>
          <button class="tablinks" onclick="openProf(event, 'Tracker')"><i class="cp cp-book-o"></i> Tracker</button>
          <button class="tablinks" onclick="openProf(event, 'Player')"><i class="cp cp-certificate-o"></i> Finis</button>
        </div>
        <div class="prof-main-area-ac">
          <div class="prof-av-ac" style="background-image: url('<!-- |field_7| -->'), url('https://files.jcink.net/uploads2/hoistourflag/_av.png');"></div>
          <div class="prof-tabs-ac">
            <div id="Basic" class="tabcontent"><!-- |field_29| -->
</div>
<div id="Psyche" class="tabcontent">
<!-- |field_30| -->
</div>

<div id="Freeform" class="tabcontent"><!-- |field_31| --></div>
            <div id="Tracker" class="tabcontent">
<div id="tracker-name" data="<!-- |name| -->"></div>
<div id="trackerwrap"></div>
<div id="altwrap"></div>
<div id="historywrap"></div>
<div id="fizztrackercredits"></div>
</div>
            <div id="Player" class="tabcontent">
              <div class = "ooc-ac">
              <div class = "ooc-box-ac">
                <div class = "alias-info-ac">also known as:<span><!-- |field_19| --></span></div>
                <div class = "player-info-box-ac"><icon-bit><i class="cp cp-rose"></i> pronouns</icon-bit> <span><!-- |field_3| --></span></div>
                <div class = "player-info-box-ac"><icon-bit><i class="cp cp-map-o"></i> birthplace</icon-bit> <span><!-- |field_51| --></span></div>
                <div class = "player-info-box-ac"><icon-bit><i class="cp cp-clock-o"></i> timezone</icon-bit> <span><!-- |field_4| --></span></div>
                <div class = "player-info-box-ac"><icon-bit><i class="cp cp-pistol"></i> rating</icon-bit> <span><!-- |field_5| --></span></div>
              </div>
</div>
            </div>
          </div>
        </div>
        <div class="prof-quote-ac"><b>quote: </b><!-- |field_6| --></div>
        <div class = "prof-misc-ac">
          <div class = "prof-rel-ac">
            <div>
            <div class = "prof-rel-info1-ac"><a href = "<!-- |field_14| -->"><!-- |field_12| --></a></div>
            <div class = "prof-rel-image-ac" style = "background-image: url('<!-- |field_11| -->'), url('https://files.jcink.net/uploads2/hoistourflag/beach_gif_3_copy.gif')"></div>
            <div class = "prof-rel-info2"><!-- |field_13| --></div>
            </div>
          </div>
          <div class = "prof-traits-ac">
            <div class = "traitbar-ac">
              <div class = "trait-ext-ac"><span class = "trait-int-ac" style = "width: <!-- |field_34| -->%;"></span>
            </div>
              <div class = "trait-captions-ac"><span><!-- |field_33| --></span><span><!-- |field_32| --></span></div></div>
                <div class = "traitbar-ac">
              <div class = "trait-ext-ac"><span class = "trait-int-ac" style = "width: <!-- |field_38| -->%;"></span>
            </div>
                  <div class = "trait-captions-ac"><span><!-- |field_36| --></span><span><!-- |field_37| --></span></div></div>
                  <div class = "traitbar-ac">
              <div class = "trait-ext-ac"><span class = "trait-int-ac" style = "width: <!-- |field_41| -->%;"></span>
            </div>
                    <div class = "trait-captions-ac"><span><!-- |field_39| --></span><span><!-- |field_40| --></span></div></div>
                    <div class = "traitbar-ac">
              <div class = "trait-ext-ac"><span class = "trait-int-ac" style = "width: <!-- |field_44| -->%;"></span>
            </div>
                      <div class = "trait-captions-ac"><span><!-- |field_42| --></span><span><!-- |field_43| --></span></div></div>
 <div class = "traitbar-ac">
              <div class = "trait-ext-ac"><span class = "trait-int-ac" style = "width: <!-- |field_47| -->%;"></span>
            </div>
              <div class = "trait-captions-ac"><span><!-- |field_45| --></span><span><!-- |field_46| --></span></div></div>
            </div></div>
        <div class = "prof-misc2-ac">
          <div class = "prof-awards-ac">
            <div class = "awards-title-ac">awards</div>
            <div class = "awards-box-ac"><!-- |awards| --></div>
          </div>
          <div class = "prof-img-row-ac">
            <div class = "prof-row-image-ac" style = "background-image: url('<!-- |field_50| -->'), url('https://files.jcink.net/uploads2/hoistourflag/Untitled_1.png')"></div>
            <div class = "prof-row-image-ac" style = "background-image: url('<!-- |field_51| -->'), url('https://files.jcink.net/uploads2/hoistourflag/6b1b61fb-Untitled_1.png')"></div>
            <div class = "prof-row-image-ac" style = "background-image: url('<!-- |field_8| -->'), url('https://files.jcink.net/uploads2/hoistourflag/19c50e94-Untitled_1.png')"></div>
          </div>
        </div>
                  <div class = "prof-bottom-ac"></div>
      </div>

<script>function openProf(evt, profName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(profName).style.display = "block";
  evt.currentTarget.className += " active";
}

// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();</script>

<script>
/* FIZZYELF'S TRACKERS */
///***** start trackers ***///

var trackname = $("#tracker-name").attr("data");

/** auto-tracker code by FizzyElf - <a href="https://fizzyelf.jcink.net/index.php?showtopic=79" rel="nofollow noopener" target="_blank">https://fizzyelf.jcink.net/index.php?showtopic=79</a> **/
async function FillTracker(username, sessionid, page) {

/***  CONFIGURATION AREA ***/
   const includedforums = [];
   const includedforumids = ['59', '6', '15', '16', '17', '18', '19', '21', '49', '50', '60', '61', '62', '63','67','68', '69', '73', '74', '75', '58', '7', '8', '48', '47', '64', '65', '', '66', '88', '54', '55', '56', '57', '36', '40', '41', '70', '71', '72', '42', '82', '43', '44', '45', '46', '37', '51', '52', '53', '38'];
   const altforums = [];
   const altforumids = ['27', '28', '29', '77'];

   const lockedclass = "[title=Closed]";
   const lockedforums = [];
   const lockedforumids = ['30', '33', '34'];

   const indicators = ['cp cp-check-mark', 'cp cp-arrow-right', 'cp cp-lock-o'];
   /*** END CONFIGURATION ***/

   let doc;
   if (sessionid) {
       let href = `/index.php?act=Search&CODE=show&searchid=${sessionid}&result_type=topics&hl=&f=&u=${username.replace(' ', '%20')}&st=${page * 25}`;
       let data = '';
       try {
           console.log(`fetching ${href}`);
           data = await $.get(href);
           console.log('success.');
       } catch (err) {
           console.log(`Ajax error loading page: ${href} - ${err.status} ${err.statusText}`);
           $("#trackerwrap").append('<div class="tracker-item">Search Failed</div>');
           return;
       }
       doc = new DOMParser().parseFromString(data, 'text/html');
   } else {
       page = 0;
       let href = `/index.php?act=Search&q=&f=&u=${username.replace(' ', '%20')}&rt=topics&st=${page * 25}`;
       let data = '';
       try {
           console.log(`fetching ${href}`);
           data = await $.get(href);
           console.log('success.');
       } catch (err) {
           console.log(`Ajax error loading page: ${href} - ${err.status} ${err.statusText}`);
           $("#trackerwrap").append('<div class="tracker-item">Search Failed</div>');
           return;
       }
       doc = new DOMParser().parseFromString(data, 'text/html');

       let meta = $('meta[http-equiv="refresh"]', doc);
       if (meta.length) {
           href = meta.attr('content').substr(meta.attr('content').indexOf('=') + 1);
           sessionid = href.match(/&searchid=([a-zA-Z0-9]+)&/)[1];
           console.log('sessionid = ' + sessionid);
           try {
               console.log(`fetching ${href}`);
               data = await $.get(href);
               console.log('success.');
           } catch (err) {
               console.log(`Ajax error loading page: ${href} - ${err.status} ${err.statusText}`);
               $('#trackerwrap').append('<div class="fizztracker-item">Search Failed</div>');
               return;
           }
       } else {
           let boardmessage = $('#board-message .tablefill .postcolor', doc).text();
           $('#trackerwrap').append(`<div class="fizztracker-item">${boardmessage}</div>`);
           return;
       }
       doc = new DOMParser().parseFromString(data, 'text/html');
   }
   $('#search-topics .tablebasic > tbody > tr', doc).each(function (i, e) {
       if (i > 0) {
           let cells = $(e).children('td');
           const location = $(cells[3]).text();
           const location_id = $(cells[3]).find('a').attr('href').match(/showforum=([^&]+)&?/)[1]
           if (includedforums.includes(location) || altforums.includes (location) || lockedforums.includes(location) || includedforumids.includes(location_id) || altforumids.includes (location_id) || lockedforumids.includes(location_id) ) {
               const locked = $(cells[0]).find(`${lockedclass}`).length || lockedforums.includes(location) || lockedforumids.includes(location_id);
               const title = $(cells[2]).find('td:nth-child(2) > a').first().text();
               const threadDesc = $(cells[2]).find('.desc').text();
               const au = altforums.includes(location) || altforumids.includes(location_id);
               const lastPoster = $(cells[7]).children('b').text();
               const myturnclass = (username == lastPoster) ? indicators[0] : indicators[1];
               const myturn = (username == lastPoster) ? 'Not My Turn' : 'My Turn';

               const href = $(cells[7]).children('a').attr('href');

let postDate = $(cells[7]).html();
   postDate = postDate.substr(0, postDate.indexOf('<br>'));
               const separator = (threadDesc) ? '|' : '';

if (au) {
                   if (locked) {
                       $('#althistorywrap') .append($(`<div class="tracker-item">
						   <div class="status"><i class="cp cp-lock-o"></i></div>
						   <div class = "tracker-item-body">
							   <span class="tracker-title"><a href="${href}">${title}</a></span>
							   <span class = "tracker-info">in ${location} • ${threadDesc}</span>
                               <span class="trackerlast">ended by <span class="trackername">${lastPoster}</span> on <span class="trackerdate">${postDate}</span></span>
								   </div></div>`));
                   } else {
                       $('#altwrap').append($(`<div class="tracker-item">
						   <div class="trackerthread"><span class="status ${myturn.replace(' ', '').toLowerCase()}" aria-described-by="${myturn}"><i class="${myturnclass}"></i></div>
							   <div class = "tracker-item-body">
							   <span class="tracker-title"><a href="${href}">${title}</a></span>
							   <span class = "tracker-info">in ${location} • ${threadDesc}</span>
                               <span class="trackerlast">last post by <span class="trackername">${lastPoster}</span> on <span class="trackerdate">${postDate}</span></span>
								   </div></div>
                 `));
                   }
               } else {
                   if (locked) {
                       $('#historywrap') .append($(`<div class="tracker-item"><div class="status"><i class="cp cp-lock-o"></i></div>
						   <div class = "tracker-item-body">
							   <span class="tracker-title"><a href="${href}">${title}</a></span>
							   <span class = "tracker-info">in ${location} • ${threadDesc}</span>
                               <span class="trackerlast">ended by <span class="trackername">${lastPoster}</span> on <span class="trackerdate">${postDate}</span></span>
								   </div></div>`));
                   } else {
                       $('#trackerwrap').append($(`<div class="tracker-item">
						   <div class="trackerthread"><span class="status ${myturn.replace(' ', '').toLowerCase()}" aria-described-by="${myturn}"><i class="${myturnclass}"></i></div>
							   <div class = "tracker-item-body">
							   <span class="tracker-title"><a href="${href}">${title}</a></span>
							   <span class = "tracker-info">in ${location} • ${threadDesc}</span>
                               <span class="trackerlast">last post by <span class="trackername">${lastPoster}</span> on <span class="trackerdate">${postDate}</span></span>
								   </div></div>`));
                   }
               }
           }
       }

   });

   if ($('#search-topics .tablebasic > tbody > tr', doc).length == 26) {
       page = page + 1;
       FillTracker(username, sessionid, page)
   } else {
       if (!$('#trackerwrap').children().length) {
           $('#trackerwrap').append($('<div class="tracker-item" style="text-indent:0; display: block;">None.</div>'));
       }
       if (!$('#altwrap').children().length) {
           $('#altwrap').append($('<div class="tracker-item" style="text-indent:0; display: block;">None.</div>'));
       }
       if (!$('#historywrap').children().length) {
           $('#historywrap').append($('<div class="tracker-item" style = "display: block;">None.</div>'));
       }
       if (!$('#althistorywrap').children().length) {
           $('#althistorywrap').append($('<div class="tracker-item" style = "display: block;">None.</div>'));
       }
   }
}

FillTracker(trackname);

/// **** end trackers ****////
</script>

<div style = "display:none;"><div id="new-profile" class="g-<!-- |g_id| -->">
  <div class="npro-inner">
    <div class="npro-top">
      <div class="name"> <!-- |name| --> <i class="cp cp-wine"></i></div>
      <div class="details">
        <span><!-- |field_19| --></span> <i class="cp cp-chevron-right"></i>
        <span><!-- |field_21| --></span> <i class="cp cp-chevron-right"></i> 
        <span><!-- |field_20| --> <b>yrs. old</b></span> <i class="cp cp-chevron-right"></i> 
        <span><!-- |field_22| --></span>
      </div>
      <div class="gif">
        <div style="background-image:url('<!-- |field_8| -->'), url('https://files.jcink.net/uploads2/bleakmidwinter/00000finngif.gif');"></div>
      </div>
    </div>
    <div class="npro-mid">
      <div class="npro-mid-left">
        <div class="npro-avatar">
          <div style="background-image:url('<!-- |field_7| -->'), url('https://img.nickpic.host/OJjeJd.png');"></div>
        </div>
        <div class="npro-group">
          <span> <!-- |group| --> </span>
        </div>
      </div>
      <div class="npro-mid-right">
        <div class="npro-stats">

  <div class="tabs">
    <div class="tab">
      <input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
      <label for="tab-1" class="tab-label" data-tippy="Basics"><i class="cp cp-cigarette-o"></i></label>
      <div class="tab-content">
        <!-- |field_30| -->
      </div>
    </div>
    <div class="tab">
      <input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
      <label for="tab-2" class="tab-label" data-tippy="Psyche"><i class="cp cp-atom"></i></label>
      <div class="tab-content">
    	<!-- |field_31| -->
      </div>
    </div>
    <div class="tab">
      <input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
      <label for="tab-3" class="tab-label" data-tippy="Freeform"><i class="cp cp-pistol-o"></i></label>
      <div class="tab-content">
        <div> <!-- |field_31| --> </div>
      </div>
    </div>
    <div class="tab">
      <input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
      <label for="tab-4" class="tab-label" data-tippy="Ego"><i class="cp cp-certificate"></i></label>
      <div class="tab-content">
       <div class="npro-player">
        <name><!-- |field_1| --></name>
        <sname>also known as</sname>
        <deets>
		<span><i class="cp cp-rose"></i> pronouns <b><!-- |field_3| --></b></span>
		<span><i class="cp cp-globe"></i> timezone <b><!-- |field_4| --></b></span>
		<span><i class="cp cp-pistol"></i> content rating <b><!-- |field_5| --></b></span>
       </div>
      </div>
    </div>
  </div>

        </div>
        <div class="npro-bars">
          <div class="npro-bar">
            <span class="one"> <!-- |field_33| --> </span>
            <span class="bar" style="width: <!-- |field_34| -->%;"></span>
            <span class="two"> <!-- |field_32| --> </span>
          </div>
          <div class="npro-bar">
            <span class="one"> <!-- |field_35| --> </span>
            <span class="bar" style="width: <!-- |field_37| -->%;"></span>
            <span class="two"> <!-- |field_36| --> </span>
          </div>
          <div class="npro-bar">
            <span class="one"> <!-- |field_39| --> </span>
            <span class="bar" style="width: <!-- |field_40| -->%;"></span>
            <span class="two"> <!-- |field_38| --> </span>
          </div>
          <div class="npro-bar">
            <span class="one"> <!-- |field_41| --> </span>
            <span class="bar" style="width: <!-- |field_43| -->%;"></span>
            <span class="two"> <!-- |field_42| --> </span>
          </div>
          <div class="npro-bar">
            <span class="one"> <!-- |field_44| --> </span>
            <span class="bar" style="width: <!-- |field_46| -->%;"></span>
            <span class="two"> <!-- |field_45| --> </span>
          </div>
        </div>
      </div>
      <div class="clear"></div>
    </div>
    <div class="npro-bot">
      <div class="npro-awards">
        <div> <!-- |awards| --> </div>
      </div>
      <a href="<!-- |field_14| -->">
	<div class="npro-pgif">
          <span class="npro-pgifr"> <!-- |field_12| --> <deets><!-- |field_13| --></deets></span>
        <div style="background-image:url('<!-- |field_11| -->'), url('https://tv-fanatic-res.cloudinary.com/iu/s--p9zjedmf--/t_slideshow/cs_srgb,f_auto,fl_strip_profile.lossy,q_auto:420/v1533768957/slides/3127/peaky-blinders.gif');"></div>
        </div>
      </a>
      <a href="<!-- |field_14| -->">
	<div class="npro-pgif">
          <span class="npro-pgifr"> Mature Threads? <!-- |field_#| --> <deets><!-- |field_27| --></deets></span>
        <div style="background-image:url('<!-- |field_50| -->'), url('https://tv-fanatic-res.cloudinary.com/iu/s--p9zjedmf--/t_slideshow/cs_srgb,f_auto,fl_strip_profile.lossy,q_auto:420/v1533768957/slides/3127/peaky-blinders.gif');"></div>
        </div>
      </a>
      <a href="?act=Search&CODE=getalluser&mid=<!-- |id| -->&type=posts">
	<div class="npro-pgif">
          <span class="npro-pgifr"> Posts <!-- |posts| --> <deets><!-- |field_#| --></deets></span>
        <div style="background-image:url('<!-- |field_51| -->'), url('https://tv-fanatic-res.cloudinary.com/iu/s--p9zjedmf--/t_slideshow/cs_srgb,f_auto,fl_strip_profile.lossy,q_auto:420/v1533768957/slides/3127/peaky-blinders.gif');"></div>
        </div>
      </a>
      <div class="clear"></div>
    </div>
  </div>
</div>
</div>

<style type="text/css">
.tabs {
    position: relative;
    margin: 0;
    background: var(--bg-dark-2);
    height: 390px;
}
.npro-stats row {
    min-height: 8px;
    padding: 8px 5px;
    margin: 0 0 10px 0;
    border-radius: 6px;
    display: block;
    background-color: var(--bg-dark);
    border: 1px solid var(--bg-dark-2);
    text-align: right;
    line-height: 105%;
    color: var(--text-light);
    font-size: 9px;
}
.npro-stats row tg {
    display: inline-block;
    font-family: var(--font-body);
    float: left;
    color: var(--accent-light);
    font-weight: bold;
    margin-right: 10px;
}
.npro-stats tt {
    position: relative;
    display: block;
    text-align: left;
    font-family: var(--font-body);
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 2px;
    margin-top: 12px;
    margin-left: 10px;
    font-size: 10px;
}
.npro-stats tt span {
    text-shadow: 1px 1px var(--bg-dark), -1px -1px var(--bg-dark), 1px -1px var(--bg-dark), -1px 1px var(--bg-dark);
    border-bottom: 1px solid var(--accent-light);
    color: var(--text-light);
}
.npro-stats bloc {
    padding: 10px;
    margin: -1px 5px 5px 5px;
    display: block;
    background-color: var(--bg-dark);
    border: 1px solid var(--bg-accent-50);
    text-align: justify;
    line-height: 130%;
    color: var(--text-light);
    font-size: 9px;
    border-radius: 4px;
}
.npro-stats bloc + row {margin-top: 12px; }

.tabs::before, .tabs::after {content: ""; display: table; }
.tabs::after {clear: both; }
.tab {float: left; }
.tab-switch {display: none; }
.tab-label {
    position: absolute;
    display: block;
    padding: 16px 16px 11px 16px;
    background: var(--accent-light);
    color: var(--text-bright);
    cursor: pointer;
    border-radius: 10px;
    top: 0;
    left: -60px!important;
    transition: all 0.25s;
    font-size: 22px; z-index: 99;
}
div.npro-stats > div > div:nth-child(1) > label {top: 30px!important;}
div.npro-stats > div > div:nth-child(2) > label {top: 118px!important;}
div.npro-stats > div > div:nth-child(3) > label {top: 208px!important;}
div.npro-stats > div > div:nth-child(4) > label {top: 300px!important;}
div.npro-stats > div > div > label {left: -32px!important; }
.tab-label:hover {top: -0.25rem; transition: top 0.25s; }

.tab-content {position: absolute; z-index: 1; width: 448px; padding: 40px; margin: 10px; height: 290px; left: 0; background: var(--bg-dark-trans-75); opacity: 0; transition: all 0.35s; overflow: auto; border-radius: 10px; }



.tab-switch:checked + .tab-label {
    background: var(--bg-dark-2);
    color: var(--accent-light);
    border-bottom: 0;
    transition: all 0.35s;
    top: 0;
}
.tab-switch:checked + label + .tab-content {z-index: 2; opacity: 1; transition: all 0.35s; }
</style>

<script>$("i:contains('No Information')").remove()</script>

And the coding in the style sheet is as follows


#mainprofile-ac{
  background: var(--bg-accent-50);
}

.x[isempty=""],.x[isempty="<i>No Information</i>"] {
	display:none !important;
	}

.links-ac{
  padding: 20px 35px;
  font-family: var(--font-body);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}

.links-ac a{
    color: var(--text-bright);
  transition: .3s ease;
}

.links-ac a:hover{
  color: var(--accent-light);
}


.prof-name-ac{
  background: var(--bg-dark-trans-75);
  min-height: 150px;
  display: flex;
  align-items: center;
  padding-left: 50px;
  overflow: hidden;
  position: relative;
}

.char-name-ac{
  position: relative;
  border-bottom: 2px solid var(--accent-light);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: var(--font-1920);
  font-size: 40px;
}

.char-mg-ac{
  text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
  padding-top: 5px;
  display: block;
  margin-left: 20px;
}

.prof-name-ac .cp-wine{
    position: absolute;
    right: 92px;
    color: var(--accent-light);
    font-size: 155px;
  margin-top: -35px;
    opacity: .25;
}


.prof-quick-info-ac{
  background: var(--bg-dark-trans-75);
  padding: 15px 35px;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .5px;
  
}

.prof-quick-info-ac .cp-chevron-right{
  color: var(--accent-light);
}

.prof-quick-info-ac:after{
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: var(--bg-dark-trans-75);
  z-index: -1;
}

.prof-quote-ac{
  padding: 10px 15px;
    text-transform: uppercase;
    font-weight: 700;
  font-size: 11px;
  padding-bottom: 15px;
  padding-left: 25px;
}

.prof-quote-ac b{
      font-size: 9px;
    letter-spacing: 1px;
      color: var(--accent-light);
}

.prof-main-area-ac{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 10px;
  
}

.prof-av-ac{
  position: relative;
    background-color: var(--bg-dark-trans-75);
    width: 250px;
    height: 450px;
    margin: 15px 30px;
  outline: 1px solid var(--accent-light);
  outline-offset: 10px;
  background-size: cover;
}

.prof-av-buttons-ac{    display: flex;
    justify-content: space-between;
    align-items: center;
padding: 20px 40px;}

.prof-av-buttons-ac button {
    background: var(--transparent);
    text-transform: uppercase;
    outline: none;
    cursor: pointer;
    transition: .3s ease;
  color: var(--light-bright);
  font-family: var(--body-font);
  font-weight: bold;
  letter-spacing: 1px;
  border: 1px solid var(--text-bright);
  border-radius: 5px;
  padding: 5px 10px;
  margin: 0px;
}

.prof-av-buttons-ac button i{
  font-size: 15px;
  margin-right: 5px;
}

/* Change background color of buttons on hover */
.prof-av-buttons-ac button:hover {
  background-color: var(--bg-dark-trans-75);
  border: 1px solid var(--accent-light);
  color: var(--accent-light);
}

/* Create an active/current tablink class */
.prof-av-buttons-ac button.active {
  background-color: var(--bg-dark-trans-75);
}

/* Style the tab content */
.tabcontent {
  display: none;
  background: var(--bg-dark-trans-75);
  padding: 30px;
  height: 390px;
  margin-right: 30px;
  margin-top: 15px;
  outline: 1px solid var(--accent-light);
  outline-offset: 10px;
    overflow-y: auto;
}

#Freeform.tabcontent{  white-space: pre-line; text-align: justify;}

.prof-tabs-ac row{position: relative;
padding: 10px;
    margin: -1px 5px 5px 5px;
    display: block;
    background-color: var(--bg-dark);
    border: 1px solid var(--bg-accent-50);
    text-align: justify;
    line-height: 130%;
    color: var(--text-light);
    font-size: 9px;
    border-radius: 4px;
margin-top: 20px;
margin-bottom: 10px;}

.prof-tabs-ac row tg{
  position: absolute;
  margin-top: -30px;
  text-transform: uppercase; font-weight: bold; font-size: 10px;
    border-bottom: 1px solid var(--accent-light);
    color: var(--text-light);
}

.prof-tabs-ac tt{
  display: block;
    font-family: var(--body-font);
  margin-bottom: -10px;
}

.prof-tabs-ac tt span{
    text-transform: uppercase; font-weight: bold; font-size: 10px;
    border-bottom: 1px solid var(--accent-light);
    color: var(--text-light);
  position: relative;
  margin-left: 15px;
}

.prof-tabs-ac bloc{
  padding: 10px;
    margin: -1px 5px 5px 5px;
    display: block;
    background-color: var(--bg-dark);
    border: 1px solid var(--bg-accent-50);
    text-align: justify;
    line-height: 130%;
    color: var(--text-light);
    font-size: 9px;
    border-radius: 4px;
}

#trackerwrap, #altwrap, #historywrap{
padding-right: 15px;
padding-left: 15px;
background-color: var(--bg-dark);
    border: 1px solid var(--bg-accent-50);
  position: relative;
  margin-top: 30px;
  border-radius: 10px;
  padding-top: 20px;
  margin-bottom:70px;
}

#historywrap{margin-bottom: 0px;}

#trackerwrap:before{
content: "active threads";
border-bottom: 1.5px solid var(--dark);
display: block;
text-align: right;
padding-bottom: 2px;
font-size: 1rem;
margin-bottom: 20px;
position: absolute;
  text-transform: uppercase;
border-bottom: 2px solid var(--accent-light); margin-top: -60px;
font-weight: bold;}

#altwrap:before{
content: "active communications";
border-bottom: 1.5px solid var(--dark);
display: block;
text-align: right;
padding-bottom: 2px;
font-size: 1rem;
margin-bottom: 20px;
position: absolute;
  text-transform: uppercase;
border-bottom: 2px solid var(--accent-light); margin-top: -60px;
font-weight: bold;}

#historywrap:before{
content: "completed threads";
border-bottom: 1.5px solid var(--dark);
display: block;
text-align: right;
padding-bottom: 2px;
font-size: 1rem;
margin-bottom: 20px;
position: absolute;
  text-transform: uppercase;
border-bottom: 2px solid var(--accent-light); margin-top: -60px;
font-weight: bold;}

.tracker-item{
display: grid;
grid-template-columns: auto 1fr;
grid-gap: 15px;
align-items: center;
padding-bottom: 20px;}




.tracker-item .status{
height: 35px;
width: 35px;
border: 1px solid var(--accent-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;border-radius: 5px;
background: var(--bg-dark-trans-75);}

.tracker-item-body{}

.tracker-title{display: block;
margin-bottom: 3px;}

.tracker-title a{
font-weight: 600;
text-transform: uppercase;}

.tracker-info{
text-transform: lowercase;
display: block;
font-style: italic;}

.trackerlast{
text-transform: lowercase;}

.trackername, .trackerdate{
font-weight: 500;}

.ooc-ac{
  display: flex;
  align-items: center;
  height: 390px;
  justify-content: center;
}

.ooc-box-ac{padding: 10px;
    display: block;
    background-color: var(--bg-dark-trans-75);
    border: 1px solid var(--bg-accent-50);
    text-align: justify;
    line-height: 130%;
    color: var(--text-light);
    border-radius: 4px;
  width: 450px;
padding-bottom: 20px;}

.alias-info-ac{
  text-transform: uppercase;
  color: var(--accent-light);
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  margin-top: 20px;
}

.player-info-box-ac icon-bit{
  display: flex;
  align-items: center;
}

.player-info-box-ac icon-bit i{
  color: var(--accent-light);
  font-size: 15px;
  margin-right: 10px;
}

.alias-info-ac span{
  font-size: 30px;
  display: block;
  margin-top: 15px;
  margin-bottom: 30px;
  color: var(--text-bright);
}

.player-info-box-ac{  padding: 10px;
  margin: 10px 20px;
    background-color: var(--bg-dark);
    border: 1px solid var(--bg-accent-50);
    text-align: justify;
    line-height: 130%;
    color: var(--text-light);
    border-radius: 4px;
text-transform: uppercase;
font-weight: bold;
display: flex;
justify-content: space-between;}

.player-info-box-ac span{
  color: var(--accent-light);
}

.prof-misc-ac{
  background-color: var(--bg-dark-trans-75);
  display: grid;
  grid-template-columns: 300px 1fr;
}

.prof-rel-ac{
  padding: 20px;
  text-align: center;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 11px;
display: flex;
align-items: center;
}

.prof-rel-ac a{
  border-bottom: 2px solid var(--accent-light);
}

.prof-rel-image-ac{
  width: 240px;
  height: 120px;
  background-size: cover;
  margin-top: 25px;
  margin-bottom: 25px;
  border-radius: 5px;
  outline: 1px solid var(--bg-accent-50);
  outline-offset: 10px;
  margin-left: 10px;
}

.prof-traits-ac{
  background-color: var(--bg-dark-trans-75);
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10px;
  letter-spacing: .6px;
gap: 15px;
}

.trait-ext-ac{
  height: 10px;
  margin-bottom: 5px;
  border: 1px solid var(--accent-light);
  border-radius: 5px;
  background-color: var(--bg-dark-trans-75);
}

.trait-int-ac{
  background: var(--accent-light);
  height: 11px;
  display: flex;
  margin-top: -.5px;
  border-radius: 5px;
  margin-left: -1px;
}

.trait-captions-ac{
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  justify-content: space-between;
}

.prof-misc2-ac{
  background-color: var(--bg-dark-trans-75);
  display: grid;
  grid-template-columns: 300px 1fr;
}

.prof-awards-ac{
  background-color: var(--bg-dark-trans-75);
  padding: 20px;
}

.awards-title-ac{
  text-transform: uppercase;
  text-align: center;
  text-decoration: 2px solid var(--accent-light) underline;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.prof-img-row-ac{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
}

.awards-box-ac{
  border:1px solid var(--bg-accent-50);
  padding: 10px;
  text-align: center;
  border-radius: 10px;
  height: 80px;
  overflow-y: auto;
  background-color: var(--bg-dark-trans-75);
}

.prof-row-image-ac{
  width: 165px; 
  height: 100px;
  background-size: cover;
  border-radius: 5px;
  outline: 1px solid var(--bg-accent-50);
  outline-offset: 5px;
}

.prof-bottom-ac{
  height: 20px;
}

There are a few things that don't seem to match the fields on site, even though they are the profile field numbers. The traits and percentages do not match. And the header icon next to the name should change per member group, but doesn't.

Sign In

Really really weird main profil issue

Recommended Posts

Black Flag 12

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

c.widow 121

Link to comment

Share on other sites

Black Flag 12

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Announcements

Who's Online (See full list)

Topics

RPG Resources

Activity

My Activity Streams

Community

Important Information