Forums

WordPress › Support » Themes and Templates

[resolved] Two css files problem (5 posts)

  1. Fredrik Hedlund
    Member
    Posted 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>

  2. Fredrik Hedlund
    Member
    Posted 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(); ?>

  3. jmag
    Member
    Posted 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');

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

    Hope this helps.

  4. Fredrik Hedlund
    Member
    Posted 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!

  5. Fredrik Hedlund
    Member
    Posted 9 months ago #

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

Reply

You must log in to post.

About this Topic

Tags