Wordpress Theme Help

dhanesh

Aug 5 2006, 03:43 PM

Aight .. I liked this wordpress theme called DFire, and m trying to use it on my Blog. In its default state DFire looks good (visually) but the reading part kinda looks odd. I thought of changing the font and color etc .. but since i am no good at CSS .. lol .. i thought maybe someone here could help ..

DFire Theme Download

Current Style.css :

CODE

body {
    font-family: verdana;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    background: #E1B26B url("images/bg.gif");
    margin: 0;
    padding: 0;
    }

/* Design Containers and Specifications */

#wrap {
    background: url("images/bgtp.gif") repeat-x;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    float: left;
    }

#keep {
    width: 765px;
    clear: left;
    margin: 0 auto;
    }

#outside {
    background: #B5B6B4 url("images/bgcon.gif") repeat-y top center;
    width: 765px;
    float: right;
    }

#inside {
    background: url("images/bghead.gif") no-repeat top center;
    width: 765px;
    clear: both;
    }

#holder {
    margin-left: 30px;
    width: 698px;
    padding: 0;
    }

* html #holder {
    margin-left: 15px;
    float: left;
    }

#search {
    background: url("images/search.gif") no-repeat bottom;
    width: 272px;
    height: 53px;
    float: left;
    text-align: left;
    }

#title {
    background: url("images/title.jpg") no-repeat;
    width: 426px;
    height: 53px;
    text-align: right;
    float: right;
    }

#menu {
    background: url("images/menu.jpg") no-repeat;
    width: 485px;
    height: 125px;
    float: left;
    text-align: left;
    }

#tree {
    background: url("images/tree.jpg") no-repeat;
    width: 213px;
    height: 153px;
    float: right;
    }

#content {
    width: 432px;
    margin-left: 20px;
    float: left;
    text-align: justify;
    font-size: 13px;
    color: #CACACA;
    font-family: verdana;
    }

* html #content {
    margin-left: 15px;
    width: 410px;
    }

#sidebar {
    width: 205px;
    float: right;
    text-align: left;
    margin: 0 35px 15px 0;
    }

* html #sidebar {
    margin: 0px;
    }

#footer {
    background: url("images/footer.jpg") no-repeat bottom;
    width: 698px;
    height: 83px;
    clear: both;
    font-family: verdana;
    }

/* Information */

#handle {
    text-align: right;
    margin: 0 0 7px 0;
    }

#inf {
    width: 99%;
    font-size: 13px;
    color: #959595;
    font-family: verdana;
    margin: 0 0 35px 0;
    padding: 0 7px;
    }

#com {
    width: 40%;
    float: left;
    }

#ent {
    width: 55%;
    float: right;
    }

#clr {
    background-color: #000000;
    width: 100%;
    clear: both;
    height: 7px;
    }

#inf ul {
    list-style-type: none;
    padding: 0;
    margin: 0 0 20px 0;
    }

#inf li {
    display: block;
    border-bottom: #4E370F 1px solid;
    padding-top: 3px;
    margin: 0;
    min-height: 20px;
    font-weight: normal;
    }

#com li a {
    text-decoration: none;
    color: #75961B;
    }

#com li a:hover {
    text-decoration: none;
    color: #99C521;
    }

#ent li a {
    text-decoration: none;
    color: #DEDDDC;
    }

#ent li a:hover {
    text-decoration: none;
    color: #FFFFFF;
    }

.intr {
    padding: 0 7px;
    }

/* Headers */

.edit, .edit a:link, .edit a:visited {
    text-align: right;
    text-transform: lowercase;
    color: #2E2E2E;
    font-size: 10px;
    float: right;
    }

.edit a:hover {
    color: #E1E1E1;
    }

h4 {
    background: url("images/sidebg.jpg") no-repeat bottom;
    width: 198px;
    height: 28px;
    text-transform: lowercase;
    margin: 0px;
    padding-right: 50px;
    color: #E5B655;
    font-size: 10px;
    text-align: right;
    font-family: verdana;
    }

* html h4 {
    padding: 0 50px 0 0;
    }

h3 {
    color: #F3F1B7;
    font-size: 18px;
    font-family: verdana;
    font-weight: bold;
    padding: 0;
    margin: 0;
    }

h1, h1 a:link, h1 a:visited {
    color: #FFA303;
    font-size: 20px;
    font-family: verdana;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0;
    margin: 7px 0 0 0;
    text-decoration: none;
    }

