Evolution Theme font edit

[pikus]

I would like to know the names of the CSS div to edit:



The font of the title of each post
The font of the title of the post that we are reading (after clicking on the title post on the main page)
The font and the text of the "About Me" field in the sidebar
The font of the titles and text of the sidebar. For example the font of "Recent", "categories", and the font of each category appearing in the collapsing menu


Thaaaaaanks :)

[sarahG]

1. div.title h2
2. div.title h1
3. div.about and div.about h3
4. li.TabLink and ul#categories

I also recommend, if you use Firefox, to install the Web Developer toolbar and use the Outline -> Outline Current Element as it makes finding these so simple :)

[pikus]

Excellent... here in late now, I will try it tomorrow and let you know.

Thank you for now

[pikus]

Do you know what I may have done wrong now that when I try to edit the CSS I see it unformatted?
I attach the jpg

[sarahG]

It's not unformatted as such, you've just lost all of your line breaks. Can you not edit the CSS file on your computer and FTP that to your site instead? That way you have a back up on your computer of your changes.

The online file editor in WordPress can sometimes be a little temperamental depending on your server settings.

[pikus]

I was using FileZilla and editing the file with Notepad++.
I didn't make many changes yet. There is a way to make it readable?

And if it happens again?


===
Another question. I would like to add the calendars as in this site (http://www.borsatrading.net/).

The css should be:
#leftcolumn div.calendario {
width: 90px;
height: 56px;
float: left;
margin: 0px 10px 0px 0px;
padding: 22px 0 0 0;
background: #FFFFFF url(images/calendario.gif);
text-align:center;
font-size: 13px;
}

#leftcolumn div.calendario span {
display: block;
padding: 0px;
margin: 0px;
}


And the code in another kind of theme is

<div class="calendario"><span><?php the_time('j'); ?> <br /> <?php the_time('F'); ?></span> <!-- <span><?php the_time('Y'); ?></span> --> </div>

How to make it work in my page as well? Where do I have to add this php?

[ap4a]

I was using FileZilla and editing the file with Notepad++.
I didn't make many changes yet. There is a way to make it readable?

I use Topstyle Pro which is an excellent and very functional CSS editor. Amongst the features is a 'tidy' option which will format the code for you and make it more readable - as well as reduce it by using shorthand, where possible and depending on your settings.

The PHP/HTML code snippet for the calender would need to be placed in your markup at the point you want it to appear at. If you want it in the footer, for example, open up your blog's footer template and place it there (inside the div with the class or ID of footer, if there is one).

[pikus]

this is my index.php now<?php get_header(); ?>

</div>

<div class="container main">

<div id="leftcolumn">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<div class="naslov">
<div class="title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>



<!-- start calendario -->
<div class="calendario"><span><?php the_time('j'); ?> <br /> <?php the_time('F'); ?></span> <!-- <span><?php the_time('Y'); ?></span> --> </div>
<!-- end calendario -->

<div class="postdata"><?php the_time('j M, Y') ?> &nbsp;|&nbsp;
Written by <?php the_author_posts_link(); ?> &nbsp;|&nbsp; under <?php the_category(', ') ?> <!-- by <?php the_author() ?> --> <?php edit_post_link('Edit', ' / ', ' / '); ?></div>
</div>


<div class="komentari"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>

<div class="entry">
<?php the_content('Continue Reading ->'); ?>
</div><!-- end .entry -->

</div><!-- end .post -->

<?php endwhile; ?>

<div class="pagers">
<p class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></p>
<p class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></p>
</div>

<?php else : ?>

<div class="post">
<div class="title"><h2>Not Found</h2></div>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>

<?php endif; ?>
</div><!-- end #leftcolumn -->

<?php get_sidebar(); ?>
<div style="margin:0; "><img src="<?php bloginfo('template_url'); ?>/images/content_b.gif" alt="" /></div>
<?php get_footer(); ?>

I would like the calendar to appear adjusted in the left of the Title or can be good even to make the text of the post appear in the right of the calendar.
I tried to change the witdth and hight of some div in the css, but the page gets destroyet. How can I do at least one of those things?

[sarahG]

The code you've added just echos out the date of the post which is already being done below the title, so choose one or the other, but don't have both.

As for positioning, we'd need to see a live/test page with this on to see what CSS would be required, otherwise it would be a guessing game and potentially waste everyone's time.

[pikus]

I would like to:


