[frost]

So, me and a couple of my friends started this new forum on Proboards. BUT. We're noobs on this host.

And we're pretty much noobs with coding as well. ;-;

We applied PHARAOH LEAP 's operation mindcrime skin. But the avatar circle in the header is messed up. It has permanently shifted to the right and bottom.

Any idea how to fix it?

[Hunter]

Nov 8, 2015 18:31:08 GMT -8 frost said:

So, me and a couple of my friends started this new forum on Proboards. BUT. We're noobs on this host.

And we're pretty much noobs with coding as well. ;-;

We applied PHARAOH LEAP 's operation mindcrime skin. But the avatar circle in the header is messed up. It has permanently shifted to the right and bottom.

Any idea how to fix it?

Without seeing your code for myself I can't tell you for sure what went wrong but based on the picture you've provided it appears as though someone has adjusted the size of your avatar in an attempt to cover up the grey circle behind it. This grey circle was originally intended to be a border so it has been positioned in the CSS with the following code:
top:340px;
margin-left:310px;

I don't think that your avatar has shifted, so much as it has increased in size. Because the coding has attached the top left corner of your avatar to that part of the grey circle behind it, it appears as if the avatar has been moved. If your problem is what I think it is you will have to either move your avatar to the exact same position as the grey circle, an act that I can't tell you how to do without seeing the code, or move the grey circle to fit directly behind the avatar which can be achieved by going into your CSS at or around line 1690~ (depending on how much you guys have already modified the CSS) and find this exact code:
.operationtopavatar {
width:100px;
height:100px;
border-radius:100px;
padding:15px;
background-color:#eeeeee;
   position:absolute;
z-index:1000;
top:340px;
margin-left:310px;
}

In the above code you will change the section top:340px; to top:355px; and margin-left:310px; to margin-left:325px;. If this doesn't exactly fit behind where the avatar is sitting now then just fiddle with the 340px and 310px until you hit the sweet spot. Just from looking at the picture I don't think my recommendations should be off by more than 5 px though.