.id {
    color: #686C24;
    padding-right: 3px;
    }

h2, #wp-calendar caption {
    font-weight: bold;
    padding: 0;
    margin: 0 0 10px 0;
    color: #FFFED9;
    font-size: 11px;
    text-align: center;
    font-family: verdana;
    }

h2 a:link, h2 a:visited {
    color: #A12600;
    text-decoration: none;
    }

h2 a:hover {
    color: #DF3500;
    text-decoration: none;
    }

h6 {
    padding: 0;
    margin: 0;
    font-size: 35px;
    float: right;
    text-align: right;
    color: #222;
    }

.btitle a:link, .btitle a:visited {
    padding: 0 25px 0 0;
    color: #FFA052;
    font-size: 30px;
    font-family: verdana;
    text-decoration: none;
    }

.stitle {
    padding: 0 10px 0 0;
    color: #FFFFFF;
    font-size: 12px;
    font-family: verdana;
    font-weight: bold;
    font-style: italic;
    }

.tinfo {
    color: #D4C082;
    font-size: 14px;
    font-family: verdana;
    text-transform: uppercase;
    border-bottom: #4E370F 1px solid;
    padding: 0 0 3px 0;
    }

/* Top Search */

#sform {
    padding: 10px 0 0 20px;
    margin: 0;
    }

#search input {
    width: 170px;
    font-size: 10px;
    color: #CCC;
    font-family: verdana;
    background:#1A1A1A;
    border: #414141 1px solid;
    }

#search input:focus {
    border:#2E2E2E 1px solid;
    }

#simage {
    background: url("images/s2.gif") no-repeat;
    width: 39px;
    height: 23px;
    }

/* Top Menu*/

#menu ul {
    list-style-type: none;
    margin: 80px 0 0 0;
    padding: 0;
    }

#menu ul li {
    display: inline;
    text-transform: lowercase;
    }

#menu ul li a {
    text-decoration: none;
    color: #494949;
    font-weight: bold;
    font-size: 13px;
    font-family: verdana;
    padding: 83px 13px 0 13px;
    font-weight: bold;
    }

#menu ul li a:hover {
    background: #000;
    -moz-opacity: 0.7;
    color: #FFF;
    border-bottom: #99280A 5px solid;
    text-decoration: none;
    background:
    }

/* Side Navigation */

.navigate {
    padding: 10px 0 30px 35px;
    font-size: 8px;
    font-family: verdana;
    }

.navigate ul {
    list-style-type: none;
    font-size: 11px;
    padding: 0;
    margin: 0;
    }

.navigate li a {
    background: url("images/arw.gif") no-repeat top left;
    text-decoration: none;
    display: block;
    color: #7F8062;
    border-bottom: #1F270B 1px solid;
    padding: 4px 0 4px 21px;
    margin: 0;
    }

* html .navigate li a {
    height: 13px;
    }

.navigate li a:hover {
    background: url("images/arw2.gif") no-repeat top left;
    text-decoration: none;
    color: #F7FABF;
    }

.navigate li li a {
    background: url("images/sub.gif") no-repeat top left;
    text-decoration: none;
    display: block;
    color: #7F8062;
    border-bottom: #1F270B 1px solid;
    padding: 4px 0 4px 41px;
    margin: 0;
    }

.navigate li li a:hover {
    background: url("images/sub2.gif") no-repeat top left;
    text-decoration: none;
    color: #F7FABF;
    }

/* Posts */

.info {
    background: #3A130A;
    -moz-border-radius: 10px;
    color: #FFFFFF;
    font-family: verdana;
    font-size: 5px;
    text-align: left;
    padding: 7px;
    margin: 15px 0 50px 0;
    }

.info a:link, .info a:visited {
    color: #FFFFFF;
    text-decoration: none;
    }

.comm, .comm a:link, .comm a:visited {
    color: #A5B968;
    font-weight: bold;
    text-decoration: none;
    }

.comm a:hover {
    color: #C7DC87;
    text-decoration: none;
    }

/* Footer Styles */

.credits {
    text-align: center;
    padding-top: 30px;
    color: #A1A1A1;
    font-size: 12px;
    }

#footer a:link, #footer a:visited {
    color: #A1A1A1;
    text-decoration: none;
    }

#footer a:hover {
    color: #E1E1E1;
    text-decoration: none;
    }

/* Miscellaneous */

img {
    border: 0;
    }

