TinyPortal

Development => Block Codes => Topic started by: mariusfv on June 28, 2011, 02:01:04 PM

Title: Image rotator/Problem html block
Post by: mariusfv on June 28, 2011, 02:01:04 PM
Hi,

I've try to use this code in a html&javascript top panel block:

<title>Easy Slider jQuery Plugin Demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />   
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
</script>

<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />


<body>

<div id="container">

<div id="header">
<h1>Easy Slider jQuery Plugin - continuous demo</h1>
</div>

<div id="content">

<div id="slider">
<ul>
<li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
<li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
</ul>
</div>

<h3>Usage</h3>

<pre>$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});</pre>

<p><a href="http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider" title="read more about this jquery plugin">back to the article</a></p>

<p><strong>Easy Slider</strong> jQuery Plugin is brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>

</div>

</div>

</body>
</html>



Is about an javascript image rotator.
All required files was uploaded to my website folder.
The script work perfectly, but my problem is that modify my themes, move the header text, and my background image make-it white/so ugly.

I'm sure something must be modified in my html code, but I don't know what and where so I ask for your help.
I have latest TP & SMF 2.0 & default themes

10x in advance!

Title: Re: Image rotator/Problem html block
Post by: mariusfv on June 29, 2011, 06:54:00 AM
I found that problem is in: screen.css, the background code it here change my smf default theme.
I've attach the script, can someone please modify that 3 lines in screen.css to not change the structure and colors in the smf default theme?

10x in advance.
Title: Re: Image rotator/Problem html block
Post by: WillyP on June 30, 2011, 04:09:36 PM
Please post a link to the page the script is on.