Vrhnji toolbar za Joomlo (tako kot zurnal24)

Pozdravljeni!

Zanima me, če je že kdo naletel na kakšen modul oziroma plugin za Joomlo, ki bi omogočal dodajanje toolbara z nekaj povezavami, prijava/odjava (za jomsocial) in social bookmarks linke... Nekako tako kot imajo to narejeno na žurnalu - http://www.zurnal24.si/

Sem že prebrskal Joomlino uradno stran z extensioni, vendar nič kaj pametnega nisem našel :(

Za odgovore se vam že vnaprej zahvaljujem!

20 odgovorov

darkside, klikni me pa ti pošljem eno simpl temo ko sem jo naredo da boš vido pa dobo občutke z div-i.

Shrani si tole kot html pa si oglej kako se to naredi mal spremeni pa boš razumel. I hope :)

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zgornji menu</title>
<style type="text/css">
<!--
#top-bar    { border-bottom: 2px solid #8ac4e5; overflow: hidden; position: absolute; z-index: 5002; top: 0px; left: 0px; width: 100%; background: #fefefe;}
#top-bar ul { list-style: none;}
#top-bar li { float: left;}
#top-bar a  { font-size: 11px; line-height: 18px; font-weight: bold; color: #00528b; text-decoration: none; padding: 5px 10px 4px; text-shadow: 0px 0px 1px #fff; float: left}
#top-bar .links a:hover,
#top-bar .service a:hover   { color: #000; background: #c1e8fe;}

#top-bar .links     { float: left;}
#top-bar .service   { float: right;}
#top-bar .icons     { float: right; padding: 0 6px;}

#top-bar .login a           { padding-left: 32px; position: relative;}
#top-bar .login .sp_el      { position: absolute; top: 5px; left: 6px; width: 20px; height: 19px; background-position: -104px -32px;}
#top-bar .fb_login a        { color: #fff; text-shadow: 0px 0px 1px #000; cursor: pointer;}
#top-bar .fb_login a:hover  { text-shadow: 0px 0px 1px #fff;}
#top-bar .register a        { padding-left: 27px; position: relative;}
#top-bar .register .sp_el   { position: absolute; top: 6px; left: 7px; width: 16px; height: 16px; background-position: -140px -34px;}
#top-bar .user span     { font-size: 11px; line-height: 18px; font-weight: bold; color: #666; padding: 5px 5px 4px 10px; text-shadow: 0px 0px 1px #fff; float: left;}

#top-bar .icons li      { padding: 3px 2px 0px;}
#top-bar .icons a       { width: 22px; height: 22px; padding: 0; text-indent: -9999px; overflow: hidden;}
#top-bar .fb_icon a     { /*dodaj sliko*/}
#top-bar .tw_icon a     { /*dodaj sliko*/}
#top-bar .rss_icon a    { /*dodaj sliko*/}

-->
</style>
</head>

<body>
<div id="top-bar">

            <ul class="links">
                <li><a href="#">Povezava 1</a></li>
                <li><a href="#">Povezava 2</a></li>
                <li><a href="#">Povezava 2</a></li>
                <li><a href="#">Povezava 4</a></li>
                <li><a href="#">Povezava 5</a></li>
            </ul>

            <ul class="icons">
                <li class="fb_icon"><a href="http://www.facebook.com" rel="external nofollow" target="_blank">Facebook</a></li>
                <li class="tw_icon"><a href="http://twitter.com" rel="external nofollow" target="_blank">Twitter</a></li>
                <li class="rss_icon"><a href="#">RSS</a></li>
            </ul>

            <ul class="service">
                                <li class="login"><a href="#">Prijava<span class="sp_el"></span></a></li>
                <li class="fb_login"><a href="javascript:void(0);" onclick="fb_login();">Facebook prijava</a></li>
                <li class="register"><a href="#">Registracija<span class="sp_el"></span></a></li>
                            </ul>

        </div>
</body>
</html>
1

Tole morda ni najboljši primer, je pa dokaj nazoren in meni je kar pomagal razumeti zadeve.

Fantje hvala za pomoč! LOKO, tole še danes malce pregledam in upam, da bom potem znal prenesti vse skupaj v Joomlo oz. da bom ta del kode znal integrirati v template :) Najlepše se je učiti takole na primerih!

Fantje še eno vprašanje... Zgornji toolbar mi je sedaj uspelo izdelati s pomočjo enega modula za menije, vendar bi rad imel linke na levi strani, medtem, ko povezave za Prijava, Prijava s FB in Registracija na desni... Kako samo te tri elemente postaviti na desno?

Če maš statičen meni in ga ne misliš spreminjat, potem lahko vsak item, ki ga želiš na desni, posebej float-aš v css-ju. Poglej kakšen class imajo tisti itemi, ki jih želiš na desni, in jim določi float: right; in ostale zadeve.

Pozdrav fantje! Sedaj sem se začel igrati s kodo od LOKA in mi je zadeva kar lepo uspela (nekaj težav je še za odpraviti) vendar pa nastane problem ob prijavi uporabnika. Želel bi namreč, da ko uporabnik v toolbaru klikne Prijava, se mu odpre popup in ko se zlogira se gumb prijava spremeni v gumb z njegovim nickom, ter se odstranita FB login in registracija... Trenutno moja koda izgleda takole.

<div id="top-bar">
<ul class="links">
<li><jdoc:include type="modules" name="iskalnik_top" /></li>
</ul>

<ul class="icons">
<li class="fb_icon"><a href="http://www.facebook.com" rel="external nofollow" target="_blank">Facebook</a></li>
<li class="tw_icon"><a href="http://twitter.com" rel="external nofollow" target="_blank">Twitter</a></li>
<li class="yt_icon"><a href="#">YouTube</a></li>
<li class="rss_icon"><a href="#">RSS</a></li>
</ul>

<ul class="service">
<li class="s5box_one"><a href=>Prijava<span class="sp_el"></span></a></li>
<li class="fb_login"><a href="javascript:void(0);" onclick="fb_login();">Facebook prijava</a></li>
<li class="register"><a href="http://localhost/tag/index.php?option=com_user&view=register">Registracija<span class="sp_el"></span></a></li>
</ul>

Verjamem, da če bomo tole rešili, bo koristilo še komu. Z veseljem potem kodo zapakiram v rar in ponudim kot modul ali kako drugače :)

Da še poenostavim. Tudi, če se po prijavi spremeni gumb Prijava zgolj v Profil bi zadostovalo :)

Hm, ali bi bilo pravilno kaj v takem smislu? ,

<?php
$user = &JFactory::getUser();
if (! $user->get('gid')){
?>
<li class="s5box_one"><a href=>Prijava<span class="sp_el"></span></a></li>
<?php
}
else{
?>

<li class="s5box_one"><?php $user->get('name'); ?></span></a></li>
<?php
}

Fantje, se opravičujem za bump stare teme vendar imam eno težavo. Na strani www.elektro-vozila.si sem po zgornjih napotkih izdelal toolbar, vanj vključil nekaj pluginov, vse funkcionira lepo. Sedaj pa sem poskusil inštalirati nekaj komponent in pluginov, ki jih potrebujem za eno novo funkcijo na portalu in recimo, ko inštaliram Widgetkit od Yootheme, z njim naredim eno galerijo in jo pozicioniram na frontpage se mi vrhnji toolbar nekoliko "sesuje" oziroma stvari čudno podvojene ratajo. Še screenshot za predstavo:

Sumim, da težavo povzroča S5Box plugin, ki omogoča, da se ob kliku na gumb Prijava, login form odpre v popupu, saj, ko recimo vklopim widgetkit plugin, ki tako kot še kakšen drug, sesuje toolbar, se popup sicer odpre, vendar se ne morem odjaviti (kot, da povezava ne bi delovala oziroma je ne bi bilo).