a:link, a:visited {
    color: #AAAF54;
    text-decoration: none;
    }

a:hover, a:active {
    color: #C3C963;
    }

blockquote {
    background: url("images/quote.gif") no-repeat top left;
    min-height: 90px;
    overflow: visible;
    color: #C3BCA5;
    margin: 0;
    padding: 15px 20px;
    }

code {
    font-family: monospace;
    color: #EFE4BE;
    }

pre {
    font-family: monospace;
    color: #C3BCA5;
    }

input, textarea {
    width: 98%;
    font-size: 11px;
    color: #CCC;
    font-family: verdana;
    background: #1A1A1A;
    border: #414141 1px solid;
    margin: 2px 0 0 0;
    }

textarea {
    padding: 3px;
    width: 96%;
    }

input:focus, textarea:focus {
    border: #2E2E2E 1px solid;
    }

#subc img {
    padding: 2px;
    border: #343434 5px solid;
    margin: 5px;
    }

#subc img:hover {
    border: #5C5C5C 5px solid;
    }

#subc img a {
    border: #343434 5px solid;
    }

small {
    color: #555;
    font-family: verdana;
    }

label {
    color: #555;
    font-size: 10px;
    }

table {
    font-family: verdana;
    font-size: 12px;
    border: #2E2E2E 1px solid;
    background: #131313;
    }

/* Post Specifications */

.hundred {
    display: block;
    text-align: center;
    margin: 0 0 10px 0;
    }

.alignright {
    float: right;
    }

.alignleft {
    float: left;
    }

.post-info {
    font-size: 10px;
    color: #DCDCDC;
    border: #2E2E2E 1px solid;
    margin: 10px;
    font-family: verdana;
    padding: 5px;
    }

.post-info a, .post-info a:visited, .comm-date a, .comm-date a:visited {
    color: #EABD52;
    }

.post-info a:hover {
    color: #F8BF3E
    }

.comment {
    padding: 10px 20px;
    }

.comm-entry {
    font-size: 11px;
    font-family: verdana;
    }

.s-entry {
    padding: 15px 0 0 15px;
    }

/* Links Page */

#linkpage input {
    width: 70px;
    }

#linkpage select {
    font-size: 11px;
    color: #CCC;
    font-family: verdana;
    background: #1A1A1A;
    border: #414141 1px solid;
    }

#linkpage ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    }

#linkpage li {
    padding: 10px 0;
    }

#linkpage p {
    margin: 0;
    padding: 0;
    }

/* Wp-Calendar */

#wp-calendar {
    width: 100%;
    font-size: 11px;
    font-weight: normal;
}

#wp-calendar #next a {
    padding-right: 10px;
    text-align: right;
}

#wp-calendar #prev a {
    padding-left: 10px;
    text-align: left;
}

#wp-calendar a {
    display: block;
    text-decoration: none;
}

#wp-calendar a:hover {
    text-decoration: underline;
}

#wp-calendar td {
    color: #7F8062;
    background: #1F1F1F;
    border: 1px solid #2E2E2E;
    margin: 0 4px 4px 0;
    padding: 2px;
    text-align: center;
    letter-spacing: normal;
}

#wp-calendar td:hover{
    background: #171717;
    border: 1px solid #292929;
}

#wp-calendar td.pad:hover {
    background: #171717;
    border: 1px solid #292929;
}

#wp-calendar #today {
    background: #333;
    border: 1px solid #222;
    border-width: 1px 0 0 1px;
    color: #FFF;
}

#wp-calendar th {
    background: transparent;
    border: 0;
    font-style: normal;
    text-transform: uppercase;
    text-align: center;
    padding: 2px;
    color: #999;
    font-weight: normal;
}

img.wp-smiley {
border: 0pt none;
margin: 0px;
padding: 0px;
vertical-align: middle;
}

My site : eSanctum

Regards
Dhanesh.

dhanesh

Aug 5 2006, 04:04 PM

ok i wasent clear about what i actually wanted to do ..

1) I'd like to change the Font and Font Size of the blog posts that show on the main page. I think its the style.css i have to edit .. but what part of it should i change ?

2) The titles Categories .. Archives .. etc .. if i'd want to chance their Font and Font Size .. what do i change in style.css ..

3) The blog post titles and numbers that show .. i wanted to change the Font and Font Size of that too ...

4) The header links on top .. home .. about .. etc .. i wanted to change the color to something darker .. which line should i edit in style.css ?

5) And lastly .. i wanted to remove the "view related topic" drop down .. which files and code do i have to edit to take it off ..

Regards
Dhanesh.

EDIT : i would suggest you d'load the theme and check the style.css there so it wont be much of a confusion.

pyost

Aug 5 2006, 04:19 PM

Let's start at the beginning

This is what you have to do to edit a blog entry appearence (including the title).

For the post number, you should edit this part of the CSS:

CODE

.id {
    color: #686C24;
    padding-right: 3px;
    }

For the title:

CODE

h1, h1 a:link, h1 a:visited {
    color: #FFA303;
    font-size: 20px;
    font-family: verdana;
    text-transform: uppercase;
    font-weight: bold;
    padding: 0;
    margin: 7px 0 0 0;
    text-decoration: none;
    }

Just a note: by editing most of the attributes for h1, you will also affect the blog entry number, because it is nested between <h1> tags. Here's what I'm talking about:

CODE

<h1><span class="id">028</span><a href="http://www.esanctum.net/?p=28">College Shmollege ..</a></h1>

Next, the "posted by" part. It is nested between <h2> tags, so you have to edit the following code:

CODE

h2 a:link, h2 a:visited {
    color: #A12600;
    text-decoration: none;
    }

h2 a:hover {
    color: #DF3500;
    text-decoration: none;
    }

The first half defines how the poster link will look, and the other half how it will look when hovered over. If you wish to edit that whole line appearence (font size or font family), you have to add another part to the CSS file, which will look like this:

CODE

h2 {
    An attribute goes here
    An attribute goes here
    }

And finally, the text itself. I'm a bit confused about this one, since it uses a class called "entry", which doesn't exist in the CSS file. Maybe I'm missing something, but I'm no CSS guru. You can try to change that by editing the body tag:

CODE

body {
    font-family: verdana;
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    background: #E1B26B url("images/bg.gif");
    margin: 0;
    padding: 0;
    }

Now let's switch to the sidebar. Since those titles ("Archives" etc.) are nested between <h4> tags, you should edit this part of the CSS:

CODE

h4 {
    background: url("images/sidebg.jpg") no-repeat bottom;
    width: 198px;
    height: 28px;
    text-transform: lowercase;
    margin: 0px;
    padding-right: 50px;
    color: #E5B655;
    font-size: 10px;
    text-align: right;
    font-family: verdana;
    }

For the menu at the top, I think this is the only part you should edit (first for normal state, second for hovering):

CODE

#menu ul li a {
    text-decoration: none;
    color: #494949;
    font-weight: bold;
    font-size: 13px;
    font-family: verdana;
    padding: 83px 13px 0 13px;
    font-weight: bold;
    }

#menu ul li a:hover {
    background: #000;
    -moz-opacity: 0.7;
    color: #FFF;
    border-bottom: #99280A 5px solid;
    text-decoration: none;
    background:
    }

As for the "View related topics" thing, where is it? I can't seem to find it, and therefore don't know how to remove it

~edit~

OK, this should remove that annoying thing. Just delete this part of the code from your index.php file. The one that is a part of the theme, not the one in the root folder

CODE

<div id="shelf">
               <div id="inf">
               <div class="clr"> </div>
               <div id="com">
                <div class="tinfo">Commentors</div>
                <ul>
                   <?php get_tenrecentcomments(); ?>
                </ul>
               </div>
               <div id="ent">
                <div class="tinfo">Entries</div>
                <ul>
                   <?php query_posts('showposts=10');?>
                   <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                   <li><span class="intr"><?php echo zeroise($post->ID, 3); ?></span><a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
                    <?php endwhile; endif; ?>
                </ul>
               </div>
               <div class="clr"> </div>
              </div>
                        <br /><br />
            </div>

If the layout messes up, or something looks wrong, try by returning this line:

CODE

dhanesh

Aug 5 2006, 05:06 PM

Woooah .. that was elaborate

.. thankx for the quick reply there .. I still am stuck with how to edit the font .. but i did solve the annoying shelf thing you told at the end .. so its 1 down ..

I messed up in the code a little so i dunt know what i edited to get the font this small .. logically whatever i did i changed the size to 5px .. so i searched for anything with 5 px and the 2 things that came up were #content and body .. but after making them 10 .. they still wont change .. doint this .. also effected the sidebar titles :| lol .. gosh this is driving me nuts ..

Regards
Dhanesh.