News:

Wondering if this will always be free?  See why free is better.

Main Menu

Help with HTML in Simple Portal

Started by glenn3505, December 08, 2019, 10:12:17 AM

Previous topic - Next topic

glenn3505

I am trying to add a script to Simple Portal HTML. It is not showing up any help would be appreciated.
I can get it to show and work outside the Simple Portal it just shows in the top left corner. This make
me think it is something with the CSS but not sure.
I am using SMF version  2.0.15 and Simple Portal version 2.3.7

The code I am using is:


<link href="https://how2fixvideos.com/dodge-forum/Themes/default/scripts/slider.css" rel="stylesheet">
<script src="https://how2fixvideos.com/dodge-forum/Themes/default/scripts/jquery-3.3.1.min.js"></script>
<script src="https://how2fixvideos.com/dodge-forum/Themes/default/scripts/jssor.slider.mini.js"></script>
<script>
$(document).ready(function()
{
var slideshowTransitions = [
   { $Duration: 2000, x: .25, y: .5, $Rotate: -.1, $Easing: { $Left: $JssorEasing$.$EaseInQuad, $Top: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2, $Brother: { $Duration: 1200, x: -.1, y: -.7, $Rotate: .1, $Easing: { $Left: $JssorEasing$.$EaseInQuad, $Top: $JssorEasing$.$EaseInQuad, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInQuad }, $Opacity: 2 } }];
var options = { $AutoPlay: true,
                $FillMode: 0,
                $SlideDuration: 4200,
                $SlideshowOptions: {
                   $Class: $JssorSlideshowRunner$,
                   $Transitions: slideshowTransitions,
                   $TransitionsOrder: 1,
                   $ShowLink: true
                   }
};
var jssorSlider = new $JssorSlider$('wb_Extension1', options);
});
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="DtowTqjjLJTiGmWuE8L-0HrrFKmzAaMnWekV7_FMsc4" />


<body id="tpbody" class="tpcontnainer">
<div id="container">
<div id="wb_Extension1">


<div id="Extension1" data-u="slides" style="cursor:move;overflow:hidden;position:absolute;left:0;top:0;width:950px;height:250px;">

<div><a href="https://how2fixvideos.com/" target="_blank"><img data-u="image" src="https://how2fixvideos.com/dodge-forum/Themes/default/scripts/slider_images/art.png" alt=""> </a>
  <div class="bottom-left"><h1 style="color:#00ff00;font-size:36px;">Bottom Left</h1></div>
  <div class="#">Top Left</div>
  <div class="#">Top Right</div>
  <div class="#">Bottom Right</div>
  <div class="#">Centered</div>
  </div>

<div><a href="#"><img data-u="image" src="https://how2fixvideos.com/dodge-forum/Themes/default/scripts/slider_images/brush.jpg" alt=""></a></div>

<div><a href="#"><img data-u="image" src="https://how2fixvideos.com/dodge-forum/Themes/default/scripts/slider_images/girl.jpg" alt=""></a></div>

</div>
</div>
</div>




And my CSS is:


div#container
{
   width: 1200px;
   position: relative;
   margin: 0 auto 0 auto;
   text-align: left;
}
body
{
   background-color: #D3D3D3;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   text-align: center;
}
#wb_Extension2
{
   position: absolute;
   left: 0px;
   top: 193px;
   width: 1200px;
   height: 250px;
   z-index: 0;
}
@media only screen and (min-width: 980px) and (max-width: 1199px)
{
div#container
{
   width: 980px;
}
body
{
   background-color: #C8C8C8;
   background-image: none;
}
#wb_Extension2
{
   left: 0px;
   top: 193px;
   width: 1200px;
   height: 250px;
   visibility: visible;
   display: inline;
}
}
@media only screen and (min-width: 768px) and (max-width: 979px)
{
div#container
{
   width: 768px;
}
body
{
   background-color: #C8C8C8;
   background-image: none;
}
#wb_Extension2
{
   left: 0px;
   top: 193px;
   width: 1200px;
   height: 250px;
   visibility: visible;
   display: inline;
}
}
@media only screen and (max-width: 767px)
{
div#container
{
   width: 320px;
}
body
{
   background-color: #C8C8C8;
   background-image: none;
}
#wb_Extension2
{
   left: 0px;
   top: 193px;
   width: 1200px;
   height: 250px;
   visibility: visible;
   display: inline;
}
}
#wb_Extension2
{
   background-color: #24262E;
}
.jssora17l, .jssora17r, .jssora17ldn, .jssora17rdn
{
   position: absolute;
   cursor: pointer;
   display: block;
   background: url(images/a17.png) no-repeat;
   overflow: hidden;
}
.jssora17l { background-position: -16px -45px; }
.jssora17r { background-position: -76px -45px; }
.jssora17l:hover { background-position: -136px -45px; }
.jssora17r:hover { background-position: -196px -45px; }
.jssora17ldn { background-position: -256px -45px; }
.jssora17rdn { background-position: -316px -45px; }




             Thanks for any help

vbgamer45

Is it supposed to appear in slider? On this page
https://how2fixvideos.com/dodge-forum/


Did you put the code in an html block? Because I don't see any of the html code in it.

Community Suite for SMF - Take your forum to the next level built for SMF, Gallery,Store,Classifieds,Downloads,more!

SMFHacks.com -  Paid Modifications for SMF

Mods:
EzPortal - Portal System for SMF
SMF Gallery Pro
SMF Store SMF Classifieds Ad Seller Pro

Mick.

Make sure the css code is inside the <style></style>

Also in that css code it has body entry. That might throw things off since it's already called in the theme. Try to omit that part if it breaks.

glenn3505

Thanks, the problem was in the CSS I am new to coding thanks for the help.
I tried to use CSS from my website instead of wrighting new.

Advertisement: