Hi, I'm trying to run small WP site with Croatia's photos. I'm using Yet Another Photo Blog (YAPB) plugin, and pht template (pht.inhubi.com). It's very simple template, and I want it to look the same as the justpictures.es (it's based on the same template). My site is http://chorwacjazdjecia.pl/ Now I'm trying to change fonts. Web Developer tool in FF shows me that justpictures is using 'Georgia,serif' I've changed font-family in my css in WP editor: body { font-family: Georgia,serif; font-size: 12px; } h1, h2, h3 { font-family: Georgia,serif; font-weight: normal; font-size: 12px; /* margin-top: 0; */ } Code (markup): Now Web Developer tool shows me that the font on my site is 'Georgia, serif' but visually fonts didn't change. And they are clearly different that the ones on justpictures ... Can anyone help me solving this puzzle?
Yep, looks like the font family is fine now. The problem is with font sizes, I have the same css as justpictures, but still my fonts are different sizes. Anyone knows what is causing this difference ? My css file: /* Theme Name: phT for yapb Theme URI: http://pht.inhubi.com/ Description: Minmalist theme for <a href="http://johannes.jarolim.com/blog/wordpress/yet-another-photoblog/">Yet Another Photoblog Plugin</a>. You <b>MUST</b> deactivate "Activate automatic image rendering in general." on <a href="options-general.php?page=Yapb.class.php">Automatic Image Insertion setction of YAPB settings</a> Version: 2.0.1 Author: Fran Simó Author URI: http://fransimo.info/ */ .img-cont{ margin: 0 auto; padding: 0; text-align:center; /* part of this is generated in header.php */ }http://chorwacjazdjÄ™cia.pl/wp-admin/theme-editor.php?file=/home/mdoliwa/public_html/chorwacjazdjecia/wp-content/themes/phT2/style.css&theme=phT+for+yapb&a=te&scrollto=2528 .img-cont-thumb { padding: 2px; float: left; text-align:center; } .inside { margin:0px auto 0px auto; } #navigation { position: relative; height: 20px; border-bottom: 1px solid; } .prev { position: absolute; left: 0; width: 33%; z-index: 2; text-align: left; } .exif { position: absolute; width: 100%; left: 0; right: 0; margin-left: auto; margin-right: auto; text-align: center; z-index: 1; } .next { position: absolute; right: 0; width: 33%; text-align: right; z-index: 2; } #img-title h2 { float:left; text-align:left; margin-bottom:1px; font-size: 12px; } #img-title h3 { float:right; text-align:right; margin-bottom:1px; } .description { text-align:left; margin-bottom:1px; } /* div IDs */ #page { margin: 0 auto; padding: 0; text-align: center; top: 0px; } #content, #header, #the_content { position: relative; padding: 2px; text-align: left; } #the_content { margin-top: 5px; } #header { top: 2px; } /* This is from nitisha */ .clearfix { display:block; } #header ul { float: right; font-size: 0.9em; text-align: right; text-transform: lowercase; letter-spacing: 0.1em; height: 8px; } #header h1{ float:left; text-align:left; font-size:1em; padding:0px; height:100%; font-weight:bold; } #header li { float: left; list-style-type: none; display: block; height: 100%; text-align: right; } #header li a { float: left; height: 100%; display: block; padding-left: 10px ; text-align: right; } /* End of Nitisha */ /* html */ hr { height: 1px; border : none; } body { font: 80% Georgia, serif; font-size: 11px; } h1, h2, h3 { font-weight: normal; font-size: 11px; /* margin-top: 0; */ } a { text-decoration:none; } a img { border: none; } #comment { position: relative; text-align: left; } #commentform { padding: 5px; } #commentform input { padding: 1px; } #commentform textarea { padding: 1px; } #sidebar{ float:right; width: 25%; } #thumbs { float:left; width: 75%; } HTML: And WP header file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="title" content="<?php wp_title(); ?>" /> <title><?php bloginfo('name'); ?> » <?php bloginfo('description'); ?> <?php wp_title(); ?></title> <meta name="description" content="<?php bloginfo('name'); ?> <?php bloginfo('description'); ?> <?php wp_title(); ?> " /> <meta name="keywords" content="<?php $posttags = get_the_tags(); foreach($posttags as $tag) { echo htmlspecialchars($tag->name).", "; }; ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> Comments Feed" href="<?php bloginfo('comments_rss2_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <style type="text/css" media="screen"> <!-- .img-cont { background: url(<?php echo get_template_directory_uri() ?>/images/loading.gif) no-repeat center; } body { background: <?php echo phT_body_background; ?>; color: <?php echo phT_body_color; ?>; } #page { background: <?php echo phT_page_color_background; ?>; color: <?php echo phT_page_color; ?>; width: <?php echo phT_x+14; ?>px; } #content, #header { width: <?php echo phT_x+2; ?>px; background: <?php echo phT_content_background; ?>; color: <?php echo phT_content_color; ?>; } .img-cont-thumb { width: <?php echo phT_tx; ?>px; height: <?php echo phT_ty; ?>px; } .inside { width: <?php echo phT_x; ?>px; } #commentform textarea { width: <?php echo phT_x-10; ?>px; } a { color: <?php echo phT_a; ?>; } a:visited { color: <?php echo phT_a_visited; ?>; } a:hover { color: <?php echo phT_a_hover; ?>; } #content a, #header a { color: <?php echo phT_a; ?>; } #content a:visited, #header a:visited{ color: <?php echo phT_a_visited; ?>; } #content a:hover, #header a:hover { color: <?php echo phT_a_hover; ?>; } #commentform { background: <?php echo phT_comment_color_background; ?>; color:<?php echo phT_comment_color; ?>; } #commentform input { background: <?php echo phT_comment_input_color_background; ?>;; border: <?php echo phT_border_comment; ?>; color:<?php echo phT_comment_color; ?>; } #commentform textarea { background: <?php echo phT_comment_texta_color_background; ?>; border: <?php echo phT_border_comment_texta; ?>; } #space{ height: <?php echo phT_space; ?>px; } .img-cont img { border: <?php echo phT_border_img; ?>; } .img-cont-thumb img { border: <?php echo phT_border_img; ?>; } #content, #header { border: <?php echo phT_border_content; ?>; } --> </style> <link rel="shortcut icon" href="<?php echo phT_favicon ?>" /> <?php require_once('get_resolution.php'); ?> <?php wp_head(); ?> </head> <body> <div id="page"> <div id="header"> <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1> <ul> <?php wp_list_pages('depth=0&title_li=&sort_column=post_title&sort_order=ASC');?> <?php if (defined("phT_mosaic")) {echo '<li><a href="'.phT_mosaic.'">'.phT_mosaic_string.'</a></li>'; } ?> </ul> <div style="clear:both;"></div> </div> <?php if (!phT_isYAPB()) :?> NOTICE: This theme is designed for <a href="http://johannes.jarolim.com/yapb">Yapb plugin</a>! <?php endif;?> <div id="space"> </div> PHP:
Ok, I've solved the issue. Line font: 80% Georgia, serif; from body in css file should be in the header file instead.
Well, just wanted to have clean white template, and basically it's just changing of colors so I don't think it's stealing. The only "stealing" thing is idea of Georgia font.
Just to point out two things... 1) 12px is a miserable *** /FAIL/ in terms of accessibility, both in terms of it's small size AND that it's a fixed metric (px). 2) You are trusting the default line-height which is not only unpredictable cross-browser (since the specification doesn't even say) it can also result in later on in the page having larger text overlap it's neighbors. 3) You don't mention a style, which could make some older browsers ignore the entire line outright if you use the 'condensed' version. 4) You use uppercase, which some gecko based browsers are still complete ****-tards about using properly. Which is why I would probably use: font:normal 85%/130% georgia,serif; on body.
You also have a url sitting in your CSS which should block some code: }http://chorwacjazdjęcia.pl/wp-admi...yle.css&theme=phT+for+yapb&a=te&scrollto=2528 That needs to go, dunno how that got in there but delete it. Second thing: anyone who doesn't have Georgia will get smaller fonts. Why? Georgia's a large font, has a large x-height compared to other serif fonts. So 12px Georgia is gonna be like 9px Times New Roman on some machine which is absolutely unreadable for the best eyes anywhere.