The Eighth Yicrosoft Directory day ...
I'm going to be using Style Master to edit my Yicrosoft Directory CSS file. Style Master really does have all the tools that I need to design, build, code, troubleshoot and even learn standards based web design using cascading style sheets. Style Master supports previewing php code, I simply select the menu item Preview > Manage Preview Documents...Then click the Local tab and add the url for my index.php file that I want to see styled with the css.
I'm going to be using The Navbar Wizard, It's a quick way of creating both the HTML and the CSS I need for my navbar. It comes with a number of pre-prepared navbar designs & I'm going to modify one slightly using the Wizard according to my own color scheme and other design needs.
At the end of the wizard I'm given some HTML that I then need to paste into my index.php file. Once I've pasted it in sNews will create all the links for the text in the navbar, but all the styling will already be done in my style sheet.
I find:
<ul><?php pages(); ?></ul>
replace with:
<div id="navbar">
<ul>
<?php pages(); ?>
</ul>
</div>
This is the css for the navbar after I play with it for a minute:
/*navbar*/
div#navbar {font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: right;
background-color: #90897a;
font-weight: bold;
padding: 6px;}
#navbar ul li a:link, #navbar ul li a:visited {color: #ffffff;
text-decoration: none;
border: 1px #ffffff;
display: inline;
padding: 6px;
border-left: 1px #ffffff solid;
border-right: 1px #ffffff solid;}
#navbar ul li a:hover {color: #3dc826;
background-color: #ffffff;
text-decoration: none;}
#navbar a.current {text-decoration: none;}
#navbar ul li {margin: 0px; padding: 0px; list-style-type: none; display: inline;}
#navbar ul {margin: 0px; padding: 0px;}
For the contents of <div id="right"> & some other elements that will be used later I'm adding:
ul {padding: 0;
margin: 0px 0px 10px 10px;}
li {list-style-type: none;}
and:
h3 {font-size: 12px;
text-transform:uppercase;
color: #564b47;
background-color: transparent;
padding-left: 6px;}
From the style.css that came with the sNews download I'm going to lift:
/* sNews */
fieldset { border: 1px solid #E4DF94; padding: 10px 8px; margin: 0 0 8px 0; background: #FFFBC0; color: #000; }
input { padding: 2px; }
textarea { width: 97%; height: 20em; padding: 3px; }
.comment { background: #F5F6F6; color: #808080; padding: 10px; margin: 0 0 10px 0; border-top: 1px solid #ccc; }
.commentsbox { background: #f4f4f4; color: #808080; padding: 10px; margin: 0 0 10px 0; }
.date { border-top: 1px solid #eee; margin: 0 0 20px 0; }
I notice that the text from the sidebars are overflowing when there is no content on the page so I'm going to use a version of the template with has 100% height
All I need to do is add:
height: 100%;
To:
#left, html, body, #content & #right.
I want to make the sidebars wider so I'm going to change 190px to 220px in:
#left, #content & #right.
I make a test post with lots of text which goes into the centre area of the page .. woops! The text is overflowing the footer area .. my time has run out today so I'll investigate this tomorrow!
12.02.2008. 14:12
This article hasn't been commented yet.
Template by miss monorom
sNews port by ozwebfx
Write a comment
* = required field