Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 custom mini profile issues
#
Hey all! So, I've recently given coding a shot, and have delved into the world of mini-profiles. I got the code all set up, CSS and all, and slotted into the appropriate places; I also made sure that the custom profile fields were set up with their corresponding field numbers all in order. So far so good, except for some reason, nothing is showing up? I also made sure to allocate the custom template to the correct skin, and that changed almost nothing; I've run into this issue a couple of times before with other skins and other templates, but have managed to fix it with some fiddling without really knowing what I'm doing.

Luckily, the coding itself isn't on the main board, but rather on a tester I made for this very purpose because I'm not trying to break everything (which I've been known to do). Any help would be super appreciated!

CSS:

CODE
.hoverminiprof { opacity:0.0; height: 450px; width: 300px; line-height: 130%; background-color:#fff; -webkit-transition: opacity .6s linear; -moz-transition: opacity .6s linear; -o-transition: opacity .6s linear; overflow:auto; }
.hoverminiprof:hover { opacity: .70; }

.mpmain { width: 300px; height: 450px; position: absolute; top: 0px; left: 0px; }
.mpav { width: 300px; height: 450px; position: absolute; }
.mpstatus {padding: 15px; background-color: transparent; color: #696969; font-family: Montserrat; text-transform: uppercase; font-size: 10px; text-align:center; letter-spacing: 2px; line-height: 100%; }
.mpname {width: 250px; padding: 15px; background-color: transparent; font-family: Montserrat; text-transform: uppercase; font-size: 20px; text-align: center; letter-spacing: 2px; word-spacing: 4px; line-height: 100%;}
.mp1 { width: 250px; height: 400px; background-color: #f7f7f7; position: absolute; left: 25px; top:55px }
.mp2 { padding-top: 10px; padding-bottom: 10px; width: 200px; color: #696969; font-family: Montserrat; text-transform: uppercase; font-size: 8px; text-align: center; letter-spacing: 2px; line-height: 100%; border-bottom:1px solid #696969; }
.mpgif { height: 100px; width: 225px;  position: absolute; bottom: 10px; left: 12px;}


.mpgroup #g-6 { background-color: #817706; }
.mpgroup #g-7 { background-color: #1a397a; }
.mpgroup #g-8 { background-color: #4f1a7a; }
.mpgroup #g-9 { background-color: #1a7a39; }
.mpgroup #g-10 { background-color: #7a2c1a; }
.mpgroup #g-4 { background-color: #313131; }


HTML

CODE
<center><div id="g-<!-- |g_id| -->" class="mpmain"><div class="mpname"><!-- |name| --></div><div class="mpav" style="background-image:url('http://placehold.it/300x450')"></div><!-- |avatar| --><div class="hoverminiprof"><div class="mp1"><div class="mp2"><!-- |field_1| --> years old</div><div class="mp2"><!-- |field_2| --></div><div class="mp2"><!-- |field_3| --></div><div class="mp2"><!-- |field_4| --></div><div class="mp2"><a href="<!-- |field_5| -->">shipper</a></div><div class="mp2"><a href="<!-- |field_6| -->">development</a></div><div class="mp2"><a href="<!-- |field_7| -->">request</a></div><div class="mp2"><span><!-- |posts| --> posts</span></div><div class="mp2">played by <!-- |field_8| --></div><div class="mpstatus"><!-- |status| --></div><div class="mpgif"><img src="http://placehold.it/225x100"></div></div></div></div></center>


Testing board

Thanks in advance!
PM
#
you need to enable the use of the custom profile field variable, if you haven't already done that. in the "profile templates" section of the skins & templates part of your admin cp, you have to select YES where it says "Enable use of Custom Profile Field variables in templates? Required to use <!-- |field_#| --> variables." otherwise the fields just won't show up at all.
PM
#
In this case the issue has nothing to do with the above. It's a CSS issue. I can clearly see that HTML is being generated in your mini profile, but it is in the wrong place. I can see the MP in the upper left hand corner in-topic which is definitely where it shouldn't be. The fields are showing blank data because no information is filled out on the profile for that info; but you probably already know this.

Can you fix this in the css first:

CODE
****
MINI PROFILE
****


should be:

CODE
/****
MINI PROFILE
****/


It's definitely cancelling out some of your mini profile design syntax.

signature
email: admin@jcink.com :: blog: John C.
#
It's showing up now, but it's still hovering in the left hand side of the screen, hiding with the sidebar; I fixed the initial CSS issue you pointed out as well, so I'm not quite sure how to fix that, unless it's just a positioning issue in my coding? In which case I'm... honestly still not sure what to do, oops.
PM
#
i feel like it's this in your .mpmain class
CODE
position: absolute; top: 0px; left: 0px;


i would use
CODE
position: relative; top: ##px; left: ##px;


because relative will keep it in the container you've made, but absolute uses the whole webpage, from my experience. i doubt that makes sense to anyone but myself but try that! obviously changing the ## to the numbers you need

This post has been edited by jess the hufflepuff: Jan 11 2018, 10:11 PM
PM
#
In your CSS, find this:

.mpmain { width: 300px; height: 450px; position: absolute; top: 0px; left: 0px; }

And change it to this:

.mpmain { width: 300px; height: 450px; position: relative; }

edit: oops, sorry, didn't see the answer was already posted!

This post has been edited by owl: Jan 11 2018, 10:19 PM

signature
user posted image

Please do not use my site Discord / DM / PM me for support.
#
Wah! Bless all your cotton socks, y'all <3
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll