HTML Margin?

options
HTML Margin? written Oct 28, 2021 5:25:49 GMT
haikuwu
aliasCooked Bread
pronounsThey / Him
623written posts
Toastyearned bits
offlinecurrently
Toasty
Part of the Furniture
Toasty Avatar
>w<
Hello, this is what i need help with. I've tried using margins to line it up correctly but now I'm not sure how to level it out.

Basically, I need the bar to be right above the forum title and then the info box and quick links to be centered. I am working with the only teardrops skin by
options
HTML Margin? written Oct 28, 2021 6:18:55 GMT
aliasantiviral
pronounsHe/Him
220written posts
Beetleearned bits
offlinecurrently
Beetle
Full Member
Beetle Avatar
It looks like you've pretty heavily edited the code already, so I'm not sure how to get exactly what you want, but I have isolated all of the variables you want to change.

Centered Infobox and Quicklinks
Go into the Forum Wrapper and get rid of the table surrounding the infobox & quicklinks. All you need is everything in the <div class="sp-slideshow">. Then, go into the CSS and find the styling for .sp-slideshow and change the margin to be auto like this: 

.sp-slideshow{position:relative;width:500px;height:275px;margin:30px auto;}
The 30px part sets the top and bottom margins.

Moving the Navigation Bar
So, it looks like it's using an old version of sticky navigation. You need to change the top value in both #theFixed in the CSS and this script at the top of the Board Wrapper.

#theFixed{position:fixed;top:320px;width:100%;z-index:1002}

       <script>$(window).scroll(function(){
   $("#theFixed").css("top",Math.max(0,320-$(this).scrollTop()));
});
       </script>

With the above changes to the code I was able to get the base code looking like this:



Hope that helps!
options
HTML Margin? written Oct 28, 2021 17:47:30 GMT
haikuwu
aliasCooked Bread
pronounsThey / Him
623written posts
Toastyearned bits
offlinecurrently
Toasty
Part of the Furniture
Toasty Avatar
>w<
Beetle Avatar
Oct 28, 2021 6:18:55 GMT said:
It looks like you've pretty heavily edited the code already, so I'm not sure how to get exactly what you want, but I have isolated all of the variables you want to change.

Centered Infobox and Quicklinks
Go into the Forum Wrapper and get rid of the table surrounding the infobox & quicklinks. All you need is everything in the <div class="sp-slideshow">. Then, go into the CSS and find the styling for .sp-slideshow and change the margin to be auto like this: 

.sp-slideshow{position:relative;width:500px;height:275px;margin:30px auto;}
The 30px part sets the top and bottom margins.

Moving the Navigation Bar
So, it looks like it's using an old version of sticky navigation. You need to change the top value in both #theFixed in the CSS and this script at the top of the Board Wrapper.

#theFixed{position:fixed;top:320px;width:100%;z-index:1002}

       <script>$(window).scroll(function(){
   $("#theFixed").css("top",Math.max(0,320-$(this).scrollTop()));
});
       </script>

With the above changes to the code I was able to get the base code looking like this:



Hope that helps!
It almost helped! I inputted the code into the theme and this came out. Maybe I didn't put it high enough, or I put code in the wrong place? I deleted the hover image, so maybe that's why

options
HTML Margin? written Oct 28, 2021 19:08:56 GMT
aliasantiviral
pronounsHe/Him
220written posts
Beetleearned bits
offlinecurrently
Beetle
Full Member
Beetle Avatar
Oh, shoot sorry! I forgot a step. In the board wrapper, find this div:

<div style="margin-top:-100px;background:#33342F;">
           <div class="int">
               <div style="width:483px;text-align:center;margin-left:507px;">
                   SITE NAME <!-- SITE NAME HERE -->
               </div>
           </div>
       </div>
and change the margin-top until it's in the right spot.
last edit on Oct 28, 2021 19:09:57 GMT by Beetle
options
HTML Margin? written Mar 4, 2022 2:39:05 GMT
internally screaming
pronounsshe/her
1,799written posts
Nekoearned bits
offlinecurrently
Neko
Administrator
Neko Avatar
stressed, depressed, and probably not well-dressed
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

This thread hasn't had any replies since a month ago - feel free to repost if you wish!