Show posts

This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.

Messages - Beckham

#1
Tips and Tutorials / Elegant Menu with JQuery
January 07, 2014, 06:26:19 PM
Elegant Menu

Resultado final:


Abrimos nuestro index.template.php buscamos:

// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>


Remplazamos por:
// main menu jquery
echo '
    <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/menu.css" />';

// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/script.js?fin20"></script>
<script type="text/javascript">
$(function() {
$("#lbutton1,#lbutton2,#lbutton3,#lbutton4,#lbutton5").tipsy({gravity: "s"});
});
</script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery.js"></script>
    <script type="text/javascript" src="', $settings['theme_url'], '/scripts/jquery_menu.js"></script>


Buscamos:
// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

echo '
<div id="main_menu">
<ul class="dropmenu" id="menu_nav">';

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_', $act, '">
<a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
<span class="', isset($button['is_last']) ? 'last ' : '', 'firstlevel">', $button['title'], '</span>
</a>';
if (!empty($button['sub_buttons']))
{
echo '
<ul>';

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
<span', isset($childbutton['is_last']) ? ' class="last"' : '', '>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</span>
</a>';
// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>';

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
<span', isset($grandchildbutton['is_last']) ? ' class="last"' : '', '>', $grandchildbutton['title'], '</span>
</a>
</li>';

echo '
</ul>';
}

echo '
</li>';
}
echo '
</ul>';
}
echo '
</li>';
}

echo '
</ul>
</div>';
}


Remplazamos por:

// Show the menu up top. Something like [home] [help] [profile] [logout]...
function template_menu()
{
   global $context, $settings, $options, $scripturl, $txt;

   echo '
     
         <ul class="topnav">';

   foreach ($context['menu_buttons'] as $act => $button)
   {
      echo '
            <li>
               <a class="', $button['active_button'] ? 'active ' : '', 'firstlevel" href="', $button['href'], '"', isset($button['target']) ? ' target="' . $button['target'] . '"' : '', '>
                  <div>', $button['title'], '</div>
               </a>';
      if (!empty($button['sub_buttons']))
      {
         echo '
               <ul class="subnav">';

         foreach ($button['sub_buttons'] as $childbutton)
         {
            echo '
                  <li>
                     <a href="', $childbutton['href'], '"', isset($childbutton['target']) ? ' target="' . $childbutton['target'] . '"' : '', '>
                        <div>', $childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' : '', '</div>
                     </a>';
            // 3rd level menus
            if (!empty($childbutton['sub_buttons']))
            {
               echo '
                     <ul class="subnav">';

               foreach ($childbutton['sub_buttons'] as $grandchildbutton)
                  echo '
                        <li>
                           <a', $grandchildbutton['active_button'] ? ' class="active"' : '', ' href="', $grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' . $grandchildbutton['target'] . '"' : '', '>
                              <div>', $grandchildbutton['title'], '</div>
                           </a>
                        </li>';

               echo '
                  </ul>';
            }

            echo '
                  </li>';
         }
         echo '
               </ul>';
      }
      echo '
            </li>';
   }

   echo '
         </ul>';
}


Ahora solo descargar los archivos adjuntos y lo suben a su respectivo directorio.

Imagenes_menu.rar lo descomprimimos y subimos las imagenes a Tutheme/images/theme

menu.css lo subimos a Tutheme/css

jquery.rar lo descomprimimos y subismos los 2 archivos .js a Tutheme/scripts
#2
Tips and Tutorials / Agregar un boton al menu
January 07, 2014, 09:47:13 AM
Agregar un nuevo boton al menu

Descripcion: Este tutorial te permitira crear un nuevo boton al menu de cualquier theme para poner xat,Radio o lo que se te ocurra.

1.- Abrimos nuestro cliente ftp yo utilizo filezilla y abrimos la carpeta www


2.- Buscamos la carpeta sources y la abrimos


3.- Buscamos el archivo subs.php le damos clik derecho y luego clik en ver/editar

4.- Buscamos esto:

