Jcink Theming: Board Wrappers

So as we trek through making a theme in Jcink the first thing is the board wrapper. Hopefully you have a mock up or general look in your head of what you're wanting to develop. It may change as you go but that's fine.. I created this mock up. Most themers currently only design for desktop but if you'd like to go through and design for multiple screens you can do that as well. For now we're going to keep it simple.

I have chosen to work with a basic layout like what is on the left.

It's not really intended to have all the bits and bobs outlined exclusively, at least not for my purposes. If I were looking to also design for mobile I made a similar thing to what is on the right. Note that I removed a section (Staff) from the mobile version to reduce on how much time it takes for a user to get past the section as well as it's frivolous (normally imaged) section that a mobile user doesn't need at the top of their page.

It's debatable if you would like to get rid of affiliates on mobile as well since there are so many huge gifs I would say you should but make the choice yourself.

Now that we have a mock up we have a general knowledge of what we're going to need to do. First off, not everything in the mock up to the left is actually in the board wrapper. For example the Board Statistics section is an HTML wrapper.

First thing I recommend to do is it copy and paste your code into a program like Notepad++. I prefer this program because it actually won't lose your data if it crashes on you it also has an amazing undo feature as well as a you can download a compare plugin so you can see differences between the main code and what you've changed.

Working on your board wrapper

So now you're able to look at your board wrapper and see what there is available to change. You'll be likely be going back and forth to get things to look right from the wrapper page to the CSS to Macros to the templates as you go and get a feel for how things start to appear.

Note: Almost everything with a <% WORD %> around it is required to be in the wrapper at all times. Removing these items will not allow you to save the wrapper. I believe the only exceptions are <% DSHOUTBOX %> and <% SKIN_SELECTOR %>.

To help get a feel for the main elements of the theme I highlighted their backgrounds. <% BOARD HEADER %> is in Red (this is also where advertisement are on free versions), <% NAVIGATION %> (or the site breadcrumb) is in green and the <% BOARD %> is in blue. You'll note that the Board statistics exist within the <% BOARD %> section and that's basically where your main content will always lie.

This part unfortunately is a little more difficult to teach. Start coding your board wrapper. Each person has their own method to this. I will create my containers and then work on the CSS for those containers before I move on to the next part but you'll work on it however you want.

For those that want avatars or other types of things in the board wrapper you can look at this page on Jcink to find all available Board Wrapper variables.

