Black Flag   12 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
c.widow   121 Share Posted May 2 MyBB? Jcink? What software?  Please provide the code in question. Quote   Link to comment Share on other sites More sharing options...
Black Flag   12 Author Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.