Jump to content

¿Me podéis aconsejar sobre el fondo de mi web?

Rubén

By Rubén
in Discusión general

 Share

Recommended Posts

Rubén Newbie

Rubén

Posted
Posted

Buenos días;

 

Como podéis ver cada vez estoy realizando más mejoras dentro de mi sitio web

 

Hoy le toca al horroroso fondo que tengo, busco vuestra ayuda porque conozco vuestros grandes conocimientos sobre el desarrollo web (venga Jordi, mójate que te dejo que hagas una review de mi tienda en tu blog ;) ) o quien sea, vamos, que le pongo a el como ejemplo.

 

Gracias a todos

 

La web es

http://dogstore.es

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Pues estaría de PM, la verdad Nadie

 

En realidad puedes hacerlo con css3 con el box-shadow (o como se escriba xD)

 

Pero vamos si quieres lo hacemos igual que tiene esa web (jajaj)

 

Coge esta imagen:

 

http://media10.mediazs.com/theme/zooplus/zooplus.es/image/legacy/q-s/shadow.gif

 

Guardatela y subela al directorio:

 

/themes/tu-plantilla/img/

 

Despues, ve al fichero:

 

http://dogstore.es/tienda/themes/default/css/global.css

 

Busca en tu caso esto:

 

body {
font: normal 11px/14px Arial, Verdana, sans-serif;
color: #222;
background-color: #f5f5db;
background-repeat: no-repeat;
background-position: 50% 0;
}

 

y dejalo asi:

 

body {
font: normal 11px/14px Arial, Verdana, sans-serif;
color: #222;
background: url('../img/nombre_de_la_imagen.gif');
}

  • Like 1
Link to comment
Share on other sites
Rubén Newbie

Rubén

Posted
  • Author
Posted

En realidad puedes hacerlo con css3 con el box-shadow (o como se escriba xD)

 

Pero vamos si quieres lo hacemos igual que tiene esa web (jajaj)

 

Coge esta imagen:

 

http://media10.mediazs.com/theme/zooplus/zooplus.es/image/legacy/q-s/shadow.gif

 

Guardatela y subela al directorio:

 

/themes/tu-plantilla/img/

 

Despues, ve al fichero:

 

http://dogstore.es/tienda/themes/default/css/global.css

 

Busca en tu caso esto:

 

body {
font: normal 11px/14px Arial, Verdana, sans-serif;
color: #222;
background-color: #f5f5db;
background-repeat: no-repeat;
background-position: 50% 0;
}

 

y dejalo asi:

 

body {
font: normal 11px/14px Arial, Verdana, sans-serif;
color: #222;
background: url('../img/nombre_de_la_imagen.gif');
}

Pero así el header tendría también sombra, lo que quiero es que el header quede libre de sombras

Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Pero así el header tendría también sombra, lo que quiero es que el header quede libre de sombras

En realidad no queda del todo mal lo que te he comentado..... (Pruebalo que no pierdes nada)

 

Si solo quieres meterle una sombra a las columnas, metele el

 

shadow

 

al

 

#columns

 

en el

 

/themes/default/css/global.css

 

Ejemplo:

 

-webkit-box-shadow: 0px 0px 30px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    0px 0px 30px rgba(50, 50, 50, 0.75);
box-shadow:		 0px 0px 30px rgba(50, 50, 50, 0.75);

 

Aqui:

 

http://css3gen.com/box-shadow/ tienes un generador xD.

 

y aqui: http://silviarebelo.com/demos/boxgenerator/ otro ...

  • Like 1
Link to comment
Share on other sites
nadie Rookie

nadie

Posted
Posted

Buenos días.

 

La verdad es que la tienda se te ha quedado genial ;) . Yo no pondría para nada la sombra, no me gusta nada, no te ofendas nadie :P

 

Buen trabajo.

 

No me ofendo :P

 

Y ahora? Le acabo de hacer una pequeña modificación

¿Que modificación, le has aplicado?

Link to comment
Share on other sites
Rubén Newbie

Rubén

Posted
  • Author
Posted

Lo siento por no haber podido contestar antes;

 

Le he aplicado un degradado blanco- gris (o más bien beige) para que la página no resulte cargante. He cambiado negritas de categorías innecesarias para que el usuario tenga la sensación de que tiene a mano todo lo que busca y ahora estoy tratando de crear un menu desplegable parecido al de zooplus.com , aunque no tengo ni idea, me gustaría aunque sea poder poner una imagen a la derecha (no obligatorio) y bajar el tamaño de la letra (del listado, no del menu)

 

Ando un poco perdido, ¿Sabéis algo?

 

Gracias de antemano

Link to comment
Share on other sites
Rubén Newbie

Rubén

Posted
  • Author
Posted

Me gusta como te está quedado tu web, una pregunta Rubén me gustaría saber como has puesto la barra horizontal en forma de hueso.

 

Gracias

Animos :)

 

Pues, el secreto esta...

 

En que lo hice hace más de un año, no me acuerdo pero vamos, que cogí, hice una imagen con la anchura deseada y ajuste el CSS, si quieres más detalles te los dejo, pero no coincidirá igual, cada tienda es una cosa distinta

Link to comment
Share on other sites
Rubén Newbie

Rubén

Posted
  • Author
Posted

no, tranquilo no tiene nada que veer, pero como me ha parecido guay lo tuyo, era por curiosidad

 

;)

 

Este es el CSS, copia y pega

 

 

 

/*** ESSENTIAL STYLES ***/

.sf-contener {

clear: both;

background-image: url(aquí la dirección de la imagen que quieres de fondo, tiene que medir lo que mide la imagen, se coherente);

background-repeat: no-repeat;

background-position: center center;

height: 103px;

width: 1135px;

margin-left: -77.5px;

 

}

