Theme Creation from scratch - moutard - 2010-09-07
Hi, I installed Get Simple a while ago and so far I am loving it. I really want to create a theme for my site. I know how to code in CSS and I followed the documentation on theme tags but for some reason, my theme is broken, the css doesn't show. Any ideas? What am I doing wrong?
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title><?php get_page_clean_title(); ?> | <?php get_site_name(); ?></title>
<link rel="shortcut icon" href="http://moutard.ca/layout/micon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="<?php get_theme_url(); ?>/style.css" media="all" />
</head>
<body>
<!--
<div class=""></div>
-->
<div class="container">
<div class="header">
<div class="menu">
<ul>
<?php get_navigation(return_page_slug()); ?> <span class="caption"><?php get_page_excerpt($100, $html); ?></span>
</ul>
</div>
</div>
<div class="content">
<?php get_page_content(); ?>
<h6>Published on: <?php get_page_date('l F j Y'); ?></h6>
</div>
<div class="sidebar">
</div>
<div class="footer">
<ul>
<li class="c1"><h3>Other Places</h3></li>
<li><a href="https://twitter.com/salegarcon">Twitter</a>
<li><a href="http://www.flickr.com/photos/banditleague/">Flickr</a>
<li><a href="http://inkburn.deviantart.com/">Deviantart</a>
<li><a href="http://salegarcon.tumblr.com/tagged/artwork">Tumblr</a>
<li><a href="http://vimeo.com/user841511">Vimeo</a>
</ul>
<ul>
<li class="c1"><h3>Navigation</h3></li>
<?php get_navigation(return_page_slug()); ?>
</ul>
<span class="cred">
<p>2010 © Max Coutard - Contact: maxc<a href="http://www.google.com/recaptcha/mailhide/d?k=01-_h1A-j28mqJbTmkTcoTMQ==&c=rrjErOlMN0vsL4sBbz2WgiJP50x0Gz0s0ivLwTYZrRI=" onclick="window.open('http://www.google.com/recaptcha/mailhide/d?k\07501-_h1A-j28mqJbTmkTcoTMQ\75\75\46c\75rrjErOlMN0vsL4sBbz2WgiJP50x0Gz0s0ivLwTYZrRI\075', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;" title="Reveal this e-mail address">...</a>@gmail.com
<br />
Best viewed in the lastest version of Chrome, Firefox, Safari or Internet Explorer. Minimum 1024x780 screen resolution <br />
Nomeclature Theme by <a href="http://www.moutard.ca">Moutard</a> - <?php get_site_credits(); ?>
</p>
</span>
</div>
<div class="clear"></div>
</div>
</body>
</html>
And the CSS:
Code: /* CSS Document */
*,html,body,a,p,ul,li,blockquote,div,span,img
{
padding:0;
margin:0;
}
body
{
color:black;
background:url('') no-repeat top center;
font:0.9em/2em Helvetica,sans-serif;
text-align:center;
letter-spacing:0.10em;
white-space:normal;
}
a:link
{
white-space:nowrap;
text-decoration:none;
color:#464646;
}
a:visited
{
white-space:nowrap;
text-decoration:none;
color:rgb(255,51,102);
}
a:hover
{
white-space:nowrap;
text-decoration:none;
}
p
{
padding:25px;
}
blockquote
{
display:block;
font:italic 2em Georgia,serif;
margin:25px;
color:#ababab;
}
img
{
border:none;
}
h1,h2,h3,h4,h5,h6
{
display:block;
line-height:1.3em;
padding:0 25px;
font-variant:small-caps;
}
h1 {font-size:3.5em;}
h2 {font-size:2.5em;}
h3 {font-size:2em;}
h4 {font-size:1.5em;}
h5 {font-size:1em;}
h6 {font-size:0.85em;}
/*BASIC LAYOUT*/
.container
{
margin:0 auto;
background:rgb(255,255,255);
width:814px;
position:relative;
bottom:10px;
text-align:left;
}
.header
{
width:100%;
clear:both;
}
.menu
{
float:left;
}
.menu li {
list-style:none;
display:block;
float:left;
padding:90px 2% 30px;
width:10%;
border-left:1px solid #efefef;
font-size:1.2em;
}
.menu li:hover
{
display:block;
background:#ffcb29;
}
.caption
{
display:block;
font-size:0.6em;
line-height:1.6em;
color:#777777;
white-space:normal;
}
.content
{
display:inline;
float:left;
width:100%;
margin-top:50px;
}
.content img
{
float:left;
margin:20px;
}
.sidebar
{
float:right;
display:inline;
width:25%;
margin:50px 10px 10px 0;
/*border:1px solid red;*/
}
.sidebar li
{
list-style:none;
display:block;
padding:30px 25px;
border-bottom:1px solid #efefef;
font-size:1.5em;
}
.footer
{
float:left;
width:100%;
color:#bcbcbc;
background:#fafafa;
padding:30px 0;
}
.footer ul
{
float:left;
display:inline;
margin:0 3% 0;
width:40%;
}
.footer li
{
list-style:none;
display:block;
padding:10px 15px;
border-bottom:1px solid #efefef;
font-size:1em;
}
.footer li:hover
{
background:white;
}
.footer h1,h2,h3,h4,h5
{
padding:0;
}
.c1 li
{
list-style:none;
display:inline;
padding:0;
margin:0;
}
.cred
{
float:left;
display:inline;
font:0.85em/1.8em Georgia,serif;
}
/*GALLERY CLASSES*/
.sqr_image_gallery
{
}
.sqr-thumb-con
{
}
.clear
{
clear:both;
}
Theme Creation from scratch - Carlos - 2010-09-07
The theme is broken because of this:
Somewhere in line 24:
Code: <?php get_page_excerpt($100, $html); ?>
It should (or could) be something like:
Code: <?php get_page_excerpt(100); ?>
I found this by enabling debug mode.
(That's for template.php -- I haven't tested your CSS file)
Theme Creation from scratch - moutard - 2010-09-09
Thank you, it fixed it somewhat. But now I know how to figure out what going on thanks to the DEBUG mode!
Theme Creation from scratch - yojoe - 2010-11-05
Is there a way to use get_page_excerpt() to embed another page's excerpt ?
Or is it supposed to show only a portion of content of current page ?
edit: first reading, then asking
seems above function isn't capable of doing that
I'll go with Mike's solution http://get-simple.info/forum/post/1574/#p1574 , although I suppose I'll make some use of excerpt function to cut the loaded content
at least I'll try...
edit: works at last
|