Jump to content
Haku

Modifica al Footer del forum

Recommended Posts

Haku

In un sito esterno, ho visto che hanno aggiunto una 'tabella' al footer molto interessante che mi piacerebbe adottare.

Questo è il codice che sono riuscito a prelevare dal sorgente della pagina:

<footer id="siteinfo" role="contentinfo">

<div id="siteinfo-forumcore">

<h3>Forum Name</h3>

<ul>

<li><a href="#">Announcements</a></li>

<li><a href="#">Ideas and Suggestions</a></li>

</ul>

</div>

<div id="siteinfo-community">

<h3>Software</h3>

<ul>

<li><a href="#">IP.Board</a></li>

<li><a href="#">xenForo</a></li>

<li><a href="#">vBulletin</a></li>

<li><a href="#">MyBB</a></li>

</ul>

</div>

<div id="siteinfo-webmasters">

<h3>Webmasters</h3>

<ul>

<li><a href="#">Search Engine Optimization</a></li>

<li><a href="#">Website Construction</a></li>

<li><a href="#">Graphics and Webdesign</a></li>

</ul>

</div>

<div id="siteinfo-social">

<h3>Social Media</h3>

<ul>

<li><a href="#">Twitter</a></li>

<li><a href="#">FaceBook</a></li>

<li><a href="#">RSS Feed</a></li>

</ul>

</div>

<div id="siteinfo-content">

<h3>Site Info</h3>

<p class="copyright">

Descrizione Sito

</p>

</div>

</footer>

Quasi sicuramente mancherà il suo css.

Ma il risultato è questo:

post-1370-0-09296300-1354889036_thumb.pn

Share this post


Link to post
Share on other sites
Haku

Bravissimo, una cosa del genere =)

Se riuscissi a rispecchiare però la forma dell'immagine allegata da me, sarebbe il top =)

Forse posso fare delle prove controllando il css...mmm...provo...

Share this post


Link to post
Share on other sites
Askancy

Che brutto forum frequenti...


#siteinfo{padding:10px;color:#777;line-height:20px;overflow:hidden;font-size:10px;border-top:1px solid #D8D8D8}#siteinfo
a{color:#777}#siteinfo a:hover{color:#777}#siteinfo>div{float:left;margin-right:32px}#siteinfo>#siteinfo-content{float:right;margin-right:0}#siteinfo
h3{margin-bottom:8px;font-size:180%;font-weight:normal}#siteinfo li,
#siteinfo
p{list-style:none;font-size:100%;line-height:150%}


<footer id="siteinfo" role="contentinfo">
<div id="siteinfo-TEXT"><h3>TEXT1</h3> <ul><li>TEXT1A</li></ul></div>
<div id="siteinfo-TEXT"><h3>TEXT2</h3><ul> <li>TEXT</li></ul></div>
<div id="siteinfo-TEXT"><h3>TEXT3</h3><ul><li>TEXT</li></ul></div>
<div id="siteinfo-TEXT"><h3>TEXT4</h3><ul><li>TEXT4A</li></ul></div>
<div id="siteinfo-TEXT"><h3>TEXT5</h3><p class="copyright">TEXT<br /></p></div>
</footer>

Share this post


Link to post
Share on other sites
najaru

per fare un footer cosi devi per forza fare dei css ad hoc, per esempio prendendoli da un template anche statico che ti piace.

nell pagina, fai "visualizza codice sorgente" li troverai il codice html che genera il footer, poi guardi nell'head quale file css viene richiamato, richiami il file css nel browser, ti copi il codice che ti serve e via.

vanno poi messi nel globaltemplate e nel ipb_style.css

ecco , praticamente quello che ha fatto l amico askancy

Share this post


Link to post
Share on other sites
Haku
Che brutto forum frequenti...

Mi è utile per fare svariati test =D

Del resto, ho licenza su tutto ;)

Provo la modifica comunque ^^

Il pezzo in hmtl dove lo piazzo precisamente nel global template?

Share this post


Link to post
Share on other sites
Haku

L'ho messo prima dell'ultimo div, altrimenti sfondava il layout ^^

Però, se io metto la descrizione, mi va a capo, come mai?

Potete verificarlo sul mio sito ^^

Share this post


Link to post
Share on other sites
Askancy

L'ho messo prima dell'ultimo div, altrimenti sfondava il layout ^^

Però, se io metto la descrizione, mi va a capo, come mai?

Potete verificarlo sul mio sito ^^

colpa di <br>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Crea Nuovo...

Important Information

By using this site, you agree to our Terms of Use.