So I put together basically my bare bones (what I think I'll need basically) theme template and it looks something like what is on the right. It's not much to look at but as I add CSS and whatnot it will start to come together. I'm sure I'm missing things or will need to add containers or get ideas for new things I want as I go but it's a good place to start making things look the way that I want.

<!DOCTYPE html>
<html>
    <head> 
	<title><% TITLE %></title>
	<% CSS %> 
	<% JAVASCRIPT %> 
    </head>
	<script>
		function read_the_alerts() {
			$('#the-alerts').slideToggle('slow');
			$.get( "index.php?recent_alerts=1&read=1", function( data ) {
				$( "#recent_alerts_data" ).html( data );
			});
			$( ".alert_total" ).html( "0");
		}
	function load_the_alerts() {
			alert_link = $('.alerts-indicator').position().left-75;
			$('#the-alerts').css({
				left: alert_link + "px",
			});
			if($('#the-alerts').is(':visible')) {
				$('#the-alerts').slideToggle('slow');
			} else {
				$.get( "index.php?recent_alerts=1", function( data ) {
					$( "#the-alerts-data" ).html( data );
				});
				$("#the-alerts").slideToggle('slow');
			}
		}
	</script>
    <body class="ttUser ttGuest<!-- |id| --> ttGroup<!-- |g_id| -->">
	<script src="https://kit.fontawesome.com/e95a7b7ba6.js"></script>
	<usernav class='ttFullUser ttClearfix'>
		<div class='ttuserInfo ttPos_left'>
			<ul class='ttList_inline'>
				<script>
					if("<!-- |avatar| -->" != "") { document.write("<li class='ttAvatar_top'><div id='ttAvatar_top'><!-- |avatar| --></div></li>");}
					if('<!-- |id| -->' > '0') { document.write("<li class='ttUsername'><a href='/index.php?showuser=<!-- |id| -->'><!-- |name| --></a>");}
					if('<!-- |id| -->' == '0') { document.write("<li class='ttGuest'>Welcome Guest</li>");}
				</script>
				<li><% SUBACCOUNTS %></li>
			</ul>
		</div>
		<div class='ttUserNav ttPos_right'>
			<ul class='ttList_inline'>
				<script>if("<!-- |is_mod| -->" == "1") { document.write("<li><a href='/index.php?act=modcp' title='Moderator Control Panel'><i class='fas fa-user-ninja'></i></a></li>");}
				if("<!-- |g_access_cp| -->" == "1") { document.write("<li><a href='/admin.php' title=Admin Control Panel'><i class='fas fa-user-shield'></i></a></li>");}</script>
				<li><a href='/index.php?act=UserCP&CODE=00' title='User Settings'><i class="fas fa-cog"></i></a>
				<li><a id='alerts-indicator' class='alerts-indicator' title='Alerts' href='javascript:load_the_alerts();'><i class='fas fa-bell'></i></a>
			<div style="display: none;" id="the-alerts">
				<div class="alert_box">
					<span id="the-alerts-data"></span>
					<div style="text-align: center;" class="bottom_alerts">
						<a title="View All Alerts" href="/index.php?act=UserCP&CODE=alerts">View All Alerts</a> · <a title="Mark All Read" href="javascript:read_the_alerts();">Mark All Read</a>
					</div>
				</div>
			</div>
			<script>if('<!-- |new_alerts| -->' > '0') { document.write("<span class='alert_total'><!-- |new_alerts| --></span>");}</script></li>
				<li><a href='/index.php?act=Msg&CODE=01'><i class="fas fa-envelope" title='Private Messages'></i></a>
				<script>if('<!-- |new_msg| -->' > '0') { document.write("<span class='alert_total'><!-- |new_msg| --></span>");}</script></li>
				<li><a href='/index.php?act=Login&CODE=03' title='Sign Out'><i class="fas fa-sign-out-alt"></i></a></li>
			</ul>
		</div>
		<div class='ttGuestNav ttPos_right'>
			<ul class='ttList_inline'>
				<li><a href='/index.php?act=Reg&CODE=00' title='Sign Up'><i class="fas fa-user-plus"></i></a></li>
				<li><a href='/index.php?act=Login&CODE=00' title='Sign In'><i class="fas fa-sign-in-alt"></i></a></li>
			</ul>
		</div>
	</usernav>
	<div class='ttContainer'>
		<a href="index.php"><header>
			<div>Site Name</div>
		</header></a>
	</div>
	<div class='ttContainer'>
		<nav id='ttPrimaryNav' class='ttClearfix'>
			<ul class='ttList_inline ttPos_left'>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
				<li><a href="#">Link</a></li>
			</ul>
			<div class='ttSearch ttPos_right'>
				<form action="index.php?act=Search&CODE=01" method="post">
					<input type="hidden" name="forums" value="all">
					<input type="text" name="keywords" class="ttSearch_input" onfocus="this.value=''" placeholder="Search">
					<button type="submit" class="ttSearch_button"><i class="fas fa-search"></i></button>
				   </form>
			</div>
		</nav>
	</div>
	<div class='ttContainer'>
		<div id='ttInfobox'>
			<div class='ttInfo_quick'>
				<h5 class='ttHeader_small'>Information</h5>
				<p>This is the quick info box where you can put a synopsis for your site or something.</p>
			</div>
			<div class='ttInfo_announcements'>
				<h5 class='ttHeader_small'>Announcements</h5>
				<p><date>July, 16th 2019</date> This would be an announcement for people to see and read importan information</p>
			</div>
			<div class='ttInfo_staff'>
				<h5 class='ttHeader_small'>Staff</h5>
				<ul class='ttList_inline'>
					<li><a href=''><img src='https://via.placeholder.com/100'></a></li>
					<li><a href=''><img src='https://via.placeholder.com/100'></a></li>
					<li><a href=''><img src='https://via.placeholder.com/100'></a></li>
				</ul>
			</div>
		</div>
	</div>

	<div class='ttContainer'>
			<div class='ttBreadcrumb'>
				<% NAVIGATION %>
			</div>
			<div id='ttMain_content'>
				<% BOARD %>
				<div id='ttAffiliates'>
				<h3 class='ttHeader'>Affiliates</h3>
					<ul class='ttList_inline'>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
						<li><a href='#'><img src='https://via.placeholder.com/88x31'></a></li>
					</ul>
				</div>
			</div>
			<div class='ttBreadcrumb'><% NAVIGATION %></div>
	</div>
	
	<div class='ttContainer'>
		<footer>
			<a href="https://rpginitiative.com">Theme created by Morrigan of the Initiative.</a>
			<div id="skin_selector">
	    	    <% SKIN_SELECTOR %>
	    	</div>
			<% COPYRIGHT %>
			<% BOARD HEADER %>
		</footer>
	</div>
    </body> 
</html>

Note: during the process of the next step this changed significantly to add and change parts of this to get the end result that you'll see.

So when you look through what I came up with compared to what you may come up with you'll see some things like <header> and <footer> versus normal divs. These are perfectly allowable identifier types that are read like divs in browers. They are great for helping bots read your content but keep them to where they need to be don't make all of your elements like this.

Additionally, you'll find that all of my classes start with ttWORD and the word identifies what I'm looking at. This is for two reasons. tt will be unique to the theme so that things like generic templates codes or similar do not override my code. It also helps in troubleshooting to see the code that I put in and something someone custom made and inserted themselves.

Lastly you'll note both logged in and logged out stuff simply shows right now. That's what the two classes in the body tag will help us with. now you'll note that I used just ttUser and ttGroupeID#. The reason for this is because the guest group ID will always be 2 so you can use this as a special selector which you'll see in the CSS. You can either use it as a body class or throughout your theme on specific guest type items completely up to you.

Next steps for the wrapper

I know this guide is starting to get uber long (but you did ask for it, I'm just saying, but there is still a little more to getting the wrapper to work the way you want. You have to code the CSS. Now you can do this from scratch or you can start editing what is available in the themes CSS template and adding your own stuff. For the sake of the request of "start to finish" I'm going to wipe out the CSS and wrap up this guide with just doing some basic theming on the elements in question so that you can see it started and we'll continue to talk about the CSS more in the next guide.

Don't forget, as always, start with copying it into a separate notepad++ tab just so you have it as a backup.

I'm using a color scheme from Colourlovers.net:

Not all colors will identically match or be in the palette but it will give us a base for our major items like our user navigation and header backgrounds.

I am a visual person personally so I can't just imagine the code and type it out like some people so I work an element at a time and just start moving down the list. So for me I'll do the overall background colors, then I'll work on the usernav, then the header, then the navigation, then the information boxes then the affiliates box then the footer. It means that I went back and forth between the wrapper and the CSS adding and moving elements as necessary to get the end result.

As it stands my final result for what we have so far is the following CSS:

body { 
	font-family: Helvetica, Arial, sans-serif; 
	font-size: 14px; 
	color: #FFF;
	margin:0px;
	padding:0px; 
	background-color:#212121; 
}

a, a:link, a:visited {
	color: #9d9797;
	text-decoration: none;
}

a:hover {
	color: #c8c8c8;
}

.ttClearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.ttContainer {
	margin: 0 auto;
	max-width: 1600px;
	padding: 0 15px;
}

.ttList_inline {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ttPos_right {
	float: right;
}

.ttPos_left {
	float: left;
}
/* User Navigation */
.ttFullUser {
	background: #6c3c48;
	display: block;
	padding: 15px;
}

.ttFullUser .ttList_inline > li {
	display: inline-block;
}

.ttuserInfo {
	display: block;
	width: 50%;
	position: relative;
}

.ttuserInfo li:not(.ttAvatar_top) {
	position: relative;
	top: 8px;
	display: block;
	margin-left: 65px;
	font-size: 1.2em;
}

.ttuserInfo .ttAvatar_top {
	float: left;
}

.ttuserInfo #ttAvatar_top {
	height: 50px;
	width: 50px;
	overflow: hidden;
	border-radius: 50%;
}

.ttuserInfo #ttAvatar_top img {
	width: 100%;
	height: auto;
}

.ttUserNav, .ttGuestNav {
	display: none;
}

.ttUser:not(.ttGroup2) .ttUserNav, .ttGroup2 .ttGuestNav {
	display: block;
}
.ttUserNav > ul {
	display: flex;
	vertical-align: middle;
	align-items: center;
	justify-items: center;
	justify-content: center;
}
.ttUserNav a, .ttGuestNav a {
	background: #9d9797;
	color: #55383c;
	font-size: 35px;
	padding: 10px;
	display: inline-block;
	margin-right: 5px;
	height: 40px;
	width: 40px;
	border-radius: 50%;
	text-align: center;
	justify-items: center;
}


/* Header */

header {
	background: transparent url(https://via.placeholder.com/1600x250);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-items: center;
	text-align: center;
	font-size: 3em;
	flex-grow: 1;
}

a header, a:hover header  {
	color: #000;
}

header > div {
	width: 100%;
}




/* Primary Navigation */

#ttPrimaryNav {
	background: #703338;
	display: block;
	padding: 10px 10px 0;
}

#ttPrimaryNav ul > li {
	display: inline-block;
}

