Adding HTML,CSS and Javascript to Joomla frontpage - Joomla! Forum - community, help and support
hi, need insert custom search box in middle of joomla frontpage.
tried using modhtml , moduleanywhere. still no luck.
i appreciate if pros out there advise me on this.
below code search box tabbed.
<html>
<head>
<title>css3 & jquery folder tabs - demo</title>
<style>
body
{
width: 400px;
font-family: arial, helvetica;
font-size: small;
}
/* ------------------------------------------------- */
#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li{
float: left;
margin: 0 .5em 0 0;
}
#tabs a{
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .2em 2em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.
;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}
#tabs a:focus{
outline: 0;
}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#tabs #current a{
background: #fff;
z-index: 3;
}
#tabs #current a::after{
background: #fff;
z-index: 3;
}
/* ------------------------------------------------- */
#content
{
background: #ececec;
padding: 2em;
height: 60px;
position: relative;
z-index: 2;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p
{
margin: 0 0 15px 0;
}
/* ------------------------------------------------- */
#about
{
color: #999;
}
#about a
{
color: #eee;
}
</style>
</head>
<body>
<ul id="tabs">
<li><a href="#" name="tab1">summon</a></li>
<li><a href="#" name="tab2">books</a></li>
<li><a href="#" name="tab3">ebooks</a></li>
</ul>
<div id="content">
<div id="tab1">
<form method="get" action="http://upmmy.summon.serialssolutions.com/search">
<input type="text" name="s.q" style="width:200px;/>
<input type="hidden" name="spellcheck" value="" />
<input type="submit" value="search" />
</form>
</div>
<div id="tab2">
<form method="get" action="http://upmmy.summon.serialssolutions.com/search">
<input type="text" name="s.q" style="width:200px;/>
<input type="hidden" name="spellcheck" value="" />
<input type="hidden" name="s.fq[]" value='sourcetype:("library catalog")' />
<input type="hidden" name="s.fvf[]" value='contenttype,ebook' />
<input type="hidden" name="s.fvf[]" value='contenttype,book' />
<input type="submit" value="search" />
</form>
</div>
<div id="tab3">
<form method="get" action="http://upmmy.summon.serialssolutions.com/search">
<input type="text" name="s.q" style="width:200px;/>
<input type="hidden" name="spellcheck" value="" />
<input type="hidden" name="s.fvf[]" value='isfulltext,true' />
<input type="hidden" name="s.fvf[]" value='contenttype,ebook' />
<input type="submit" value="search" />
</form>
</div>
<br><br>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#content div").hide(); // hide content
$("#tabs li:first").attr("id","current"); // activate first tab
$("#content div:first").fadein(); // show first tab content
$('#tabs a').click(function(e) {
e.preventdefault();
if ($(this).closest("li").attr("id") == "current"){ //detection current tab
return
}
else{
$("#content div").hide(); //hide content
$("#tabs li").attr("id",""); //reset id's
$(this).parent().attr("id","current"); // activate this
$('#' + $(this).attr('name')).fadein(); // show content current tab
}
});
});
</script>
<!-- bsa adpacks code -->
<script>
(function(){
var bsa = document.createelement('script');
bsa.async = true;
bsa.src = 'http://www.red-team-design.com/js/adpacks-demo.js';
(document.getelementsbytagname('head')[0]||document.getelementsbytagname('body')[0]).appendchild(bsa);
})();
</script>
</body>
tried using modhtml , moduleanywhere. still no luck.
i appreciate if pros out there advise me on this.
below code search box tabbed.
<html>
<head>
<title>css3 & jquery folder tabs - demo</title>
<style>
body
{
width: 400px;
font-family: arial, helvetica;
font-size: small;
}
/* ------------------------------------------------- */
#tabs{
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
#tabs li{
float: left;
margin: 0 .5em 0 0;
}
#tabs a{
position: relative;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
padding: .2em 2em;
float: left;
text-decoration: none;
color: #444;
text-shadow: 0 1px 0 rgba(255,255,255,.
;-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
border-radius: 5px 0 0 0;
-moz-box-shadow: 0 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.4);
box-shadow: 0 2px 2px rgba(0,0,0,.4);
}
#tabs a:hover,
#tabs a:hover::after,
#tabs a:focus,
#tabs a:focus::after{
background: #fff;
}
#tabs a:focus{
outline: 0;
}
#tabs a::after{
content:'';
position:absolute;
z-index: 1;
top: 0;
right: -.5em;
bottom: 0;
width: 1em;
background: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ddd));
background-image: -webkit-linear-gradient(top, #fff, #ddd);
background-image: -moz-linear-gradient(top, #fff, #ddd);
background-image: -ms-linear-gradient(top, #fff, #ddd);
background-image: -o-linear-gradient(top, #fff, #ddd);
background-image: linear-gradient(to bottom, #fff, #ddd);
-moz-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-box-shadow: 2px 2px 2px rgba(0,0,0,.4);
box-shadow: 2px 2px 2px rgba(0,0,0,.4);
-webkit-transform: skew(10deg);
-moz-transform: skew(10deg);
-ms-transform: skew(10deg);
-o-transform: skew(10deg);
transform: skew(10deg);
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
border-radius: 0 5px 0 0;
}
#tabs #current a{
background: #fff;
z-index: 3;
}
#tabs #current a::after{
background: #fff;
z-index: 3;
}
/* ------------------------------------------------- */
#content
{
background: #ececec;
padding: 2em;
height: 60px;
position: relative;
z-index: 2;
-moz-border-radius: 0 5px 5px 5px;
-webkit-border-radius: 0 5px 5px 5px;
border-radius: 0 5px 5px 5px;
-moz-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}
#content h2, #content h3, #content p
{
margin: 0 0 15px 0;
}
/* ------------------------------------------------- */
#about
{
color: #999;
}
#about a
{
color: #eee;
}
</style>
</head>
<body>
<ul id="tabs">
<li><a href="#" name="tab1">summon</a></li>
<li><a href="#" name="tab2">books</a></li>
<li><a href="#" name="tab3">ebooks</a></li>
</ul>
<div id="content">
<div id="tab1">
<form method="get" action="http://upmmy.summon.serialssolutions.com/search">
<input type="text" name="s.q" style="width:200px;/>
<input type="hidden" name="spellcheck" value="" />
<input type="submit" value="search" />
</form>
</div>
<div id="tab2">
<form method="get" action="http://upmmy.summon.serialssolutions.com/search">
<input type="text" name="s.q" style="width:200px;/>
<input type="hidden" name="spellcheck" value="" />
<input type="hidden" name="s.fq[]" value='sourcetype:("library catalog")' />
<input type="hidden" name="s.fvf[]" value='contenttype,ebook' />
<input type="hidden" name="s.fvf[]" value='contenttype,book' />
<input type="submit" value="search" />
</form>
</div>
<div id="tab3">
<form method="get" action="http://upmmy.summon.serialssolutions.com/search">
<input type="text" name="s.q" style="width:200px;/>
<input type="hidden" name="spellcheck" value="" />
<input type="hidden" name="s.fvf[]" value='isfulltext,true' />
<input type="hidden" name="s.fvf[]" value='contenttype,ebook' />
<input type="submit" value="search" />
</form>
</div>
<br><br>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function() {
$("#content div").hide(); // hide content
$("#tabs li:first").attr("id","current"); // activate first tab
$("#content div:first").fadein(); // show first tab content
$('#tabs a').click(function(e) {
e.preventdefault();
if ($(this).closest("li").attr("id") == "current"){ //detection current tab
return
}
else{
$("#content div").hide(); //hide content
$("#tabs li").attr("id",""); //reset id's
$(this).parent().attr("id","current"); // activate this
$('#' + $(this).attr('name')).fadein(); // show content current tab
}
});
});
</script>
<!-- bsa adpacks code -->
<script>
(function(){
var bsa = document.createelement('script');
bsa.async = true;
bsa.src = 'http://www.red-team-design.com/js/adpacks-demo.js';
(document.getelementsbytagname('head')[0]||document.getelementsbytagname('body')[0]).appendchild(bsa);
})();
</script>
</body>
i separate html, css, , js, technically should work if paste except <html> <head> , <body> tags (because you're in html body)... except default joomla blacklists <script> , <style> tags, need go plugins , find editor use, tinymce, , edit disallowed tags. have put space there registers change when hit save.
really though, paste html stuff in module, , go templates/ folder, find template, add css templates css file (or own), add .js globally called js in template folder, , good.
really though, paste html stuff in module, , go templates/ folder, find template, add css templates css file (or own), add .js globally called js in template folder, , good.
Comments
Post a Comment