Turning HTML site into WP site

I have created a site with the help of several wonderful people on the CSS forum that is responsive for my client. I am now ready to turn this into a WP site. I have only done this once before with a page from my own business site. I will need lots of help in doing this. I have several books on the subject and see lots of tutorials out on the Web but look to the experts here to help me as I create my first complete WP site.

My first question as I am looking at some books and tutorials is can I have more than one CSS page? I have noticed that one is to create a CSS page and call it style.css. My site has 3 CSS pages for responsive design. Do I have to call the page “style”? If I can add more than one CSS page, can I leave the names as screen, bigScreen, and smallScreen?

Here is the site as it is now in HTML…http://foxdenwebsolutions.com/CACNR/index.html.

Thanks.

I found a new tutorial - http://thethemefoundry.com/blog/html-wordpress/ - that is helping somewhat. However, I have totally messed up because I have 2 sidebars on the index.html page. I set up 2 pages to account for this. firstSideBar.php and secondSideBar.php. According to the tutorial, I am supposed to cut the index.html code into sections for each php page. This makes sense to me but I am not sure I am cutting it correctly. Below is all the code for each page.

The original index.html code


<!DOCTYPE html>

<!--[if lt IE 7 ]><html lang="en" class="ie ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="ie ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="ie ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" media="screen,projection,tv"/>
<link rel="stylesheet" href="css/bigScreen.css"	media="screen and (min-width:66em)"/>
<link rel="stylesheet" href="css/smallScreen.css" media="screen and (max-width:751px)"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" >
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
<title>Centennial Airport Community Noise Roundtable</title>
</head>
<body>
<div id="pageWrapper">
  <h1> Centennial Airport Community Noise Roundtable </h1>
  <ul id="mainMenu">
    <li><a href="index.html">Home</a></li>
    <li><a href="noise101.html">Noise 101</a></li>
    <li><a href="meeting.html">Meeting Recaps</a></li>
    <li><a href="workplan.html">Workplan</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="newsletter.html">Newsletter</a></li>
  </ul>
  <hr />
 <div class="flexslider">
  <ul class="slides">
    <li>
      <img src="images/1.png" />
    </li>
    <li>
      <img src="images/2.png" />
    </li>
    <li>
      <img src="images/3.png" />
    </li>
     <li>
      <img src="images/4.png" />
    </li>
     <li>
      <img src="images/5.png" />
    </li>
     <li>
      <img src="images/6.png" />
    </li>
    <li>
      <img src="images/7.png" />
    </li>
    <li>
      <img src="images/8.png" />
    </li>
  </ul>
</div>
  <hr />
  <div id="columnWrapper">
    <div id="contentWrapper">
      <div id="content">
        <h2>Recent Posts</h2>
        <div class="post">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
          <!-- .post --></div>
        <div class="post">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
          <!-- .post --></div>
        <div class="post">
          <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
          <!-- .post --></div>
        <!-- #content, #contentWrapper --></div>
    </div>
    <div id="sideBarWrapper">
      <div id="firstSideBar">
      <h2>News</h2>
        <div class="subSection"> <img src="images/placeHolder.png"						alt="placeholder image"	class="plate" />
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <!-- .subSection --></div>
        <div class="subSection"> <img src="images/placeHolder.png"						alt="placeholder image"	class="plate" />
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <!-- .subSection --></div>
        <!-- #firstSideBar --></div>
      <div id="secondSideBar">
        <form id="sideSearch" action="#" method="get">
          <fieldset>
            <input type="text" name="searchText" id="sideSearchText" />
            <input type="submit" class="submit" />
          </fieldset>
        </form>
        <div id="sideLinks" class="subSection">
          <h2>Links</h2>
          <ul>
            <li><a href="http://webtrak.bksv.com/den" target="_blank">Denver Webtrak</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
          </ul>
        </div>
        <div id="calendar" class="subSection">
          <h2>Calendar</h2>
          <table>
            <caption>
            May 2012
            </caption>
            <thead>
              <tr>
                <th scope="col">Sun</th>
                <th scope="col">Mon</th>
                <th scope="col">Tue</th>
                <th scope="col">Wed</th>
                <th scope="col">Thu</th>
                <th scope="col">Fri</th>
                <th scope="col">Sat</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td class="lastMonth">29</td>
                <td class="lastMonth">30</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
              </tr>
              <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
              </tr>
              <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
              </tr>
              <tr>
                <td>20</td>
                <td>21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
              </tr>
              <tr>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
                <td>31</td>
                <td class="nextMonth">1</td>
                <td class="nextMonth">2</td>
              </tr>
            </tbody>
          </table>
          <!-- #calendar.subSection --></div>
          <div id="RSS">
          <h2>RSS Feed</h2>
          <!-- #RSS --></div>
        <!-- #secondSideBar --></div>
      <!-- #sideBarWrapper --></div>
    <!-- #columnWrapper --></div>
  <hr />
  <div id="footer">
    <ul>
       <li><a href="index.html">Home</a></li>
    <li><a href="noise101.html">Noise 101</a></li>
    <li><a href="meeting.html">Meeting Recaps</a></li>
    <li><a href="workplan.html">Workplan</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="newsletter.html">Newsletter</a></li>
    </ul>
    <hr />
    <div class="address"> Arapahoe County Public Airport Authority<br />
      7800 South Peoria Street, Box G-1<br />
      Englewood, CO 80112<br />
      (303) 790-0598 </div>
    <hr />
    <img src="images/cacnr_logo.png" alt="CACNR Logo" /><br />
    &copy; 2012 Centennial Airport Community Noise Roundtable
    <hr />
    <div class="designBy"> Website Design By <a href="http://foxdenwebsolutions.com" target="_blank">Foxden Web Solutions</a> </div>
    <!-- #footer --></div>
  <!-- #pageWrapper --></div>