#ttPrimaryNav ul > li > a {
	display: block;
	padding: 10px 15px;
	margin-right: 5px;
	border-radius: 5px 5px 0 0;
	background: #55383c;
	font-size: 1.3em;
}

/* Information Box */

#ttInfobox {
	background: #55383c;
	display: flex;
	padding: 10px;
	vertical-align: top;
	align-items: flex-start;
	justify-items: center;
	justify-content: center;
	height: 200px;
}

#ttInfobox > div {
	display: inline-block;
	flex-grow: 2;
	width: 32%;
	margin-right: 1%;
	height: 180px;
	padding: 10px;
	max-height: 100%;
	overflow: auto;
	background: #6c3c48;
	border: 1px solid #777;
	margin-bottom: 10px;
}

#ttInfobox > div:last-of-type {
	margin-right: 0;
}

#ttInfobox > div p:first-of-type {
	margin-top: 5px;
}

#ttInfobox date {
	font-weight: 700;
}

#ttInfobox date:after {
	content: " - ";
}

.ttInfo_staff > ul {
	display: flex;
	margin-top: 5px;
}

.ttInfo_staff > ul > li {
	display: inline-block;
	flex-grow: 2;
	width: 31%;
	margin-right: 2%;
	text-align: center;
	flex-wrap: wrap;
}