'home' => array(
'title' => $txt['home'],
'href' => $scripturl,
'show' => true,
'sub_buttons' => array(
),


4.- Colocamos abajo nuestro nuevo boton (modificamos lo que esta en rojo por nuestros datos):

         'Boton' => array(
            'title' => $txt['Boton'],
            'href' => 'Nuestro url',
            'show' => true,
            'sub_buttons' => array(
            ),


5.- Una vez modificado esto guardan el archivo y cierran el filezilla

6.- Entramos a nuestro foro y vamos a modificar temas


7.- En el Tema Predeterminado SMF - Curve le damos clik en Editar las hojas de estilo de este tema (stylesheets).


8.- Le damos clik a la carpeta


9.- Entramos a la carpeta languages


10.- Buscamos el archivo index.tu_idioma.php (en mi caso index.spanish_latin.php)

11.- Buscamos:

$txt['home'] = 'Inicio';

12.- Colocamos abajo:

$txt['boton'] = 'boton';

13.- Por ultimo modifica el  'boton'  por lo que colocastes en Subs.php, y listo !!!!
#3
Free Themes / Re: Bluez Multicolor
January 05, 2014, 02:05:10 AM
En el index.template.php busca:

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
    $context['url_logo'] = $settings['images_url'].'/logo.png';
echo '
<div id="wrapper">


Remplaza por:

function template_body_above()
{
global $context, $settings, $options, $scripturl, $txt, $modSettings;
    $context['url_logo'] = $settings['images_url'].'/logo.png" style="width: 110px;" />';
echo '
<div id="wrapper">


Pruebalo y dime si funciona.
#4
Tips and Tutorials / Slider Social Icons
January 03, 2014, 07:57:22 PM
Slider Social Icons


Traigo un exelente tip para agregar iconos sociales a su theme con un diseño elegante.
cuando terminemos tendremos algo haci:

Spoiler
[close]



Bien empezemos vamos al index.template.php y buscamos:

// Here comes the JavaScript bits!
echo '


Agregamos despues:

<script type="text/javascript" src="', $settings['theme_url'], '/scripts/Social.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/scripts/Social2.js"></script>


Buscamos:
// Show the menu here, according to the menu sub template.
template_menu();


Agregamos despues:
    // Social Icons By Monster Studios
echo'
    <ul id="navigation">
            <li class="Facebook"><a href="" title="Siguenos en Facebook"></a></li>
            <li class="Twitter"><a href="" title="Siguenos en Twitter"></a></li>
            <li class="Youtube"><a href="" title="Mira nuestros videos"></a></li>
        </ul>';



Ahora vamos a nuestro index.css y agregamos al final:

/* Social Icos By Monster Studios.
------------------------------------------------------- */
ul#navigation {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 25%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#navigation li {
    width: 100px;
}
ul#navigation li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#CFCFCF;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    /*-moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
    */
    opacity: 0.6;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ul#navigation .Facebook a{
    background-image: url(../images/Social/Facebook.png);
}
ul#navigation .Twitter a      {
    background-image: url(../images/Social/Twitter.png);
}
ul#navigation .Youtube a      {
    background-image: url(../images/Social/Youtube.png);
}



Ahora solo ay que descoprimir el archivo adjunto y agregar los archivos  a sus respetivas carpetas

Social.js y Social2.js a la carpeta scripts de su theme.
La carpeta Social la enviamos a la carpeta images de su theme

Descarga

Ups olvidaba el VT
#5
Tips and Tutorials / Social Footer Menu Circular
January 03, 2014, 01:48:59 PM
Hola amigos hoy les dejo este pequeño tip para
colocar un menu circular con diseño elegante el resultado
final sera este:


Spoiler
[close]

Empezamos primero vamos al index.template.php buscamos:

<div id="footer_section"><div class="frame">

Agregamos despues:

<section id="facebook">
        <ul>
          <a href="#" target="_blank"><span id="fackbook" class="tooltip" title="Link us on Facebook">FACEBOOK</span></a>
        </ul>
    </section>
    <section id="twitter">
    <ul>
       <a href="#" target="_blank"><span id="twitter-default" class="tooltip" title="Follow us on Twitter">TWITTER</span></a>
    </ul>
    </section>
    <section id="google">
    <ul>
       <a href="#" target="_blank"><span id="google-default" class="tooltip" title="Follow us on Google Plus">Google +</span></a>
    </ul>
    </section>
   <section id="tech">
   <ul>
      <a href="http://www.portalzone.net"><span id="tech-default" class="tooltip" title="Bookmark Us">PortalZone</span></a>
   </ul>
   </section>


A hora vamos al index.css y agregamos al final:

-------------------------------------
Facebook
-------------------------------------
*/


#facebook li {
display: block;
width: 50%;
font-weight: 400;
margin-bottom: 1em;
overflow: hidden;
padding-top: 1.4em;
padding-right: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
#facebook span {
display: block;
border: 3px solid #325f83;  /*Button Border color and border size  - Techandall.com*/
border-radius: 100%;  /* you can change the border radius if you want a square button, example 10%   - Techandall.com*/
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 7em;
height: 7em;
background: #01457b; /*Button background color  - Techandall.com*/
color: #fff; /*Button font color  - Techandall.com*/
font-family:Arial, Helvetica, sans-serif;
font-size: 0.6em;
line-height: 1em;
font-weight: 700;
padding: 2.7em 0 0 0;
text-align: center;
margin: -1.4em 1em 0 0;
text-transform: uppercase;
float: left;
}
#facebook span:hover {
background: #fff !important;
color: #5d6365; /*Button hover colors  - Techandall.com*/
border: 3px solid #5d6365 !important;
cursor: pointer;
}


-------------------------------------
Twitter
-------------------------------------
*/


#twitter li {
display: block;
width: 50%;
font-weight: 400;
margin-bottom: 1em;
overflow: hidden;
padding-top: 1.4em;
padding-right: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
#twitter span {
display: block;
border: 3px solid #1c68a5;
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 7em;
height: 7em;
background: #3186ca;
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.6em;
line-height: 1em;
font-weight: 700;
padding: 2.7em 0 0 0;
text-align: center;
margin: -1.4em 1em 0 0;
text-transform: uppercase;
float: left;
}
#twitter span:hover {
background: #fff !important;
color: #5d6365;
border: 3px solid #5d6365 !important;
cursor: pointer;
}



-------------------------------------
Google Plus
-------------------------------------
*/


#google li {
display: block;
width: 50%;
font-weight: 400;
margin-bottom: 1em;
overflow: hidden;
padding-top: 1.4em;
padding-right: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
#google span {
display: block;
border: 3px solid #c23a34;
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 7em;
height: 7em;
background: #f05851;
color: #fff;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.6em;
line-height: 1em;
font-weight: 700;
padding: 2.7em 0 0 0;
text-align: center;
margin: -1.4em 1em 0 0;
text-transform: uppercase;
float: left;
}
#google span:hover {
background: #fff !important;
color: #5d6365;
border: 3px solid #5d6365 !important;
cursor: pointer;
}

-------------------------------------
Techandall
-------------------------------------
*/


#tech li {
display: block;
width: 50%;
font-weight: 400;
margin-bottom: 1em;
overflow: hidden;
padding-top: 1.4em;
padding-right: 2em;
box-sizing: border-box;
-moz-box-sizing: border-box;
float: left;
}
#tech span {
display: block;
border: 3px solid #66ecbe;
border-radius: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
width: 7em;
height: 7em;
background: #c0eede;
color: #406d5e;
font-family:Arial, Helvetica, sans-serif;
font-size: 0.6em;
line-height: 1em;
font-weight: 700;
padding: 2.7em 0 0 0;
text-align: center;
margin: -1.4em 1em 0 0;
text-transform: uppercase;
float: left;
}
#tech span:hover {
background: #fff !important;
color: #5d6365;
border: 3px solid #5d6365 !important;
cursor: pointer;
}