</body>
</html>

header.php


<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>
<!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" media="screen,projection,tv"/>
<link rel="stylesheet" href="css/bigScreen.css"	media="screen and (min-width:66em)"/>
<link rel="stylesheet" href="css/smallScreen.css" media="screen and (max-width:751px)"/>
<link rel="stylesheet" href="css/flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script type="text/javascript" >
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>
<title>Centennial Airport Community Noise Roundtable</title>
</head>

<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>
<body>
<div id="pageWrapper">
  <h1> Centennial Airport Community Noise Roundtable </h1>
  <ul id="mainMenu">
    <li><a href="index.php">Home</a></li>
    <li><a href="noise101.php">Noise 101</a></li>
    <li><a href="meeting.php">Meeting Recaps</a></li>
    <li><a href="workplan.php">Workplan</a></li>
    <li><a href="about.php">About Us</a></li>
    <li><a href="newsletter.php">Newsletter</a></li>
  </ul>
  <hr />
 <div class="flexslider">
  <ul class="slides">
    <li>
      <img src="images/1.png" />
    </li>
    <li>
      <img src="images/2.png" />
    </li>
    <li>
      <img src="images/3.png" />
    </li>
     <li>
      <img src="images/4.png" />
    </li>
     <li>
      <img src="images/5.png" />
    </li>
     <li>
      <img src="images/6.png" />
    </li>
    <li>
      <img src="images/7.png" />
    </li>
    <li>
      <img src="images/8.png" />
    </li>
  </ul>
</div>
  <hr />


index.php


<?php get_header(); ?>

<div id="columnWrapper">
<div id="contentWrapper">
  <div id="content">
    <h2>Recent Posts</h2>
    <div class="post">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
      <!-- .post --></div>
    <div class="post">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
      <!-- .post --></div>
    <div class="post">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis ligula nibh. Quisque erat neque, facilisis in rhoncus ut, porta in risus. Vestibulum condimentum tincidunt orci, vel condimentum orci egestas at. Quisque vel lorem in diam pellentesque vulputate. Donec lacinia, orci eu convallis luctus, ipsum erat mollis mauris, a sagittis velit lectus et nunc. Aliquam nisi metus, dapibus nec molestie ac, congue rutrum risus. Fusce sit amet posuere arcu. Fusce id pharetra mi. Fusce et leo in felis euismod accumsan in sit amet augue. Nullam porta, nisi nec mollis consequat, felis quam pulvinar lacus, at ullamcorper odio ipsum id nibh. </p>
      <?php
			/* Run the loop to output the posts.
			 * If you want to overload this in a child theme then include a file
			 * called loop-index.php and that will be used instead.
			 */
			 get_template_part( 'loop', 'index' );
			?>
      <!-- .post --></div>
    <!-- #content, #contentWrapper --></div>
