Foros del web, para los que viven de bits

sumolari · 13-oct-2007, 04:09

Estba diseñando un theme para wordpress, lo he acabado, voy a verlo en el blog que tengo montado en mi servidor local y se ve de categoría.

Ahora, si lo ve en ie en lugar de firefox (en ie6, no he probado en el 7) se descuadra la página y hace efectos raros en algunos links.

El código hhtml es este (el post por defecto de Wordpress).

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Mi blog  </title>

<meta name="generator" content="WordPress 2.3" /> <!-- leave this for stats -->
<link rel="alternate" type="application/rss+xml" title="Mi blog RSS Feed" href="http://127.0.0.1/wordpress/?feed=rss2" />
<link rel="pingback" href="http://127.0.0.1/wordpress/xmlrpc.php" />

<link rel="stylesheet" href="http://127.0.0.1/wordpress/wp-content/themes/sumolari/style.css" type="text/css" media="screen" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue" href="http://127.0.0.1/wordpress/wp-content/themes/sumolari/blue.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="green" href="http://127.0.0.1/wordpress/wp-content/themes/sumolari/green.css" />
<script src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/styleswitch.js" type="text/javascript"></script>
<script type="text/JavaScript" src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/curvy/rounded_corners_lite.inc.js"></script>
<script type="text/JavaScript">

  window.onload = function()
  {
    content_type = {
      tl: { radius: 20 },
      tr: false,
      bl: { radius: 20 },
      br: false,
      antiAlias: true,
      autoPad: true
    }
    sidebar_type = {
      tl: { radius: 20 },
      tr: { radius: 20 },
      bl: { radius: 20 },
      br: { radius: 20 },
      antiAlias: true,
      autoPad: true
    }
    right_type = {
      tl: false,
      tr: { radius: 20 },
      bl: false,
      br: { radius: 20 },
      antiAlias: true,
      autoPad: true
    }
    var content = document.getElementById("content");
    var sidebar = document.getElementById("sidebar");
    var right = document.getElementById("right");

    var contentObj = new curvyCorners(content_type, content);
    var sidebarObj = new curvyCorners(sidebar_type, sidebar);
    var rightObj = new curvyCorners(right_type, right);
    sidebarObj.applyCornersToAll();
    contentObj.applyCornersToAll();
    rightObj.applyCornersToAll();
  }

</script>


<meta name='robots' content='noindex,nofollow' />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://127.0.0.1/wordpress/xmlrpc.php?rsd" />
</head>
</head>

<body>
    <h1 id="title"><a href="http://127.0.0.1/wordpress/">Mi blog</a></h1>
    <div id="wraper">
        <div id="content">
            <div id="menu">
                <ul>
                    <li><a href="http://127.0.0.1/wordpress/">Inicio</a></li>
                    <li class="page_item page-item-2"><a href="http://127.0.0.1/wordpress/?page_id=2" title="About">About</a></li>
                </ul>
            </div>
            <br class="clear" />
            <div id="page">  
      
          
            <div class="post">
            <div class="date"><span>Oct</span> 13</div>
            <h2><a href="http://127.0.0.1/wordpress/?p=1" rel="bookmark" title="Link permanente a Hello world!">Hello world!</a></h2>
            <p class="metapost"><span class="metacat"><a href="http://127.0.0.1/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> | <span class="metacomments"><a href="http://127.0.0.1/wordpress/?p=1#comments" title="Comment on Hello world!">2 Comentarios »</a></span></p>
            <p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>
            </div>
             <p>
        <span id="previus-entries"><a href="#">&laquo; Anterior</a></span> 
        <span id="next-entries"><a href="#">Siguiente &raquo;</a></span>
    </p>
        
