Guest

a resource community for jcink roleplays. we provide codes, graphics, feedback and support for anything roleplay related, while also joining together in an inclusive and supportive community.


 
Add Reply
New Topic
New Poll

 Skin Mod Request, Colors and Structure
Stargazer
 Posted: Oct 17 2016, 03:42 PM
Quote

Stargazer

N/A
posts:
14
joined:
17 Oct 16
gallery:

specialty

N/A

community
N/A


Requester Name: Stargazer (me)
Site Where It Will Be Used: Here, not open yet though.
What Are You Requesting?: a General Modification of the colors and a bit of the overall theme structure. Nothing over the top, just those specifics.
Theme to be Modified: Hizashi, by Yoshimelon (Bonbon)
Specifics:
I'm just looking to get the Hizashi them that is made by Bonbon to pop as a dark theme rather than a light. The theme is being modified to fight the Mecha Anime Genre of sorts, Gundam to be precise and I tried on my own, but I feel like I should turn to a professional or at least someone who has more experience than me in code modifications to work on the more intricate stuff.

The basic changes would make the upper content boxes below the header pop out more and the user links bar would be moved from the top of the board to below the said content boxes. As for theme colors, they are negotiable but I do have a palate I put together for a general idea.

--- > Color Palate Screenshot < ---
Following the screen shot of the color palatte below from left to right.
  • 323332 - medium gray
  • 164627 - medium blue
  • 1E0A42 - medium purple
  • 060F0D - teal grey
  • 020100 - suit black
Of course text colors will have to be adjusted for better contrast with the color combinations. As for the font, I would like for something Crisp and Medium in size and overall shape of the written characters, so something like Castellar but not as large and not as bold.

Deadline: No Deadline, I like to think that requests like this need to be treated like a date, just don't stand the other person up and leave them alone.. XD. So of course, who ever decides to take up the task needs no time frame, just work at the pace your best with.

Other Notes:

EDIT 10/25/2016 at 11:50 PST:

Here is the CSS that was edited, I had to fix the categories labels after the Jcink skin color editor dropped the variables into a cringe worthy wall of text. XD

CODE
/*=============================================== *
* Jcink.com Forum Hosting Stylesheet
* ==============================================
* HIZASHI by Bonbon.
*=============================================== */