.sf-right {

margin-right: 14px;

float: right;

width: 7px;

 

}

.sf-menu, .sf-menu * {

margin: 0;

padding: 0;

list-style: none;

 

}

.sf-menu {

width:1018px;/* 980 */

 

background-repeat: repeat-x;

background-position: 0 0;

margin-top: 35px;

margin-right: 0;

margin-bottom: 40px;

margin-left: 50px;

padding-top: 0;

padding-right: 5px;

padding-bottom: 0;

padding-left: 5px;

}

.sf-menu ul {

position: absolute;

top: -1040em;

width: 10em; /* left offset of submenus need to match (see below) */

;

}

.sf-menu ul li {

width: 100%;

}

.sf-menu li:hover {

visibility: inherit; /* fixes IE7 'sticky bug' */

}

.sf-menu li {

float: left;

position: relative;

background-repeat: no-repeat;

background-position: 100% 0;

}

.sf-menu li li a{

font-size: 14px;

text-transform: none;

text-shadow: none;

color: #fff;

}

 

.sf-menu li li a:hover{

font-size: 14px;

text-transform: none;

text-shadow: none;

color: #000;

background-color: none;

}

.sf-menu a {

display: block;

position: relative;

color:#fff;

text-shadow:0 1px 0 #333;

font-size: 20px;

font-family: Anton;

text-transform: uppercase;

}

.sf-menu li:hover ul,

.sf-menu li.sfHover ul {

left: 0;

top: 34px; /* match top ul list item height */

z-index: 99;

width:auto

}

ul.sf-menu li:hover li ul,

ul.sf-menu li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li:hover ul,

ul.sf-menu li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

ul.sf-menu li li:hover li ul,

ul.sf-menu li li.sfHover li ul {

top: -999em;

}

ul.sf-menu li li li:hover ul,

ul.sf-menu li li li.sfHover ul {

left: 200px; /* match ul width */

top: 0;

}

 

/*** DEMO SKIN ***/

.sf-menu {

float: left;

margin-bottom: 1em;

}

.sf-menu a {

display:block;

margin-right:2px;

padding: 0 22px 0 20px;

line-height:34px;

border: 0;

text-decoration:none;

}

.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/

color: #fff;

white-space:nowrap;

}

.sf-menu li li {

background-color: rgba(247,107,15,0.9);

}

.sf-menu li li li {

background-color: rgba(247,107,15,0.9);

}

.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {

color: #000;

background-repeat: repeat-x;

background-position: 0 0;

}

.sf-menu ul li:hover, .sf-menu ul li.sfHover,

.sf-menu ul li a:focus, .sf-menu ul li a:hover, .sf-menu ul li a:active {

outline: 0;

background-color: #FFCC66;

}

/*** arrows **/

.sf-menu a.sf-with-ul {

padding-right: 2.25em;

min-width: 1px; /* trigger IE7 hasLayout so spans position accurately */

}

.sf-sub-indicator {

position: absolute;

display: block;

right: 10px;

top: 1.05em; /* IE6 only */

width: 10px;

height: 10px;

text-indent: -999em;

overflow: hidden;

background: url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */

}

a > .sf-sub-indicator { /* give all except IE6 the correct values */

top: 11px;

background-position: 0 -100px; /* use translucent arrow for modern browsers*/

}

/* apply hovers to modern browsers */

a:focus > .sf-sub-indicator,

a:hover > .sf-sub-indicator,

a:active > .sf-sub-indicator,

li:hover > a > .sf-sub-indicator,

li.sfHover > a > .sf-sub-indicator {

background-position: -10px -100px; /* arrow hovers for modern browsers*/

}

 

/* point right for anchors in subs */

.sf-menu ul .sf-sub-indicator { background-position: -10px 0; }

.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; }

/* apply hovers to modern browsers */

.sf-menu ul a:focus > .sf-sub-indicator,

.sf-menu ul a:hover > .sf-sub-indicator,

.sf-menu ul a:active > .sf-sub-indicator,

.sf-menu ul li:hover > a > .sf-sub-indicator,

.sf-menu ul li.sfHover > a > .sf-sub-indicator {

background-position: -10px 0; /* arrow hovers for modern browsers*/

}

 

/*** shadows for all but IE6 ***/

.sf-shadow ul {

background: url('../img/shadow.png') no-repeat bottom right;

padding: 0 8px 9px 0;

-moz-border-radius-bottomleft: 17px;

-moz-border-radius-topright: 17px;

-webkit-border-top-right-radius: 17px;

-webkit-border-bottom-left-radius: 17px;

}

.sf-shadow ul.sf-shadow-off {

background: transparent;

}

li.sf-search {

background: inherit;

float: right;

line-height: 25px;

}

li.sf-search input {

padding: 3px 0;

padding-left: 20px;

margin-top: 4px;

background: #fff url(../img/search.gif) no-repeat left center;

border-radius:10px;

}

 

/* hack IE7 */

.sf-menu a, .sf-menu a:visited {height:34px !IE;}

.sf-menu li li {

width: 500px;

background: #fe9900 !IE;

background-color: rgba(247,107,15,0.9);

}

Link to comment
Share on other sites
Sergio Ruiz Newbie

Sergio Ruiz

Posted
Posted (edited)

uff, perdona soy un poco novato, (bueno bastante), en que carpeta de httpdocs encuentro esto?

 

gracias

 

modules/blocktopmenu/css/superfish-modified.css

 

o en caso de que tengas el css sobreescrito en tu plantilla, seria:

 

/themes/la_plantilla_que_uses/css/modules/blocktopmenu/css/superfish-modified.css

Edited by Rubalcaba (see edit history)
Link to comment
Share on other sites
Guest
This topic is now closed to further replies.
 Share
Go to topic listing
×
×
  • Create New...