This is the path of “{{skin url=” for magento root directory.
1. Example for Images Load :
{{skin url=’images/welcome.jpg’}}
2. Example for Scripts Load :
{{skin url=’js/onLoad.js’}}
3. Example for Direct Scripts Load :
<script type=”text/javascript”>// <![CDATA[
document.write(‘<center><iframe width=”190″ height=”172″ src=”http://www.youtube.com” frameborder=”0″ allowfullscreen></iframe></center>’);
// ]]></script>
You can use below coding that is useful for curve menu creation.
/* =Menu
————————————————————– */
#top-bar-bg{
background: #820086;
border-bottom:8px solid #000;
padding:20px 0 0 0;
}
div.search_container{
position:absolute;
top:0;
right:0;
}
div.search_container input.keywords{
font:12px Arial, Helvetica, sans-serif;
float:left;
}
#access {
display: block;
margin: 0 auto;
width: 940px;
position:relative;
}
#access .menu-header,
div.menu {
font-size: 13px;
margin-left: 12px;
width: 928px;
}
#access .menu-header ul,
div.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
div.menu li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 38px;
text-decoration: none;
/*-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;*/
font:14px Arial, Helvetica, sans-serif;
padding:10px;
}
#access ul li {
color: #9D9B9B;
background:url(images/menu-normal-right.jpg) no-repeat top right;
margin-right:10px;
}
#access ul li a{
color: #9D9B9B;
background:url(images/menu-normal-left.jpg) no-repeat top left;
}
#access ul ul {
/*box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);*/
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access ul ul li {
min-width: 180px;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: #333;
line-height: 1em;
padding: 10px;
width: 160px;
height: auto;
}
#access li:hover {
background:url(images/menu-hilight-right.jpg) no-repeat top right;
color: #000;
}
#access li:hover > a,
#access ul ul :hover > a {
background:url(images/menu-hilight-left.jpg) no-repeat top left;
color: #000;
}
#access ul li:hover > ul {
display: block;
}
#access ul li.current_page_item,
#access ul li.current-menu-ancestor,
#access ul li.current-menu-item,
#access ul li.current-menu-parent {
background:url(images/menu-hilight-right.jpg) no-repeat top right;
color: #000;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
background:url(images/menu-hilight-left.jpg) no-repeat top left;
color: #000;
}
* html #access ul li.current_page_item,
* html #access ul li.current-menu-ancestor,
* html #access ul li.current-menu-item,
* html #access ul li.current-menu-parent,
* html #access ul li{
background:url(images/menu-hilight-right.jpg) no-repeat top right;
color: #000;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
background:url(images/menu-hilight-left.jpg) no-repeat top left;
color: #000;
}
that’s all. 🙂
Other one Option :
/* =Menu
————————————————————– */
#access {
display: block;
float: left;
margin: 0 auto 0 auto;
width: 500px;
height:29px;
position:absolute;
top:39px;
right:0px;
}
#access .menu-header,
#access .menu-header ul.menu {
font:12px “Myriad Pro”, Arial, Helvetica, sans-serif, Verdana;
color:#9CB2E4;
margin-left: 12px;
width: 420px;
float:right;
}
#access .menu-header ul,
#access .menu-header ul.menu ul {
list-style: none;
margin: 0;
}
#access .menu-header li,
#access .menu-header ul.menu li {
float: left;
position: relative;
padding:0 0 0 0;
}
#access .menu-header a {
color:#9CB2E4;
font:bold 12px “Trebuchet MS”, Arial, Helvetica, sans-serif;
text-decoration:none;
padding:13px 0 13px 0;
text-decoration: none;
background: url(images/topmenuright.gif) no-repeat right;
}
#access .menu-header ul li a span { padding:13px 15px; background: url(images/topmenuleft.gif) no-repeat left;}
#access .menu-header ul ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 38px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}
#access .menu-header ul li a{
margin:0 5px;
float:left;
}
#access .menu-header ul ul li {
min-width: 180px;
padding:13px 10px;
}
#access .menu-header ul ul ul {
left: 100%;
top: 0;
}
#access .menu-header ul ul a {
/*background: transparent;*/
line-height: 1em;
padding: 15px;
width: 160px;
height: auto;
}
#access .menu-header li:hover > a,
#access .menu-header ul ul :hover > a {
color:#fff; background: url(images/topmenurighthover.gif) no-repeat right;
}
#access .menu-header li:hover > a span,
#access .menu-header ul ul :hover > a span{color:#fff; background:url(images/topmenulefthover.gif) no-repeat left; }
#access .menu-header ul li:hover > ul {
display: block;
}
#access .menu-header ul li.current_page_item > a,
#access .menu-header ul li.current-menu-ancestor > a,
#access .menu-header ul li.current-menu-item > a,
#access .menu-header ul li.current-menu-parent > a {
color:#fff; background:url(images/topmenurighthover.gif) no-repeat right;
}
#access .menu-header ul li.current_page_item > a span,
#access .menu-header ul li.current-menu-ancestor > a span,
#access .menu-header ul li.current-menu-item > a span,
#access .menu-header ul li.current-menu-parent > a span{
color:#fff; background:url(images/topmenulefthover.gif) no-repeat left; }
* html #access .menu-header ul li.current_page_item a,
* html #access .menu-header ul li.current-menu-ancestor a,
* html #access .menu-header ul li.current-menu-item a,
* html #access .menu-header ul li.current-menu-parent a,
* html #access .menu-header ul li a:hover {
color:#fff; background:url(images/topmenurighthover.gif) no-repeat right;
}
* html #access .menu-header ul li.current_page_item a span { color:#fff; background:url(images/topmenulefthover.gif) no-repeat left; }