Pregunta

Ejecutando WordPress 3.1 con el tema gratuito de Boldy desde el sitio5.

Aquí hay una versión laboral de mi sitio web: http://www.dekhoforum.com

Quiero lograr algo como esta captura de pantalla:enter image description here

es decir, tener un segundo logotipo sobre los íconos de las redes sociales.

EDITAR- La captura de pantalla muestra mover una imagen existente a la nueva ubicación.
Esto es engañoso, y en realidad necesito un nuevo marcador de posición para una imagen, y no mover el logotipo existente (que es la imagen correcta), ya que esto no será consistente en las otras páginas, como las Blog. - En resumen, es un requisito de marketing para obtener este logotipo en la parte superior de cada página, en todo el sitio.

Una opción que reflexioné fue de alguna manera tratar de agregar otro icono de redes sociales, pero vincularlo al sitio web de mi compañía principal.

He modificado PHP en el pasado sobre temas anteriores, pero siempre tuve una pequeña orientación de su maravilloso lote.

¿Me preguntaba si alguien podría aconsejar? He estado esparciendo en el encabezado.php, pero me imagino que tendré que escribir una nueva línea en algún lugar.

Cualquier ayuda sería genial.

¿Fue útil?

Solución

Esto se puede lograr fácilmente con CSS.

A veces es mejor usar CSS para modificar su tema. Yo uso el Herramientas para desarrolladores de kits web o Firebug Para hacer ediciones en vivo en el navegador hasta que se vea bien, guárdelo a CSS.

Edite las siguientes líneas en style.css.

/* line 201  pulled down the icons to make room for the 2nd logo */
#topSocial {
    position:absolute;
    right:0;
    top: 150px;
}

/* line 80  add relative positioning to the wrapper div to allow the logo to be positioned absolute */
#wrapper {
    margin:0 auto;
    width:960px;
    position: relative;
}

/* line 85 made the header a little taller to make room for the 2nd logo*/
#header {
    height: 220px;
    position:relative;
    background:url(images/bk_header.png) 0 0 no-repeat;
}


/* line 312 moved the logo in place using position absolute */
#blurb img {
    border:none;
    position: absolute;
    top: 90px; 
    right: 15px; 
    margin-top: 5px;
}

El resultado:

enter image description here


Editar tras pregunta se aclaró que se necesitaba un logotipo adicional

Para agregar un logotipo adicional, abra su archivo de encabezado.php y encuentre las líneas que se ven así:

Editar

El segundo código del logotipo que se muestra a continuación debe ir a la línea 78 en su encabezado.php Archivo

enter image description here

<!-- END TOP SEARCH -->
<!-- BEGIN TOP SOCIAL LINKS -->

Entre esas dos líneas, agregue el XHTML básico para mostrar una imagen vinculada:

<!-- END TOP SEARCH -->
<!-- BEGIN 2ND LOGO -->
<div id="new-logo">
<a href="http://link_you_want_image_to_point_to"><img src="http://url_of_image" width="xx" height="xx" /></a>
</div>
<!-- END 2ND LOGO -->
<!-- BEGIN TOP SOCIAL LINKS -->

Use exactamente el mismo CSS que le di arriba excepto el cambio

#blurb img {
     border:none;
     position:absolute;
     top: 90px;
     right: 15px;
     margin-top: 5px;
}

a:

#new-logo img {
         border:none;
         position:absolute;
         top: 90px;
         right: 15px;
         margin-top: 5px;
    }
Licenciado bajo: CC-BY-SA con atribución
scroll top