</div>
</div>
        <div id="right">
          <p>2007 -   Sumolari.com</p>
          <p>Creado con Wordpress. Dise&ntilde;o por sumolari.com</p>
          <p><a href="feed:http://127.0.0.1/wordpress/?feed=rss2" class="rss">Art&iacute;culos RSS</a> <a href="feed:http://127.0.0.1/wordpress/?feed=comments-rss2" class="rss">Comentarios RSS</a></p>
          <p><a href="javascript:chooseStyle('blue', 60)"><img src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/images/blue.png" width="10" height="10" border="0" /></a> <a href="javascript:chooseStyle('green', 60)"><img src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/images/green.png" alt="" width="10" height="10" border="0" /></a> <a href="javascript:chooseStyle('red', 60)"><img src="http://127.0.0.1/wordpress/wp-content/themes/sumolari/images/red.png" alt="" width="10" height="10" border="0" /></a>
          </p>
          <br class="clear" />
              
        </div>
        <div id="sidebar">
            <ul>
                <li id="search" class="widget_search"><h2>Buscar</h2><ul><form method="get" id="searchform" action="http://127.0.0.1/wordpress/">
<div><input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="Buscar" />
</div>
</form>
</ul></li>
                  <li id="categories-1" class="widget_catgories"><h2>Categories</h2>        <ul>
            <li class="cat-item cat-item-1"><a href="http://127.0.0.1/wordpress/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a>
</li>
        </ul>
</li><li id="archives" class="widget_archives"><h2>Archives</h2>        <ul>
            <li><a href='http://127.0.0.1/wordpress/?m=200710' title='October 2007'>October 2007</a></li>
        </ul>
</li>    <li id="pages" class="widget_pages">        <h2>Pages</h2>        <ul>
            <li class="page_item page-item-2"><a href="http://127.0.0.1/wordpress/?page_id=2" title="About">About</a></li>
        </ul>
    </li>        <li id="meta" class="widget_meta">            <h2>Meta</h2>            <ul>
            <li><a href="http://127.0.0.1/wordpress/wp-admin/">Site Admin</a></li>            <li><a href="http://127.0.0.1/wordpress/wp-login.php?action=logout">Logout</a></li>
            <li><a href="http://127.0.0.1/wordpress/?feed=rss2" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
            <li><a href="http://127.0.0.1/wordpress/?feed=comments-rss2" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
            <li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>
                        </ul>
        </li>            </ul>
            <br class="clear" />
        </div>
    </div>
<br /><div style="z-index:3" class="smallfont" align="center">LinkBacks Enabled by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.0.0</div></body>
</html>

He introducido un script en javascript para poder cambiar el css de la web dándole a un botón. En los otros css sólo cambia el fondo del blog y el color de los links.

CSS Parte 1

Código:

/*  
Theme Name: Sumolari Dark
Theme URI: http://www.sumolari.com/
Description: El tema para wordpress creado por Sumolari.
Version: 0.9
Author: Llu&iacute;s Ulzurrun de Asanza S&agrave;ez
Author URI: http://www.sumolari.com/
*/
@charset "utf-8";
body {
	background-image:url(images/background.png);
	background-repeat:repeat-x;
	background-color:#CF1519;
	background-attachment:fixed;
}
.rss, .rss a {
	padding-left:30px;
	background-image:url(images/famfamfam/rss.png);
	background-position:left;
	background-repeat:no-repeat;
	color:#CF1519;
}
.rss a:hover {
	background-image:url(images/famfamfam/rss_go.png);
	background-position:10px;
	background-repeat:no-repeat;
	color:#FFFFFF;
}
#title {
	color:#FFFFFF;
	text-align:center;
}
#title a {
	color:#CF1519;
	text-decoration:none;
}
#title a:hover {
	color:#FFFFFF;
	text-decoration:none;
}
#wraper {
	margin-left:5%;
	margin-right:5%;
}
#content {
	background-color:#494949;
	margin-top:3%;
	float:left;
	width:65%;
	margin-bottom: 3%;
}
#menu {
	height:30px;
	text-align:center;
	font-size:20px;
}
#menu ul {
	margin: 0;
	padding: 0;
	float: left;
	font: bold 13px Arial;
	width: 100%;
	border: 1px solid #625e00;
	border-width: 1px 0;
	background: black url(images/blockdefault.gif) center center repeat-x;
}
#menu li {
	display: inline;
}
#menu li a, #menu li a:visited {
	float: left;
	color:#FFFFFF;
	padding: 9px 11px;
	text-decoration: none;
	border-right: 1px solid white;
}
#menu li a:hover, #menu li a.current {
	color:FFFFFF;
	background: transparent url(images/blockactive.gif) center center repeat-x;
}
#menu li{
	list-style:none;
	display:inline;
}
#page {
	margin-left:7%;
	margin-right: 7%;
	margin-top: 7%;
}
.post {
	color:#FFFFFF;
}
.post .date {
	height: 50px;
	width: 45px;
	background: url(images/calendar.gif) no-repeat;
	font: normal 22px Arial, Helvetica, sans-serif;
	color: #666666;
	text-align: center;
	padding: 0px 2px 0 0;
	line-height: 100%;
	float: left;
}
.post a, .post a:visited {
	color:#CF1519;
	padding:0;
	text-decoration:none;
}

