Apr 20 2017, 04:28 PM
So, I've done this. I know it SHOULD work. I have a working code (that won't work where I'm trying to use it crazily enough.) for a tabbed mini on another board, but I blame it on being rusty. I've got a really pretty mini profile coded, except my tabs in my hover on it are acting all kinds of crazy. As in when you hover the first time, the main tab won't show up, you have to click on the button and then it pops up. Then you can do the same for the second tab, that works.
Scroll down, and it won't work at all on the second. I've gone over my previous topic for help with this before, trying to get answers. I've tried two different codes with no success. This is the only one that seems to "like" me, and it is still misbehaving. If anyone can help, I'd GREATLY appreciate it since I've been working on this skin off and on for months now and this is the main thing I'm stuck on before I'm able to actually finish it.
Here's the link to the board:
http://codehaven.jcink.net/index.php
The part of the mini's html template not behaving:
And CSS for it:
Scroll down, and it won't work at all on the second. I've gone over my previous topic for help with this before, trying to get answers. I've tried two different codes with no success. This is the only one that seems to "like" me, and it is still misbehaving. If anyone can help, I'd GREATLY appreciate it since I've been working on this skin off and on for months now and this is the main thing I'm stuck on before I'm able to actually finish it.
Here's the link to the board:
http://codehaven.jcink.net/index.php
The part of the mini's html template not behaving:
CODE |
</div><div class="minipCont"><div class="minipBg"> <div class='cwmini-wrap'><div class='cwmini-hvr' div style='background-image:url(<!-- |avatar_url| -->);'><div class='info' div style='background-color:<!-- |g_icon| -->;' ><div class='cw-miniav'><img src='<!-- |field_18| -->'></div><div class='cwmini-inf'><div class='cwmini-info'><div class="minitabs"> <div class="minitab"> <input type="radio" id="tab-1" name="tab-group-1" checked> <label for="tab-1">i</label> <div class="minicontent"><div class='cwmini-ratc' div style='background-color:<!-- |g_icon| -->;'><div class='cwml' title='language'>L</div><div class='cwms' title='sex'>S</div><div class='cwmv' title='violence'>V</div><div class='cwmln'><!-- |field_19| --></div><div class='cwmsn'><!-- |field_20| --></div><div class='cwmvn'><!-- |field_21| --></div></div><div class='cwmini-stf'><span>job</span><!-- |field_9| --></div><div class='cwmini-stf'><span>relationship</span><!-- |field_10| --></div><div class='cwmini-stf'><span>sexuality</span><!-- |field_11| --></div><div class='cwmini-age' div style='background-color:<!-- |g_icon| -->;'><!-- |field_3| --> years old</div><div class='cwmini-stf2'><!-- |field_15| --></div></div></div> <div class="minitab"> <input type="radio" id="tab-2" name="tab-group-1"> <label for="tab-2" style="margin-left: 62.5px;">ii</label> <div class="minicontent"><div id="cwtab2"><div class='cwmini-quote'><b><div style='color:<!-- |g_icon| -->;'>“</div></b><!-- |field_12| --></div><div class='cwmini-awards'><!-- |awards| --></div></div></div></div></div></div> </div></div></div><div class='cwmini-grp' div style='background-color:<!-- |g_icon| --> !important;'><div class='cwmini-grnme'><!-- |g_title| --></div></div></div></div> </div> |
And CSS for it:
CODE |
/***************************************** CW Minis ******************************************/ .cwmini-wrap { display: block; background-color: #F8F5E9; border: 1px solid #EFE9CF; position: relative; overflow: hidden; height: 502px; width: 242px; padding: 5px; margin-top: 7px; margin-left: -12px; } .cwmini-hvr { width: 240px; height: 400px; border: 1px solid #EFE9CF; display: inline-block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; background: #9772ab; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; overflow: hidden; z-index: 99; } .cwmini-hvr:before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: 0; background: #FEFEFC; -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } .cwmini-hvr:hover, .cwmini-hvr:focus, .cwmini-hvr:active { } .cwmini-hvr:hover:before, .cwmini-hvr:focus:before, .cwmini-hvr:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .cwmini-hvr .info { width: 218px; height: 378px; padding: 10px; background-color:#753B53; position: absolute; bottom: -408px; right: 1px; transition-duration: .6s; -webkit-transition-duration: .6s; -moz-transition-duration: .6s; -ms-transition-duration: .6s; -o-transition-duration: .6s; z-index: 9; outline: 1px solid #FEFEFC; outline-offset:-10px; } .cwmini-hvr:hover .info { bottom: 1px; } .cw-miniav { width: 106px; height: 77px; background: rgba(248, 245, 233, 0.31); border: 1px solid #EFE9CF; padding: 5px; margin-top: 25px; margin-left: 51px; } .cw-miniav img { width: 105px; height: 75px; border: 1px solid #EFE9CF; } .cw-miniav:after { content: ''; margin-left: -57px; margin-top: -64px; width: 220px; display: block; position: absolute; z-index: -1; height: 0; border-top: 88px solid transparent; border-left: 220px solid #FEFEFC; border-right: 0px solid transparent; } .cwmini-inf { background: #FEFEFC; height: 246px; margin-top: 18px; } .cwmini-info { position: absolute; margin-top: -10px; padding: 10px; color: #9C8671; font-family: 'Montserrat'; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; } .cwmini-ratc { background-color:#753B53; width: 150px; height: 40px; border: 1px solid #EFE9CF; padding: 4px; margin-left: 20px; margin-top: 0px; outline: 1px solid #EFE9CF; outline-offset: -5px; margin-bottom: 5px; } .cwml { display: inline-block; border-bottom: 1px solid #EFE9CF; border-right: 1px solid #EFE9CF; padding: 0px 20.9px; background:rgba(248, 245, 233, 0.71); color: #FFF; font-weight: 700; } .cwms { display: inline-block; border-bottom: 1px solid #EFE9CF; border-right: 1px solid #EFE9CF; padding: 0px 20.9px; background:rgba(248, 245, 233, 0.71); color: #FFF; font-weight: 700; } .cwmv { display: inline-block; border-bottom: 1px solid #EFE9CF; padding: 0px 20.9px; background:rgba(248, 245, 233, 0.71); color: #FFF; font-weight: 700; } .cwmln { display: inline-block; border-right: 1px solid #EFE9CF; background:rgba(248, 245, 233, 0.31); padding: 1px 18px; font-weight: 700; font-size: 18px; color: #FFF; } .cwmsn { display: inline-block; border-right: 1px solid #EFE9CF; background:rgba(248, 245, 233, 0.21); padding: 1px 19px; font-weight: 700; font-size: 18px; color: #FFF; } .cwmvn { display: inline-block; background:rgba(248, 245, 233, 0.31); padding: 1px 19px; font-weight: 700; font-size: 18px; color: #FFF; } .cwmini-stf { width: 195px; padding: 9px 2px; border: 1px solid #EFE9CF; background:rgba(248, 245, 233, 0.31); line-height: 95%; margin-bottom: 3px; margin-left: 5px; font-weight: 700; font-size: 8px; } .cwmini-stf2 { width: 200px; margin-top: 3px; padding: 6px 2px; border: 1px solid #EFE9CF; background:rgba(248, 245, 233, 0.31); line-height: 95%; margin-bottom: 3px; margin-left: 2px; font-weight: 700; font-size: 9px; text-align: center; } .cwmini-stf span { color: #F8F5E9; background-color: #66594E; border-right: 1px solid #efe9cf; font-size: 8px; font-weight: 700; text-align: center; float: left; margin-top: -8px; margin-left: -1px; margin-right: 5px; display: block; line-height: 95%; padding: 8px 6px; text-align: center; } .cwmini-age { width: 190px; height: 15px; padding: 15px 10px; background: #753B53; line-height: 100%; outline: 1px solid; outline-offset: -6px; margin-top: 5px; color: #FFF; font-weight: 700; font-size: 15px; text-align: center; } .cwmini-quote { font-family: 'Calibri'; font-size: 9px; width: 200px; height: 25px; padding: 5px; text-align: justify; overflow: auto; word-spacing: -1.5px; line-height: 95%; } .cwmini-quote b { color: #753B53; font-size: 25px; font-family: 'Playfair Display'; display: inline-block; float: left; padding: 2px 4px; } .cwmini-grp { width: 222px; height: 75px; margin-top: 5px; padding: 10px; position: absolute; background-color:#753B53; outline: 1px solid #FEFEFC; outline-offset:-10px; z-index: 1; } .cwmini-grnme { font-family: 'Selima'; text-shadow: 1px 1px #000; font-size:45px; letter-spacing:-1px; color:#9C8671; text-transform: lowercase !important; text-align: center; margin-top: 15px; } .cwmini-grnme:after { content: ''; margin-left: 0px; margin-top: -31px; width: 135px; display: block; position: absolute; z-index: -1; height: 0; border-top: 75px solid #FEFEFC; border-left: 0px solid transparent; border-right: 75px solid transparent; } .cwmini-awards { width: 195px; height: 165px; padding: 5px; overflow: auto; margin-top: 5px; border: 1px solid #EFE9CF; } #cwminitabs { list-style: none; background-color: #F8F5E9; padding: 0px; display: table; width: 250px; margin-bottom: 0px; } #cwminitabs li { background: #F8F5E9; font-family: calibri; text-align: center; color: #fff; text-transform: uppercase; font-size: 10px; padding-top: 2px; width: 102.5px; height: 18px; z-index: 4; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; display: table-cell; } #cwminitabs li a { color: #fff; } #cwminitabs li.active { background: #EFE9CF; } #cwminitabs_content_container { background: transparent; } #cwtab2 { width: 220px; height: 220px; position: relative; background: transparent; overflow: hidden; } .minitabs { margin-top: 120px; width: 250px; height: 200px; } .minitab { float: left; } .minitab label { display: inline-block; background: #F8F5E9; font-family: calibri; text-align: center; color: #9C8671; text-transform: uppercase; font-size: 10px; padding: 6px 12.5px 2px 12.5px; line-height: 100%; position: absolute; margin: 5px -35px; left: 35px; top: 225px; height: 16px; width: 95px; z-index: 4; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; } .minitab [type=radio] { display: none; } .minicontent { position: absolute; top:0px; bottom: 0px; left: 0px; right: 0px; background: transparent; padding: 5px; transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; opacity: 0; } [type=radio]:checked ~ label { background: #EFE9CF; z-ndex: 2; } [type=radio]:checked ~ label ~ .minicontent { z-index: 1; opacity: 1; } |