Board index PBase HTML and Style Sheets ¿alguien me ayuda a mejorar el diseño de mi web?

HTML and Style Sheets

¿alguien me ayuda a mejorar el diseño de mi web?

Customize your galleries.
fernandoj
 
Posts: 30

¿alguien me ayuda a mejorar el diseño de mi web?

Post Tue Aug 31, 2004 7:13 pm


hola, me gustaría saber si alguien tiene la amabilidad de ayudarme a mejorar el diseño de mi web. me gusta el fondo negro con letras grises y blancas y me gustaría poner la parte de arriba (donde pone PBase/galleries/forum/search, etc) en gris sobre fondo negro.

¿Alguien me ayuda?

Muchas gracias,

http://www.pbase.com/darman

pd: lamento no poder escribir en inglés, es un idioma que desconozco, gracias de nuevo.

matiasasun
 
Posts: 1493

Re: ¿alguien me ayuda a mejorar el diseño de mi web?

Post Tue Aug 31, 2004 7:50 pm


Hola... La verdad es que somos pocos los que hablamos español por aquí. Supongo que lo mejor será que yo te lo explique paso a paso pues nada se pierde.

:arrow: A ver.. para cambiar la barra de arriba, la que tiene el logo de PBase, lo que tienes que hacer es ir a tu página de perfil (a tu "HOME") y hacer click sobre "edit your account settings" (está justo abajo de la información que te va a aparecer en el primer cuadrado de color morado). la página a la que llegas ahí es http://www.pbase.com/account , es decir tu cuenta como suscrito a PBase. Esa página tiene 3 cuadrados morados, ¿si?. Bueno, el tercero debería decir "Account Settings"... Allí tienes varias opciones.

-Copyright Statement for Images= sirve para poner el mensaje que aparece debajo de tus imágenes. La mayoría tiene uno que diga "no me las robe" o algo así. Es el copyright o derecho de autor, que no tengo claro si tiene valor real.

-Gallery Title Delimiter= sirve para decidir como quieres que aparezcan los títulos de las galerías desde la galería principal, por ejemplo. tus opciones son que aparezcan con ::, con parentesis cuadrados, con >> o sin nada.

-PBase Menu Bar= es lo que andas buscando. Allí estan tus opciones: Azul original (lo que he llamado morado), Blanco y Negro, y Gris con Blanco.

-Who can post comments to your galleries= sirve para ver quien puede comentar en tus galerías y fotos; si sólo los invitados o los suscritos o nadie.

:arrow: Para modificar los colores de tu página tienes que modificar el stylesheet u hoja de estilo, que por lo visto manejas. La pregunta que debes hacer sería:

I would like to Use a black brackground with white text. How can I acomplish that?


A decir verdad yo manejo bien poco de eso. Tendrías que crear una hoja de estilo nueva por lo que entiendo.

Espero que esto te sirva. Sio alguien llegase a responder me puedes mandar un mensaje y podemos tratar de traducirlo. Saludos.

Matias, Chile

PD: Siempre es bueno poder escribir en Español. Es muchisimo mas simple :D
Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

srijith
Moderator
 
Posts: 2321
Location: Amsterdam


Post Wed Sep 01, 2004 7:18 am


:!: :D

ukexpat
 
Posts: 1193


Post Wed Sep 01, 2004 12:42 pm


srijith wrote::!: :D


If they're happy we're happy. I will certainly be more than willing to jump in when folks start posting in Latin or Ancient Greek!

matiasasun
 
Posts: 1493


Post Wed Sep 01, 2004 4:21 pm


Ha, Ha.. The guy was asking about how to change the color of the PBase menu bar from "Original Blue" to "Black and Grey". Was also asking to change the colors of his stylesheet. I did answer what I know. :wink:
Matias, Chile - http://www.pbase.com/matiasasun
Resources, HOWTOs, Samples and more! - http://pbasewiki.srijith.net/

defpbase
 
Posts: 69

el codigo de los "css"

Post Wed Sep 01, 2004 8:09 pm


Para aprender como navigar el codigo de "css" hay que jugar con varios ejemplos, nada mas. No se mucho, pero lo que se aprendi por robar de otros! :wink: Por ejemplo en esta galeria: http://www.pbase.com/defpbase/summerstorm, cambiaba el codigo para los colores a formar el fondo negro, y letras blancas y grises.

Si les gusta este css, lo pueden usar en sus propias galerias. En la galeria donde quieren usarlo, click "edit this gallery" y entonces click "edit style sheets" al lado de "Style Sheets." Bajo de donde dice "Create a New Style Sheet" denle un nombre, y luego copiar este texto en su stylesheet nuevo:

/*a def creation*/

.caption {
font-size : 10pt;
color : #E1E1E1;
font-style : italic;
}

BODY{

background : #000000;
margin-top: 0px;
scrollbar-face-color: #666666;
scrollbar-shadow-color: #000000;
scrollbar-highlight-color: #000000;
scrollbar-3dlight-color: #ffffff;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #00000;
scrollbar-arrow-color: #ffcc00;
}

img{
border: 1px #676767;

}


.message_body
{
background-color: #444444;
color: #E1E1E1;
padding-bottom: 10px;
}

I,B,H2,H4,H5,TH,TR,TABLE,FONT,LI,UL,FORM,
BLOCKQUOTE,P,FONT, CENTER
{
font-family: verdana, arial, sans-serif;
font-size: 10pt;
color: #E1E1E1;
}

H1,H3,FONT, CENTER
{
font-family: verdana, arial, sans-serif;
font-size: 10pt;
font-style : italic;
color: darkgray;
}

DIV,FONT, CENTER
{
font-family: verdana, arial, sans-serif;
font-size: 10pt;
color: lightgray;
}

TH
{
border: 10px; color: #000000}

font
{
color: lightgray; letter-spacing: 1px; font-size: 8pt;
}

h2
{
font-size: 12pt;
font-weight: bold;
text-align: right;
letter-spacing: 8px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 20pt;
margin-left: 0px;
margin-right: 0px;
background-color: gray;
color: #e1e1e1;
}

h4
{
margin-left: 20pt;
margin-right: 20pt;
}

h5
{
font-size: 7pt;
font-weight: bold;
text-align: right;
letter-spacing: 3px;
margin-right: 20pt;
color: #e1e1e1;
}

h6
{
font-size: 10pt;
font-weight: normal;
text-align: left;
color: lightgrey;
}

TEXTAREA
{
background-color: #EEEEEE;
font-family: times new roman;
color: black;
scrollbar-base-color: gray;
scrollbar-3dlight-color: black;
scrollbar-highlight-color: none;
}

A, TD.A, A:link
{
color: gray;
text-decoration: none;
}
A:hover { color: lightgray; text-decoration: underline; }
A:visited { color: darkgray; }
A:active { color : gray; }


TD
{
background-color: none;
}

IMG.thumbnail
{
background-color: black;
vertical-align: middle;
horizontal-align: middle;
border-style : solid;
border-width : 1px;
border-color : gray;
}

TD.thumbnail
{
width: 200px;
border: 1px;
}

.display
{
background-color: black;
border-style : solid;
border-width : 2px;
border-color : gray;
}

BODY { margin-top: 0px;
top: 0px;
}

HR { position : relative;}



BODY { margin-top: 0px; top: 0px; }
HR { position : relative;}


(fin)

La unica razon que yo se los numeros representativos para los colores es debido a esta pagina del web: http://www.webcolors.freeserve.co.uk/names140.htm. De alli aprendi que es tan facil de copiar los numeros o los titulos de los colores para cambiar los css.

El resto del codigo determina el tamano y color de las letras, cuadras, etc. Recomiendo que juegen con varios css, cambiando un poco del codigo a la vez para ver lo que pasa. Toma un poco de tiempo (OK-- mucho--) pero vale la pena si quieren educarse mas de como funciona la web.

Ya basta, ojala que pueden entender este debil intento en espanol...

Buena suerte, Dianne


Board index PBase HTML and Style Sheets ¿alguien me ayuda a mejorar el diseño de mi web?

Who is online

Users browsing this forum: ClaudeBot and 2 guests