</div>
<?php get_firstSidebar(); ?>
<?php get_secondSidebar(); ?>
<?php get_footer(); ?>

firstSideBar.php


    <div id="sideBarWrapper">
      <div id="firstSideBar">
      <h2>News</h2>
        <div class="subSection"> <img src="images/placeHolder.png"						alt="placeholder image"	class="plate" />
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <!-- .subSection --></div>
        <div class="subSection"> <img src="images/placeHolder.png"						alt="placeholder image"	class="plate" />
          <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
          <!-- .subSection --></div>
        <!-- #firstSideBar --></div>

secondSideBar.php


      <div id="secondSideBar">
      <div id="sideSearch"></div>
        <div id="sideLinks" class="subSection">
          <h2>Links</h2>
          <ul>
            <li><a href="http://webtrak.bksv.com/den" target="_blank">Denver Webtrak</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
            <li><a href="#">Link 5</a></li>
          </ul>
        </div>
        <div id="calendar" class="subSection">
          <h2>Calendar</h2>
          <div id="RSS">
          <h2>RSS Feed</h2>
          <!-- #RSS --></div>
        <!-- #secondSideBar --></div>
      <!-- #sideBarWrapper --></div>
    <!-- #columnWrapper --></div>
  <hr />

footer.php


   <div id="footer">
    <ul>
       <li><a href="index.html">Home</a></li>
    <li><a href="noise101.html">Noise 101</a></li>
    <li><a href="meeting.html">Meeting Recaps</a></li>
    <li><a href="workplan.html">Workplan</a></li>
    <li><a href="about.html">About Us</a></li>
    <li><a href="newsletter.html">Newsletter</a></li>
    </ul>
    <hr />
    <div class="address"> Arapahoe County Public Airport Authority<br />
      7800 South Peoria Street, Box G-1<br />
      Englewood, CO 80112<br />
      (303) 790-0598 </div>
    <hr />
    <img src="images/cacnr_logo.png" alt="CACNR Logo" /><br />
    &copy; 2012 Centennial Airport Community Noise Roundtable
    <hr />
    <div class="designBy"> Website Design By <a href="http://foxdenwebsolutions.com" target="_blank">Foxden Web Solutions</a> </div>
    <!-- #footer --></div>
  <!-- #pageWrapper --></div>
</body>
</html>

I also believe that I have to set up php pages for the different HTML pages I currently have. This this correct? Do I do the exact same thing with each page (i.e. cut up code and then add get header get sidebar and get footer?).

You can make all, responsive design and different layouts, in one css file. There’s no need to make different css files for that. And it’s nothing to do with WordPress. What is your problem with Wordpress actually?

I am going off of some help that another Sitepointer did for me for the responsive design. He made 3 separate CSS files because that is how he works.

The problem is that I am not sure it is “sliced” correctly. This is a local install of WP to test this to make sure it all works. That is why I included the html file so everyone could see how the code looks before adding to php. The link to the html site is here - http://foxdenwebsolutions.com/CACNR/index.html. The header and nav I want in the header php file. The main content, which will be puling from the other pages that the client will use, will be for recent posts on those other pages, the left sidebar will be for news and the right sidebar will be for the search feature, a calendar, links to other sites, and an RSS feed. Not sure if the client wants any more widgets. Then comes the footer. The other pages are 2 column while the index page will be 3 column.

Please look at the code I included above to see where I failed. When I look at the site I am getting a fatal error concerning this line - <?php get_firstSideBar(); ?>. I noticed that I set up the page as firstSideBar so I changed the code and am still getting an error. I don’t know if I sliced incorrectly or if the code is incorrect.

Wow I just realized while still playing with the code that it is not even reading the screen.css page which I changed the name of to style.css and dropped it into the root of the theme folder. It seem to be reading it as a 960px website. I am so confused.

You can make it like this:

  1. make the header.php

  2. make different templates pages like home-page.php, onecolumn-page.php etc.

  3. make footer.php
    Than for example in home-page.php you first call header than you have the code for that page and that call the footer.
    And if you replace your code in page template between calling the header and the footer with for example:

     &lt;?php if ( have_posts() ) : ?&gt;
     &lt;?php /* Start the Loop */ ?&gt;
     &lt;?php while ( have_posts() ) : the_post(); ?&gt;
     &lt;?php the_content(); ?&gt;
     &lt;?php endwhile; ?&gt;
     &lt;?php else : ?&gt;
     &lt;?php endif; ?&gt;
    

you can put all your code in wordpress admin area in page content and use your page template.

Creating a new WP theme can be quite tricky. It’s worth looking at a few tutorials that can take you through the process step by step, such as

http://blog.themeforest.net/wordpress/wordpress-for-designers-day-3/
http://pageaffairs.com/web/cms/adapting-a-wordpress-theme/

Yay Ralph you handle WP as well. I am currently going through the tutorials you pointed out. I just have a quick question since you know the build that Jason so kindly did for me. He has 3 CSS pages for the different sizes of screens. How do I get them all to be utilized since I have to have ‘style.css’ outside my CSS folder and in the root area. Right now the site is NOT responsive at all. I have attached a screenshot of the index page. My monitor is 24" and my resolution is 1920x1200. The browser window is opened to fill the screen. Going through the CSS pages, it seems that screen.css is this one, which is the one I copied to style.css so it would be the dominant one. I am wondering if I should combine all the CSS pages. However, I would need to tweak the code so that it doesn’t conflict on the one page and I am not quite sure how to do that.

You could combine them into one style sheet, but you can also have your style sheets anywhere you like, and as many as you like, even in WordPress. You can just place the links to the style sheets in your theme (in the head section of the page, as usual). The first thing to do is go through those links to see how to build your won theme. Then hopefully it will be clear that you can more or less build the template just as before … except that it will be broken up into a few bits behind the scenes.

I have downloaded the Yoko theme and created a child theme from that. I am following the Adapting a WordPress Theme tutorial for it. Since Yoko is responsive, hopefully this works…or do you suggest that I start with a clean slate and not do a child theme from an existing theme?

Changed that…working off the 2010 theme that came with WP.

That would be my suggestion, but I’m not very experienced with WP, so someone more knowledgeable may give better advice. Since you already have your HTML and CSS, no HTML or CSS from another theme is likely to be worth anything to you, so the first thing to do would be to delete any of that stuff. That’s why it seems best to me just to duplicate the classic theme and work from that.

So anyone else want to comment on starting with a clean sheet and coding everything myself or creating a child theme from an existing theme and working off of that? The only thing I can think of is that the child theme might have a bunch of stuff I don’t need and I won’t know how to get rid of it, but if I start clean and work from there, I am only creating what I need.

I really need help! I found something that said to use includes on the primary CSS page to call the other pages but that didn’t work. I CANNOT combine the different CSS pages into one. I have the main style.css and bigScreen.css and smallScreen.css and flexslider.css. How can I call all of these CSS pages in my header.php page? I also have JavaScript that needs to work with the slider. That is in a folder labeled js. Please help me code my header page correctly.

screen.css or style.css


/* null margins and padding to give good cross-browser baseline */
html, body, address, blockquote, div, form, fieldset, caption, h1, h2, h3, h4, h5, h6, hr, ul, li, ol, ul, table, tr, td, th, p, img {
	margin: 0;
	padding: 0;
}
img, fieldset {
	border: none;
}
* {
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
}
@font-face {
	font-family: 'Conv_segoesc';
	src: url('../fonts/segoesc.eot');
	src: local('&#9786;'),
	 url('../fonts/segoesc.woff') format('woff'),
	 url('../fonts/segoesc.ttf') format('truetype'),
	 url('../fonts/segoesc.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}
hr {
	/* hr in my code are for non screen.css users and semantics */
	display: none;
}
body {
	text-align: center; /* center #pageWrapper IE 5.x */
	font: normal 85%/150% arial, helvetica, sans-serif;
	color: #FFF;
	background-color: #000;
	background-image: url(../images/pageBG2.jpg);
	background-repeat: no-repeat;
	background-position: center top;
}
p {
	text-align: left;
	padding: 0 1em 1em;
}
#pageWrapper {
	min-width: 752px;
	max-width: 66em;
	width: 90%;
	margin: 0 auto;
}
* html #pageWrapper {
	/*
		IE 6 and lower don't know min/max-width, give them crappy little
		stripe fixed width -- OH WELL! They should be thankful we bother
		supporting them at all.
	*/
	width: 752px;
}
h1 {
	padding: 24px 0;
	font-family: "Conv_segoesc", arial, helvetica, sans-serif;
	font-size: 36px;
	font-style: italic;
	line-height: 40px;
}
#content post p, #twoCol_content post p a:link {
	color: #FFF;
	text-decoration: none;
}
#content post p, #twoCol_content post p a:visited {
	text-decoration: none;
	color: #F00;
}
#content post p, #twoCol_content post p a:hover {
	text-decoration: underline;
	color: #9ED3ED;
}
#content post p, #twoCol_content post p a:active {
	text-decoration: none;
	color: #39F;
}

