The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Skin Causes Widgets to Display Incorrectly

View previous topic View next topic Go down

In progress Skin Causes Widgets to Display Incorrectly

Post by Mnslayer27 on March 3rd 2013, 3:36 pm

For some reason, the *Q001*Invision_ skin, found on page 2 of the Hitskin tab, causes erratic widget positioning. Sure, we could switch to a different skin, but the founder and I love the metal effect.

The Issue


As shown above, the widgets interfere with the page content. They should both be displayed outside the metal edges of the skin, but they aren't. In fact, it cuts off the metal background for the rest of the page, which defeats the purpose of the skin.

Oh, I also couldn't find how to get rid of the gap in the skin that shows the fire background. I tried out various things in the CSS, but it didn't do anything.

Forum Address: http://phoenixdueling.forumakers.com/

Any help on getting the widgets to display in the proper position will be greatly appreciated!

Mnslayer27
New Member

Posts : 15
Reputation : 1
Language : English

Back to top Go down

In progress Re: Skin Causes Widgets to Display Incorrectly

Post by Cassius Dio on March 3rd 2013, 6:34 pm

Hi! Very Happy

Add to CSS Stylesheet:
Code:
div#logostrip{
top: 20px;
position: relative !important;
}

div#submenu{
position: relative !important;
top: 20px;
left: 100px;
}

About the widgets, I don't see them. blackeye

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

In progress Re: Skin Causes Widgets to Display Incorrectly

Post by Mnslayer27 on March 4th 2013, 2:20 am

Ty for fixing the gap. I turned off widgets cause it made the site look ugly. I'll turn back on so you can get a better idea of the issue. I'll post so the users know why.

Btw, turning widgets on causes the whole distortion effect. With widgets off, every element is in its proper place.

Mnslayer27
New Member

Posts : 15
Reputation : 1
Language : English

Back to top Go down

In progress Re: Skin Causes Widgets to Display Incorrectly

Post by Cassius Dio on March 4th 2013, 8:52 am

Try adding to CSS Stylesheet:
Code:
#left{
position: relative;
right: 210px;
}

#right{
position: relative;
left: 200px;
}

#ipbwrapper {
min-width: 934px !important;
}

Cassius Dio
Forumember

Male Posts : 581
Reputation : 79
Language : Romanian &English
Location : Yellow Submarine

http://beatles.forummo.com/

Back to top Go down

In progress Re: Skin Causes Widgets to Display Incorrectly

Post by Mnslayer27 on March 4th 2013, 8:58 pm

I tweaked that CSS to get what seems to be the appropriate positions for the widgets.

Code:
#left{
position: relative;
right: 210px;
}

#right{
position: relative;
left: 210px;
}

#ipbwrapper {
min-width: 910px !important;
}

Unfortunately, the section where the forum links are shown is half the size that its supposed to be, and the metal border is still cut off. I'll put the site's CSS here in case you need it. I should have just done that earlier lol. Oh, and thanks for the help so far!

Spoiler:
Code:
/*FMChat Design*/
.chatbase { /*This can be edited to your liking - (the button)*/
  position: fixed;
  bottom: 2px;
  right: 15px;
  background: #56A0D3;
  border: 2px solid #7BB92B;
  width: 75px;
  height: 20px;
  border-radius: 5px;
  text-align: center !important;
  cursor: pointer;
  color: #ffffff;
}

.chatbase:hover { /*This can be edited to your liking - (hovering over the button)*/
  border-color: #D30C3F;
  color: #000000;
}

#chat { /*This can be edited to your liking - (box surrounding the chatbox)*/
  border: 2px solid #7BB92B;
  width: 65%;
  position: fixed;
  right: 50px;
  bottom: 27px;
  height: 50%;
  border-radius: 5px;
  z-index: 999;
}

div#submenu{
position: relative !important;
top: 20px;
left: 100px;
}

#left{
position: relative;
right: 210px;
}

#right{
position: relative;
left: 210px;
}

#ipbwrapper {
min-width: 910px !important;
}

body{
background-position: center;}
div#logostrip{
background-color: transparent;
background-image: url('http://i32.servimg.com/u/f32/13/62/36/18/211.png');
background-repeat: no-repeat;
height: 404px;
width: 100%;
margin: 0px;
padding: 0px;
top: 20px;
position: relative !important;
}
#ipbwrapper{
margin-top: -4px;
margin-bottom: -4px;
}
.wysiwyg{
background-color: #1f2630;
}
#text_editor_textarea { background-color: #1f2630; color: #fff; }
#site-desc{
background-color: transparent;
padding: 0px;
margin: 0px;
}
#submenu{
background-color: transparent;
background-repeat: no-repeat;
margin:0px;
padding:  0px;
margin: -90px 0pt 30px; padding: 0px 0px 25px; /margin-bottom: 54px;}

