No se ve la barra flotante de Social Media El sitio es [URL="http://ozzio.com.ar"]este[/URL]
Inserte la barra como un div y la hice fija con el css.
El Html de la plantilla es el siguiente:
Código HTML:
<?php /* * (C) 2009 - 2011 SiteGround.com - All Rights Reserved. * General Public License version 3 or later; see LICENSE.txt *This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * You should have received a copy of the GNU General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. */ defined( '_JEXEC' ) or die( 'Restricted access' ); JPlugin::loadLanguage( 'tpl_SG1' ); define( 'path', dirname(__FILE__) ); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <?php $menu_name = $this->params->get("menuName", "topmenu"); $menu_type = $this->params->get("menuType", "splitmenu"); require(path .DS."styleloader.php"); require(path .DS."utils.php"); ?> <link rel="stylesheet" href="templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body id="page_bg"> <div id="flotante"> <ul> <li><a class="facebook" href="http://www.facebook.com/profile.php?id=100002080938644#!/profile.php?id=100002080938644" title="Seguinos en Facebook"></a></li> <li><a class="twitter" href="http://twitter.com/OzzioDeco" title="Seguinos en Twitter"></a></li> <li><a class="flickr" href="http://www.flick.com/photos/ozzio" title="Seguinos en Flickr"></a></li> <li><a class="rss" href="#" title="RSS Feed"></a></li> <li><a class="youtube" href="http://www.youtube.com/user/OzzioDeco" title="Nuestro Canal de Youtube"></a></li> <li><a class="newsletter" href="#" title="Suscribite a nuestro newsletter"></a></li> </ul> </div> <div id="header"> <div class="logo"><h1><a href="index.php"><?php echo $mainframe->getCfg('sitename') ;?></a></h1></div> <div class="clr"></div> <div id="pillmenu"> <?php if($mtype != "module") : echo $mainnav; else: ?> <jdoc:include type="modules" name="user3" /> <?php endif; ?> </div> <div id="search"><jdoc:include type="modules" name="user4" /></div> <div class="clr"></div> </div> [COLOR="Teal"] <div id="flotante"> <ul> <li><a class="facebook" href="http://www.facebook.com/profile.php?id=100002080938644#!/profile.php?id=100002080938644" title="Seguinos en Facebook"></a></li> <li><a class="twitter" href="http://twitter.com/OzzioDeco" title="Seguinos en Twitter"></a></li> <li><a class="flickr" href="http://www.flick.com/photos/ozzio" title="Seguinos en Flickr"></a></li> <li><a class="rss" href="#" title="RSS Feed"></a></li> <li><a class="youtube" href="http://www.youtube.com/user/OzzioDeco" title="Nuestro Canal de Youtube"></a></li> <li><a class="newsletter" href="#" title="Suscribite a nuestro newsletter"></a></li> </ul> </div>[/COLOR] <div id="content"> <div class="content_t"> <div class="content_b"> <div class="newsflash<?php if(!$this->countModules('user1') and JRequest::getCmd('layout') != 'form') : ?> only<?php endif; ?>"> <jdoc:include type="modules" style="rounded" name="top" /> </div> <div class="content_m"> <?php if($this->countModules('left') and JRequest::getCmd('layout') != 'form') : ?> <div id="leftcolumn"> <jdoc:include type="modules" name="left" style="rounded" /> <br /> <?php $sg = 'banner'; include "templates.php"; ?> <br /> </div> <?php endif; ?> <?php if($this->countModules('left') and $this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?> <div id="maincolumn"> <?php elseif($this->countModules('left') and !$this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?> <div id="maincolumn_left"> <?php elseif(!$this->countModules('left') and $this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?> <div id="maincolumn_right"> <?php else: ?> <div id="maincolumn_full"> <?php endif; ?> <div class="nopad"> <jdoc:include type="message" /> <?php if($this->params->get('showComponent')) : ?> <jdoc:include type="component" /> <?php endif; ?> </div> </div> <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?> <div id="rightcolumn"> <jdoc:include type="modules" name="right" style="rounded" /> </div> <?php endif; ?> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div id="sgf"> <p> <jdoc:include type="modules" name="debug" /> <?php $sg = ''; include "templates.php"; ?> <a href="http://validator.w3.org/check/referer">valid xhtml</a> <a href="http://jigsaw.w3.org/css-validator/check/referer">valid css</a> </p> </div> </div> </body> </html>
#flotante {
font-family: "arial narrow black";
font-size: 10px;
font-style: normal;
color: #000;
background-color: #d9cba0;
text-align: center;
vertical-align: baseline;
clear: none;
float: right;
height: auto;
width: 25px;
padding-top: 5px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 10px;
overflow: visible;
position: fixed;
visibility: visible;
z-index: 1;
right: 0;
top: 110px;
margin-top: 35px;
margin-right: 0px;
margin-bottom: 35px;
margin-left: 25px;
border: 3px solid #fff;
border-right: none;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
list-style:none;
}
/* Add the drop shadow */
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
box-shadow: 0 0 7px rgba(0, 0, 0, .6);
}
#flotante ul li {
display: block;
list-style:none;
margin-bottom:5px;
width:32px;
border: 2px outset #FFF;
list-style:none;
}
#flotante a {
display:block;
width:32px;
background-image: url(../images/M_images/sprites.png);
margin: 0 auto;
}
.facebook {
background-repeat: no-repeat;
background-position: 0px 0px;
height: 32px;
width: 32px;
}
.facebook:hover {
background-repeat: no-repeat;
background-position: 0px -32px;
height: 32px;
width: 32px;
}
.twitter {
background-repeat: no-repeat;
background-position: 0px -64px;
height: 32px;
width: 32px;
}
.twitter:hover {
background-repeat: no-repeat;
background-position: 0px -96px;
height: 32px;
width: 32px;
}
.flickr {
background-repeat: no-repeat;
background-position: 0px -128px;
height: 32px;
width: 32px;
}
.flickr:hover {
background-repeat: no-repeat;
background-position: 0px -160px;
height: 32px;
width: 32px;
}
.rss {
background-repeat: no-repeat;
background-position: 0px -192px;
height: 32px;
width: 32px;
}
.rss:hover {
background-repeat: no-repeat;
background-position: 0px -224px;
height: 32px;
width: 32px;
}
.youtube {
background-repeat: no-repeat;
background-position: 0px -256px;
height: 32px;
width: 32px;
}
.youtube:hover {
background-repeat: no-repeat;
background-position: 0px -288px;
height: 32px;
width: 32px;
}
.newsletter {
background-repeat: no-repeat;
background-position: 0px -320px;
height: 32px;
width: 32px;
}
.newsletter:hover {
background-repeat: no-repeat;
background-position: 0px -352px;
height: 32px;
width: 32px;
}
Lo insólito que esta barra la probé en un sitio html y no presentó problemas, pero cuando la meti en la plantilla de Joomla solo aparece la barra marrón y esos puntitos.
Por favor ayudenme
