[RISOLTO] Come personalizzare i Sottomenų?

[paolocarta]

Ciao a tutti
ho un problema con la personalizzazione di un sottomenų, vorrei infatti diominuire la dimensione del font rispetto al menų di appartenenza.

Ho fatto diverse ricerche in giro, ma non ne ho cavato piede fin ora.

allora, diciamo che nel CSS io vada ad inserire quanto segue:

Codice: [Seleziona]

a.sublevel:link, a.sublevel:visited {
  display: block;
vertical-align: middle;

font-size: 11px;
font-weight: bold;
color: #666666;
text-align: left;
padding-left: 11px;
margin-left: 10px;
line-height: 20px;
}


a.sublevel:hover {
color: #99CC00;
font-weight: bold;

background: #026604;
text-decoration: none;
}
Allo stato attuale non si visualizzano i cambiamenti, resta tutto uguale.
Le mie domande sono:
- devo inserire qualche paramentro nella index.php?
- devo inserire qualcosa in ID Tag Menu, Suffisso classe CSS menu   , Suffisso classe CSS modulo ? Se si cosa devo inserire?
- varie ed eventuali?

il css del menų attualmente č questo (quello di sopra č un'esempio per il sottomenų):

Codice: [Seleziona]

/**************************************************************************************/
/*   Navigation
/**************************************************************************************/

#topmenu
{
float: left;
width: 175px;
margin: 15px 25px 0px 0px;
text-align: left;
font-size: 16pt;
}

#topmenu ul
{
float: right;
list-style: none;
}

#topmenu li
{
}

#topmenu li a
{
float: right;
width: 175px;
height: 20px;
margin: 0px 0px 7px 0px;
padding: 0px 0px 0px 0px;
display: block;
font-size: 14px;
font-weight: normal;
color: #49405F;
border-bottom: 1px;
border-bottom-style: dotted;
border-color: #d0d0d0;
}

#topmenu li a:hover
{
color: #808000;
border-style: none;
border-bottom: 1px;
border-bottom-style: dotted;
border-color: #808000;
}


Grazie in anticipo.

[conti1]

ciao
non devi toccare nulla nel php ma solo  spulciare  bene il css del menu   e trovare il il tag giusto del sub menu dovrebbe essere il "li" .
se puoi postare il link del sito e meglio.

[paolocarta]

Certo
č un sito di prova che sto facendo sulla base del template AS 002014 di Astemplates.com, l'indirizzo č:
http://provasito.cabori.it/

Non ho mai dovuto personalizzare il submenų, ma qui il menų principale (che risulta topmenų) č molto grande e volevo appunto rimpicciolire il font del submenų.

[conti1]

ciao
allora hai un menu fatto come un classico html e non usi quello di joomla strana come scielta, a monte della tua scielta devi agire nel php del template.
da quel che vedo hai 4 voci sub menu
originale

Codice: [Seleziona]

<div style="padding-left: 4px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="video"/> <a href="#" class="sublevel-nav" >video</a></div>
<div style="padding-left: 4px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="bando"/> <a href="#" class="sublevel-nav" >bando</a></div>
<div style="padding-left: 4px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="programma"/> <a href="#" class="sublevel-nav" >programma</a></div>

</td></tr>
devi agire dove hai lo stile
in questo modo

Codice: [Seleziona]

<div style="padding-left: 4px font-size: 16px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="video"/> <a href="#" class="sublevel-nav" >video</a></div>
<div style="padding-left: 4px font-size: 16px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="bando"/> <a href="#" class="sublevel-nav" >bando</a></div>
<div style="padding-left: 4px  font-size: 16px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="programma"/> <a href="#" class="sublevel-nav" >programma</a></div>

</td></tr>


[paolocarta]

Ok, ci provo e vi faccio sapere.
Grazie mille per adesso.

[paolocarta]

Scusa, ma mi sa che hai fatto un errorino... pensandoci, quanto mi consigli č impossibile perchč il codice che hai segnato lo visualizzi tramite il sorgente pagina, ma nel php del template non č presente ovviamente, ma viene richiamato dall'index. Il menų č quello ordinario di Joomla.

Quindi non ho risolto il problema, sono al punto di partenza.

Consigli?

Non so se esista un post o un tutorial in merito, non l'ho trovato.

[conti1]

io ti lascio della tua convinzione , che non sia nel php del template potrebbe essere ma che usi il menu di joomla fatto in quella maniera , nienche se mi paghi  ci credo , guarda che avrai  ovveride del modulo menu   e li trovi quanto  postato  sopra.

il menu di jopomla e fatto di ul e li   e non di div come quello . che tu usi un modulo menu di joomla daccordo ma l'ovveride   che comanda.
il template originale usa il menu di joomla e in pratica queste diciture non ci sono.

Codice: [Seleziona]

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr ><td><a href="/index.php?option=com_content&amp;view=frontpage&amp;Itemid=28&amp;lang=it" class="mainlevel-nav" >Home</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=25&amp;Itemid=29&amp;lang=it" class="mainlevel-nav" id="active_menu-nav">Arti Visive</a>

<div style="padding-left: 4px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="video"/> <a href="#" class="sublevel-nav" >video</a></div>
<div style="padding-left: 4px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="bando"/> <a href="#" class="sublevel-nav" >bando</a></div>
<div style="padding-left: 4px"><img src="/templates/as002014/images/indent1.png" alt="" /><img src="/images/stories/arrow.png" border="0" alt="programma"/> <a href="#" class="sublevel-nav" >programma</a></div>

</td></tr>
<tr ><td><a href="#" class="mainlevel-nav" >Musica</a></td></tr>
<tr ><td><a href="#" class="mainlevel-nav" >Scrittura</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=43&amp;Itemid=18&amp;lang=it" class="mainlevel-nav" >Chi Siamo</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=46&amp;Itemid=63&amp;lang=it" class="mainlevel-nav" >Dove Siamo</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=35&amp;Itemid=53&amp;lang=it" class="mainlevel-nav" >Contatti</a></td></tr>
<tr ><td><a href="/index.php?option=com_content&amp;view=article&amp;id=47&amp;Itemid=61&amp;lang=it" class="mainlevel-nav" >Downloads</a></td></tr>
<tr ><td><a href="/index.php?option=com_user&amp;view=login&amp;Itemid=57&amp;lang=it" class="mainlevel-nav" >Login</a></td></tr>
</table>per cui questo menu e fatto manualmente   e ki devi trovare  . nel template originale non esiste da nessuna parte  questo codice   x cui vedi un po tu .

[paolocarta]

Ok, molto probabile, ma nel template che sto utilizzando non c'č nessuna cartella o file che possa effettuare override.

Nel css quanto di seguito comanda tutto il menų che vedi:

/**************************************************************************************/
/*   Navigation
/**************************************************************************************/
#topmenu
{
   float: left;
   width: 175px;
   margin: 15px 25px 0px 0px;
   text-align: left;
   font-size: 16pt;
}

Cosa dovrei aggiungere subito sotto per gestire il sottomenų?
Qualcosa tipo questa, inserendo tra le graffe le impostazioni sul font?

a.sublevel{}
a.sublevel:link {}
a.sublevel:visited {}
a.sublevel:hover {}

Se tolgo le impostazioni del topmnenų (quelle che ho su descritto) ovviamente il menų si rimpicciolisce e torna ad una dimensione standard, cambia posizione, etc etc.. quindi č il css che lo comanda, e dovrebbe poter comandare anche il sublevel... ma, cosa scrivo?

L'ovveride solitamente dove si trova, nel template giusto?

[paolocarta]

Questo di seguito č il php del template:

Codice: [Seleziona]


<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/general.css" type="text/css" />

</head>

<body>

    <!-- HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <div id="header">

        <div id="headertop">
            <div class="headercolleft">
            </div>
            <div class="headercolright">
                <div id="headercolright_bgleft"></div>
               
                <div id="mainlogo">
                    <jdoc:include type="modules" name="user1" style="xhtml"/>
                </div>

                <div id="mainlogo2">
                    <jdoc:include type="modules" name="user2" style="xhtml"/>
                </div>

                <div id="headercolright_bgright"></div>
            </div>
        </div>
       
        <div id="headerbottom">
            <div class="headercolleft">
                <div id="topmenu">
                    <jdoc:include type="modules" name="user3" style="xhtml"/>
                </div>
            </div>
            <div class="headercolright">
                <div id="mainbanner">
                    <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/mainbanner.jpg" alt="AS Templates"/>
                </div>

                    <div id="adsense">
                        <jdoc:include type="modules" name="user6" style="xhtml"/>
                    </div>

            </div>
        </div>
   
    </div>
    <!-- END OF HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->


    <div class="clear"></div>
    <!-- CONTENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="content">
        <!-- COLUMN LEFT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <?php if($this->countModules('left')) : ?>
        <div id="colleft">           
            <div id="textblock">
                <jdoc:include type="modules" name="top" style="xhtml"/>
<jdoc:include type="modules" name="left" style="xhtml" />
            </div>
        </div>
        <?php endif; ?>   
        <!-- END OF COlUMN LEFT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- COlUMN MAIN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
       
            <div id="colmain">
                <div class="txtblock">
                    <jdoc:include type="message" />
                    <jdoc:include type="component"  /> 
                 </div> 
            </div>
            <div id="colmainbottom_bg">
                <div id="colmainbottom_bgleft"></div>
                <div id="colmainbottom_bgright"></div>
            </div>

                    <div id="adsense2">
                        <jdoc:include type="modules" name="user4" style="xhtml"/>
                    </div>
             
    </div>
     <!-- END OF COLUMN MAIN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 
     <!-- END OF CONTENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
 
    <div class="clear"></div>
    <div class="separator"> </div>

    <!-- FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <div id="footer">
        <div id="footertrademark">
            <jdoc:include type="modules" name="debug"  />
            Designed by <a href="http://www.pino.it" target="blank"> pino</a>
        </div>
        <div id="footermenu">
            <jdoc:include type="modules" name="footer" style="xhtml"/>
        </div>
    </div>
    <!-- END OF FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

</body>
</html>

[conti1]

ovveride e nella cartella html
da dove lo hai preso il template io lo scaricato ora da qui nei template  e non esiste un menu fatto in quella maniera da nessuna parte, neppure se spulcio il sito  della demo del costruttore  ha un menu fatto in quella maniera ,  da qualche parte  ci deve essere  non credi?

questo e il menu della demo  e come vedi e ben diverso

Codice: [Seleziona]

<div id="topmenu">
                    <div class="moduletable">
<ul id="mainlevel"><li><a id="active_menu" class="mainlevel" href="/content/jl/about.html">About</a></li><li><a class="mainlevel" href="/content/jl/services.html">Services</a></li><li><a class="mainlevel" href="/content/jl/login.html">Login</a></li><li><a class="mainlevel" href="/content/jl/contact.html">Contact</a></li><li><a class="mainlevel" href="/content/jl/search.html">Search</a></li></ul> </div>

                </div>

ma il menu che si vede nel tuo sito, come hai fatto a farlo?
visto che nel php che si vede ci sono pure richiami  di immagini ad ogni voce?

[paolocarta]

Ti ho postato il php proprio per farti capire che non ne ho la pių pallida idea, altrimenti non vi stressavo 

Davvero non so cosa dirti.
Senti, se sostituissi la stringa di codice che mi hai descritto? Tu l'hai presa dal php?

[conti1]

no lo presa dal sorgente della demo x farti vedere un menu di joomla come viene composto.

qui hai il template originale con la demo
http://www.astemplates.com/itemdetails.php?id=40
se lo hai preso da qui deve funzionare giusto.
se non lo hao preso qui  magari e stato modificato da qualche parte.
scarica questo  e provalo  , almeno vediamo se il menu e uguale.

[paolocarta]

Io l'ho scaricato dal calderone dei templates:

http://www.joomla.it/template/elenco-template/4608-astemplate002014.html

Aprendo il php originale ho quanto segue e ci sono delle differenze:

Codice: [Seleziona]

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!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" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/general.css" type="text/css" />

</head>

<body>

    <!-- HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <div id="header">

        <div id="headertop">
            <div class="headercolleft">
            </div>
            <div class="headercolright">
                <div id="headercolright_bgleft"></div>
                <div id="mainlogo">
                    <a href="<?php echo $this->baseurl ?>">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/mainlogo.jpg" alt="AS Templates"/> </a>
                </div>
                <div id="headercolright_bgright"></div>
            </div>
        </div>
       
        <div id="headerbottom">
            <div class="headercolleft">
                <div id="topmenu">
                    <jdoc:include type="modules" name="user3" style="xhtml"/>
                </div>
            </div>
            <div class="headercolright">
                <div id="mainbanner">
                    <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/mainbanner.jpg" alt="AS Templates"/>
                </div>
            </div>
        </div>
   
    </div>
    <!-- END OF HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->


    <div class="clear"></div>
    <!-- CONTENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div id="content">
        <!-- COLUMN LEFT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <?php if($this->countModules('left')) : ?>
        <div id="colleft">           
            <div id="textblock">
                <jdoc:include type="modules" name="top" style="xhtml"/>
<jdoc:include type="modules" name="left" style="xhtml" />
            </div>
        </div>
        <?php endif; ?>   
        <!-- END OF COlUMN LEFT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
        <!-- COlUMN MAIN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
       
            <div id="colmain">
                <div class="txtblock">
                    <jdoc:include type="message" />
                    <jdoc:include type="component"  />
                    <div id="adsense">
                        <jdoc:include type="modules" name="user6" style="xhtml"/>
                    </div>   
                 </div>
                   
            </div>
            <div id="colmainbottom_bg">
                <div id="colmainbottom_bgleft"></div>
                <div id="colmainbottom_bgright"></div>
            </div>
             
    </div>
     <!-- END OF COLUMN MAIN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> 
     <!-- END OF CONTENT ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

    <div class="clear"></div>
    <div class="separator"> </div>

    <!-- FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
    <div id="footer">
        <div id="footertrademark">
            <jdoc:include type="modules" name="debug"  />
            Designed by <a href="http://www.asdesigning.com" target="blank"> AS Designing</a>
        </div>
        <div id="footermenu">
            <jdoc:include type="modules" name="footer" style="xhtml"/>
        </div>
    </div>
    <!-- END OF FOOTER ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

</body>
</html>

Ovviamente ho modificato qualcosa, ma solo il posizionamento dei moduli.

[conti1]

non e che hai un modulo personalizzato pubblicato nella posizione user3?

[paolocarta]

Si, il menų top

[conti1]

Si, il menų top

ecco dove quel codice

[paolocarta]

ok... quindi cosa dovrei fare?

[conti1]

ok... quindi cosa dovrei fare?

usare i moduli menu di joomla era troppo semplice
comunque  rileggi il mio secondo post li oh detto cosa devi fare.

[paolocarta]

Scusa ma non capisco cosa vuoi dire e cosa dovrei fare.
Da lato admin io dico al modulo Topmenu di esser visibile in User3.

Ora, dal tuo secondo post mi dici di fare delle modifiche al Codice Sorgente visualizzato dal browser? E come dovrei fare?

[paolocarta]

Ho risolto!
E' bastato inserire nel CSS questa linea:

.sublevel-nav
{
   font-size: 15px;
}

Grazie dell'aiuto.

[tonicopi]

Magari aggiungi anche questa per centrare le freccette arancio:

Codice: [Seleziona]

div#topmenu img {
vertical-align:middle;
}

[paolocarta]

Grazie Tonicopi... cosė č molto meglio...