/* Main content */

#ttMain_content {
	background: #55383c;
	display: block;
	padding: 15px;
}

.ttBreadcrumb {
	background: #55383c;
	padding: 15px;
}

.ttBreadcrumb #navstrip {
	background: rgba(0,0,0,0.6);
	padding: 15px 10px;
}

.ttBreadcrumb br {
	display: none;
}


/* Affiliates */
#ttAffiliates ul {
	display: flex;
	padding: 10px;
	vertical-align: top;
	align-items: flex-start;
	justify-items: center;
	justify-content: center;
	min-height: 100px;
	text-align: center;
	background: #5e343e;
	flex-wrap: wrap;
}
#ttAffiliates li {
	display: inline-block;
	flex-grow: 2;
	padding: 5px;
	background: #6c3c48;
	border: 1px solid #777;
	margin-bottom: 10px;
	margin: 2px;
}

#ttAffiliates li > a {
	display: block;
	height: 31px;
}

#ttAffiliates li img {
	height: 31px;
	width: 88px;
}



/* Footer */

footer {
	background: #55383c;
	text-align: center;
	display: block;
	padding: 15px;
}

/* Get rid of the default header stuff that you're allowed to */
#logostrip, #submenu, #userlinks, footer br {
	display: none;
}



/* Universal Styles */

/* Inputs */


/* Header Titles */
h1,h2,h3,h4,h5 {
	margin: 0;
}
h1.ttHeader, .ttHeader h1, h2.ttHeader, .ttHeader h2, h3.ttHeader, .ttHeader h3, h4.ttHeader, .ttHeader h4, h5.ttHeader, .ttHeader h5 {
	font-size: 2em;
	border-bottom: 6px solid #6b0513;
	color: #FFF !important;
	padding: 25px;
}

h1.ttHeader_small, .ttHeader_small h1, h2.ttHeader_small, .ttHeader_small h2, h3.ttHeader_small, .ttHeader_small h3, h4.ttHeader_small, .ttHeader_small h4, h5.ttHeader_small, .ttHeader_small h5 {
	font-size: 1.3em;
	border-bottom: 6px solid #6b0513;
	color: #FFF !important;
	padding: 8px;
}

The two combined create the following appearance (the size screen this is on is 1920x1080):

One is logged in and one is logged out. I just wanted to show the CSS for the guest view in action.

With that I'm ending this particular tutorial. We'll continue with HTML Templates and Macros in the future.

Edited August 28, 2019 by Morrigan

Sign In

Jcink Theming: Board Wrappers

(0 reviews)

Related Guides

Jcink Themeing: What you Need

Move Jcink Alerts Popup

Jcink Theming: Creating the theme

Determining your look

User Feedback

Create an account or sign in to leave a review

Create an account

Sign in

Announcements

Categories

Guides

RPG Resources

Activity

My Activity Streams

Community

Important Information