No lo he puesto online, pero lo más normal es que esta tarde lo ponga para que podáis ver que ocurre...

sumolari · 13-oct-2007, 04:11

Y CSS parte 2

Código:

.alt, .commentlist li {
    border:1px solid #000000;
    background-color:#292929;
    padding: 10px;
    list-style-position: inside;
    margin-right: 30px;
    margin-top:50px;
}
.post a:hover {
    color:#FFFFFF;
    padding:0;
    text-decoration:none;
}
.post .date span {
    height: 16px;
    display: block;
    font: normal 11px Arial, Helvetica, sans-serif;
    color: #ffffff;
    text-align: center;
    padding-top: 5px;
}
.post h2 {
    color:#CF1519;
}
.post h2 a, .post h2 a:visited {
    color:#CF1519;
    text-decoration:none;
}
.post h2 a:hover {
    color:#FFFFFF;
}
.metapost {
    text-align:right;
    margin-top:-20px;
}
.metacat {
    background-image:url(images/famfamfam/folder.png);
    background-repeat:no-repeat;
    background-position:left;
    padding-left: 20px;
}
.metacat a, .metacat a:visited {
    padding-left:30px;
    color:#CF1519;
    text-decoration:none;
}
.metacat a:hover {
    color:#FFFFFF;
}
.metacomments a, .metacomments a:visited{
    background-image: url(images/famfamfam/comments.png);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:30px;
    color:#CF1519;
    text-decoration:none;
}
.metacomments a:hover {
    background-image:url(images/famfamfam/comment_add.png);
    background-repeat:no-repeat;
    background-position: 5px;
    color:#FFFFFF;
}
#respond {
    background-image:url(images/famfamfam/comment_add.png);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:30px;
}
#commentform #comment{
    padding-left:6px;
    padding-top:3px;
}
#commentform #submit{
    color:#CF1519;
    background-color:#292929;
    border:1px solid #000000;
    font-size:20px;
}
#commentform #submit:hover{
    color:#FFFFFF;
}
#commentform a, #commentform a:visited {
    color:#CF1519;
    text-decoration:none;
}
#commentform a:hover {
    color:#FFFFFF;
}
#searchform #searchsubmit {
    color:#FFFFFF;
    background-color:#494949;
    border:1px solid #000000;
    font-size:20px;
}
#searchform #searchsubmit:hover {
    color:#FFFFFF;
}
#searchform a, #searchform a:visited {
    color:#CF1519;
    text-decoration:none;
}
#searchform a:hover {
    color:#FFFFFF;
}
#previus-entries {
    float:left;
}
#previus-entries a, #previus-entries a:visited {
    color:#CF1519;
    background-image:url(images/famfamfam/arrow_rotate_clockwise.png);
    background-repeat:no-repeat;
    background-position:left;
    padding-left:30px;
    text-decoration:none;
}
#previus-entries a:hover {
    color:#FFFFFF;
    text-decoration:none;
    background-image:url(images/famfamfam/arrow_left.png);
    background-position: 10px;
}
#next-entries {
    text-align:right;
    float:right;
}
#next-entries a, #next-entries a:visited {
    color:#CF1519;
    background-image:url(images/famfamfam/arrow_rotate_anticlockwise.png);
    background-repeat:no-repeat;
    background-position:right;
    padding-right:30px;
    text-decoration:none;
}
#next-entries a:hover {
    color:#FFFFFF;
    text-decoration:none;
    background-image:url(images/famfamfam/arrow_right.png);
    background-position:right;
}
#sidebar {
    background-color:#000000;
    margin-left:65%;
    margin-top:2%;
    margin-right: 10%;
    width: 20%;
    color:#FFFFFF;
}
#sidebar ul {
    margin:0;
    padding:5px;
}
#sidebar ul li {
    background-color:#292929;
    display:block;
}
#sidebar li {
    list-style-image: none;
    list-style-type: none;
}
#sidebar ul li h2 {
    background-image:url(images/blockdefault.gif);
    background-repeat:  repeat-x;
    background-position: center;
}
#sidebar a, #sidebar a:visited {
    text-decoration:none;
    color:#CF1519;
}
#sidebar a:hover {
    text-decoration:none;
    color:#FFFFFF;
}
#categories-1 a {
    background-image:url(images/famfamfam/arrow_switch.png);
    background-position:left;
    background-repeat:no-repeat;
    color:#CF1519;
}
#categories-1 a:hover {
    background-image:url(images/famfamfam/arrow_right.png);
    background-position:10px;
    background-repeat:no-repeat;
    color:#FFFFFF;
}
#archives {
    color:#FFFFFF;
}
#archives a, #archives a:visited {
    padding-left:30px;
    background-image:url(images/famfamfam/book.png);
    background-position:left;
    background-repeat:no-repeat;
    text-decoration:none;
    color:#CF1519;
}
#archives a:hover {
    background-image:url(images/famfamfam/book_open.png);
    padding-left:30px;
    background-position:10px;
    background-repeat:no-repeat;
    color:#FFFFFF;
    text-decoration:none;
}
.widget_meta a, .widget_meta a:visited {
    background-image:url(images/famfamfam/drive.png);
    background-position:left;
    background-repeat:no-repeat;
    padding-left:30px;
    text-decoration:none;
    color:#CF1519;
}
.widget_meta a:hover {
    background-image:url(images/famfamfam/drive_cd.png);
    background-position:10px;
    background-repeat:no-repeat;
    color:#FFFFFF;
    text-decoration:none;
    padding-left:30px;
}
#pages a {
    background-image:url(images/famfamfam/application.png);
    background-position:left;
    background-repeat:no-repeat;
    color:#CF1519;
}
#pages a:hover {
    background-image:url(images/famfamfam/application_go.png);
    background-position:10px;
    background-repeat:no-repeat;
    color:#FFFFFF;
}
#links a {
    background-image:url(images/famfamfam/link.png);
    background-position:left;
    background-repeat:no-repeat;
    color:#CF1519:
}
#links a:hover {
    background-image:url(images/famfamfam/link_go.png);
    background-position:10px;
    background-repeat:no-repeat;
    color:#FFFFFF;
}
#sidebar a, a:visited {
    text-decoration:none;
    padding-left: 30px;
    color:#CF1519;
}
#right {
    background-color:#494949;
    width:15%;
    float: right;
    margin-top: 3%;
    text-align: left;
    color: #FFFFFF;
    padding: 5px;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