EDIT: (Ignore this possible fix until after you have tried the solution I've added below in Edit #2)After further testing I've concluded that this will likely move the avatar as well as the grey circle behind it. You can try making the modifications that I've striked out to see how it looks but I don't believe it will work anymore. I will likely need to see what has been done with your code to fix your problem.

I doubt this solution is the desirable one though, since it sounds like you want the avatar to sit where the grey circle is currently sitting. Unfortunately without knowing how the avatar has been resized I cannot give you specific instructions on how to resolve your problem. I apologize for this, but if you can provide me with the code that was altered to change the size of the avatar or the method by which you did so I can probably assist you in resolving the issue.

EDIT2: The following should work to move your avatar over the grey circle unless this portion of the CSS is what was modified to change the size or position of the avatar in the first place. Head on down to line 1702~ in your CSS and you should find this:

.operationtopavatar img {
border-radius:100px;
}

Delete this text and replace it with this:

.operationtopavatar img {
border-radius:100px;
position:relative;
   top:-15px;
   margin-left:-15px;
}

This fix is more of a band-aid than an actual problem solver, but if it works for you then it is the only solution I can come up with, without seeing your code. Give it a try and let me know if that solved your problem. As with above, if this moves your avatar but it isn't quite covering the grey circle then just fiddle with the -15px until you hit that sweet spot that you're looking for.

EDIT3: Hopefully the final edit. It never occurred to me that your avatar was resized by mistake and that you might still want the grey border to be visible behind it. If this is the case let me know and I can come up with something to help you. In the event this is what you're looking for I can tell you exactly what part of your CSS I need to see to help fix the problem.

[frost]

Hunter Thanks a lot for replying! c:

As you mentioned in edit 3, the size/position of the avatar was changed by mistake and without us touching that section of the code. And we do prefer the grey border around the avatar. >.<"

However, a possible reason I can think of is that we used these templates. All 3 of them. Think that might have messed up the code?

SPOILER: Click to show

.operationtopbar {
   width:100%;
   min-width:1180px;
   height:90px;
   padding-top:110px;
   background-color:#000000;
   border-bottom:solid 35px #eeeeee;
}

.operationsubtitle {
font:15px Abel;
letter-spacing:5px;
color:#feee00;
padding-left:445px;
margin-bottom:-10px;
text-align:left;
}

.operationtitle {
font-size:70px;
font-family:Josefin Sans;
line-height:84px;
letter-spacing:-7px;
color:#feee00;
padding-left:455px;
text-align:left;
}

.operationcircle {
width:400px;
height:400px;
border:solid 20px #eeeeee;
padding:0px;
border-radius:400px;
overflow:hidden;
}

.operationcircle1 {
background-color:rgba(33,33,33,.9);
margin-top:17px;
margin-left:-1px;
position:relative;
z-index:1;
width:402px;
height:402px;
border-radius:0px;
-webkit-transition-duration:.8s;
   transition-duration:.8s;
   -moz-transition-duration:.8s;
-webkit-transition-delay: .8s; /* Safari */
   transition-delay: .8s;
}

.operationcircle:hover .operationcircle1 {
margin-top:-404px;
-webkit-transition-duration:.8s;
   transition-duration:.8s;
   -moz-transition-duration:.8s;
-webkit-transition-delay: 0s; /* Safari */
   transition-delay: 0s;
}

.operationcircle2 {
opacity:0;
-webkit-transition-duration:.8s;
   transition-duration:.8s;
   -moz-transition-duration:.8s;
}

.operationcircle:hover .operationcircle2 {
opacity:1;
-webkit-transition-duration:.8s;
   transition-duration:.8s;
   -moz-transition-duration:.8s;
-webkit-transition-delay: .8s; /* Safari */
   transition-delay: .8s;
}

.operationcircle3 {
   width:440px;
   height:440px;
   border-radius:400px;
   background-color:#eeeeee;
   margin-top:-225px;
   margin-left:-720px;
}

.operationtopavatar {
width:100px;
height:100px;
border-radius:100px;
padding:15px;
background-color:#eeeeee;
position:absolute;
z-index:1000;
top:340px;
margin-left:310px;
}

.operationtopavatar img {
border-radius:100px;
}

.operationtopavatar1 {
   width:100px;
   height:100px;
   padding:15px;
   background-color:#eeeeee;
   border-radius:200px;
   position:absolute;
   z-index:1000;
   top:340px;
   margin-left:310px;
}

.operationtopavatar2 {
   width:100px;
   height:100px;
   border-radius:75px;
   background-color:#222222;
}

.operationlogin {
text-align:center;
font:30px Josefin Sans;
letter-spacing:-3px;
margin-top:10px;
text-transform:uppercase;
color:#eeeeee;
}

.operationlogin a {
font:15px Abel;
color:darken(#f5de6e,0%);
}

.operationlogin1 {
   font:15px Abel;letter-spacing:0px;
}

.operationtopscroll {
padding-right:5px;
   overflow:auto;
   height:182px;
   width:185px;
}

.operationtopscroll1 {
   width:190px;
   height:182px;
   background-color:#292929;
   padding:10px;
}

.operationtopscroll::-webkit-scrollbar-thumb:vertical {
   width:5px;
background-color:#f5de6e;
border-radius:5px;
}

.operationtopscroll::-webkit-scrollbar {
   width:5px;
background-color:transparent;
}

.operationtopscroll b {
   color:#f5de6e;
   text-transform:uppercase;
   font:10px Abel;
}

.operationstaff {
   height:50px;
   border:solid 5px #292929;
}

.operation {
   font: 10px Abel;
   color:#eeeeee;
   margin-bottom:5px;
}

.operationyellow {
   color:#f5de6e;
   padding:0px 5px;
}

.operationlink {
width:100%;
height:20px;
line-height:20px!important;
background-color:#292929;
font:10px Abel;
text-align:center;
margin-top:8px;
letter-spacing:1px;
}

[Hunter]

Nov 18, 2015 18:50:04 GMT -8 frost said:

Hunter Thanks a lot for replying! c:

As you mentioned in edit 3, the size/position of the avatar was changed by mistake and without us touching that section of the code. And we do prefer the grey border around the avatar. >.<"

However, a possible reason I can think of is that we used these templates. All 3 of them. Think that might have messed up the code?

SPOILER: Click to show

.operationtopbar {
   width:100%;
   min-width:1180px;
   height:90px;
   padding-top:110px;
   background-color:#000000;
   border-bottom:solid 35px #eeeeee;
}

.operationsubtitle {
font:15px Abel;
letter-spacing:5px;
color:#feee00;
padding-left:445px;
margin-bottom:-10px;
text-align:left;
}

.operationtitle {
font-size:70px;
font-family:Josefin Sans;
line-height:84px;
letter-spacing:-7px;
color:#feee00;
padding-left:455px;
text-align:left;
}

.operationcircle {
width:400px;
height:400px;
border:solid 20px #eeeeee;
padding:0px;
border-radius:400px;
overflow:hidden;
}

.operationcircle1 {
background-color:rgba(33,33,33,.9);
margin-top:17px;
margin-left:-1px;
position:relative;
z-index:1;
width:402px;
height:402px;
border-radius:0px;
-webkit-transition-duration:.8s;
   transition-duration:.8s;
   -moz-transition-duration:.8s;
-webkit-transition-delay: .8s; /* Safari */
   transition-delay: .8s;
}

.operationcircle:hover .operationcircle1 {
margin-top:-404px;
-webkit-transition-duration:.8s;
   transition-duration:.8s;
   -moz-transition-duration:.8s;
-webkit-transition-delay: 0s; /* Safari */
   transition-delay: 0s;
}

.operationcircle2 {
opacity:0;
-webkit-transition-duration:.8s;
   transition-duration:.8s;
   -moz-transition-duration:.8s;
}

.operationcircle:hover .operationcircle2 {
opacity:1;
-webkit-transition-duration:.8s;
   transition-duration:.8s;
   -moz-transition-duration:.8s;
-webkit-transition-delay: .8s; /* Safari */
   transition-delay: .8s;
}

.operationcircle3 {
   width:440px;
   height:440px;
   border-radius:400px;
   background-color:#eeeeee;
   margin-top:-225px;
   margin-left:-720px;
}

.operationtopavatar {
width:100px;
height:100px;
border-radius:100px;
padding:15px;
background-color:#eeeeee;
position:absolute;
z-index:1000;
top:340px;
margin-left:310px;
}

.operationtopavatar img {
border-radius:100px;
}

.operationtopavatar1 {
   width:100px;
   height:100px;
   padding:15px;
   background-color:#eeeeee;
   border-radius:200px;
   position:absolute;
   z-index:1000;
   top:340px;
   margin-left:310px;
}

.operationtopavatar2 {
   width:100px;
   height:100px;
   border-radius:75px;
   background-color:#222222;
}

.operationlogin {
text-align:center;
font:30px Josefin Sans;
letter-spacing:-3px;
margin-top:10px;
text-transform:uppercase;
color:#eeeeee;
}

.operationlogin a {
font:15px Abel;
color:darken(#f5de6e,0%);
}

.operationlogin1 {
   font:15px Abel;letter-spacing:0px;
}

.operationtopscroll {
padding-right:5px;
   overflow:auto;
   height:182px;
   width:185px;
}

.operationtopscroll1 {
   width:190px;
   height:182px;
   background-color:#292929;
   padding:10px;
}

.operationtopscroll::-webkit-scrollbar-thumb:vertical {
   width:5px;
background-color:#f5de6e;
border-radius:5px;
}

.operationtopscroll::-webkit-scrollbar {
   width:5px;
background-color:transparent;
}

.operationtopscroll b {
   color:#f5de6e;
   text-transform:uppercase;
   font:10px Abel;
}

.operationstaff {
   height:50px;
   border:solid 5px #292929;
}

.operation {
   font: 10px Abel;
   color:#eeeeee;
   margin-bottom:5px;
}

.operationyellow {
   color:#f5de6e;
   padding:0px 5px;
}

.operationlink {
width:100%;
height:20px;
line-height:20px!important;
background-color:#292929;
font:10px Abel;
text-align:center;
margin-top:8px;
letter-spacing:1px;
}

Bingo. The change to the mini-profile, or more specifically this change:

- Without leaving the stylesheet, press ctrl + f and enter ".avatar_size_medium"
- Replace the lines 1184 and 1186 with THIS code

is what has caused the problem for you. I don't immediately know how to fix it but I'll play around with it when I have some time to see if I can't come up with a solution for you. Unfortunately because the mini-profile specifically defines the size of the avatar in the layout template and not in the CSS, I have to either change that element of it or find a way to make Mindcrime do the same (or stumble upon a third option while I tinker).

I'll let you know when I've got something for you or I've hit a wall with the coding. I'm working IRL at the moment so it'll be a few days before I have a chance to try anything substantial.

Edit: In the meantime here is a band-aid that doesn't fix the problem, but makes it a little less awkward to look at.

Head into your Layout Templates->Forum Wrapper and find line 60~. Replace $[current_user.avatar] with:
<div style="margin-left:-12px;margin-top:-12px;">$[current_user.avatar]</div>

I can't change the size of the avatar but that will make it line up with the grey circle at least. Keep in mind that you've made this change because if I find a different solution we will likely have to revert this. Luckily it is small so it won't be hard to do.

---

EDIT2: This is why I hate coding. You can't stop >.>

For this fix, ignore the solution in my first edit. If you've already made that change you will need to revert to the way the code looked without the additional div tag.

Anywho, assuming you don't care that the avatar is a little bigger it is possible (and relatively easy) to simply increase the size of the border. Head into your CSS and find line 1692-1725~. You will replace all four of these classes with this:

.operationtopavatar {
width:125px;
height:125px;
border-radius:125px;
padding:15px;
background-color:#eeeeee;
position:absolute;
z-index:1000;
top:320px;
margin-left:290px;
}

.operationtopavatar img {
   border-radius:100px;
}

.operationtopavatar1 {
   width:125px;
   height:125px;
   padding:15px;
   background-color:#eeeeee;
   border-radius:200px;
   position:absolute;
   z-index:1000;
   top:320px;
   margin-left:290px;
}

.operationtopavatar2 {
   width:125px;
   height:125px;
   border-radius:115px;
   background-color:#222222;
}

This will change .operationtopavatar, .operationtopavatar img, .operationtopavatar1, and .operationtopavatar2. I don't know exactly which lines this code will be on for you if you've been modifying your CSS so make sure that you only delete these four classes and replace that section of code with mine. All this is doing is enlarging the size of the circle so that it fits with the default avatar size.

I'll still try and find a way to return the avatar in that section to the original size but because I'm dealing with two separate peoples codes I can't guarantee it's going to get any better than that from me I'm afraid. I'll do what I can unless you're entirely satisfied with this solution!

[frost]

Hunter, thanks!

I linked this thread to my friend (who owns the site) and he used one of your earlier replies as base and somehow made it all work. It looks perfect now!

Once again, thank you. ^^