Profile
Personal Photo

No Photo

Options
Custom Title
metaphorical doesn't have a custom title currently.
Personal Info
Location: No Information
Born: 6 November 1988
Website: No Information
Interests
No Information
Other Information
Gender:: Female
Test:: No Information
Statistics
Joined: 07/24/2012
Status: (Offline)
Last Seen: Jun 4 2013, 06:33 PM
Local Time: Jan 21 2018, 09:40 PM
7 posts (0 per day)
( 0.00% of total forum posts )
Contact Information
AIM No Information
Yahoo No Information
GTalk No Information
MSN No Information
SKYPE No Information
Unread Message Message: Click here
Unread Message Email: Click Here
Signature
View Signature

metaphorical

Members

Topics
Posts
Comments
Friends
Video
My Content
Aug 1 2012, 09:51 PM
Hello there!

I'm very new to using the JCINK software and while I love everything about it so far, I seem to have gotten stuck on two things I'm trying to do with my site's layout right now.

First, I'm having mini profile issues.

What I want is to have a mini profile that is different for accepted members, admins, pending members, and guests (if guests even have mini profiles, I'm not sure how that works-- like I said, super greenhorn here). I saw another thread about this and tried the coding that made mini profiles specific to member groups, but for some reason it didn't seem to work. The code I have currently (that I'll be using for all accepted members) is:

CODE
<div align='center'>
<div class="postbit2"><span class='avatarSpan'><!-- |avatar| --></span></div></div>
<div class="postbit3"><div align='center'><div style='margin-top: -98px; width: 200px;'> <!-- |member_rank_img| --></div></div></div>
<div style='margin-top: -40px; '><div class="postbit4"><div style='margin-left: 13px;'><!-- |field_2| --> </div></div></div>

<div style='margin-top: -85px; margin-left: 115px; '><div class="postbit"><!-- |field_6| --> </div></div>
<div style='margin-top: -5px; margin-left: 115px; '><div class="postbit"><!-- |field_1| --> </div></div>
<div style='margin-top: -5px; '><div class="postbit5"><div style='margin-left: 50px; '><a href="<!-- |field_3| -->">App</a> ◆ </div></div></div>
<div style='margin-top: -35px; margin-left: 110px; '><div class="postbit5"><a href="<!-- |field_4| -->">Plot</a> </div></div>

<div style='margin-top: -22px; '><!-- |field_5| --></div>

<div align='center'><div style='margin-top: -10px;'><div class="oocname">Played By <!-- |field_7| --> </div>

<!-- |awards| --> <div>


I also have a code for 'default avatar' in the board wrappers as I initially assumed the weird offset characteristic of all the fields below the avatar could be solved if all accounts had an avatar (I've since figured out it's probably the member group location that's hampering everything, but haven't gotten around to removing the default avatar code yet).

The link to an example of the problem is here: http://wearebutterflywolves.b1.jcink.com/i...9&st=0&#entry86

If you need anything else, let me know! Any help would be great-- like I said, I'm only just getting used to coding on this software so any direction is awesome.


And now for problem two: trying to get content into an animated content table.

In our menu, we have a table with coding from this website. It's beautiful and is in the right position and is exactly what we want, but I'm having problems getting our cbox into the second tab. I believe it has something to do with the DIV codes in the cbox code (we use a cbox from cbox.ws) interacting weirdly with the table code.

In the comments section of the article they talk about: "Make sure that you understand the sibling combinator. If you don’t like the z-index, you can use visibility. Just use you mind!" and while I do know some about z-index, I'm not sure how that applies in this scenario.

The link to the main website with the table is: http://wearebutterflywolves.b1.jcink.com/

The html for the code is:
CODE
<div style="position: relative; margin-top: 140px; margin-left:248px; z-index: 1000;"><section class="tabs">
   <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
   <label for="tab-1" class="tab-label-1">Welcome</label>
   
   <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
   <label for="tab-2" class="tab-label-2">Cbox</label>
   
   <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
   <label for="tab-3" class="tab-label-3">Updates</label>
   
   <input id="tab-4" type="radio" name="radio-set" class="tab-selector-4" />
   <label for="tab-4" class="tab-label-4">Requests</label>
           
   <div class="clear-shadow"></div>
               
   <div class="content">
       <div class="content-1">
           <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
       </div>
       <div class="content-2">
           <div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="265" height="157" src="http://www3.cbox.ws/box/?boxid=3342294&amp;boxtag=mfdjwm&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain3-3342294" style="border: 0px solid;" id="cboxmain3-3342294"></iframe></div>
<div><iframe frameborder="0" width="265" height="75" src="http://www3.cbox.ws/box/?boxid=3342294&amp;boxtag=mfdjwm&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform3-3342294" style="border: 0px solid;border-top:0px" id="cboxform3-3342294"></iframe></div>
</div>
       </div>
       <div class="content-3">
           <p>More content</p>
       </div>
       <div class="content-4">
           <p>Some content</p>
       </div>
   </div>
</section></div>



The CSS is:
CODE
/* TABBED TABLE CODE */
.tabs {
   position: relative;
margin: 20px auto;
width: 534px;
}

.tabs input {
position: absolute;
z-index: 1000;
width: 130px;
height: 30px;
left: 0px;
top: -55px;
opacity: 0;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
cursor: pointer;
}
.tabs input#tab-2{
top: -25px;
}
.tabs input#tab-3{
top: 15px;
}
.tabs input#tab-4{
top: 45px;
}

.tabs label {
background: #F9F4EA;
background: -moz-linear-gradient(top, #F9F4EA 0%, #F9F4EA 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F4EA), color-stop(100%,#F9F4EA));
background: -webkit-linear-gradient(top, #F9F4EA 0%,#F9F4EA 100%);
background: -o-linear-gradient(top, #F9F4EA 0%,#F9F4EA 100%);
background: -ms-linear-gradient(top, #F9F4EA 0%,#F9F4EA 100%);
background: linear-gradient(top, #F9F4EA 0%,#F9F4EA 100%);
       opacity: .9;
font-size: 13px;
line-height: 30px;
height: 30px;
position: relative;
       top: -55px;
padding: 0 10px;
display: block;
width: 80px;
color: #8C8982;
letter-spacing: 1px;
text-transform: uppercase;
font-weight: bold;
text-align: right;
float: left;
clear: both;
text-shadow: 1px 1px 1px rgba(255,255,255,0.3);
   border-radius: 3px 0 0 3px;
   box-shadow: 0px 2px 2px rgba(0,0,0,0.1);
}

.tabs label:after {
   content: '';
position: absolute;
right: -2px;
top: -55px;
width: 2px;
height: 100%;
}

.tabs input:hover + label {
background: #E2DED5;
}

.tabs label:first-of-type {
   z-index: 4;
}

.tab-label-2 {
   z-index: 3;
}

.tab-label-3 {
   z-index: 2;
}

.tab-label-4 {
   z-index: 1;
}

.tabs input:checked + label {
   background: #FFF;
z-index: 6;
}

.clear-shadow {
clear: both;
}

.content {
   background: #F4EFE6;
position: relative;
   width: auto;
margin: -175px 0 0 100px;
height: 270px;
z-index: 5;
overflow: hidden;
opacity: .75;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
   border-radius: 3px;
}

.content div {
   position: absolute;
top: 0;
padding: 10px 40px;
z-index: 1;
   opacity: 0;
   -webkit-transition: all linear 0.5s;
   -moz-transition: all linear 0.5s;
   -o-transition: all linear 0.5s;
   -ms-transition: all linear 0.5s;
   transition: all linear 0.5s;
}

.content div{
-webkit-transform: translateY(-450px);
-moz-transform: translateY(-450px);
-o-transform: translateY(-450px);
-ms-transform: translateY(-450px);
transform: translateY(-450px);
}

.tabs input.tab-selector-1:checked ~ .content .content-1,
.tabs input.tab-selector-2:checked ~ .content .content-2,
.tabs input.tab-selector-3:checked ~ .content .content-3,
.tabs input.tab-selector-4:checked ~ .content .content-4 {
   -webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
   z-index: 100;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transition: all ease-out 0.3s 0.3s;
   -moz-transition: all ease-out 0.3s 0.3s;
   -o-transition: all ease-out 0.3s 0.3s;
   -ms-transition: all ease-out 0.3s 0.3s;
   transition: all ease-out 0.3s 0.3s;
}

.content div h2,
.content div h3{
color: #398080;
}
.content div p {
font-size: 14px;
line-height: 15px;
text-align: justify;
margin: 0;
color: #6D6B65;
padding-left: 15px;
font-family: Verdana, Cambria, Georgia, serif;
border-left: 8px solid #DDE2E6;
}

}
.content div p2 {
z-index: 3;
}



------------------------------------------------------------------------

Sorry for the long thread! I've been trying to work my way through these problems and I'm just hitting a wall, so any help would be great!
Last Visitors


Aug 10 2012, 09:37 AM




Aug 9 2012, 04:21 PM




Aug 9 2012, 02:59 PM



Comments
No comments posted.
Add Comment