#profile-advanced-layout{ float:none; margin: 0px; padding: 0px; width: 100%; } #profile-advanced-left{ float : none; margin: 0px; padding: 0px; width:806px; } #profile-advanced-right{ float: none; margin: 0px; padding: 0px; margin-bottom: 0px; width: 806px;} #profile-advanced-right .module{ margin-bottom: 0px; }
#submenu a:hover{
background-color: transparent !important;}
#submenu ul li a {
padding: 0px;
margin: 0px;
text-decoration: none;
color: #fff;}
#userlinks{
background-color: transparent !important;
background-image: url('http://i32.servimg.com/u/f32/13/62/36/18/111.png');
background-repeat: repeat-y;
min-height: 6px;
padding: 0px 70px 0px 70px;
font-size : 1.0em;
color: #000;
border-bottom: none;}
#userlinks.not-connected{
background-color: transparent !important;
border-bottom: 0px;}
#fa_ticker_block{
background-color: transparent !important;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/137.png');
background-repeat: repeat-y;
min-height: 6px;
border: none;
padding: 5px 60px 5px 60px;
margin-top : 0px !important;
margin-bottom : 0px !important;}
#fa_ticker_container{
padding-bottom: 2px;}
#fa_ticker{
background-image: none !important;}
div.newslink{ background-color: transparent !important;}
#outer-wrapper{
background-color: transparent !important;
background-image: url('http://i32.servimg.com/u/f32/13/62/36/18/templa11.png');
background-repeat: repeat-y;
min-height: 6px;
padding:0px;
margin: 0px;}
#wrapper{
background-color: transparent !important;
margin: 0px 55px;
padding: 30px 0px;}
#gfooter{
background-color: transparent !important;
font-size : 1.0em !important;
color: #fff !important;
background-image: url('http://i32.servimg.com/u/f32/13/62/36/18/2_0511.png');
background-repeat: no-repeat;
width: 910px;
height:249px;
margin: 0px;
padding: 0px;
/margin-top: -16px;}
#gfooter :hover {
color: #039ce2;}
.current-time{
padding-right: 15px;
margin-right: 45px;
padding-bottom: -150px;
color: #fff;}
#qjump{
padding-left: 60px;
padding-right: 5px;
padding-bottom: -150px;}
#gfooter
.footer-links{
float: left;
padding-left: 10px;
padding-bottom: -150px;}
.row1, .row2{
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f411.png');
border:1px solid #000;}
.row1:hover, .row2:hover{
background-image: url('http://i35.servimg.com/u/f35/11/95/30/70/f710.jpg');}
table.ipbtable tfoot td{
background-color: transparent;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/b1010.jpg');
padding: 0px;
height: 12px!important;
border: none;}
.tfooter{
margin: 0px;
padding: 0px;}
.post{
background-color:  #1f2630;
background-image: url("http://i85.servimg.com/u/f85/11/95/30/70/b1010.jpg");
background-position: bottom;
background-repeat: repeat-x;
padding-bottom: 12px;
border: none;
margin-top: 4px;}
.postbody{
background-color:  #1f2630;
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f610.png');
border-style: solid;
border-width: 1px;
border-color:  #181818 #191919 #161616 #171717;}
.post-header{
background-color: transparent;
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f411.png');
border-style: solid;
border-width: 1px;
border-color:  #181818 #191919 #161616 #171717;}
.post-footer{
background-color: transparent !important;
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f411.png');
border-style: solid;
border-width: 1px;
border-color:  #181818 #191919 #161616 #3f4d60;}
.postprofile{
background-color: #1f2630;}
.post-container{
background-color: #1f2630;
border-style: solid;
border-width: 1px;
border-color:  #181818 #191919 #161616 #3f4d60;}
.bar{
background-color: #1f2630;
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f610.png');
border: 1px solid #455255;}
.search-footer-box { display: none; } #search-box { display: none; }
.box-content{
background-color: #1f2630;
background-image: url("http://i85.servimg.com/u/f85/11/95/30/70/b1010.jpg");
background-position: bottom;
background-repeat: repeat-x;border-bottom: 0px; margin: 0px; padding: 0px;
padding-bottom: 12px;
border-style: solid;
border: none;}
.activeusers{
background-color: transparent !important;
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f610.png');
background-repeat: repeat;
border: 1px solid #455255;}
.activeusers-box{
background-color: transparent !important;
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f610.png');
background-repeat: repeat;
border: 1px solid #455255;}
.module .maintitle{
background-color: transparent !important;
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/b411.png');
background-repeat: repeat-x;
height: 27px;
padding-top: 4px;
margin-bottom: -7px;
border: 1px solid #000;}
.module .box-content{
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f610.png');
background-position: bottom;
background-repeat: repeat;
border-style: solid;
border-width: 1px;
border-color:  #535353 #6b6b6b #433f3f #6f6e6e;}
.messaging-box{
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f610.png');
background-repeat: repeat;
border: 2px inset #171717;}
#smiley-box{
background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/f411.png');
background-repeat: repeat;
border: 2px inset #6f6e6e;}
.qreply{
background-color: #232d36;
border-style: solid;
border-width: 1px;
border-color:  #535353 #6b6b6b #433f3f #6f6e6e;}
button.button2, input.button2 {
font-size: 0.7em;
border: 3px double #6f6e6e;
color: #381200 ;
width: auto !important;
padding: 1px 0px;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #000000;
background-repeat: repeat-x;
background-color: #FAFAFA;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/oo12.jpg');
background-position: top;
overflow: visible;
vertical-align:middle;}
button.button2:hover, input.button2:hover {
border: 3px double #6f6e6e;
color: #381200 ;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/tex111.jpg');
background-position: top;
color: #000000;
background-position: 0 100%;}
.button, .mainoption{
border: 3px double #6f6e6e;
color: #000 ;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/oo12.jpg');}
.button:hover, .mainoption:hover{
border: 3px double #6f6e6e;
color: #000 ;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/tex111.jpg');}
.exthelp,.rte-menu-button {
    float: right;
    height: 16px;
    margin: 0.5em;
    padding: 3px 5px 3px 25px;
    border-style: solid;
border-width: 1px;
border-color:  #535353 #6b6b6b #433f3f #6f6e6e;
    background-color : #1f2630;
    background-image: url("http://i85.servimg.com/u/f85/11/95/30/70/11210.png");
    background-repeat: no-repeat;
    background-position: 2% 50%;
    font-size: 10px;
    font: bold #000;
    text-decoration: none !important; }
.rte-menu-button {
    float: left;
    font: bold #000;
    border-width: 1px;
border-color:  #535353 #6b6b6b #433f3f #6f6e6e;
    background-color : #1f2630;
    background-image: url("http://i81.servimg.com/u/f81/13/51/88/96/11411.png");  }
#navstrip li {
    float: left;
    margin: 0 5px;
    padding-left: 14px;
    background: url('http://i82.servimg.com/u/f82/13/62/36/18/1010.png') no-repeat left 50%; }
#navstrip li.begin {
    padding-left: 14px;
    background: url('http://i82.servimg.com/u/f82/13/62/36/18/1010.png') no-repeat left 50%;}
div.maintitle .expand,div.maintitle .contract {
    float: right;
    width: 12px;
    height: 12px;
    background: url('http://i89.servimg.com/u/f89/13/09/17/36/313.png') no-repeat 50% 50%;
    cursor: pointer;
    }
div.maintitle .expand { background: url('http://i89.servimg.com/u/f89/13/09/17/36/413.png') no-repeat 50% 50%;}
.popmenubutton a { background-image: url('http://i82.servimg.com/u/f82/13/62/36/18/810.png');}
ul.privmsg li {
background-color: #1f2630;
color: #000;
border: 1px dotted #000;
background-repeat: repeat;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/tex111.jpg');
background-position: top;}
ul.privmsg li :hover {
background-color: #1f2630;
color: #000;
border: 1px dotted #000;
background-repeat: repeat;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/oo12.jpg');
background-position: top;}
ul.privmsg li a{
background-color: #1f2630;
color: #000;
border: 1px dotted #000;
background-repeat: repeat;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/oo12.jpg');}
ul.privmsg li a:hover{
background-color: #1f2630;
color: #000;
border: 1px dotted #000;
background-repeat: repeat;
background-image: url('http://i85.servimg.com/u/f85/11/95/30/70/tex111.jpg');}
#navstrip {
color: #015ca8;}
#navstrip li a:hover{
color: #4aa5f2;}
.search-menu{
color: #fff;}
.post .popupmenu{
background-color: #1f2630;}
.postprofile-head ul li{
background-color: #1f2630;
border: 1px dotted #6f6e6e;}
.topic-footer{
background-color: transparent;}
#gfooter a {
color: #4c7bbc ! important;}
#gfooter a:hover {
color: #fff ! important;}
#i_icon_mini_index{width:81px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0111.png) no-repeat 0 0;}
#i_icon_mini_index:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0111.png) no-repeat 0 -30px;}

#i_icon_mini_portal{width:68px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0411.png) no-repeat 0 0;}
#i_icon_mini_portal:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0411.png) no-repeat  0 -30px;}

#i_icon_mini_gallery{width:68px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0311.png) no-repeat 0 0;}
#i_icon_mini_gallery:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0311.png) no-repeat  0 -30px;}

#i_icon_mini_calendar{width:69px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0210.png) no-repeat 0 0;}
#i_icon_mini_calendar:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0210.png) no-repeat  0 -30px;}

#i_icon_mini_faq{width:52px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0510.png) no-repeat 0 0;}
#i_icon_mini_faq:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0510.png) no-repeat  0 -30px;}

#i_icon_mini_search{width:68px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0610.png) no-repeat 0 0;}
#i_icon_mini_search:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0610.png) no-repeat  0 -30px;}

#i_icon_mini_members{width:68px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0711.png) no-repeat 0 0;}
#i_icon_mini_members:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0711.png) no-repeat  0 -30px;}

#i_icon_mini_groups{width:68px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/re_0810.png) no-repeat 0 0;}
#i_icon_mini_groups:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/re_0810.png) no-repeat  0 -30px;}

#i_icon_mini_profile{width:68px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0911.png) no-repeat 0 0;}
#i_icon_mini_profile:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_0911.png) no-repeat  0 -30px;}

#i_icon_mini_message{width:52px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_1011.png) no-repeat 0 0;}
#i_icon_mini_message:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_1011.png) no-repeat 0 -30px;}

#i_icon_mini_new_message{width:52px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/anim_111.gif) no-repeat 0 0;}
#i_icon_mini_new_message:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/anim_111.gif) no-repeat  0 -30px;}

#i_icon_mini_logout{width:76px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_1110.png) no-repeat 0 0;}
#i_icon_mini_logout:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/nav_1110.png) no-repeat  0 -30px;}

#i_icon_mini_register{width:68px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/anim_011.gif) no-repeat 0 0;}
#i_icon_mini_register:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/anim_011.gif) no-repeat  0 -30px;}

#i_icon_mini_login{width:76px;height:30px;background:url(http://i32.servimg.com/u/f32/13/62/36/18/on_1110.png) no-repeat 0 0;}
#i_icon_mini_login:hover{background:url(http://i32.servimg.com/u/f32/13/62/36/18/on_1110.png) no-repeat  0 -30px;}
.maintitle.floated.dropped{padding-bottom:0px;}
#topicmenu-options{
height: auto;}
table.ipbtable { border: 1px solid rgb(39, 39, 39); }
table.ipbtable th {
overflow: visible;
padding: 3px;}
div.errorwrap,div.infowrap{
background-color:#b6c5d2;
border:3px solid #011d42;}
div.errorwrap h4,div.infowrap h4{
background-color:#12376b;
border:1px solid #b6c5d2;
color:#b6c5d2;}
div.errorwrap p,div.infowrap p{
color:#011d42;
font-weight:bold;}
div.errorwrap p a:link,div.infowrap p a:link{color:#f0661b;text-decoration:underline;}
div.errorwrap p a:link:hover,div.infowrap p a:link:hover{color:#b72b00;}
.member{background-color:#b4cbe3; border:1px solid #23201b;}
.member-header{background-color:#4c7bbc; border:1px solid #c5d6e7; }
.member p{background-color:#2c435b; border:1px solid #23201b; padding:3px; margin-top:10px; color:#c5d6e7;}
.member .popmenubutton-new-out a{background-color:transparent;border:none;color:#c5d6e7;}
.member .popupmenu{background-color:#b4cbe3;border:1px solid #6c6657;}
.member .popupmenu ul{background-color:#b4cbe3;border:1px solid #6c6657;padding:3px;margin-top:10px;color:#c5d6e7;}
.member .popupmenu li{background-color:#2c435b;border:1px solid #2d2d2d;}
.member .popupmenu li a.profile-icon{float:none;height:22px;margin:0px;padding-left:3px;}
.post-footer img { padding-left: 5px;}

Edit to avoid double-posting: Hmm, I'm a bit confused. I was notified that someone posted, but nobody has o.O

Mnslayer27
New Member

Posts : 15
Reputation : 1
Language : English

Back to top Go down

In progress Re: Skin Causes Widgets to Display Incorrectly

Post by Mnslayer27 on March 9th 2013, 9:49 pm

bump

Mnslayer27
New Member

Posts : 15
Reputation : 1
Language : English

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum