WordPress.com

1. nrepair
   Member
   Aug 24, 2007, 2:57 PM

   I'm using the Freshy theme and am trying to alter the CSS. I'm not an expert, but I've had plenty of success altering CSS files in other themes. This one is different.

   Below are two screencaps taken after I pasted the default Freshy CSS into the CSS editor and saved it. The ONLY changes I've made to the CSS are correcting the url's to the images for the theme. I haven't changed anything else at all.

   The menu doesn't display correctly in IE, but it does in FF. Also notice how the theme header gets shoved up under my WordPress toolbar in FF. Neither of these things happen when I don't use custom CSS.

   If anyone read this that has altered Freshy successfully, please let me know what I need to add or edit in the CSS to get it to work correctly.

   http://inrepair.wordpress.com/files/2007/08/freshy_css_ie.jpg

   http://inrepair.wordpress.com/files/2007/08/freshy_css_ff.jpg

   Thanks!

2. devblog
   Member
   Aug 24, 2007, 3:08 PM

   can you post here the changes you made?

3. nrepair
   Member
   Aug 24, 2007, 3:35 PM

   At the time I posted these screencaps, I had made no changes to the CSS except the urls to the theme images (which we have to do on every theme). I've since made changes to the default font size on the posts and the title font. Here is my current CSS:

   body,html {
   font-size:90%;
   font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
   margin:0;
   padding:0;
   }

   body {
   background:#7F7F7F;
   margin:0;
   padding:0;
   }

   *::-moz-selection {
   background-color:#FF3C00;
   color:white;
   }

   a {
   color:#515151;
   text-decoration:none;
   }

   #content a {
   border-bottom:1px dotted silver;
   }

   #content a:hover {
   border-bottom:1px dotted #FF3C00;
   }

   #title_image {
   text-align:left;
   display:block;
   height:95px;
   background:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/headers/header_image2.jpg') center center transparent repeat-y;
   margin:0;
   }

   #title {
   background:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/header.gif') top #7F7F7F no-repeat;
   height:76px;
   clear:both;
   text-align:left;
   margin:0;
   padding:25px 25px 0;
   }

   html>body #title {
   height:51px;
   }

   #title h1 {
   font-weight:normal;
   line-height:.7em;
   font-size:2.5em; (I CHANGED THIS)
   letter-spacing:0;
   font-family:helvetica;
   margin:0;
   padding:0;
   }

   #title h1 a {
   color:white;
   display:block;
   }

   html>body .ellipsis li:after {
   content:"...";
   display:inline;
   }

   html>body .ellipsis li span {
   white-space:nowrap;
   overflow:hidden;
   max-width:180px;
   width:auto !important;
   display:inline;
   float:left;
   }

   ol.ellipsis li span {
   white-space:nowrap;
   overflow:hidden;
   width:190px;
   display:block;
   }

   #sidebar a {
   text-decoration:none;
   }

   #sidebar a:hover,#sidebar .current_page_item li a:hover,#sidebar .current-cat li a:hover {
   color:#FF3C00;
   }

   #sidebar .current_page_item a,#sidebar .current-cat a {
   font-weight:bold;
   color:#FF3C00;
   }

   #sidebar .current_page_item li a,#sidebar .current-cat li a {
   font-weight:normal;
   color:#515151;
   }

   #sidebar li img {
   vertical-align:middle;
   border:0;
   }

   #sidebar input.btn {
   margin-left:4px;
   }

   .menu {
   list-style-type:none;
   background:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/menu/menu_bg.gif') 50% 0 #515151 repeat-x;
   height:80px;
   width:780px;
   border-top:1px solid #FFFFFF;
   overflow:hidden;
   margin:0;
   padding:0;
   }

   .menu li {
   background:none;
   display:table-row;
   vertical-align:middle;
   float:left;
   height:80px;
   padding:0;
   }

   .menu li.last_menu,.menu li.right_menu {
   float:right;
   }

   .menu li a {
   font-size:.8em;
   text-transform:uppercase;
   line-height:normal !important;
   display:table-cell;
   vertical-align:middle;
   height:80px;
   background:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/menu/menu_triple.gif') top left transparent repeat-x;
   color:white;
   text-decoration:none;
   padding:0 10px;
   }

   .menu li a:hover,.menu li a:active {
   background-position:center left;
   color:#FFFFFF;
   }

   .menu li.current_page_item a {
   background-position:bottom left !important;
   color:#1F3700 !important;
   }

   .menu li a.first_menu {
   padding-left:35px;
   background-repeat:no-repeat;
   background-image:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/menu/menu_start_triple.gif');
   }

   .menu li a.last_menu,.menu li a.last_menu_off {
   padding-right:35px;
   background-repeat:no-repeat;
   background-image:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/menu/menu_end_triple.gif');
   background-position:top right;
   }

   .menu li a.last_menu:hover,.menu li a.last_menu:active {
   background-position:center right;
   }

   .menu li.current_page_item a.last_menu {
   background-position:bottom right !important;
   }

   .menu li.lang_menu {
   float:right;
   }

   .menu li.lang_menu a span {
   width:19px;
   height:80px;
   overflow:hidden;
   text-indent:100px;
   display:block;
   }

   .menu li.lang_menu a {
   display:block;
   width:19px;
   cursor:pointer;
   }

   .menu li#fr_FR a span {
   background:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/lang_fr.gif') left transparent no-repeat;
   }

   .menu li#en_US a span {
   background:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/lang_en.gif') left transparent no-repeat;
   }

   .menu li#fr_FR.current_page_item a span,.menu li#fr_FR a:active span {
   background-image:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/lang_fr.gif');
   }

   .menu li#en_US.current_page_item a span,.menu li#en_US a:active span {
   background-image:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/lang_en.gif');
   }

   #footer .footer_content {
   width:760px !important;
   display:block;
   margin-right:auto;
   margin-left:auto !important;
   margin-top:0;
   border-top:1px dotted silver;
   text-align:center;
   padding:10px;
   }

   .post {
   font-size:1em; (I CHANGED THIS)
   border-top:20px solid #F5F5F5;
   margin-bottom:10px;
   padding:1em 0;
   }

   .post h2,.post h3,.post h4,.post h5 {
   font-size:1.5em;
   }

   .post hr {
   display:block;
   }

   .highlight_box {
   font-size:.9em;
   border:2px solid #F5F5F5;
   margin-bottom:20px;
   padding:1em;
   }

   .highlight_box .post {
   font-size:1em;
   border:0 none;
   margin-bottom:0;
   padding:0;
   }

   .highlight_box .post p {
   margin:0;
   }

   .highlight_box .post .date {
   display:none;
   }

   .highlight_box h2,.highlight_box h3,.highlight_box h4,.highlight_box h5 {
   font-size:2em;
   border-bottom:10px solid #F5F5F5;
   }

   .highlight_box .post h2,.highlight_box .post h3,.highlight_box .post h4,.highlight_box .post h5 {
   font-size:1.5em;
   }

   .readmore {
   display:block;
   text-align:left;
   font-weight:bold;
   clear:both;
   color:#FF3C00;
   margin:1em 0;
   }

   .date {
   color:silver;
   float:right;
   line-height:2.3em;
   padding-left:5px;
   border-left:1px solid silver;
   font-size:.8em;
   text-align:center;
   position:relative;
   right:0;
   margin:1.5em 0 5px 10px;
   }

   .date_day {
   display:block;
   font-size:3em;
   text-align:right;
   }

   .date_month {
   display:block;
   font-size:3em;
   text-align:right;
   font-weight:bold;
   }

   .date_year {
   display:block;
   font-size:1.4em;
   line-height:.9em;
   }

   .postmetadata {
   color:#515151;
   list-style-type:none;
   margin:0;
   }

   #content .postmetadata a {
   color:#FF3C00;
   border:none;
   text-decoration:none;
   }

   #content .postmetadata a:hover {
   border-bottom:1px dotted silver;
   }

   .avatar {
   float:left;
   border:1px solid lightgray;
   vertical-align:middle;
   margin:0 5px 0 0;
   }

   #content .commentlist dt {
   position:absolute;
   }

   html > body #content .commentlist dt {
   position:static;
   }

   #content .commentlist dd {
   font-size:1em;
   line-height:1.5em;
   color:silver;
   margin:0 0 1em;
   padding:10px 3em 10px 10px;
   }

   html > body #content .commentlist dd {
   padding:10px;
   }

   #content .commentlist .comment {
   color:#000000;
   }

   #content .commentlist .date {
   margin-right:5px;
   font-size:.5em;
   }

   #content .commentlist .comment_text {
   margin-top:5px;
   display:block;
   }

   html > body #content .commentlist dd.author_comment {
   background:url('http://s.wordpress.com/wp-content/themes/pub/freshy/images/transp-80.png') #c9e45a !important;
   width:auto;
   }

   #content .commentlist dd.author_comment {
   background-color:#c9e45a !important;
   width:510px;
   }

   #content .commentlist .author_comment .author,#content .commentlist .author_comment .author a {
   color:#c9e45a !important;
   border-color:#c9e45a !important;
   }

   #content .commentlist dd.author_comment * {
   position:relative;
   }

   #content .commentlist dt.author_comment .date {
   color:#a5ba52 !important;
   border-color:#a5ba52 !important;
   }

   #content textarea#comment {
   font-size:1em;
   line-height:1.3em;
   }

   #commentform small {
   color:#515151;
   }

   .entry {
   text-align:justify;
   margin:0;
   }

   .entry p {
   margin:1em 0;
   }

4. nrepair
   Member
   Aug 24, 2007, 3:36 PM

   By the way, I appreciate your quick response and your help, Devblog! :)

5. devblog
   Member
   Aug 24, 2007, 3:59 PM

   I'll take a look at it and get back to you as soon as I can

6. devblog
   Member
   Aug 24, 2007, 4:40 PM

   nrepair,

   Do me a favor, please go to my blog: http://dolfint.wordpress.com/ and tell me if that's how you want your blog to look like. (I changed the font size of the same elements you did)

7. nrepair
   Member
   Aug 24, 2007, 7:06 PM

   devblog,

   Looks good to me. The only things I might want different is the letter-spacing on the title and the size of the description. I can change both of those, though. ;)

8. devblog
   Member
   Aug 24, 2007, 7:23 PM

   Okay, I asked because then I can tell you what I did. I just wanted make sure that that's what you wanted.

   Now, whatever code you have in your CSS editor, delete it. Check the "Add to existing CSS" radio button. Now save it. Then, make sure you're blog looks good (we just 'reset' the CSS to its original settings - thanks Judy for this tip!).

   Then, go back to your CSS editor and add the following (these are your changes):

   .post {
   font-size:1em;
   }
   
   #title h1 {
   font-size:2.5em;
   }

   Make sure that those are the only selectors there AND that the "Add to existing CSS" radio button is still checked.

   After I made those changes, I checked them in IE6 and Firefox 2 and they look good.

   HTH

