I found this RSS drop down menu generator of sorts the other day, and I'm hoping I can replace the current RSS symbol with it. I replaced the {RSS} in header.tpl with the following script/code that was generated:
<script type="text/javascript">
function showDiv(objectID) {
var theElementStyle = document.getElementById(objectID);
if(theElementStyle.style.display == "block"){
theElementStyle.style.display = "none";
}else{
theElementStyle.style.display = "block";}
}
</script>
<style type="text/css">
#TW-feed, #TW-feed ul {list-style:none; margin:0px; padding:0px}
#TW-feed li ul {display:none;position:absolute;background-color:#ffffff;padding:3px;border:1px solid #cccccc;}
#TW-feed li {font-weight:bold; color:#EC8132;}
#TW-feed ul li {padding-bottom:3px;}
</style>
<div onMouseOver="showDiv('TW-Pop');return false;" onMouseOut="showDiv('TW-Pop');return false;">
<ul id="TW-feed">
<li>Subscribe <img src="" http://www.toprankblog.com/tools/graphics/feed-icon.gif "" border="0">
<ul id="TW-Pop">
<li><a href="" http://fictionally-yours.com/rss.php" ;" title="Subscribe to my feed"><img src="" http://www.toprankblog.com/tools/graphics//feed-icon.gif "" style="border:0"/></a>
</li>
<li><a title='Subscribe to my feed' href="" http://fictionally-yours.com/rss.php" ;" style='text-decoration:none;'><span style='border:1px solid;border-color:#FC9 #630 #330 #F96;padding:0 3px;font:bold 10px verdana,sans-serif;color:#FFF;background:#F60;margin:0;'>XML</span></a>
</li>
<li><a href="" http://fusion.google.com/add?feedurl=http://fictionally-yours.com/rss.php"><im g" src="" http://www.google.com/webmasters/add-to-google-plus.gif "" alt="Google Reader or Homepage" border="0"></a>
</li>
<li><a href="" http://add.my.yahoo.com/rss?url=http://fictionally-yours.com/rss.php"><im g" src="" http://us.i1.yimg.com/us.yimg.com/i/us/my/addtomyyahoo4.gif "" border="0" alt="Add to My Yahoo!"></a>
</li>
<li><a href="" http://www.newsgator.com/ngs/subscriber/subext.aspx?url=http://fictionally-yours.com/rss.php"><im g" src="" http://www.newsgator.com/images/ngsub1.gif "" alt="Subscribe in NewsGator Online" border="0"></a>
</li>
<li><a href="" http://my.msn.com/addtomymsn.armx?id=rss&ut=http://fictionally-yours.com/rss.php&ru=http://fictionally-yours.com"><im g" src="" http://sc.msn.com/44/G,UCH%7BZBSS3%7BOS%7BSE469LG.gif "" border="0"></a>
</li>
<li><a href="" http://feeds.my.aol.com/add.jsp?url=http://fictionally-yours.com/rss.php"><im g" src="" http://myfeeds.aolcdn.com/vis/myaol_cta1.gif "" alt="Add to My AOL" border="0"/></a>
</li>
<li><a href="" http://www.multirss.com/rss/http://fictionally-yours.com/rss.php"><im g" src="" http://www.multirss.com/rssimage/http://www.twistermc.com/blog/feed/" ;" alt="MultiRSS" border="0" /></a>
</li>
<li><a href="" http://www.netvibes.com/subscribe.php?url=http://fictionally-yours.com/rss.php"><im g" alt="Add to netvibes" src="" http://www.netvibes.com/img/add2netvibes.gif "" border="0"></a>
</li>
<li><a href="" http://www.pageflakes.com/subscribe.aspx?url=http://fictionally-yours.com/rss.php"><im g" src="" http://www.pageflakes.com/subscribe2.gif "" border="0"></a>
</li>
<li><a href="" http://reader.earthlink.net/feed/add?url=http://fictionally-yours.com/rss.php"><im g" src="" http://my.eimg.net/img/logo_myeln.gif "" width="91" height="20" border="0" alt="Subscribe in myEarthlink" title="Subscribe in myEarthlink !You must already be logged into your Earthlink account." /></a>
</li>
<li><a href="" http://www.live.com/?add=http://fictionally-yours.com/rss.php"><im g" style="width: 92px; height: 17px;" src="" http://tkfiles.storage.msn.com/x1pHd9OYNP16fmmfqJHji7qY0yYomKrFzGROBps3O6qHF0JRlVV8xH6X4cfsptw0fftk5oJYFpTKP6I-i91-se8TaoO7R9oiPVoxDEG_LEZW_XhegHxASvHJYsSxNjf526t" ;" border="0"></a>
</li>
<li><script language="javascript" src="" http://sm.feeds.yahoo.com/Buttons/V2.0/yactions.js"></script>< a" class="yaction-link-alert" id="BUTTONID"></a><script type="text/javascript">yAction.config.BUTTONID = {buttonActionUrl : " http://fictionally-yours.com/rss.php"}</script>
</li>
</div>
I have only done so in the Elegance skin, which can be seen here. The menu is supposed to appear once you hover over the RSS icon, which it does, but the menu is being displayed underneath the navigation menu instead of on top of it. I wanted to place the icon next to the skin drop down menu, but had problems doing so. This is what my header.tpl looks like:
<!-- START BLOCK : header -->
<body>
<div id="{page_id}">
<div id="bannerback">
<div id="banner">
<h1>{sitename}</h1>
<h2>{slogan}</h2>
</div> <div id="skin">{skinchange_content} [inserted RSS menu code here]</div>
{menu_content}
<div id="mainpage">
<!-- END BLOCK : header -->
I also know that once I get the menu to appear, if I get the icon to the right side of the skin drop down menu, it will stretch the page. Does anyone know of anyway how I can change it so that it does not do that?
You should be able to get the RSS menu to appear on top of the main menu by moving the skin div to just below the pageid div in your header.tpl.
Like this:
<!-- START BLOCK : header -->
<body>
<div id="{page_id}">
<div id="skin">{skinchange_content} [inserted RSS menu code here]</div>
<div id="bannerback">
<div id="banner">
<h1>{sitename}</h1>
<h2>{slogan}</h2>
</div>
{menu_content}
<div id="mainpage">
<!-- END BLOCK : header -->
I don't know about your other question...
Hm, adjusting my header.tpl as you said seems to have no effect to the RSS menu being in-front of the navigation menu.
Oh, duh. That's because they are both using position: absolute. Add z-indexes to them and it should work.
Thanks that seems to have fixed that part of it. I think I'll just place the icon somewhere else.