leave the date on the calendar
remove the time/date of the other bar
, move the grey bar a bit to the right, because now they grey is almost touching the calendar
move the text or calendar so that the calendar will be in the left and the text in its right as in the example page


I think that's all.

My page is here (http://www.erasmusinpoland.com/blog) and the page I am taking as an example is here (http://www.borsatrading.net)

[sarahG]

To remove the original date then delete this part

<?php the_time('j M, Y') ?> &nbsp;|&nbsp;

Out of the postdata div.

For the other changes, there's a fair bit of work involved to be honest. You need to move your comments around, add in an extra div, and rely on a few floats to get things sitting right. it's possible but it's not a case of change one line unfortunately.

If you're competent enough with HTML and CSS then I can list out what to do, otherwise I'll need to alter the code and post it up but it won't be today I'm afraid.

[pikus]

you can try to tell me what I can do, but I don't know if I will be competent enough.

If for you is not such a big problem, I can wait if you cannot do it today. If you need some informations from me to make it easier, please tell me

[sarahG]

I'll try and look at it first thing in the morning for you. To briefly explain, you'd be best off moving the comment icon/bubble to after the title, float the title to the left. Then surround the calendar, post data and post entry in a div. Then the calendar div is floated left, the clear is removed from the entry div, and you'll need to up the width of the post div to more than 550px.

However if you can wait 12 hours I'll write the code out tomorrow for you :)

[pikus]

Thank you thank you...
I can wait, no problem. Even until Monday. I will continue updating other things.

[sarahG]

I've made the changes to index.php, single.php and the default-blue.css file however as you've possibly made other changes to your files it's probably not as easy as just giving you the files so below I've outlined what's been changed in each file

index.php - copy the following and find the same outer code (so div class="post") in your index.php file, then replace that with the below. This will put your markup in a better order to achieve what you want.

<div class="post" id="post-<?php the_ID(); ?>">

<div class="naslov">
<div class="title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>

<div class="komentari"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>

<div class="newpostdiv">
<!-- start calendario -->
<div class="calendario"><span><?php the_time('j'); ?> <br /> <?php the_time('F'); ?></span> <!-- <span><?php the_time('Y'); ?></span> --> </div>
<!-- end calendario -->

<div class="postdata">Written by <?php the_author_posts_link(); ?> &nbsp;|&nbsp; under <?php the_category(', ') ?> <!-- by <?php the_author() ?> --> <?php edit_post_link('Edit', ' / ', ' / '); ?></div>

<div class="entry">
<?php the_content('Continue Reading ->'); ?>
</div><!-- end .entry -->
</div>
</div><!-- end naslov -->

</div><!-- end .post -->

single.php - almost the same job, just a bit less code

<div class="post" id="post-<?php the_ID(); ?>">
<div class="title">
<h1><?php the_title(); ?></h1>
</div>

<!-- start calendario -->
<div class="calendario"><span><?php the_time('j'); ?> <br /> <?php the_time('F'); ?></span> <!-- <span><?php the_time('Y'); ?></span> --> </div>
<!-- end calendario -->

<div class="postdata"><?php the_time('j M, Y') ?> &nbsp;|&nbsp; Written by <?php the_author_posts_link(); ?> &nbsp;|&nbsp; under <?php the_category(', ') ?> <!-- by <?php the_author() ?> --> <?php edit_post_link('Edit', ' / ', ' / '); ?></div>

<div class="entry">
<?php the_content(); ?>
</div><!-- end .entry -->

</div><!-- end .post -->

CSS file - this is the tricker bit. You may need to merge your changes with that of below. Easiest option is to get the original CSS file from the theme again to see what's been changed.

.naslov {
float:left;
width:650px;
}

.title h2 {
color: #444;
float: left;
width: 545px;
}

.title h2 a {
color: #444;
text-decoration: none;
}

.title h2 a:hover {
color: #444;
text-decoration: underline;
}

#leftcolumn div.calendario {
width: 90px;
height: 56px;
float: left;
margin: 0px 10px 0px 0px;
padding: 22px 0 0 0;
background: #FFFFFF url(http://erasmusinpoland.com/blog/wp-content/themes/evolution/images/calendario.gif);
text-align:center;
font-size: 13px;
}

#leftcolumn div.calendario span {
display: block;
padding: 0px;
margin: 0px;
}

.newpostdiv {
clear: both;
}

.postdata {
color: #999;
margin-bottom: 5px;
background-color: #eceddf;
float: left;
width: 546px;
padding: 2px;
}

.postdata a {
color: #009fc0;
font-weight: 700;
}

