Jump to content

Really really weird main profil issue


Black Flag
 Share

Recommended Posts

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.

Link to comment
Share on other sites

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

MyBB? Jcink? What software?

 

Please provide the code in question.

wcc_aff_one.png.ee644d7c84e4471ab7231d79aa59872c.png freerphostaffbutton.png.2c941043f4d1bcb22ada2b22d3e60dfc.png myrpg-affiliate.png.5453a73021a9354b5b772ac4e15f7ef9.png

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use, Guidelines and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.