9. nrepair
   Member
   Aug 24, 2007, 7:42 PM

   SWEET! I tried it and it worked great. So, anything that I want to change just needs to be added this way instead of changing the original style sheet? I can change the post title font size the same way, right?

   Thanks so much for your help. You rock!!

10. nrepair
    Member
    Aug 24, 2007, 7:51 PM

    devblog,

    I tried the changes I mentioned and it worked like a charm. Check my site now and see if it looks good on your end. I've tried it on my machine in IE and FF with good results.

    Thanks again. If you can figure out how to change that blasted date display with CSS, I'll build a shrine to you in my home and worship it daily. :P

11. devblog
    Member
    Aug 24, 2007, 8:20 PM

    So, anything that I want to change just needs to be added this way instead of changing the original style sheet? I can change the post title font size the same way, right?

    That's right!

    I'll build a shrine to you in my home and worship it daily.

    Make it Japanese style, please.

    No problem, man. I'm glad I could help. :D

    PS. I tested you site in IE6, IE7 and Firefox, and it looks great. Good job!

12. francehoteliers
    Member
    Oct 8, 2007, 3:52 PM

    I have the footer of Freshy screwed too. Can someone have a look at this please :

    http://wordpress.org/support/topic/137734?replies=2#post-628448

    Try my blog under IE: http://www.fon.gs/blogtravel

13. timethief
    Member
    Oct 8, 2007, 3:57 PM

    @francehoteliers
    Please note that you are posting to the wrong forum. We cannot help you here. We run on different software than the software you have downloaded from wordpress.org. The Freshy theme we have here has been adapted from the wordpress.org version to run on our multi-user software here at wordpress.com. It is not the same as the version you have. Please post to the correct forum http://wordpress.org/support

    The differences between worpress.com and wordpress.org are found in the sticky post at the head of the forum
    http://en.forums.wordpress.com/topic.php?id=3700
    http://faq.wordpress.com/2006/05/07/wordpresscom-vs-wordpressorg/

    Best wishes :)

Topic Closed

This topic has been closed to new replies.