Help JCINK Theme Help

[StormWolfe 557]

@Kit the Human

 

If this is not the appropriate place to request help / support for this theme, please tell me where to go! Seriously, I looked all over the site where I found this theme and was not sure which of the many forums to post this in. Also, if this is the wrong place to ask for help with this theme on this board, please move it - or if I need to separate out the bits I need help with into different posts, please let me know. I'll copy, paste, and edit as needed.

 

I also want to express my sincere and deep appreciation for any and all assistance.

 

By the way, I am coding clueless - treat me like the JCINK Village Idiot.

 

First and foremost, the theme is amazing. I'm hoping to use it for two JCINK sites (one mine, one for a friend). It offers everything, the code was easy to install and seems to work right out of the box. All I need to do is modify images and colors.

 

And, I so love IPS. Unfortunately, I cannot afford a 3rd IPS site right now.

 

Except - I think I've broken something!

 

Theme Name: Pages [Link]

 

My JCINK Dev Site [Link]

 

I successfully installed the theme with some documentation assistance. Seriously, my learning curve has flatlined.

 

There are two three on my site that I have been unable to resolve. I think I broke something.

 

Sidebar Avatar & Chat

I am not sure how it is supposed to display since I cannot login in at the site where the Pages theme is previewed. I have attempted to change the settings in the wrapper and stylesheet which did not work. The only thing that allowed the avatar to display correctly was removing the avatar's sideboard code completely which I'm sure breaks something somewhere else 😉 I am not wedded to having an image there although it would be nice to have. From what I can find by firebugging the Pages theme preview site, the avatars are set at 250 x 400 (which I like).

 

Right now I have a temporary Cbox in the sidebar just like the Preview site. I would love to change that out to a Discord WidgetBot. Any idea if that would work? If not, could JCINK's native (built-in) Shoutbox go here? And how would I do that?

 

Profile Display (screenshots at bottom)

This one is hard to explain in words since I am not conversant with the terminology. I am viewing everything using Chrome with page zoom at 100%. Any smaller and I cannot read the text even with glasses.

 

The Pages preview site shows the basic profile information beside the avatar (excellent layout). This was one of the reasons I chose this theme over others.  However, my site shows the Message, Tracker, Shipper beneath the avatar. It appears as if somewhere, somehow, my board width may have gotten garbaged. I have not tackled trying to change board width settings or font sizes yet because I am afraid.

 

Next, I would actually like to move things around (see screenshots at the bottom) on the profile. If possible, I'd love to move the tabbed character bio to where the basic profile information is and move the profile info to where the character tabbed bio currently displays. Basically, I'd love to have the profile layout show similar to this link. 

 

Note: I will likely have to add a couple of tabs to the bio (I even know how to do that) 😉 Both my site and the one I am trying to modify this theme for uses fairly extensive bios but we do not use plotters, shippers or trackers right now.

 

The below screenshots hopefully give further explanation of my issues with the theme code. I am sure the issues are mine and not the code's. 

 

 

 

 

 

 

 

My site showing the profile layout. Note how the layout differs from the original theme's

preview site (next screenshot).

 

Preview Site with the changes I would love to get help implementing.

 

My Site showing the sidebar next to a sample post.

Edited July 12, 2018 by Stormwolfe

[Kit the Human 758]

Aside: the script I wrote for the info box sucks ass XD I'll write a scriptless alternative and put it in the codex here. You should use that instead.

 

I'm sure that there are not so great things with the code as a whole XD I'm self-taught too!

 

Onto your stuff:

 

8 hours ago, Stormwolfe said:

The only thing that allowed the avatar to display correctly was removing the avatar's sideboard code completely which I'm sure breaks something somewhere else

 

It shouldn't affect anything else. I'm not sure why you were having trouble with it because the CSS is just positioning and a resize. This is how it's supposed to appear.

 

8 hours ago, Stormwolfe said:

I would love to change that out to a Discord WidgetBot. Any idea if that would work?

 

I can't think why not, try it out and see how it goes.

 

8 hours ago, Stormwolfe said:

However, my site shows the Message, Tracker, Shipper beneath the avatar.

 

You can do two different things to fix this. It's caused by the name length.

 

Way One:

.info {
    background: #111;
    flex-grow: 2;
    padding: 2px;
    flex-basis: 40%;
    border: 1px solid #000;
    outline: 1px solid #0a0a0a;
    margin: 6px 5px;
}

Make flex-basis smaller. 35% worked for me.

 

OR:

 

Go to the main profile HTML template and find the following:

 

				<a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->">
					<i class="fa fa-comment fa-fw" aria-hidden="true"></i> <!-- |name| -->'s <!-- |posts| --> Posts
				</a>

 

Delete <!-- |name| -->'s so that you get

 

				<a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->">
					<i class="fa fa-comment fa-fw" aria-hidden="true"></i><!-- |posts| --> Posts
				</a>

 

I think that just removing the name variable is the better solution.

 

Also....I think that this problem will sort itself out with the main profile changes. So don't do the above until you have moved everything else around.

 

For the main profile, replace your stuff with this:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://files.jcink.net/uploads/kittylitter/tabswitcher.js"></script>

<div class="profile">
	<div class="name">
		<!-- |name| -->
	</div>
	<div class="profile-inner">
		<div class="avatar-holder">
			<!-- |avatar| -->
		</div>
		<!-- TABS HERE -->
		<div class="profile-content">
			<ul class="tabs">
				<li>
					<a href="#tab1">Biography</a>
				</li>
				<li>
					<a href="#tab2">Personality</a>
				</li>
				<li>
					<a href="#tab3">Other</a>
				</li>
				<li>
					<a href="#tab4">Awards</a>
				</li>
			</ul>
			<div class="tab_container">
				<div id="tab1" class="tab_content">
					Biography - Tab 01
				</div>
				<div id="tab2" class="tab_content">
					Personality - Tab 02
				</div>
				<div id="tab3" class="tab_content">
					Other Stuff - Tab 03
				</div>
				<div id="tab4" class="tab_content">
					Awards - Tab 04<p />
					<!-- |awards| -->
				</div>
			</div>
		</div>
		<!-- END TABS -->
	</div>
	<!-- INFO MOVED TO BOTTOM -->
	<div class="flex"><div class="info">
		<div class="info-banner">
			<div class="background-banner">
				<div class="heading-info">Name</div>
				<div class="content-info"><!-- |field_2| --></div>
			</div>
			<div class="background-banner">
				<div class="heading-info">Age</div>
				<div class="content-info"><!-- |field_3| --></div>
			</div>
			<div class="background-banner">
				<div class="heading-info">Place</div>
				<div class="content-info"><!-- |field_4| --></div>
			</div>
			<div class="background-banner">
				<div class="heading-info">Contact</div>
				<div class="content-info"><!-- |field_5| --></div>
			</div>
			<div class="background-banner">
				<div class="heading-info">Timezone</div>
				<div class="content-info"><!-- |field_6| --></div>
			</div>
			<div class="background-banner">
				<!-- |subaccounts| -->
			</div>
			<div class="background-banner">
				<div class="content-info">
					<!-- |activity| -->
					<!-- |last_activity| -->
				</div>
				<div class="content-info">
					<p />Last post <!-- |last_post| -->
				</div>
			</div>
		</div>
	</div>
	<!-- END INFO -->
	<!-- LINKS -->
	<div class="links-list">
		<a href="/?act=Msg&CODE=04&MID=<!-- |id| -->">
			<i class="fa fa-envelope fa-fw" aria-hidden="true"></i> Message
		</a>
		<a href="#">
			<i class="fa fa-thumb-tack fa-fw" aria-hidden="true"></i> Tracker
		</a>
		<a href="#">
			<i class="fa fa-ship fa-fw" aria-hidden="true"></i> Shipper
		</a>
		<a href="/index.php?act=Search&CODE=getalluser&mid=<!-- |id| -->">
			<i class="fa fa-comment fa-fw" aria-hidden="true"></i> <!-- |name| -->'s <!-- |posts| --> Posts
		</a>
	</div></div>
	<!-- END LINKS -->
</div>

CSS Changes:

 

Find .profile-content and add flex-grow: 2; So you get

.profile-content {
    padding-top: 1%;
    flex-grow: 2;
}