.clear {
    clear:both;
}
blockquote {
    border:1px solid #000000;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#292929;
    padding: 10px;
}
.terminal {
    border:1px solid #000000;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#292929;
    padding: 10px;
    background-image:url(images/famfamfam/application_xp_terminal.png);
    background-position:5px;
    background-repeat:no-repeat;
    padding-left:30px;
}
code {
    border:1px solid #000000;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#292929;
    background-image:url(images/famfamfam/script_code.png);
    background-repeat:no-repeat;
    background-position:5px;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
}
.php {
    border:1px solid #000000;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#003300;
    padding: 10px;
    background-image:url(images/famfamfam/page_white_php.png);
    background-position:5px;
    background-repeat:no-repeat;
    padding-left:30px;
}
.xhtml {
    border:1px solid #000000;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#000099;
    padding: 10px;
    background-image:url(images/famfamfam/xhtml.png);
    background-position:5px;
    background-repeat:no-repeat;
    padding-left:30px;
}
.css {
    border:1px solid #000000;
    font-size:14px;
    font-family:Arial, Helvetica, sans-serif;
    background-color:#333333;
    padding: 10px;
    background-image:url(images/famfamfam/css.png);
    background-position:5px;
    background-repeat:no-repeat;
    padding-left:30px;
    color: #FFFFFF;
}
#calendar_wrap {
    padding:0;
}

Edito: Ya lo he subido, se puede ver en http://wpdemo.sumolari.com/

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado