como dar estilo

Inicio Foros WordPress Themes y Diseño como dar estilo

Este debate contiene 9 respuestas, tiene 4 mensajes y lo actualizó  Dana hace 10 años, 2 meses.

  • Autor
    Publicaciones
  • #11758

    Dana
    Participante

    <p>viendo esta imagen…<br />
    684_14_01_2009_11_57.png</p>
    <p>como puedo hacerlo yo? quew salga asi coloreado,ya q si pongo la etiqueta de quote q es la unica q sale en &quot;WP&quot; solo dale una linia gris a la derecha del texto y ya esta, se ve muy cutre asi, por tanto como puedo darle ese estilo asi coloreado o algo mejor!
    </p>

  • #25024

    imported_Sabogal
    Participante

    Edinta en style.css lo siguiente:

    blockquote {
    background: #FF00FF;
    margin: 0px 25px 15px 25px;
    padding: 10px 20px 0px 15px;
    border: 1px solid #C0C0C0;
    }
    En background colocas el color que quieras de fondo.

    Saludos!

  • #25029

    Dana
    Participante

    ok, ya esta, por cierto no estaba en ese archivo ,estaba en uno q se llama,typography.css,vaya tela, queda la cosa asi…
    [img]http://www.descargas007.com/movil/images/143_14_01_2009_09_16.png[/img]
    pero la veo muy linial, como puedo redondear las esquinas? o bien ponerle el apendice ese como la imagen de arriba esa q esta en azul para darle algo mas de estilo?

  • #25069

    Dana
    Participante

    nadie sabe de esto? plis

  • #25071

    imported_Fernando
    Participante

    El redondeado de las esquinas depende del navegador. Con los navegadores basados en Gecko lo verás redondeado pero con los basados en Webkit no, a no ser que añadas mas posibilidades al CSS. Lo del apéndice es porque usa una imágen, te lo he comentado en el otro hilo que tienes abierto.

  • #25079

    Dana
    Participante

    bueno he cambiado mi theme, mirando el codigo de arriba,osea este..

    blockquote {
    background: #FF00FF;
    margin: 0px 25px 15px 25px;
    padding: 10px 20px 0px 15px;
    border: 1px solid #C0C0C0;
    }
    consegui q se viera asi amarillo el quote,pero en este hago lo mismo y no sale nada,es mas ni funciona el antiguo..

    bueno este es mi .css original…
    [code]/*
    Theme Name: statement
    Theme URI: http://www.blogohblog.com
    Description: The "Statement" WordPress theme has been built by Blog Oh! Blog and comes under a Creative Commons License.
    Version: 1.0
    Author: Jai Nischal Verma
    Author URI: http://www.blogohblog.com
    */

    /*+++++++ BODY +++++++*/
    * { margin: 0px; padding: 0px; list-style:none; text-decoration:none; }
    body { font-family: Arial; font-size: 12px; color: #4d4b4c; background: #fff url(images/bkg.gif) repeat-x; }

    /*+++++++ H1,H2,H3 HYPERLINKS +++++++*/
    h3 { padding:10px 0 10px 0; font-size:14px;}
    a:link { text-decoration: none; color: #006666; border: 0px;}
    a:active {color : #006666; border: 0px;}
    a:visited { color :#006666 ; border: 0px;}
    a:hover { color:#333333; border: 0px;}
    a:focus { outline: none;}
    .clear { clear: both; }

    /*+++++++ MAIN +++++++*/
    #wrapper { width: 1000px; margin:auto; }
    #frame,#content { width: 975px; margin:auto; }

    /*+++++++ TOP +++++++*/
    #header { height: 106px; width: 1000px; }
    #logo { float: left; width: 210px; padding-top:30px; padding-left:10px; }
    #logo h1{text-indent:-10000px;}
    #logo h1 a{display:block; background: url(images/logo.gif) no-repeat; height:63px; outline:none;}
    #topleft { float: right; height: 106px; width: 630px; }
    #searchbox { float:right; width: 233px; height: 36px; background: url(images/s.gif) no-repeat; margin:20px 5px 0 0; }
    #searchbox #s { float: left; margin: 4px 0 0 6px; border: 0; width: 200px; background: none; color:#999999; }
    #searchbox #go { float: right; margin: 3px 4px 0 0; width:18px; height:18px; }

    /*+++++++ NAVIGATION +++++++*/
    #nav { float:right; padding-right:10px; margin-top:10px;}
    #nav ul { }
    #nav ul li {display:inline; height:35px; line-height:35px;}
    #nav ul li.current_page_item a { background:url(images/navbg-acho.gif) repeat-x; color:#fff; }
    #nav ul li.current_page_item a:hover{background:transparent;color:#fff;}
    #nav ul li a { color:#fff;float:left; text-transform:uppercase; padding:0 0 0 20px;}
    #nav ul li a:hover{background:none;color:#dadada; text-decoration:none;}

    /*+++++++ INFOBAR +++++++*/
    #infobar { height: 30px; width: 975px; line-height:30px; font-size:11px; margin-bottom:15px; }
    #browse { float: left; width: 570px; background:url(images/folder.gif) no-repeat 0 6px; padding-left:22px; }
    #rss { float: right; height: 30px; width: 383px; background:url(images/feed.gif) no-repeat right; }
    #rss p { padding-right:22px; text-align:right;}

    /*+++++++ ENTRY +++++++*/
    #left { float: left; width: 570px; }
    .entry { width: 540px; padding:10px; background:#fff; border:1px solid #dadada; margin-bottom:10px; line-height:140%; }
    .entry h2 { font: bold 22px/28px "Myriad Pro","Myriad Set","Myriad Apple",Myriad,Helvetica Nueue,Arial,Verdana,Sans-serif;letter-spacing: -1px;margin-bottom:10px;}
    .entry h2 a { color:#222222; }
    .entry h2 a:hover {color:#999999;}
    .entry p { padding-bottom:10px;}
    html>body .entry ul { padding: 0 0 0 30px; padding-left: 10px; }
    html>body .entry li { margin: 7px 0 8px 10px; }
    .entry ul li:before { content: "0BB 020"; }
    .entry ol { padding:0; margin:0;}
    .entry ol li { background:#fafafa; }
    .entry img {margin:0 10px 10px 10px;}
    img.centered { display: block; margin-left: auto; margin-right: auto; }
    img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
    .alignright { float: right; }
    .alignleft { float: left ;}
    .allinfos { font-size:11px; height:20px; padding-bottom:10px;}
    span.date { background:url(images/date.gif) no-repeat; padding-left:20px; }
    span.comments { background:url(images/comment.gif) no-repeat; padding-left:20px; }
    span.category { background:url(images/posted.gif) no-repeat; padding-left:20px; }
    .navigation { width: 540px; padding:10px; line-height:140%; font-size:11px; }

    /*+++++++ SIDEBAR +++++++*/
    #sidebarbottom { float:right; width: 400px; }
    #right { float:left; width: 400px; }
    #topsidebar { width: 380px; padding:0 10px 0 10px; border:1px solid #dadada; background:#fff; margin-bottom:10px; }
    #lsidebar h2 { font-size:15px; margin-bottom:10px; color:#4c4c4c;}
    #rsidebar h2 { font-size:15px; margin-bottom:10px; color:#4c4c4c; }
    #lsidebar { float:left; width:160px; padding:5px; border:1px solid #dadada; background:#fff;}
    #rsidebar { float:left; width:195px; padding:5px 10px 5px 10px; border:1px solid #dadada; background:#fff; margin-left:8px;}
    #sidebarbottom ul{ margin:10px auto 20px;}
    #sidebarbottom ul li{}
    #sidebarbottom ul li ul{}
    #sidebarbottom ul li ul li{display:block; background:url(images/bullet.gif) no-repeat 0 0; padding-left:24px; padding-bottom:5px; border-bottom:1px dotted #dadada;}
    #sidebarbottom p{padding:0 5px;}

    /*+++++++ COMMENTS +++++++*/
    .postmetadata { padding:5px; background:#feffe5; }
    #commentform p { padding-bottom:10px;}
    #commentform #author { border:1px solid #dadada; height:20px; width:200px; }
    #commentform #email { border:1px solid #dadada; height:20px; width:200px; }
    #commentform #url { border:1px solid #dadada; height:20px; width:200px;}
    #commentform #comment { border:1px solid #dadada; height:200px; width:500px;}
    .commentlist cite { background:#f9f9f9; padding:5px 5px 5px 10px; }
    .commentlist cite a { color:#333;}
    .commentlist .ctext { background:url(images/doth.gif) repeat-x bottom; font-size:11px;}

    /*+++++++ FOOTER +++++++*/
    #footer { background: #222222 url(images/footer.gif) repeat-x; width: 100%; margin:15px auto 0px; height:100px; font-size:10px; }
    #foo { background:url(images/foobg.gif) no-repeat right; width: 955px; margin:auto; padding:10px; height:80px; color:#fff; }
    #foo a:link { color : #FF9900; border: 0px;}
    #foo a:active { text-decoration: underline; color : #FF9900; border: 0px;}
    #foo a:visited { color : #FF9900; border: 0px;}
    #foo a:hover {color: #FFFFFF; border: 0px;}
    #foo ul { float:left; margin-top:10px; }
    #foo ul li {display:inline; height:35px; line-height:35px; font-weight:700;}
    #foo ul li.current_page_item a { background:url(images/navbg-acho.gif) repeat-x; color:#fff; }
    #foo ul li.current_page_item a:hover{background:transparent;color:#fff;}
    #foo ul li a { color:#fff;float:left; padding:0 20px 0 0;}
    #foo ul li a:hover{background:none;color:#dadada; text-decoration:none;}

    /**************** Misc *********************/
    acronym, abbr, span.caps { cursor: help; }
    acronym, abbr { border-bottom: 1px dashed #999; }
    blockquote { margin: 15px 30px 15px 10px; padding-left: 20px; border-left: 5px solid #ddd; }
    blockquote cite { margin: 5px 0 0; display: block; }
    .center { text-align: center; }
    hr { display: none; }
    a img { border: none; }
    .alignright{float:right;}
    .alignleft{float:left; padding-left:30px; padding-bottom:20px;}
    img.centered{display:block;margin-left:auto;margin-right:auto;}
    img.alignright{display:inline;margin:0 0 2px 7px;padding:4px;}
    img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px;}
    pre {border: solid 1px #9a9a9a;color: blue;margin: 10px;padding:10px;background: #f3f2ed}
    code {font-size:1.0em;color: #000}

    /**************** Gallery *********************/
    .gallery {text-align:center;}
    .gallery img {padding:3px;}
    .attachment {text-align:center;}
    .attachment img { padding:5px; border:1px solid #999999;}
    .imgnav {text-align:center;}
    .imgleft {float:left;}
    .imgleft img{ padding:5px; border:1px solid #999999;}
    .imgright {float:right;}
    .imgright img{ padding:5px; border:1px solid #999999;}
    [/code]

    [b]ahora lo edito con el codigo nuevo y lo dejo asi como veis…..[/b]

    [code]/*
    Theme Name: statement
    Theme URI: http://www.blogohblog.com
    Description: The "Statement" WordPress theme has been built by Blog Oh! Blog and comes under a Creative Commons License.
    Version: 1.0
    Author: Jai Nischal Verma
    Author URI: http://www.blogohblog.com
    */

    /*+++++++ BODY +++++++*/
    * { margin: 0px; padding: 0px; list-style:none; text-decoration:none; }
    body { font-family: Arial; font-size: 12px; color: #4d4b4c; background: #fff url(images/bkg.gif) repeat-x; }

    /*+++++++ H1,H2,H3 HYPERLINKS +++++++*/
    h3 { padding:10px 0 10px 0; font-size:14px;}
    a:link { text-decoration: none; color: #006666; border: 0px;}
    a:active {color : #006666; border: 0px;}
    a:visited { color :#006666 ; border: 0px;}
    a:hover { color:#333333; border: 0px;}
    a:focus { outline: none;}
    .clear { clear: both; }

    /*+++++++ MAIN +++++++*/
    #wrapper { width: 1000px; margin:auto; }
    #frame,#content { width: 975px; margin:auto; }

    /*+++++++ TOP +++++++*/
    #header { height: 106px; width: 1000px; }
    #logo { float: left; width: 210px; padding-top:30px; padding-left:10px; }
    #logo h1{text-indent:-10000px;}
    #logo h1 a{display:block; background: url(images/logo.gif) no-repeat; height:63px; outline:none;}
    #topleft { float: right; height: 106px; width: 630px; }
    #searchbox { float:right; width: 233px; height: 36px; background: url(images/s.gif) no-repeat; margin:20px 5px 0 0; }
    #searchbox #s { float: left; margin: 4px 0 0 6px; border: 0; width: 200px; background: none; color:#999999; }
    #searchbox #go { float: right; margin: 3px 4px 0 0; width:18px; height:18px; }

    /*+++++++ NAVIGATION +++++++*/
    #nav { float:right; padding-right:10px; margin-top:10px;}
    #nav ul { }
    #nav ul li {display:inline; height:35px; line-height:35px;}
    #nav ul li.current_page_item a { background:url(images/navbg-acho.gif) repeat-x; color:#fff; }
    #nav ul li.current_page_item a:hover{background:transparent;color:#fff;}
    #nav ul li a { color:#fff;float:left; text-transform:uppercase; padding:0 0 0 20px;}
    #nav ul li a:hover{background:none;color:#dadada; text-decoration:none;}

    /*+++++++ INFOBAR +++++++*/
    #infobar { height: 30px; width: 975px; line-height:30px; font-size:11px; margin-bottom:15px; }
    #browse { float: left; width: 570px; background:url(images/folder.gif) no-repeat 0 6px; padding-left:22px; }
    #rss { float: right; height: 30px; width: 383px; background:url(images/feed.gif) no-repeat right; }
    #rss p { padding-right:22px; text-align:right;}

    /*+++++++ ENTRY +++++++*/
    #left { float: left; width: 570px; }
    .entry { width: 540px; padding:10px; background:#fff; border:1px solid #dadada; margin-bottom:10px; line-height:140%; }
    .entry h2 { font: bold 22px/28px "Myriad Pro","Myriad Set","Myriad Apple",Myriad,Helvetica Nueue,Arial,Verdana,Sans-serif;letter-spacing: -1px;margin-bottom:10px;}
    .entry h2 a { color:#222222; }
    .entry h2 a:hover {color:#999999;}
    .entry p { padding-bottom:10px;}
    html>body .entry ul { padding: 0 0 0 30px; padding-left: 10px; }
    html>body .entry li { margin: 7px 0 8px 10px; }
    .entry ul li:before { content: "0BB 020"; }
    .entry ol { padding:0; margin:0;}
    .entry ol li { background:#fafafa; }
    .entry img {margin:0 10px 10px 10px;}
    img.centered { display: block; margin-left: auto; margin-right: auto; }
    img.alignright { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
    .alignright { float: right; }
    .alignleft { float: left ;}
    .allinfos { font-size:11px; height:20px; padding-bottom:10px;}
    span.date { background:url(images/date.gif) no-repeat; padding-left:20px; }
    span.comments { background:url(images/comment.gif) no-repeat; padding-left:20px; }
    span.category { background:url(images/posted.gif) no-repeat; padding-left:20px; }
    .navigation { width: 540px; padding:10px; line-height:140%; font-size:11px; }

    /*+++++++ SIDEBAR +++++++*/
    #sidebarbottom { float:right; width: 400px; }
    #right { float:left; width: 400px; }
    #topsidebar { width: 380px; padding:0 10px 0 10px; border:1px solid #dadada; background:#fff; margin-bottom:10px; }
    #lsidebar h2 { font-size:15px; margin-bottom:10px; color:#4c4c4c;}
    #rsidebar h2 { font-size:15px; margin-bottom:10px; color:#4c4c4c; }
    #lsidebar { float:left; width:160px; padding:5px; border:1px solid #dadada; background:#fff;}
    #rsidebar { float:left; width:195px; padding:5px 10px 5px 10px; border:1px solid #dadada; background:#fff; margin-left:8px;}
    #sidebarbottom ul{ margin:10px auto 20px;}
    #sidebarbottom ul li{}
    #sidebarbottom ul li ul{}
    #sidebarbottom ul li ul li{display:block; background:url(images/bullet.gif) no-repeat 0 0; padding-left:24px; padding-bottom:5px; border-bottom:1px dotted #dadada;}
    #sidebarbottom p{padding:0 5px;}

    /*+++++++ COMMENTS +++++++*/
    .postmetadata { padding:5px; background:#feffe5; }
    #commentform p { padding-bottom:10px;}
    #commentform #author { border:1px solid #dadada; height:20px; width:200px; }
    #commentform #email { border:1px solid #dadada; height:20px; width:200px; }
    #commentform #url { border:1px solid #dadada; height:20px; width:200px;}
    #commentform #comment { border:1px solid #dadada; height:200px; width:500px;}
    .commentlist cite { background:#f9f9f9; padding:5px 5px 5px 10px; }
    .commentlist cite a { color:#333;}
    .commentlist .ctext { background:url(images/doth.gif) repeat-x bottom; font-size:11px;}

    /*+++++++ FOOTER +++++++*/
    #footer { background: #222222 url(images/footer.gif) repeat-x; width: 100%; margin:15px auto 0px; height:100px; font-size:10px; }
    #foo { background:url(images/foobg.gif) no-repeat right; width: 955px; margin:auto; padding:10px; height:80px; color:#fff; }
    #foo a:link { color : #FF9900; border: 0px;}
    #foo a:active { text-decoration: underline; color : #FF9900; border: 0px;}
    #foo a:visited { color : #FF9900; border: 0px;}
    #foo a:hover {color: #FFFFFF; border: 0px;}
    #foo ul { float:left; margin-top:10px; }
    #foo ul li {display:inline; height:35px; line-height:35px; font-weight:700;}
    #foo ul li.current_page_item a { background:url(images/navbg-acho.gif) repeat-x; color:#fff; }
    #foo ul li.current_page_item a:hover{background:transparent;color:#fff;}
    #foo ul li a { color:#fff;float:left; padding:0 20px 0 0;}
    #foo ul li a:hover{background:none;color:#dadada; text-decoration:none;}

    /**************** Misc *********************/
    acronym, abbr, span.caps { cursor: help; }
    acronym, abbr { border-bottom: 1px dashed #999; }
    blockquote blockquote {
    background: #FFFFCC;
    margin: 0px 25px 15px 25px;
    padding: 10px 20px 0px 15px;
    border: 1px solid #C0C0C0;
    }
    blockquote cite {
    background: #FFFFCC;
    margin: 0px 25px 15px 25px;
    padding: 10px 20px 0px 15px;
    border: 1px solid #C0C0C0;
    hr { display: none; }
    a img { border: none; }
    .alignright{float:right;}
    .alignleft{float:left; padding-left:30px; padding-bottom:20px;}
    img.centered{display:block;margin-left:auto;margin-right:auto;}
    img.alignright{display:inline;margin:0 0 2px 7px;padding:4px;}
    img.alignleft{display:inline;margin:0 7px 2px 0;padding:4px;}
    pre {border: solid 1px #9a9a9a;color: blue;margin: 10px;padding:10px;background: #f3f2ed}
    code {font-size:1.0em;color: #000}

    /**************** Gallery *********************/
    .gallery {text-align:center;}
    .gallery img {padding:3px;}
    .attachment {text-align:center;}
    .attachment img { padding:5px; border:1px solid #999999;}
    .imgnav {text-align:center;}
    .imgleft {float:left;}
    .imgleft img{ padding:5px; border:1px solid #999999;}
    .imgright {float:right;}
    .imgright img{ padding:5px; border:1px solid #999999;}
    [/code]
    [b]
    y no va ni patras,q hago mal??[/b]

  • #25133

    Dana
    Participante

    plis,nadie me puede hechar un cable en esto?

  • #25264

    Dana
    Participante

    pues nada,gracias de todas formas..

  • #25286

    23r9i0
    Participante

    Hola!
    Veo que quieres tener una seccion personalizada para poner texto y haces bien con el blockquote es el que se suele usar pero si por ejemplo quieres que tengas las esquinas o una imagen(bueno lo de la imagen es posible) se complica.
    Yo te suguiero que te crees un class personalizado para hacer esa seccion y desde el editor html introducir el div con la class.
    Por ejemplo puedes crear una imagen con las esquinas redondeadas y recortarla en dos trozos la parte de arriba y la de abajo luego creas el class.
    Por ejemplo
    [code]
    .nota {
    background: url(‘images/notatop.gif’) top center;
    margin: 15px 25px 0px;
    padding: 10px 20px 0px;
    width:seria el ancho que deseases. Que es igual al tamaño de la imagen menos 40px porque tienes que contar el padding.
    }
    .notabot{
    background: url(‘images/notabottom.gif’) bottom center;
    height: pon el alto considerando el tamaño de la esquina redondeada.
    margin:0;
    padding:0;
    clear:both;
    }[/code]
    Entonces cada vez que quieras usar esta caja personalizada solo tienes que poner desde el editor de entradas en la versión html colocarlo de la siguiente manera.
    ……….
    [code]<div class="nota">Aquí pones el texto que desees.<div class="notabot"></div></div>[/code]
    Es un poco aparatoso pero es un apaño para que todos los navegadores vean un texto con fondo personalizado.
    Nota: Tambien puedes usar javascript creo recordar que jquery tiene un plugin para redondear las esquinas pero esto ya son palabras mayores y mucho mas complejo, aparte que el navegador del visitante tiene que tener activado el javascript para verlo.
    Saludos

  • #25309

    Dana
    Participante

    muchisimas gracias..

El foro ‘Themes y Diseño’ está cerrado y no se permiten nuevos debates ni respuestas.

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para saber si ya aceptaste nuestras políticas, si ya estás suscrito a nuestra newsletter, para reconocer el estado de tu sesión si la tuvieses y para servir más rápidos los contenidos.

No se captura IPs ni siquiera para el servicio de Analytics así que tu visita es privada.

JSESSIONID, _cfuid, wpSGCachePypass, mailerlite, gdpr, gawp
mailerlite, _cfuid

Cookies de terceros

Usamos cookies de terceros con servicios, también garantes de tu privacidad, que analizan tus usos de navegación para que podamos mejorar los contenidos, si ya estás suscrito al boletín y los elementos compartidos en redes sociales y el formulario de comentarios.

1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID, disqus_unique, disqusauth
disqus_unique, disqusauth
1P_JAR, APISID, CONSENT, HPSID, NID, SAPISID, SID, SIDCC, SSID

Pin It on Pinterest

Ir al contenido