Change the .info CSS so that you don't have any margins, except on the right. So it should become:

.info {
    background: #111;
    flex-grow: 2;
    padding: 2px;
    flex-basis: 40%;
    border: 1px solid #000;
    outline: 1px solid #0a0a0a;
    margin-right: 5px;
}

Add this with the other main profile CSS things

.flex {
    display: flex;
    margin-top: 6px;
}

This is the result:

 

Let me know how you go!

[StormWolfe 557]

@Kit the Human  You are my idol! I'll tackle these changes after I've had the appropriate amount of caffeine. I'm excited to try it.

[StormWolfe 557]

*chuckles*

 

Don't give me kudos too soon. I broke the tabs somehow.

 

Update: Make that, I broke the main profile page.

 

Still picking at it - but Houston, we have a problem. 

Edited July 13, 2018 by Stormwolfe

[StormWolfe 557]

None of this is urgent! I feel like I am plaguing you to death. Color me clueless so if this gets too aggravating, please tell me! I am going to take one issue at a time from here. I am still completely and totally enamored with this theme - especially the Main Profile layout! It is going to be beyond amazing when I stop destroying things.

 

If I haven't said it before, I am humbly grateful for all of your help and your time.

 

@Kit the Human

 

UPDATE / EDIT: I fixed the tab switcher issue! Go me!

 

So, now down to the sidebar avatar fix - I think.

Edited July 13, 2018 by Stormwolfe

[StormWolfe 557]

@Kit the Human  - as usual, this is so not urgent!

 

I am back! As mentioned, I did get the tabs to working and now just need to add the fields to them and then tweak them so they display just right.

 

The next thing I need to sort is the avatar display in the sidebar - or a good alternative, maybe display a perfectly square personal photo instead of the avatar?

 

I have prowled the CSS, settings, and everything I could think of and have had no luck in fixing it. I am seriously leaning toward using the smaller personal photo instead of the actual site avatar there. 

 

So...this rambling brings me to...

 

1.  How to get the sidebar avatar to display correctly - OR -

2. How to switch it out and have it display the personal photo.

 

PS: I'll be moving the credits and fixing the links later. I have not gotten as far as working on the footer. It felt a tad crowded + I need to figure out how / where to make the group legend display.

 

 

[StormWolfe 557]

@Kit the Human  Hey - this is not a prod because there is no rush. Just wanted to get this post up before you spent much time on the avatar issue.

 

I am officially giving up and going to request a custom JCINK theme. For every thing I fix, I find something else I've broken. Not sure if it's me or JCINK. I do need to finish the project I started for my friend's JCINK site, hence finding a place where I can request an out-of-the-box customization with the features we want.

 

This in no way reflects on your theme! It is gorgeous! I simply do not have the skill it takes to do a wholesale modification.

 

However, I do know that when I finally start work on my own 3rd site, I will find an option other than JCINK (my next topic).

 

Thank you so very much for all of your help! You're totally and completely awesome.

[Kit the Human 758]

No worries! For the sake of answers though:

 

If you add a max-height and max-width to (I think I named it) .sidebar-avatar img, you'll resize the avatar in the sidebar.

 

Alternatively, you can delete the border-radius and height/width on .sidebar-avatar and then delete the positioning on .sudebar-avatar img to just spit out the avatar like it appears in posts.

 

I understand that you're moving on from jcink! Just putting the answer out there for the sake of completion.

[StormWolfe 557]

No, I really really appreciate and need the answer. I, personally, will look for an alternate forum for my site. I am, however, still committed to helping my friend and she will likely stay with JCINK.

 

Either way, I had to scrub my test site because it was so cluttered from my testing. I am going to tackle it again, but in a less free-for-all manner. I think I might need to get the tabbed profiles working right first and then tackle the other issues. So, using one of JCINK's defaults, I am going to play with getting the profiles the way I want them first and then tackle everything else.

 

I also needed a breather from working on it because I was pissing myself off! 😉

[Kit the Human 758]

No worries! I submitted a tabbed thinger in the codex (other) that is css only - if that helps.

[StormWolfe 557]

Is this it?

 

 

I'll try creating a Main Profile HTML template on my test site and see how it goes.

[Kit the Human 758]

That's the one!