Hola, soy nuevo en joomla y tome una plantilla, a la cual le agregé todas las redes sociales que el sitio interactuara. La barra se llama #flotante.
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> La parte que agregué está en color verde. A continuación muestro el CSS que utilicé:
#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