#mainMenu {
	list-style: none;
	padding: 0 8px 24px;
	font: bold italic 16px/18px arial, helvetica, sans-serif;
}
#mainMenu li {
	display: inline; /* don't even waste time trying to do more with these! */
}
#footer ul a, #mainMenu a {
	white-space: nowrap;
	padding: 0 8px;
	text-decoration: none;
	text-transform: uppercase;
	color: #FFF;
}
#footer ul a:active, #footer ul a:focus, #footer ul a:hover, #mainMenu a:active, #mainMenu a:focus, #mainMenu a:hover {
	color: #DEF;
	text-shadow: -2px -2px 4px #08F,  2px 2px 4px #08F;
}
#columnWrapper {
	margin-bottom: 24px;
	border: 1px solid #FFF;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
}
.subSection {
	margin-bottom: 1em;
}
h2 {
	margin: 0 0.8em;
	padding: 0.2em 0.8em 0.1em;
	text-transform: uppercase;
	font: bold italic 125%/120% arial, helvetica, sans-serif;
	color: #000;
	background: #6BD url(../images/h2Background.png) top left repeat-x;
	border: 2px solid #000;
	box-shadow: 0 2px 6px #432;
}
h2, #secondSideBar .subSection {
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
#columnWrapper {
	position: relative;
	padding: 1em 1em 0;
	overflow: hidden; /* wrap floats */
	zoom: 1;
	background-image: url(../images/content_bg.png);
	background-repeat: repeat;
}
#contentWrapper {
	float: left;
	width: 100%;
}
#content {
	margin-right: 21em;
}
#twoCol_content  {
	margin-right: 21em;
}
#content .post {
	padding-bottom: 64px;
	background-image: url(../images/separator.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}
#twoCol_content .post {
	padding-bottom: 64px;
	background-image: url(../images/separator.png);
	background-repeat: no-repeat;
	background-position: center bottom;
}

#content .post p {
	/*
		with that airplane image on the wrapper,
		looks better with the top/bottom paddings flipped
	*/
	padding: 1em 1em 0;
}
#twoCol_content .post p {
	/*
		with that airplane image on the wrapper,
		looks better with the top/bottom paddings flipped
	*/
	padding: 1em 1em 0;
}

#sideBarWrapper {
	float: left;
	width: 20em;
	margin-left: -20em;
}
#content, #twoCol_content, #firstSideBar, #secondSideBar {
	padding: 1em 0;
	border: 1px solid #FFF;
	-webkit-border-radius: 1em;
	-moz-border-radius: 1em;
	border-radius: 1em;
}
#firstSideBar, #secondSideBar {
	margin-bottom: 1em;
	padding-bottom: 0;
}
#sideBarWrapper .subSection {
	margin: 0 1em 1em;
}
#secondSideBar .subSection {
	border: solid #000;
	border-width: 0 1px 1px;
	box-shadow: 1px 2px 4px #321;
}
#secondSideBar .subSection h2 {
	margin: 0 -4px 0.8em;
}
.plate {
	display: block;
	margin: 0 auto 0.5em;
}
#sideSearch {
	padding-bottom: 1em;
}
#secondSideBar .subSection {
	color: #000;
	background: #FFF;
}
#sideLinks ul {
	padding: 0 1em 0.5em;
	list-style: none;
	text-align: left;
}
#sideLinks li {
	padding-bottom: 0.5em;
}
#calendar {
	padding-bottom: 0.5em;
}
#calendar table {
	width: 95%;
	margin: 0 auto;
}
#calendar .lastMonth, #calendar .nextMonth {
	color: #888;
}
#RSS  {
	padding-bottom: 0.5em;	
	}