.first { width: 190px!important;margin: 9px;padding: 15px;background-color: #1b1b1b; }
.first h1 { font-family: 'Old Standard TT', serif;margin: 10px 0px 0px 0px;text-transform: lowercase;letter-spacing: -2px;font-style: italic;text-align: left;font-size: 30px;font-weight: 100;border-bottom: 1px dotted #333;line-height: 10px;color: #FFF; }
letter { color: #000; }
.first h2 { font-family: courier new;text-transform: uppercase;font-size: 10px;text-align: right;letter-spacing: 1px;margin: 5px 0px;color: #FFF; }
.first p { font-family: helvetica, arial;font-size: 11px;line-height: 16px;text-align: justify;display: block;margin: auto;color: #FFF; }
line { text-transform: uppercase;font-family: courier new;font-weight: bold;color: #633024; }
.firstimg { height: 150px;width: 190px;overflow: hidden;opacity: 0.6;-moz-opacity: 0.6;-webkit-opacity: 0.6;border: 7px solid #333; }
.membername { font-family: 'Old Standard TT', serif;font-size: 20px;font-style: italic;margin: 3px 0px -10px 0px;display: block;color: #FFF; }
.second { width: 200px;padding: 10px;background-color: #1b1b1b; }
.second a { display: block;margin-bottom: 1px;padding: 3px;font-family: times;font-style: italic;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #70b3d4!important;background-color: #222; }
.second a:hover { color: #FFF!important;background-color: #181818; }
html { overflow-x: auto; }
form { display: inline; }

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

#bannertable { display: block;width: 100%;padding: 10px 0px;text-align: center;background-color: #10161c; }
.toptable { margin: 0px auto;width: 960px; }
.mboard { padding: 0px 10px;margin-top: 5px;background-color: #182027;border: 1px solid #eee; }
.mforum { width: 480px;text-align: justify;padding-right: 10px; }
.mtitle { font-style: italic;display: inline-block;margin: 5px;padding-top: 6px; }
.mtitle a { font-family: 'Old Standard TT', serif;text-transform: lowercase!important;letter-spacing: -1px;font-style: italic;text-align: left;font-size: 26px;font-weight: 100;border-bottom: 1px dotted #bbb;display: block;width: 550px;padding: 5px 0px 5px 5px;line-height: 10px;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #289af0!important; }
.mtitle a:hover { padding-left: 15px;width: 540px;color: #111!important; }
.mlast1 { font-family: courier new;text-transform: uppercase;font-size: 10px;letter-spacing: 0px;display: block;text-align: right;margin-top: -2px;margin-bottom: 0px;color: #FFF; }
.mdescrip { display: block;width: 556px;text-align: justify;padding: 0px 0px 10px 5px;font-size: 11px;font-family: helvetica, arial;line-height: 16px;color: #FFF; }
.msub { font-family: times;padding: 5px 5px 0px;font-size: 10px;font-style: italic;text-transform: uppercase;color: #fbfbfb; }
.mtopics { width: 82px; }
.msub a { padding: 5px 0px;display: block;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #4e90b0!important;background-color: #182027; }
.mnumber1 { display: inline-block;width: 40px;padding: 5px 2px 5px 0px;font-family: times;font-size: 40px;text-align: center;color: #bbb; }
.subnumber1 { font-family: helvetica, arial;font-size: 9px;text-transform: uppercase; }
.mnumber2 { display: inline-block;width: 40px;padding: 5px 0px;font-family: times;font-size: 40px;text-align: center;color: #bbb; }
.mlast { padding: 10px 0px 10px 10px;text-align: center;text-transform: uppercase;font-family: helvetica, arial;font-size: 9px;color: #FFF; }
.mlast a { transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #4e90b0!important; }
.mlast a:hover { color: #000!important; }


body { font-family: Arial, sans-serif;font-size: 12px;margin: 0px;padding: 0px;text-align: center;color: #FFFFFF;background-color: #182027; }

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

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

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

#wrapper { text-align: left;width: 934px;margin: 10px auto 0px;padding: 5px; }
#innerwrapper { padding: 15px;margin-top: 0px;background-color: #10161c;border: 1px solid #ddd; }
#innerwrapper2 { padding: 5px 15px;background-color: #10161c; }

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

a:link, a:visited, a:active { text-decoration: none;text-transform: uppercase;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #1cbfd6; }
a:hover { text-decoration: none;color: #000; }

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

#profilename { font-size: 28px;font-weight: bold; }
#photowrap { padding: 6px; }
#phototitle { font-size: 24px;border-bottom: 1px solid black; }
#photoimg { text-align: center;margin-top: 15px; }

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

#ucpmenu { line-height: 150%;width: 22%;color: #FFFFFF;background-color: #FFFFFF; }
#ucpmenu p { padding: 2px 5px 6px 9px;margin: 0px; }
#ucpcontent { line-height: 150%;width: auto;color: #FFFFFF;background-color: #FFFFFF;border: 1px solid #545454; }
#ucpcontent p { padding: 10px;margin: 0px; }

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

#logostrip { display: none; }
#logo { min-height: 60px;text-align: left;margin-top: 5px;padding: 20px 20px 5px; }
#logo a, #logo a:hover { font-size: 36px;text-decoration: none;font-weight: bold;color: #800000; }

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

#searchbar { display: block;float: right;position: relative;right: 10px;top: 8px; }
container { box-shadow: 0 1px 3px rgba(0,0,0,0.4) inset;display: block;height: 26px;position: relative;width: 200px;background-color: #182027;border: 1px solid #D8D8D8; }
input { background: none repeat scroll 0 0 transparent;font-size: 12px;width: 192px;height: 26px;font-family: Arial, sans-serif;padding: 1px 0 0 8px;color: #808080; }
input:focus { color: #000000; }
#searchbar .search-button { background: #800000 url(http://files.b1.jcink.com/themes/default/magnifying-glass.png) no-repeat 50% 50%;display: block;height: 26px;position: absolute;text-indent: -3000em;width: 26px;cursor: pointer;box-shadow: none; }

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

#submenu { display: none;font-size: 13px;border-width: 1px 0;background-position: center center;margin-bottom: 3px;background-color: #800000;border: solid #555;background-image: url(http://files.b1.jcink.com/themes/default/red-gradient-glass.png); }
#submenu img { display: none; }
#submenu a:link, #submenu a:visited, #submenu a:active { text-decoration: none;padding: 7px 7px;font-weight: bold;color: #fff !important; }
#submenu a:hover { text-decoration: underline;color: #fff !important; }
#navi br { display: none; }
#navstrip { font-weight: bold;padding: 4px;font-size: 9px;text-transform: uppercase;margin: 10px 0px;background-color: #394247; }
#navstrip a { padding: 4px 8px;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #1b9bfb!important;background-color: #394247; }
#navstrip a:hover, a:active { color: #0f63a3!important;background-color: #394247; }

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

.caldate { text-align: right;font-weight: bold;font-size: 11px;padding: 4px;margin: 0px;color: #555;background-color: #394247; }
#calendarname { font-size: 22px;font-weight: bold; }
#padandcenter { margin-left: auto;margin-right: auto;text-align: center;padding: 14px 0px 14px 0px; }

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

#userlinks { position: fixed;top: 0px;left: 0px;z-index: 3;list-style: none;width: 100%;margin: 0 auto;font-weight: normal;background-color: #111; }
#userlinks td { font-size: 9px;letter-spacing: 1px;text-transform: uppercase;font-weight: normal;padding: 2px 20px;color: #666; }
#userlinks a { text-decoration: none;padding: 1px;font-weight: normal;color: #999!important; }
#userlinks a:hover { text-decoration: none;color: #888!important; }

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

.activeuserstrip { padding: 6px;font-size: 9px;text-transform: uppercase;font-family: times;text-align: center;letter-spacing: 2px;background-color: #394247; }
.normalname { font-size: 12px;font-weight: bold;color: #003; }
.normalname a { font-size: 12px; }
.unreg { font-size: 11px;font-weight: bold;color: #900; }
.post1 { padding: 15px;color: #d8d8d8;background-color: #394247;border: 1px solid #eee; }
.post2 { padding: 15px;color: #d8d8d8;background-color: #394247;border: 1px solid #eee; }
.postdetails { font-size: 10px; }
.postcolor { font-size: 12px;line-height: 160%; }
.postlinksbar { padding: 1px;margin-top: 1px;font-size: 10px;font-weight: normal!important;color: #b5c4cc;background-color: #394247; }
.postlinksbar a { margin: 0px 10px;font-weight: normal; }
.signature { font-size: 10px;line-height: 150%;color: #339; }

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

.pagination .pagination_current, .pagination a { padding: 2px 5px; }
.pagination a:link, .pagination a:visited, .pagination a:active { border-radius: 3px;padding-left: 6px;padding-right: 6px;text-decoration: none;box-shadow: 0pt 2px 3px rgba(0, 0, 0, 0.4);color: #ffffff;background-color: #740300;border: 1px solid #800000; }
.pagination a:hover { background: #EFEEEE;text-decoration: none;box-shadow: 0pt 2px 3px rgba(0, 0, 0, 0.4);color: #000000;background-color: #394247;background-image: url(http://files.b1.jcink.com/themes/default/gray-gradient.png); }
.pagination .pagination_current { background: none repeat scroll 0% 0% #FFFFFF;border-radius: 3px;padding-left: 6px;padding-right: 6px;background-color: #394247;border: 1px solid #545454;background-image: url(http://files.b1.jcink.com/themes/default/gray-gradient.png); }
.pagination_first, .pagination_last, .pagination_page { background: none repeat scroll 0% 0% #740300;background-color: #394247;border: 1px solid #800000; }
.pagination_pagetxt { display: none; }

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

.row1,.row3,.row4,.row2 { font-size: 12px;padding: 5px;color: #b5c4cc!important;background-color: #182027;border: 1px solid #eee; }
#boardstats .row2 { text-align: center; }
.darkrow1 { color: black;background-color: #182027; }
.darkrow2 { font-size: 8px;text-transform: uppercase;letter-spacing: 1px;text-align: center;color: #777;background-color: #182027; }
td.darkrow2 { display: none; }
.darkrow3 { padding: 3px 20px;color: #666!important;background-color: #182027;border: 1px solid #eee; }
.hlight { background-color: #182027; }
.dlight { background-color: #182027; }

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

.maintitle { text-transform: uppercase;padding: 15px;font-family: courier new;text-align: center;letter-spacing: 3px;font-size: 10px;font-weight: bold;color: #888!important;background-color: #111; }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none;font-weight: bold;color: #888; }
.maintitle a:hover { text-decoration: none; }

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

.titlemedium { font-weight: normal;letter-spacing: 2px;padding: 2px 6px;margin: 0px;font-size: 7px;text-transform: uppercase;color: #bbb;background-color: #182027; }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active { text-decoration: none;color: #222; }

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

.tableborder { padding: 0px;background-color: #182027;border: 0px solid #555; }
.tablefill { padding: 6px;background-color: #182027;border: 1px solid #555; }
.tablepad { padding: 6px;background-color: #182027; }
.tablebasic { width: 100%;margin: 0px;border: 0px; }
.plainborder { background-color: #182027;border: 1px solid #555; }

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

#QUOTE { white-space: normal;font-family: Arial, sans-serif;font-size: 11px;padding: 2px;margin-top: 2px;color: #FFF;background-color: #182027;border: 1px solid #555; }
#CODE { white-space: normal;font-family: Courier, Courier New, Verdana, Arial;font-size: 11px;padding: 2px;margin-top: 2px;color: #FFF;background-color: #182027;border: 1px solid #555; }

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

.button-large { background: #fbfbfb;padding: 5px 12px;text-align: center;margin: 0px 5px 0px 5px;font-weight: bold;min-width: 75px;display: inline-block;border: 1px solid #eee; }
small { font-weight: bold;font-size: 11px;margin: 3px;padding: 4px 7px;backfround-color: #fbfbfb;text-decoration: none;min-width: 50px;max-width: 80px;border: 1px solid #eee; }
top { margin-top: 3px; }
large.closed { background: #f0f0f0;padding: 7px 12px;text-align: center;margin: 0px 5px 0px 5px;font-weight: bold;color: #660000;border: 1px solid #eee; }
.forminput, .codebuttons, .textinput, .radiobutton, .checkbox { background: #fbfbfb;font-family: Arial, sans-serif;font-size: 12px;padding: 2px;vertical-align: middle;color: #666;border: 1px solid #eee; }
{ background: #fbfbfb;font-size: 11px;font-weight: bold;margin: 3px;padding: 2px 6px;text-decoration: none;color: #FFF;border: 1px solid #eee; }
.codebuttons { font-size: 10px; }

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

.pformstrip { text-transform: uppercase;font-style: italic;font-family: times;padding: 2px 5px;margin-top: 1px;color: #FFF;background-color: #182027; }
.pformleft { padding: 6px;margin-top: 1px;width: 25%;border-top: 0px solid #545454;border-right: 0px solid #545454;background-color: #182027; }
.pformleftw { padding: 6px;margin-top: 1px;width: 40%;border-top: 0px solid #232323;border-right: 0px solid #232323;background-color: #182027; }
.pformright { padding: 6px;margin-top: 1px;border-top: 0px solid #232323;background-color: #182027; }

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

.closedtab { padding: 8px;float: left;width: auto;margin-top: 3px;margin-right: 2px;font-size: 11px;text-transform: lowercase;color: #777;background-color: #f9f9f9;border: #eee 1px solid; }
.opentab { text-transform: uppercase;padding: 7px;float: left;width: auto;margin-top: 6px;margin-right: 2px;font-size: 11px;border-top: #eee 1px solid;border-right: #eee 1px solid;border-left: #eee 1px solid;color: #888;background-color: #000; }
.positiontab { height: 34px;margin-left: 2px; }

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

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

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

.toplinks a { font-size: 7px;text-decoration: none;letter-spacing: 2px;color: #999; }
.toplinks { margin: 0 11px 20px 0;text-align: center;letter-spacing: 2px;color: transparent; }

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

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

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

img { vertical-align: middle;border: 0px; }
img.attach { padding: 2px;border: 2px outset #555; }
.desc { font-size: 11px;color: #000; }
.edit { font-size: 9px; }
.wrapmini { float: left; }
.warngood { color: green; }
.warnbad { color: red; }
#skin_selector { margin: 10px 0; }
.thin { padding: 6px 0px 6px 0px;line-height: 140%;margin: 2px 0px 2px 0px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc; }
.newstext { display: none;padding: 6px 6px 2px 6px;margin-bottom: 10px;background-color: #394247;border: 1px solid #555; }
.searchlite { font-weight: bold;color: #F00;background-color: #FF0; }

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

#mobile { background-color: #394247; }

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

.copyright { font-size: 10px;line-height: 12px;display: block;margin: 10px;border: 1px solid #ddd; }

/***********************************
Mini-Profile Customizations
************************************/

.image
div { display: none;height: 30px;width: 290px;margin-left: 10px;border: 1px solid #000; }
div { display: block; }
#miniprofile { width: 200px;height: 380px;position: relative;overflow: hidden;margin: 0 auto;border: 5px solid #f9f9f9; }
.mini1 { width: 200px;height: 300px;position: absolute;top: -10px;left: 0px; }
.mini2 { width: 200px;height: 100px;position: absolute;top: 300px;left: 0px; }
#miniprofile:hover .mini1two { transition: 0.4s ease-in-out;transition-delay: 0.3s;-webkit-filter: grayscale(100%);filter: grayscale(100%); }
.mini3 { font-family: 'raleway condensed', sans-serif;font-size: 19px;text-align: center;font-weight: 800;letter-spacing: -2px;padding-top: 5px;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;text-transform: uppercase;color: #000; }
.mini3 a:link, .mini3 a:visited, .mini3 a:active, .mini3 a:hover { font-family: 'raleway condensed', sans-serif;font-size: 19px;text-align: center;font-weight: 800;letter-spacing: -2px;text-transform: uppercase;color: #000; }
.mini3two { border-bottom: 1px solid #fff;width: 160px;margin: 0 auto; }
.mini4 { width: 120px;padding-top: 1px;border-top: 1px solid #fff;font-family: 'raleway', sans-serif;font-weight: 300px;font-size: 16px;text-align: center;letter-spacing: 2px;margin: 0 auto;position: absolute;top: 45px;left: 40px;font-variant: small-caps;color: #000; }
.mini5 { position: absolute;width: 200px;height: 295px;top: 300px;transition: 1.5s ease-in-out;transition-delay: .07s;background-color: rgba(217, 217, 217, 0.45); }
#miniprofile:hover .mini5 { position: absolute;top: 5px;width: 200px;height: 295px; }
.mini6 { padding: 20px;position: absolute;left: 10px;top: 15px;width: 135px;height: 180px;background-color: #fff;border: 2px solid #dadada; }
.mini7 { position: absolute;margin: 0 auto;left: 24px;top: 150px;border-radius: 100%;padding: 5px;border-bottom: 2px solid #dadada;background-color: #fff; }
.mini8 { font-family: 'raleway condensed', sans-serif;font-size: 16px;text-align: center;letter-spacing: -1px;text-transform: uppercase;width: 150px;font-weight: 300;position: absolute;top: 10px;left: 10px;color: #000; }
.mini9 { position: absolute;width: 145px;height: 15px;margin: 0 auto;font-family: 'raleway', sans-serif;font-size: 13px;letter-spacing: 1px;padding: 5px;text-align: center;top: 50px;left: 22px;text-transform: lowercase;color: #000; }
.mini10 { position: absolute;width: 145px;height: 15px;margin: 0 auto;font-family: 'raleway', sans-serif;font-size: 13px;letter-spacing: 1px;padding: 5px;text-align: center;top: 77px;left: 22px;text-transform: lowercase;color: #000; }
.mini11 { position: absolute;width: 65px;height: 15px;margin: 0 auto;font-family: 'raleway', sans-serif;font-size: 13px;letter-spacing: 1px;padding: 5px;text-align: center;top: 133px;left: 22px;text-transform: lowercase;color: #000; }
.mini12 { position: absolute;width: 65px;height: 15px;margin: 0 auto;font-family: 'raleway', sans-serif;font-size: 13px;letter-spacing: 1px;padding: 5px;text-align: center;top: 133px;left: 102px;text-transform: lowercase;color: #000; }
.mini13 { position: absolute;width: 145px;height: 15px;margin: 0 auto;font-family: 'raleway', sans-serif;font-size: 13px;letter-spacing: 1px;padding: 5px;text-align: center;top: 105px;left: 22px;text-transform: lowercase;color: #000; }
.mini11 a:link, .mini11 a:visited, .mini11 a:active { color: #000; }
.mini11 a:hover { color: #000; }
.mini12 a:link, .mini12 a:visited, .mini12 a:active { color: #000; }
.mini12 a:hover { color: #000; }
PM
^
bubblyBumblebee
 Posted: Oct 25 2016, 06:05 PM
Quote

bubblyBumblebee

N/A
posts:
9
joined:
21 Oct 16
gallery:

specialty

Programming, community management, and writing

Members
N/A


I've done a general CSS polish. Fixed the value key, finished replacing text colors and more. The result is a more subtle and readable style.

CODE
/*=============================================== *
* Jcink.com Forum Hosting Stylesheet
* ==============================================
* HIZASHI by Bonbon.
*=============================================== */

@font-face {
 font-family: 'League Gothic';
 src: url('https://dl.dropboxusercontent.com/u/63101225/dragonball/LeagueGothic-Regular.otf');
}

@font-face {
 font-family: 'League Gothic Italic';
 src: url('https://dl.dropboxusercontent.com/u/63101225/dragonball/LeagueGothic-Italic.otf');
}


.first { width: 190px!important;margin: 9px;padding: 15px;background-color: #1b1b1b; }
.first h1 { font-family: 'League Gothic';margin: 10px 0px 0px 0px;text-transform: lowercase;text-align: left;font-size: 30px; font-weight: normal; border-bottom: 1px dotted #333;line-height: 20px;color: #f2f2f2; }
letter { color: #f2f2f2; }
.first h2 { font-family: 'League Gothic Italic';text-transform: uppercase;font-size: 15px;text-align: right;margin: 5px 0px;color: #f2f2f2; font-weight:normal; }
.first p { font-family: helvetica, arial;font-size: 11px;line-height: 16px;text-align: justify;display: block;margin: auto;color: #f2f2f2; }
line { text-transform: uppercase;font-family: 'League Gothis';font-weight: normal;color: #633024; }
.firstimg { height: 150px;width: 190px;overflow: hidden;opacity: 0.6;-moz-opacity: 0.6;-webkit-opacity: 0.6;border: 7px solid #333; }
.membername { font-family: 'League Gothic', serif;font-size: 20px;font-style: italic;margin: 3px 0px -10px 0px;display: block;color: #f2f2f2; }
.second { width: 200px;padding: 10px;background-color: #1b1b1b; }
.second a { display: block;margin-bottom: 1px;padding: 3px;background-color: #222; }
.second a:hover { color: #f2f2f2!important;background-color: #181818; }
html { overflow-x: auto; }
form { display: inline; }


/****************************************
 Table Styles, Body Background, & Text Style
*****************************************/


#bannertable { display: block;width: 100%;padding: 10px 0px;text-align: center;background-color: #10161c; }
.toptable { margin: 0px auto;width: 960px; }
.mboard { padding: 0px 10px;margin-top: 5px;background-color: #182027;border: 1px solid #444; }
.mforum { width: 480px;text-align: justify;padding-right: 10px; }
.mtitle { font-style: italic;display: inline-block;margin: 5px;padding-top: 6px; }
.mtitle a { font-family: 'League Gothic Italic';text-transform: lowercase!important;text-align: left;font-size: 26px;font-weight: normal;border-bottom: 1px dotted #bbb;display: block;width: 550px;padding: 5px 0px 5px 5px;line-height: 10px;}
.mtitle a:hover { padding-left: 15px;width: 540px;color: #f2f2f2!important; }
.mlast1 { font-family: 'League Gothic';text-transform: uppercase;font-size: 10px;display: block;text-align: right;margin-top: -2px;margin-bottom: 0px;color: #f2f2f2; }
.mdescrip { display: block;width: 556px;text-align: justify;padding: 0px 0px 10px 5px;font-size: 11px;font-family: helvetica, arial;line-height: 16px;color: #f2f2f2; }
.msub { font-family: times;padding: 5px 5px 0px;font-size: 10px;font-style: italic;text-transform: uppercase;color: #333; }
.mtopics { width: 82px; }
.msub a { padding: 5px 0px;display: block;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #4e90b0!important;background-color: #182027; }
.mnumber1 { display: inline-block;width: 40px;padding: 5px 2px 5px 0px;font-family: times;font-size: 40px;text-align: center;color: #bbb; }
.subnumber1 { font-family: helvetica, arial;font-size: 9px;text-transform: uppercase; }
.mnumber2 { display: inline-block;width: 40px;padding: 5px 0px;font-family: times;font-size: 40px;text-align: center;color: #bbb; }
.mlast { padding: 10px 0px 10px 10px;text-align: center;text-transform: uppercase;font-family: helvetica, arial;font-size: 9px;color: #f2f2f2; }
.mlast a { transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #4e90b0!important; }
.mlast a:hover { color: #f2f2f2!important; }
body { font-family: Arial, sans-serif;font-size: 12px;margin: 0px;padding: 0px;text-align: center;color: #f2f2f2;background-color: #182027; }

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

table, tr, td { font-family: Arial, sans-serif;font-size: 12px;color: #f2f2f2; }
#wrapper { text-align: left;width: 934px;margin: 10px auto 0px;padding: 5px; }
#innerwrapper { padding: 15px;margin-top: 0px;background-color: #10161c;border: 1px solid #333; }
#innerwrapper2 { padding: 5px 15px;background-color: #10161c; }

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

a:link, a:visited, a:active { text-decoration: none;text-transform: uppercase;transition: all, 1s;-moz-transition: all, 1s;-webkit-transition: all, 1s;color: #1cbfd6; }

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

#profilename { font-size: 28px;font-family: 'League Gothic' }
#photowrap { padding: 6px; }
#phototitle { font-size: 24px;border-bottom: 1px solid #f2f2f2;font-family: 'League Gothic' }
#photoimg { text-align: center;margin-top: 15px; }

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

#ucpmenu { line-height: 150%;width: 22%;color: #f2f2f2;background-color: #333; }
#ucpmenu p { padding: 2px 5px 6px 9px;margin: 0px; }
#ucpcontent { line-height: 150%;width: auto;color: #f2f2f2;background-color: #333; }
#ucpcontent p { padding: 10px;margin: 0px; }

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

h1#headtext {
 margin-top:1.5em;
 font-family: 'League Gothic';
 font-weight:normal;
}

#logostrip { display: none; }
#logo { min-height: 60px;text-align: left;margin-top: 5px;padding: 20px 20px 5px; }
#logo a, #logo a:hover { font-size: 36px;text-decoration: none;font-weight: bold;color: #800000; }

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

#searchbar { display: block;float: right;position: relative;right: 10px;top: 8px; }
container { box-shadow: 0 1px 3px rgba(0,0,0,0.4) inset;display: block;height: 26px;position: relative;width: 200px;background-color: #182027;border: 1px solid #333; }
#searchbar input { background: none repeat scroll 0 0 transparent;font-size: 12px;width: 192px;height: 26px;font-family: Arial, sans-serif;padding: 1px 0 0 8px;color: #808080; }
#searchbar input:focus { color: #f2f2f2; }
button { background: #800000 url(http://files.b1.jcink.com/themes/default/magnifying-glass.png) no-repeat 50% 50%;display: block;height: 26px;position: absolute;text-indent: -3000em;width: 26px;cursor: pointer;box-shadow: none; }

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

#submenu { display: none;font-size: 13px;border-width: 1px 0;background-position: center center;margin-bottom: 3px;background-color: #800000;border: solid #333;background-image: url(http://files.b1.jcink.com/themes/default/red-gradient-glass.png); }
#submenu img { display: none; }
#submenu a:link, #submenu a:visited, #submenu a:active { text-decoration: none;padding: 7px 7px;font-weight: bold;color: #f2f2f2 !important; }
#submenu a:hover { text-decoration: underline;color: #f2f2f2 !important; }



#navi br { display: none; }
#navstrip { font-weight: normal;padding: 4px;font-size: 9px;text-transform: uppercase;margin: 10px 0px;background-color: #182027; }
#navstrip a { padding: 4px 8px; background-color: #182027; }

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

.caldate { text-align: right;font-weight: bold;font-size: 11px;padding: 4px;margin: 0px;color: #555;background-color: #182027; }
#calendarname { font-size: 22px;font-weight: bold; }
#padandcenter { margin-left: auto;margin-right: auto;text-align:
center;padding: 14px 0px 14px 0px; }

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

#userlinks { position: fixed;top: 0px;left: 0px;z-index: 3;list-style: none;width: 100%;margin: 0 auto;font-weight: normal;background-color: #111; }
#userlinks td { font-size: 9px;text-transform: uppercase;font-weight: normal;padding: 2px 20px;color: #666; }
#userlinks a { text-decoration: none;padding: 1px;font-weight: normal;color: #999!important; }
#userlinks a:hover { text-decoration: none;color: #888!important; }

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

.activeuserstrip { padding: 6px;font-size: 9px;text-transform: uppercase;font-family: times;text-align: center;background-color: #182027; }
.normalname { font-size: 12px;font-weight: normal;color: #003; }
.normalname a { font-size: 12px; }
.unreg { font-size: 11px;font-weight: bold;color: #900; }
.post1 { padding: 15px;color: #d8d8d8;background-color: #182027;border: none; }
.post2 { padding: 15px;color: #d8d8d8;background-color: #182027;border: none; }
.postdetails { font-size: 10px; }
.postcolor { font-size: 12px;line-height: 160%; }
.postlinksbar { padding: 1px;margin-top: 1px;font-size: 10px;font-weight: normal!important;color: #b5c4cc;background-color: #182027; }
.postlinksbar a { margin: 0px 10px;font-weight: normal; }
.signature { font-size: 10px;line-height: 150%;color: #339; }

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

.pagination .pagination_current, .pagination a { padding: 2px 5px; }
.pagination a:link, .pagination a:visited, .pagination a:active { border-radius: 3px;padding-left: 6px;padding-right: 6px;text-decoration: none;box-shadow: 0pt 2px 3px rgba(0, 0, 0, 0.4);color: #f2f2f2;background-color: #740300;border: 1px solid #333; }
.pagination a:hover { background: #3f3333;text-decoration: none;box-shadow: 0pt 2px 3px rgba(0, 0, 0, 0.4);color: #f2f2f2;background-color: #182027;background-image: url(http://files.b1.jcink.com/themes/default/gray-gradient.png); }
.pagination .pagination_current { background: none repeat scroll 0% 0% #333;border-radius: 3px;padding-left: 6px;padding-right: 6px;background-color: #333;border: 1px solid #333; }
.pagination_first, .pagination_last, .pagination_page { background: none repeat scroll 0% 0% #333;background-color: #333;border: 1px solid #333; }
.pagination_pagetxt { display: none; }

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

.row1,.row3,.row4,.row2 { font-size: 12px;padding: 5px;color: #f2f2f2!important;background-color: #182027;border: none; }
#boardstats .row2 { text-align: center; }
.darkrow1 { color: #f2f2f2;background-color: #182027; }
.darkrow2 { font-size: 8px;text-transform: uppercase;text-align: center;color: #f2f2f2;background-color: #182027; }
td.darkrow2 { display: none; }
.darkrow3 { padding: 3px 20px;color: #666!important;background-color: #182027;border: none; }
.hlight { background-color: #182027; }
.dlight { background-color: #182027; }

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

.maintitle { padding: 15px;font-family: 'League Gothic'; font-size:14px; text-align: center;font-weight: normal;color: #888!important;background-color: #111; }
.maintitle a:link, .maintitle  a:visited, .maintitle  a:active { text-decoration: none;font-weight: normal;color: #888; }
.maintitle a:hover { text-decoration: none; }
.maintitle b {font-weight:normal;}

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

.titlemedium { font-weight: normal;padding: 2px 6px;margin: 0px;font-size: 7px;text-transform: uppercase;color: #bbb;background-color: #182027; }
.titlemedium  a:link, .titlemedium  a:visited, .titlemedium  a:active { text-decoration: none;color: #222; }

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

.tableborder { padding: 0px;background-color: #182027;border: 0px solid #555; }
.tablefill { padding: 6px;background-color: #182027;border: 1px solid #555; }
.tablepad { padding: 6px;background-color: #182027; }
.tablebasic { width: 100%;margin: 0px;border: 0px; }
.plainborder { background-color: #182027;border: 1px solid #333; }

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

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

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

large { background: #333;padding: 5px 12px;text-align: center;margin: 0px 5px 0px 5px;font-weight: bold;min-width: 75px;display: inline-block;border: 1px solid #333; }
/*small { font-weight: bold;font-size: 11px;margin: 3px;padding: 4px 7px;background-color: #333;text-decoration: none;min-width: 50px;max-width: 80px;border: 1px solid #333; }*/
top { margin-top: 3px; }
large.closed { background: #f0f0f0;padding: 7px 12px;text-align: center;margin: 0px 5px 0px 5px;font-weight: bold;color: #660000;border: 1px solid #333; }
.forminput, .codebuttons, .textinput, .radiobutton, .checkbox { background: #333;font-family: Arial, sans-serif;font-size: 12px;padding: 2px;vertical-align: middle;color: #666;border: 1px solid #333; }
{ background: #333;font-size: 11px;font-weight: bold;margin: 3px;padding: 2px 6px;text-decoration: none;color: #;border: 1px solid #333; }
.codebuttons { font-size: 10px; }
.button-small {margin-right:.75em;}


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

.pformstrip { text-transform: uppercase;font-style: italic;font-family: times;padding: 2px 5px;margin-top: 1px;color: #;background-color: #182027; }
.pformleft { padding: 6px;margin-top: 1px;width: 25%;border-top: 0px solid #545454;border-right: 0px solid #545454;background-color: #182027; }
.pformleftw { padding: 6px;margin-top: 1px;width: 40%;border-top: 0px solid #232323;border-right: 0px solid #232323;background-color: #182027; }
.pformright { padding: 6px;margin-top: 1px;border-top: 0px solid #232323;background-color: #182027; }

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

.closedtab { padding: 8px;float: left;width: auto;margin-top: 3px;margin-right: 2px;font-size: 11px;text-transform: lowercase;color: #777;background-color: #f9f9f9;border: #333 1px solid; }
.opentab { text-transform: uppercase;padding: 7px;float: left;width: auto;margin-top: 6px;margin-right: 2px;font-size: 11px;border-top: #333 1px solid;border-right: #333 1px solid;border-left: #333 1px solid;color: #888;background-color: #000; }
.positiontab { height: 34px;margin-left: 2px; }

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

subto { font-size: 10px;padding: 5px;width: 260px;float: none;margin-top: -3px;padding-left: 1px;padding-top: 3px;background-color: #182027;border: 1px solid #333; }

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

.toplinks a { font-size: 7px;text-decoration: none;color: #999; }
.toplinks { margin: 0 11px 20px 0;text-align: center;color: transparent; }

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

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

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

img { vertical-align: middle;border: 0px; }
img.attach { padding: 2px;border: 2px outset #555; }
.desc { font-size: 11px;color: #f2f2f2; }
.edit { font-size: 9px; }
.wrapmini { float: left; }
.warngood { color: green; }
.warnbad { color: red; }
#skin_selector { margin: 10px 0; }
.thin { padding: 6px 0px 6px 0px;line-height: 140%;margin: 2px 0px 2px 0px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc; }
.newstext { display: none;padding: 6px 6px 2px 6px;margin-bottom: 10px;background-color: #182027;border: 1px solid #555; }
.searchlite { font-weight: bold;color: #F00;background-color: #FF0; }

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

#mobile { background-color: #182027; }

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

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

/***********************************
Mini-Profile Customizations
************************************/

.image
div { display: none;height: 30px;width: 290px;margin-left: 10px;border: 1px solid #f2f2f2; }
div { display: block; }
#miniprofile { width: 200px;height: 380px;position: relative;overflow: hidden;margin: 0 auto;border: 5px solid #f9f9f9; }
.mini1 { width: 200px;height: 300px;position: absolute;top: -10px;left: 0px; }
.mini2 { width: 200px;height: 100px;position: absolute;top: 300px;left: 0px; }
#miniprofile:hover .mini1two { transition: 0.4s ease-in-out;transition-delay: 0.3s;-webkit-filter: grayscale(100%);filter: grayscale(100%); }
.mini3 { font-family: 'League Gothic';font-size: 19px;text-align: center;padding-top: 5px;padding-left: 10px;padding-right: 10px;padding-bottom: 2px;text-transform: uppercase;color: #f2f2f2; }
.mini3 a:link, .mini3 a:visited, .mini3 a:active, .mini3 a:hover { font-family: 'League Gothic';font-size: 19px;text-align: center; text-transform: uppercase;color: #f2f2f2; }
.mini3two { border-bottom: 1px solid #f2f2f2;width: 160px;margin: 0 auto; }
.mini4 { width: 120px;padding-top: 1px;border-top: 1px solid #f2f2f2;font-family: 'League Gothic', sans-serif;font-weight: 300px;font-size: 16px;text-align: center;margin: 0 auto;position: absolute;top: 45px;left: 40px;font-variant: small-caps;color: #f2f2f2; }
.mini5 { position: absolute;width: 200px;height: 295px;top: 300px;transition: 1.5s ease-in-out;transition-delay: .07s;background-color: rgba(217, 217, 217, 0.45); }
#miniprofile:hover .mini5 { position: absolute;top: 5px;width: 200px;height: 295px; }
.mini6 { padding: 20px;position: absolute;left: 10px;top: 15px;width: 135px;height: 180px;background-color: #f2f2f2;border: 2px solid #dadada; }
.mini7 { position: absolute;margin: 0 auto;left: 24px;top: 150px;border-radius: 100%;padding: 5px;border-bottom: 2px solid #dadada;background-color: #f2f2f2; }
.mini8 { font-family: 'League Gothic', sans-serif;font-size: 16px;text-align: center;text-transform: uppercase;width: 150px;font-weight: normal;position: absolute;top: 10px;left: 10px;color: #f2f2f2; }
.mini9 { position: absolute;width: 145px;height: 15px;margin: 0 auto;font-family: 'League Gothic', sans-serif;font-size: 13px;padding: 5px;text-align: center;top: 50px;left: 22px;text-transform: lowercase;color: #f2f2f2; }
.mini10 { position: absolute;width: 145px;height: 15px;margin: 0 auto;font-family: 'League Gothic', sans-serif;font-size: 13px;padding: 5px;text-align: center;top: 77px;left: 22px;text-transform: lowercase;color: #f2f2f2; }
.mini11 { position: absolute;width: 65px;height: 15px;margin: 0 auto;font-family: 'League Gothic', sans-serif;font-size: 13px;padding: 5px;text-align: center;top: 133px;left: 22px;text-transform: lowercase;color: #f2f2f2; }
.mini12 { position: absolute;width: 65px;height: 15px;margin: 0 auto;font-family: 'League Gothic', sans-serif;font-size: 13px;padding: 5px;text-align: center;top: 133px;left: 102px;text-transform: lowercase;color: #f2f2f2; }
.mini13 { position: absolute;width: 145px;height: 15px;margin: 0 auto;font-family: 'League Gothic', sans-serif;font-size: 13px;padding: 5px;text-align: center;top: 105px;left: 22px;text-transform: lowercase;color: #f2f2f2; }
.mini11 a:link, .mini11 a:visited, .mini11 a:active { color: #f2f2f2; }
.mini11 a:hover { color: #f2f2f2; }
.mini12 a:link, .mini12 a:visited, .mini12 a:active { color: #f2f2f2; }
.mini12 a:hover { color: #f2f2f2; }


To make the boxes at the top pop, I'd recommend a smaller header image. Right now it is enormous and fights them for prominence on the page. If the header is smaller then the eye will naturally go toward the boxes next since they're still significant and right in the middle of the page. Anything else would require making the boxes visually loud enough that they distract from the other text on the page.

Check out my test board here for a live preview. I've completely removed the banner there.

For the user links, I can't help you. It doesn't look like I have access to them in the templates.

And since you asked for a new font, I included a copy of League Gothic, from the League of Movable Type. That took a lot of debugging of the theme's styles to integrate.

Here's the modified board wrappers too.

CODE
<!DOCTYPE html>
<html>
   <head>
<title><% TITLE %></title>
<% CSS %>
<% JAVASCRIPT %>
<script src="http://elegantexpressions.us/black/cfs.min.js"></script>
   </head>
   <body>
<h1 id="headtext">Title Goes Here<small>a something-something play-by-post</small></h1>

<div id="bannertable" style="text-align: center;">
<table class="toptable" cellpadding="0" cellspacing="9">
<tr>
<td class="first" vAlign="top">
<h1>Title</h1>
<h2>sub-title</h2>
<p>Body text.</p>
</td>

<td class="first" vAlign="top">
<h1>Title</h1>
<h2>sub-title</h2>
<p>Body text.</p>
</td>

<td class="first" vAlign="top">
<h1>Title</h1>
<h2>sub-title</h2>
<p>Body text.</p>
</td>

<td class="second" vAlign="top">
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
<a href="http://bonbonskins.jcink.net/index.php?">test link</a>
</td>
</tr>
</table>

</div>

<div id="wrapper">
    <% BOARD HEADER %>

    <div id="innerwrapper">
<div id="innerwrapper2">

     <div id="navi">
     <% NAVIGATION %>
     </div>
     <div id="board"><% BOARD %></div>
<script>
customIndex.init({
page: "<!-- |input_act| -->",
html: "<table class='mboard' width='100%' cellspacing='0' cellpadding='0'><tr><td class='mforum'><div class='mtitle'> {%link}</div><div class='mlast1'>{%marker} Last post by {%lp-author} on {%lp-date} in {%lp-title}.</div><div class='mdescrip'>{%description}</div></td><td class='mtopics'><div class='mnumber1'> {%topics}<div class='subnumber1'>topics</div> </div><div class='mnumber2'> {%replies}<div class='subnumber1'>replies</div></div></td><td class='mlast'><div class='msub' style='margin: 1px!important;'>{%subforumlist}</div></td></tr></table>",
conf: {
 target:   "board",
 subforumSeperator: ", ",
 subforumNone:  "This forum has no subforums.",
 addBefore:  false,
 addAfter:  false,
 dateDefault:  "--",
 titleDefault:  "----",
 authorDefault:  ""
}
});
</script>
     <div id="skin_selector">
         <% SKIN_SELECTOR %>
     </div>
</div>

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

<div style="copyright">skin by <a href="http://rpg-directory.com/member.php?action=profile&uid=6143#comments/1">bonbon</a>.</div>

     <div style="width: 940px; margin: 10px auto 20px auto;"><% COPYRIGHT %><br></div>
   </body>
</html>
PM
^
Stargazer
 Posted: Oct 25 2016, 06:43 PM
Quote

Stargazer

N/A
posts:
14
joined:
17 Oct 16
gallery:

specialty

N/A

community
N/A


The color fixes are a thank you so that's done, but the header thing I am still trying to get. Like here in this screenshot of Hizashi customized there. Someone super skilled that was from here on BTS did it and I figured someone would know. XD

EDIT: Seems something is interfering with the use of the mini-profile.
PM
^
bubblyBumblebee
 Posted: Oct 26 2016, 10:26 AM
Quote

bubblyBumblebee

N/A
posts:
9
joined:
21 Oct 16
gallery:

specialty

Programming, community management, and writing

Members
N/A


Got it!

In your CSS, look for the selector '#userlinks' and inside the curly braces erase 'background-position: fixed;' 'top:0;' 'left:0;' and 'z-index:3;' That should drop the userlinks below the boxes.

For the mini-profile, are you using a Javascript to do it? Those were broken by Jcink's recent HTML Templates feature. If you're using Javascript then you should use the mini-profile template in the HTML Templates instead.
PM
^
Stargazer
 Posted: Oct 26 2016, 11:42 AM
Quote

Stargazer

N/A
posts:
14
joined:
17 Oct 16
gallery:

specialty

N/A

community
N/A


No the custom mini-profile, the one I'm using, only places some CSS in the stylesheet and then the mini-profile template in the variables part of the profile templates.

EDIT: I'm quite upset with Jcinks choice to convert to this, I don't know how to work the HTML Templates.
PM
^
bubblyBumblebee
 Posted: Oct 26 2016, 01:26 PM
Quote

bubblyBumblebee

N/A
posts:
9
joined:
21 Oct 16
gallery:

specialty

Programming, community management, and writing

Members
N/A


Can I get some screenshots and a copy of the code you're using? To be precise:

An image of what the mini-profile is supposed to look like.
A screenshot of what you actually see.
The code you pasted and where it was pasted, including the exact name of the template in the admin CP.
PM
^
Stargazer
 Posted: Oct 26 2016, 01:36 PM
Quote

Stargazer

N/A
posts:
14
joined:
17 Oct 16
gallery:

specialty

N/A

community
N/A


The Mini Profile is called Dusk, its by Nicole on Caution To The Wind,

Using his 200x300 version

And here is what is happening on my board due to the HTML Templates becoming a thing.

The profiles div codes and stuff are breaking. The entire frame is pretty much gone and the Mini-Profile stretches along the page now.

Here are the codes:

Stylesheet/CSS:
CODE
/****************************************
NICOLE/THUNDERSTRUCK DUSK MINI
*****************************************/

 .ncttw-mini {
   width: 200px;
   height: auto;
   background-color: #fff;
   padding: 10px;
   font: normal normal normal 11px/100% arial, sans-serif;
   text-align: center;
   color: #222;
   margin: 0 auto;
   outline: 1px solid #eee;
 }

 .ncttw-mini br {
   display: none;
 }
 .ncttw-mini.wide {
   width: 250px;
 }
 
 .ncttw-mini h1 {
   margin: 5px 0 0;
   background-color: #eee;
   padding: 20px 15px;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 2.2em;
   letter-spacing: -3px;
 }
 
 .ncttw-mini .ncttw-hover.small {
   width: 200px;
   height: 300px;
   position: relative;
 }
 
 .ncttw-mini .ncttw-hover.medium {
   width: 250px;
   height: 350px;
   position: relative;
 }
 
 .ncttw-mini .ncttw-hover.large {
   width: 250px;
   height: 400px;
   position: relative;
 }
 
 .ncttw-mini .ncttw-bg {
   background-color: rgba(0,0,0,0);
   position: absolute;
   top: 5px;
   left: 5px;
   right: 5px;
   bottom: 5px;
   box-sizing: border-box;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   overflow: hidden;
   transition: all 1.2s ease 0s;
   -webkit-transition: all 1.2s ease 0s;
   -moz-transition: all 1.2s ease 0s;
   -o-transition: all 1.2s ease 0s;
 }
 
 .ncttw-mini .ncttw-info {
   background-color: #fff;
   overflow: hidden;
   position: absolute;
   padding: 2px;
   left: 10%;
   right: 10%;
   top: -50%;
   transform: translateY(-50%);
   -moz-transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -o-transform: translateY(-50%);
   text-transform: uppercase;
   transition: all 0.8s ease 0s;
   -webkit-transition: all 0.8s ease 0s;
   -moz-transition: all 0.8s ease 0s;
   -o-transition: all 0.8s ease 0s;
 }
 
 .ncttw-mini h2 {
   margin: 0 0 2px;
   background-color: #eee;
   padding: 10px;
   text-transform: uppercase;
   font-weight: bold;
   font-size: 1.3em;
   letter-spacing: -1px;
 }
 
 .ncttw-mini h3 {
   width: 50%;
   float: left;
   background-color: #eee;
   margin: 0;
   padding: 5px 3px 3px;
   box-sizing: border-box;
   font-weight: bold;
   font-size: 8px;
   line-height: 100%;
 }
 
 .ncttw-mini h3:nth-of-type(even) {
   border-left: 1px solid #fff;
 }
 
 .ncttw-mini h3:nth-of-type(odd) {
   border-right: 1px solid #fff;
 }
 
 .ncttw-mini h4 {
   margin: 5px 0;
   font-weight: normal;
   font-style: italic;
   font-size: 0.90em;
   clear: both;
 }
 
 .ncttw-mini:hover .ncttw-bg {
   background-color: rgba(0,0,0,0.6);
   transition: all 1.2s ease 0s;
   -webkit-transition: all 1.2s ease 0s;
   -moz-transition: all 1.2s ease 0s;
   -o-transition: all 1.2s ease 0s;
 }
 
 .ncttw-mini:hover .ncttw-info {
   top: 50%;
   transition: all 0.8s ease 0s;
   -webkit-transition: all 0.8s ease 0s;
   -moz-transition: all 0.8s ease 0s;
   -o-transition: all 0.8s ease 0s;
 }

 .ncttw-mini a {
   color: #222;
   text-transform: uppercase;
   text-decoration: none;
 }


Profile Template:
CODE
<div class="ncttw-mini">
 <div class="ncttw-hover small">
   <!-- |avatar| -->
   
   <div class="ncttw-bg">
     
     <div class="ncttw-info">
       <h2><!-- |field_1| --></h2>
       <h3><!-- |status| --></h3>
       <h3><!-- |posts| --> posts</h3>
       
       <h4 style="margin-top: 30px;"><!-- |field_2| --> years old</h4>
       <h4><!-- |field_3| --></h4>
       <h4 style="margin-bottom: 10px;"><!-- |g_title| --></h4>
       
       <h3><a href="<!-- |field_4| -->">application</a></h3>
       <h3><a href="<!-- |field_5| -->">shipper</a></h3>
     </div>
     
   </div>
   
 </div>
 
 <h1><!-- |name| --></h1>
</div>
PM
^
bubblyBumblebee
 Posted: Oct 26 2016, 01:57 PM
Quote

bubblyBumblebee

N/A
posts:
9
joined:
21 Oct 16
gallery:

specialty

Programming, community management, and writing

Members
N/A


I got it working. Here's how.

Turn off Profile Templates.

Create a new HTML Templates set and allocate it to Hizashi.

Past the same exact code from your profile templates into the HTML Templates' Mini-Profile. Keep the CSS where it is.

That's all you need to do.
PM
^
Stargazer
 Posted: Oct 26 2016, 02:28 PM
Quote

Stargazer

N/A
posts:
14
joined:
17 Oct 16
gallery:

specialty

N/A

community
N/A


Didn't work, turned off the Mini Profile custom templates, pasted it in mini profile and it remains the same.
PM
^
bubblyBumblebee
 Posted: Oct 26 2016, 02:34 PM
Quote

bubblyBumblebee

N/A
posts:
9
joined:
21 Oct 16
gallery:

specialty

Programming, community management, and writing

Members
N/A


Did you go into the Hizashi skin set and change the "Use HTML Template Set" option to the template set where you pasted your code?
PM
^
Stargazer
 Posted: Oct 26 2016, 03:14 PM
Quote

Stargazer

N/A
posts:
14
joined:
17 Oct 16
gallery:

specialty

N/A

community
N/A


Yes I did, named it Hizashi just so it matches. Screenshot So I'm guessing I need to do something else to this code?
PM
^
bubblyBumblebee
 Posted: Oct 26 2016, 03:36 PM
Quote

bubblyBumblebee

N/A
posts:
9
joined:
21 Oct 16
gallery:

specialty

Programming, community management, and writing

Members
N/A


Did you paste the CSS into the Hizashi stylesheet, right at the bottom?
PM
^
Stargazer
 Posted: Oct 26 2016, 04:00 PM
Quote

Stargazer

N/A
posts:
14
joined:
17 Oct 16
gallery:

specialty

N/A

community
N/A


Yes I did, I'm starting to think that maybe the mini-profile is not going to work.
PM
^
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Add Reply
New Topic
New Poll


 


 


panda directory Anthology

Template HQ All of Me ♥ Tales of Illyria All Our Masks Sengoku Horizon ideal world Avalon a Panfandom RP Yuri Roleplay City of Light: The 100 RPG The Supernatural Life RPG Blood Roses: OUaT RPG MARVEL: Lost Horizons RPG LEAVE ME LONELY Bleach Platinum Hearts  Project Genesis BLB Shinobi Generations a rf/hm based RP realm of the seven

GRAPHICS GAMES Shadowplay

below the sun was created by our staff team in august 2015. our banner image is by tsukiji nao from adekan, and our skin was created by yoshimelon. all resources are posted with thanks to their original creators - if you see something of yours used without permission, please let a staff member know! our favicon is by yusuke kamiyamane, and our awards icons are by bitmapdreams and whimsical.