Two css files problem

  • Resolved Fredrik Hedlund

    (@fredrik-hedlund)


    14 years, 9 months ago

    Hi there.
    I’ve been sort of off the grid for a couple of years when it comes to webdesign, but when a friend of mine asked if I could make her a simple CV-page I accepted. I started out with making a simple css&html-layout and after that my plan was to convert it to a wordpress theme, so my friend wouldn’t have to go through code whenever she wanted to update it.

    The problem I have atm is that the wordpress-theme doesn’t seem to format the page the same way the html-version does. I’m using two seperate css-files, one is in the theme-directory and named “style.css” and the other is located here:
    http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css

    This is the target design (html&css):
    http://www.karinhoffner.se

    And this is how the wordpress-page looks like atm:
    http://www.karinhoffner.se/blog.php

    My header.php looks like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <title><?php wp_title('&laquo', true, 'right'); ?><?php bloginfo('name'); ?></title>

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" media="all" />
<link href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" rel="stylesheet" type="text/css" media="all" /> 

   <?php wp_head(); ?>
</head>

<body>
   <div id="doc2" class="yui-t7">
      <div id="inner">

         <!-- ******* HEADER ******* -->
         <div id="hd">
            <div class="yui-gc">
               <div class="yui-u first">
                  <h1>Karin Hoffner</h1>
                  <h2>Frilansjournalist</h2>

               <!-- *** MENY *** -->
	       <ul id="nav">
                  <li><a href="index.html" class="active">Om mig</a></li>
                  <li><a href="cv.html">CV</a></li>
                  <li><a href="publicerat.html">Publicerat</a></li>
                  <li><a href="kontakt.html">Kontakt</a></li>
               </ul> 

               </div>
            </div>
         </div>

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Fredrik Hedlund

    (@fredrik-hedlund)

    14 years, 9 months ago

    and index.php

    <?php get_header(); ?>

	 <!-- ******* BODY ******* -->
	 <div id="bd">
            <div id="yui-main">
               <div class="yui-b">

		  <!-- *** OM MIG *** -->
                  <div class="yui-gf">
                     <div class="yui-u first">
                     <?php
                     $post_id = 14;
                     $queried_post = get_post($post_id);
                     ?>
                        <h2><?php echo $queried_post->post_title; ?></h2>
                        <!-- <h2>Om mig</h2> -->
                     </div>
                     <div class="yui-u">

                        <p class="bigger">
                        <?php echo $queried_post->post_content; ?>
		        </p>

		     </div>
		  </div>

               </div>
            </div>
         </div>
<?php get_footer(); ?>

    jmag

    (@jmag)

    14 years, 9 months ago

    The problem is the order in which the css files are loading. Since the css from file from Yahoo loads second those are the styles that override the main stylesheet. They both select many of the same elements, and in CSS the newer/last stylesheet wins.

    To fix this what you can do is add this declaration after the Theme declaration, but immediately before your styles in style.css.

    @import url(‘http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css&#8217;);

    This way the sytles you wrote are ‘newer’ than the Yahoo styles.

    Hope this helps.

    Thread Starter Fredrik Hedlund

    (@fredrik-hedlund)

    14 years, 9 months ago

    Aaaah, good point. I’m going to check it out tomorrow (it’s getting late here ;)). Will let you know how it goes. Thanks for the tip!

    Thread Starter Fredrik Hedlund

    (@fredrik-hedlund)

    14 years, 9 months ago

    Like I could keep away … you were right, problem solved.
    Thanks a bunch!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Two css files problem’ is closed to new replies.