#footer {
	overflow: hidden; /* wrap floats */
	zoom: 1; /* trip haslayout, wrap floats IE */
	text-align: left;
}
#footer ul {
	text-align: center;
	list-style: none;
	font-weight: bold;
	padding-bottom: 1em;
	line-height: 2em;
}
#footer ul li {
	display: inline;
}
#footer .address {
	float: right;
	white-space: nowrap;
	text-align: right;
	font-weight: bold;
	padding: 2.5em 0;
}
#footer img {
	margin: 1.5em 0 1em;
}
#footer .designBy {
	clear: both;
	text-align: center;
	padding-bottom: 1em;
}

bigScreen.css


#pageWrapper {
	max-width:86em;
}

/* 'border' causes issues so extra tenth of a em margins/widths */

#content {
	margin:0 21.15em 1em;
}
#twoCol_content  {
	margin:0 21.15em 1em .5em;
}
#sideBarWrapper {
	float:none;
	width:auto;
	margin:0;
}

#firstSideBar,
#secondSideBar {
	position:relative;
	float:left;
	width:20em;
	margin-left:-20.15em;
}

#firstSideBar {
	margin:0 -20.15em 0 0;
	left:-100%;
}

#footer {
	text-align:center;
}

#footer ul {
	display:block;
	float:left;
	text-align:left;
	width:21em;
}	
#footer .address {
	width:20em;
	margin-right:1em;
}

#footer ul li {
	display:block;
}

smallScreen.css


#pageWrapper {
	min-width:192px;
	width:100%;
}

.flexslider,
#columnWrapper,
#sideBarWrapper,
#contentWrapper,
#content, #twoCol_content,
#firstSideBar,
#secondSideBar {
	float:none;
	width:auto;
	margin:0;
	border:0;
	-moz-border-radius:0;
	-webkit-border-radius:0;
	border-radius:0;
}


#columnWrapper {
	padding:0;
}

.flexslider,
#content, #twoCol_content,
#firstSideBar {
	border-bottom:4px solid #000;
}

h1 {
	padding:12px;
}

#mainMenu {
	line-height:2em;
	padding-bottom:12px;
}


#sideBarWrapper .subSection {
	margin:0 0.5em 1em;
}

#sideBarWrapper .subSection p {
	padding:0 0 1em;
}

.flexslider {
	padding:1em 0 0;
}

#sideBarWrapper p,
#content .post p, #twoCol_content .post p {
	padding:1em 0.5em 0;
}

#calendar {
	padding-bottom:1em;
}

#footer {
	padding:1em 0;
	text-align:center;
}

#footer ul,
#footer .address {
	float:none;
	text-align:center;
	padding:0.5em 0;
}

@media screen and (max-width:272px) {
	#calendar {
		font-size:12px;
	}
	#content .post, #twoCol_content .post {
		background-position:bottom right;
	}
}

flexslider.css


/*
 * jQuery FlexSlider v1.4
 * http://flex.madebymufffin.com
 *
 * Copyright 2011, Tyler Smith
 * Free to use under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */

/* FlexSlider Necessary Styles
*********************************/
.flexslider {margin-bottom: 24px;
	border: 1px solid #FFF;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;}
.flexslider .slides li {display: none; list-style:none;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {max-width: 100%;}


/* FlexSlider Default Theme
*********************************/
.flexslider {padding: 1em 1em 1em;
	background: url(../images/slider_bg.png) repeat; position:relative;}
.flexslider .slides  li {position: relative; display: none;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flexslider-container {position: relative;}

/* Direction Nav */
.flex-direction-nav {list-style: none;}
.flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background: url(../images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}

/* set negative margin-top equal to half the height on the directional-nav for perfect vertical centering */
.flex-direction-nav li a.next {background-position: -52px 0; right: -21px;}
.flex-direction-nav li a.prev {background-position: 0 0; left: -21px;}

/* Control Nav */
.flex-control-nav {margin-left: -55px; position: absolute; bottom: 5px; left: 50%;} /* set negative margin-left equal to half the width on the control-nav for perfect centering */
.flex-control-nav li {margin: 0 0 0 5px; float: left;}
.flex-control-nav li:first-child {margin: 0;}
.flex-control-nav li a {width: 13px; height: 13px; display: block; background: url(../images/bg_control_nav.png) no-repeat 0 0; cursor: pointer; text-indent: -9999px;}
.flex-control-nav li a:hover {background-position: 0 -13px;}
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}

I did learn how to get the left and right sidebars called properly…

<?php get_sidebar(left); ?>
<?php get_sidebar(right); ?>

Converting HTML to Wordpress really isn’t as easy as it is made out to be. :frowning:

How can I call all of these CSS pages in my header.php page?

You can add links to each one separately. E.g.

<link type="text/css" media="screen, tv, projection" rel="stylesheet" href="screen.css">
<link type="text/css" media="screen, tv, projection" rel="stylesheet" href="bigScreen.css">
<link type="text/css" media="screen, tv, projection" rel="stylesheet" href="smallScreen.css">
<link type="text/css" media="screen, tv, projection" rel="stylesheet" href="flexislider.css">

I CANNOT combine the different CSS pages into one.

If you aren’t too worried about older browsers, you can do it with media queries, by placing the various styles inside your one stylesheet wrapped in code like this:


/* big screen styles */

@media only screen
and (min-width: 1100px) {

 [I] ... styles here ...[/I]

}

I guess it’s not really practical to leave out IE8 and under, although you could use conditional comments for those instead.


Thanks Ralph. I was watching a video and the path is actually -
<link rel=“stylesheet” href=“wp-content/themes/cacnr/css/bigScreen.css” media=“screen and (min-width:66em)”/>

When you have the style.css you would use
…href=“<?php bloginfo( ‘stylesheet_url’ ); ?>” />

So I am wondering if I can change stylesheet_url to something that would work. I am worse than a novice when it comes to PHP. Even though what I have above actually works, the idea of PHP and WP is to make things simpler with less code.

I cannot give the link to the site as I am working on it locally and from what I have read cannot upload to my business site because it will interfere with my blog page that I have as part of my business site. I would like to have several instances of WP running either locally or remote so that I can work on several projects at once but I don’t know how to accomplish this.

Another problem is still getting my sidebars to show correctly. Here is how it looks right now. I want pages, archives, categories, and meta out and what I have in the original right sidebar in.

You can just ditch that PHP reference if you like and use a bunch of links like I gave above. You don’t have to use the WP system of linking to a CSS file.

I would like to have several instances of WP running either locally or remote so that I can work on several projects at once but I don’t know how to accomplish this.

I believe you can simply store them in different folders and they will work independently (each with its own separate database). I’m not much of a WP guy, though, having only tinkered with it some years ago, so there’s a limit to how much help I can offer. (I moved on to much more intuitive and well designed CMSes. :slight_smile: )

If you work locally on xamp or wamp it very easy - just make another catalog with new wp files and new database in phpmyadmin.
If you have possibility in your hosting plan to make more databases it’s also possible online as you can use subdomains for example to test new site.

<link rel=“stylesheet” href=“wp-content/themes/cacnr/css/bigScreen.css” media=“screen and (min-width:66em)”/>

When I changed this back to href=“css/bigScreen.css” it did not work nor do the other CSS pages like the flexslider.css page. so somehow WP is not reading it correctly or you HAVE to have the exact path. When a WP index.php page is rendered, it is coming off of the index.php in the main area of WP, not in themes-index.php. At least that is what I am seeing. So when using this path the index.php is looking for files to be in a folder in the same root area, but in actuality the folder is in wp-content (folder) themes (folder) name of theme (folder) css (folder). Maybe it works differently if I was to upload to a server but locally this is how it is working for me.

You can actually put your CSS files anywhere you like, so you could even create your own CSS folder in your root folder, put your files there, and just make sure the link path is correct. E.g.

<link rel="stylesheet" href="/css/bigScreen.css" media="screen and (min-width:66em)"/>

This would, of course, mean that you can’t edit the CSS files through the admin interface, but I don’t see that as a problem, as you can just work on them as you normally would with a CSS file.