.komentari {
color: #999;
background:url(images/comment.gif) no-repeat;
float:left;
height:36px;
width:104px;
text-align:center;
margin-bottom: 5px;
padding-top:2px;
}

.komentari a, .komentari a:visited {
color: #666;
text-decoration:none;
font-weight: 700;
}
.komentari a:hover {
color: #009fc0;
text-decoration:none;
font-weight: 700;
}

.entry {
margin: 0;
}

What I've done is

1. Changed the mark up to have the top line, ie. post title and comment count on the same line and the markup is in the same order to reflect this.
2. On the index.php page, wrapped the rest of the content in a new div to contain it separately to the title/comment count.
3. Set the h2 title to float left and same for the comment count, and used the widths to keep them on the same line.
4. Floated the postdata class so that it can sit 'away' from the calendar icon, else the background will always go behind the icon.
5. Made the width on the naslov div the same as the content area so that the floats don't mess up the layout.

That works for me in Firefox anyhow.

[pikus]

As you can see I have changed the CSS, but still I have questions on how to edit the php files.

Most of the things that you wrote in the codes here and I have to put in my files are already there. Should I delete them? From where to where?

Here they are. I will not edit them anymore since you write.

Index.php
<?php get_header(); ?>

</div>

<div class="container main">

<div id="leftcolumn">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<div class="naslov">
<div class="title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>



<!-- start calendario -->
<div class="calendario"><span><?php the_time('j'); ?> <br /> <?php the_time('F'); ?></span> <!-- <span><?php the_time('Y'); ?></span> --> </div>
<!-- end calendario -->


<!-- <div class="postdata"> -->

<div class="bg_beige">&raquo; <!-- original time deleted <?php the_time('j M, Y') ?> &nbsp;|&nbsp; -->
Written by <?php the_author_posts_link(); ?> &nbsp;|&nbsp; under <?php the_category(', ') ?> <!-- by <?php the_author() ?> --> <?php edit_post_link('Edit', ' / ', ' / '); ?></div>
</div>



<div class="komentari"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>

<div class="entry">
<?php the_content('Continue Reading ->'); ?>
</div><!-- end .entry -->

</div><!-- end .post -->

<?php endwhile; ?>

<div class="pagers">
<p class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></p>
<p class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></p>
</div>

<?php else : ?>

<div class="post">
<div class="title"><h2>Not Found</h2></div>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>

<?php endif; ?>
</div><!-- end #leftcolumn -->

<?php get_sidebar(); ?>
<div style="margin:0; "><img src="<?php bloginfo('template_url'); ?>/images/content_b.gif" alt="" /></div>
<?php get_footer(); ?>


single.php
<?php get_header(); ?>

</div>

<div class="container main">

<div id="leftcolumn">

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div class="post" id="post-<?php the_ID(); ?>">

<div class="naslov">
<div class="title">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
</div>



<!-- start calendario -->
<div class="calendario"><span><?php the_time('j'); ?> <br /> <?php the_time('F'); ?></span> <!-- <span><?php the_time('Y'); ?></span> --> </div>
<!-- end calendario -->


<!-- <div class="postdata"> -->

<div class="bg_beige">&raquo; <!-- original time deleted <?php the_time('j M, Y') ?> &nbsp;|&nbsp; -->
Written by <?php the_author_posts_link(); ?> &nbsp;|&nbsp; under <?php the_category(', ') ?> <!-- by <?php the_author() ?> --> <?php edit_post_link('Edit', ' / ', ' / '); ?></div>
</div>



<div class="komentari"><?php comments_popup_link('No Comments', '1 Comment', '% Comments'); ?></div>

<div class="entry">
<?php the_content('Continue Reading ->'); ?>
</div><!-- end .entry -->

</div><!-- end .post -->

<?php endwhile; ?>

<div class="pagers">
<p class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></p>
<p class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></p>
</div>

<?php else : ?>

<div class="post">
<div class="title"><h2>Not Found</h2></div>
<p>Sorry, but you are looking for something that isn't here.</p>
</div>

<?php endif; ?>
</div><!-- end #leftcolumn -->

<?php get_sidebar(); ?>
<div style="margin:0; "><img src="<?php bloginfo('template_url'); ?>/images/content_b.gif" alt="" /></div>
<?php get_footer(); ?>

Thanks

[sarahG]

Replace the code I've posted above in each file mentioned. I started each piece of code at the opening <div class="post" id="..."> through to the closing </div>.