Jump to content


Photo

Wordpress theme, lost link to css


  • Please log in to reply
32 replies to this topic

#1 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 12 March 2012 - 05:48 PM

Hi.

I'm trying to follow along the Wordpress Theme From Scratch video tutorial, and have lost the link to my css file. Everything is uploaded to the wp folder on my server (my_page/wp, which is what the top css comment specifies), and I've stared at the code for over an hour now, and can't spot the error.

The weird thing about it is, that in the very beginning of making the css, the file responded. Then the link between the two got lost. So I'm assuming I must have accidentally changed something in the html that affected this, but I can't spot it (yep, total newbie)

Any idea on how to troubleshoot this?


Best
Th
  • 0

#2 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 12 March 2012 - 05:59 PM

On my made-from-scratch WP site, the code for the link to the stylesheet looks like this:

<link rel="stylesheet" href="http://myUrl.com/wp-...heme/style.css" type="text/css" media="screen" />

"myurl" and "myTheme" of course for you should be whatever your domain and your theme name are, but other than that, that's what you need in your code.

And the relevant code in your header.php should be:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Does that help?
  • 0

#3 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 12 March 2012 - 06:17 PM

Thanks for reply Andrea..

As expected, the code for my link is:
<link rel="stylesheet" href="http://myurl.com/wp/...heme/style.css" type="text/css" media="screen" />
(wp is set up in a /wp directory)

The code in my index.php head is just as you typed...
  • 0

#4 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 12 March 2012 - 07:58 PM

And your stylesheet has the proper name and is in the right folder?

Do you have a link to your site?
  • 0

#5 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 03:38 AM

stylesheet is called style.css, and is in the root wp folder (together with index.php) thorirvidar.com/wp/wp-content/themes/120312_template
site is at thorirvidar.com/wp/
  • 0

#6 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 13 March 2012 - 05:23 AM

Looking at the source code to your site, you stylesheet should be here:

http://thorirvidar.c...plate/style.css

thorirvidar.com/wp/wp-content/themes/120312_template/style.css

But it is not. All I see is your Page-not-Found page.

You need find your style.css and move it into the 120312 template folder per above link.

If it is there for some reason, post whatever you have inside, here.
  • 0

#7 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 05:51 AM

First, I really appreciate that you're taking the time to look at this. Many thanks for that.

As for the .css file, here is a screenshot.


I hadn't tried typing in the actual .css webadress to look for it, and you're right, it doesn't seem to be there.
But as you see in the screenshot, it is, only it doesn't show up.... :(
  • 0

#8 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 05:52 AM

and the css top comment:

/*

Theme Name: 120312_template
Theme URI: http://thorirvidar.com/wp/
Description: Simple Wordpress Theme
Version: 1.0
Author: Thorir V


*/
  • 0

#9 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 05:59 AM

oh, what I said earlier about the index and .css files being in the root /wp folder was incorrect of course.
  • 0

#10 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 13 March 2012 - 07:04 AM

Hmmmm - that is odd.

I have two theories left:

First, please copy and paste the ENTIRE code inside your css file here - maybe there's something strange going on in there.

The second possibility that comes to mind, is that maybe you have a hidden extra extension of .txt on your CSS - (but I tried to open style.css.txt, and that did not work, either) but it's worth a try: Start at post # 6:
http://www.killersit...509

This is probably a long shot, but I have no other guesses.
  • 0

#11 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 07:20 AM

There shouldn't be a .txt, in that case it should be at the end of the index file as well, as both are created with the same text editor (text wrangler)


Anyway, here's the .css (at this stage in the course (top level navigation), cause I want to solve this before moving on. It doesn't make much sense to be following the further edits until I can figure out this link issue,.. which brings me to... I'm using the latest version of wordpress, while the tutorial was made while it was in 2.x. Am I correct by assuming that doesn't matter?)


-
/*

Theme Name: 120312_template
Theme URI: http://thorirvidar.com/wp/
Description: Simple Wordpress Theme
Version: 1.0
Author: Thorir V


*/

*
{
padding: 0 0;
margin: 0 0;
font-family: Helvetica, Arial, Sans-serif;
}
body
{
background: #A0cc44;
}

.canvas
{
width: 900px;
margin: 0 auto;
background: #FFFFFF;
}
.header
{
padding: 10px;
padding-left: 0px;
padding-bottom: 0px;
padding-right: 0px;
background: #EEEEEE;
}
.header h1 a
{
text-decoration: none;
color: #000;
}
.header h1 a:hover
{
color: #333;
}
.header h2
{
font-size: 10pt;
padding-bottom: 5px;
}

.content
{
margin-top: 10px;
margin-left: 10px;
}
.post
{
background: #EFEFEF;
padding: 10px;
margin: 10px;
}
.post h1
{
font-size: 13pt;
}
.post h2
{
font-size: 10pt;
font-weight: normal;
top: 10px;
}
/* navigation */
.nav
{
background: #A0AA44;
padding: 5px;
}
.nav li
{
display: inline;
}
.nav li a
{
text-decoration: none;
padding: 5px 15px;
color: #FFF;
font-size: 15pt;
}
.nav li a:hover
{
text-decoration: underline;
background: #FFF;
color: #000;
}
  • 0

#12 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 13 March 2012 - 08:07 AM

Your stylesheet looks like it should, so I'm at a loss.

The version doesn't matter - I used the same tutorial and had no problems adapting it to newer versions. I'll alert Susie, our WP expert, to see if she has any ideas.
  • 0

#13 Stefan

Stefan

    Stefan Mischook

  • Administrators
  • 4,161 posts
  • LocationMontreal Canada

Posted 13 March 2012 - 09:14 AM

Sounds like a CSS linking issue. Please recheck your code ... but first, take a day or two off to give your eyes a rest and you will probably see the problem.

... Often times this strategy works. I know from experience.

Stefan
  • 0
StudioWeb makes teaching web design and programming easy: StudioWeb

#14 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 09:39 AM

Thanks a lot, Andrea for all the time you've put into this already, and Stefan - I guess you have a point there ; )

Now... afk for a while :)
  • 0

#15 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 13 March 2012 - 10:14 AM

How odd. Can you post the entire contents of your .htaccess file so we can take a look?
  • 0

#16 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 13 March 2012 - 10:36 AM

Do you recall if you did something out of the ordinary between your CSS last working and not working - like moving your files or folders around?

Just another hunch based on Susie's comment re your htaccess)
  • 0

#17 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 01:29 PM

@Andrea; Nope, didn't change anything in the file structure. But as I mentioned in an earlier post to this thread, it worked (in the very beginning), and then I lost the link.

@Susie; the .htaccess file:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /wp/index.php [L]
</IfModule>

# END WordPress
  • 0

#18 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 13 March 2012 - 02:08 PM

Can you switch to a different theme for a moment, see if the CSS works there, and if so - look at those paths and codes - maybe you find the 'un'common denominator.

Just grasping at straws at this point, but something's gotta solve this issue........
  • 0

#19 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 02:22 PM

With the 2010 theme activated (latest, slightly modified), the code of the page says:
<link rel="stylesheet" type="text/css" media="all" href="http://thorirvidar.c...yten/style.css" />

and it works..
  • 0

#20 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 13 March 2012 - 02:35 PM

Since the Twenty Ten theme works, it's definitely a problem with your link. Can you post the full content of your header.php file?
  • 0

#21 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 02:41 PM

the head of my index.php
(i have no header.php file, so i assumed....)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR...nsitional.dtd">
<html>
<head>

<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>" RSS Feed href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

<?php wp_head(); ?>

</head>
  • 0

#22 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 02:42 PM

the body (if relevant. if not i'll delete this post)



<body>
<div class="canvas">

<div class="header">
<h1><?php bloginfo('name'); ?></h1>
<h2><?php bloginfo('description'); ?></h2>

<div class="nav">
<?php wp_list_pages('title_li='); ?>
</div>
</div>

<div class="content">
<?php if ( have_posts() ) : ?>

<?php while (have_posts()) : the_post(); ?>
<div class="post">
<h1>
<a href="<?php the_permalink(); ?>">

<?php the_title();?>

</a>

</h1>
<h2><?php the_author();?></h2>
<p>
<?php the_content('Read more...'); ?>
</p>
<?php edit_post_link('edit page', '', ' '); ?>
</div>

<?php endwhile;?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('&lt; Older entries'); ?></div>
<div class="alignright"><?php previous_posts_link('Newer entries &gt;'); ?></div>
</div>

<?php
else:
?>
<h2>Not Found</h2>
<p>
Sorry, I can't find what you are looking for.
</p>



<?php
endif;
?>
</div>

</div>
</body>

</html>
  • 0

#23 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 13 March 2012 - 02:50 PM

I haven't checked out the WP videos here, so I'm not sure why you don't have a header.php file. Every theme I've ever created or worked with has always had one. (http://codex.wordpre...eme_Development)

Did the videos specifically tell you not to include one?

If you would like to create a temporary user for me (with admin access) and then PM me with the login, I'd be happy to log in and take a look.
  • 0

#24 Andrea

Andrea

    Advanced Member

  • Moderators
  • 5,681 posts
  • Facebook:https://www.facebook.com/aandbwebdesignAB
  • LocationSan Antonio, TX

Posted 13 March 2012 - 03:18 PM

The video does include a header.php file - and maybe the fact that it's missing is the answer to this problem.
  • 0

#25 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 03:21 PM

goodlord, you people are amazing!

I was only about halfway through the tutorial when the link broke. At that point we were only working with index.php and a style.css, but I see the project files include a number of other files, including header.php.

(pm sent)
  • 0

#26 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 03:26 PM

Well, the tutor is working locally, while I uploaded the files to my wp setup on my server. If that can be an issue. But if I'm not mistaken, at this point in the tutorial, he too only had these two files in his working folder; index.php and style.css
  • 0

#27 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 13 March 2012 - 03:37 PM

Was the tutor just starting out with an index and stylesheet to later be cut up into the various WP files? I kind of think it wasn't a working theme just yet....
  • 0

#28 Susie

Susie

    Advanced Member

  • Advanced Member
  • PipPipPipPip
  • 3,359 posts
  • LocationColumbus, OH

Posted 13 March 2012 - 03:54 PM

Well, I logged in and poked around and the only thing that comes to mind is that you need a header.php file. Since you aren't finished with the videos, maybe your theme is incomplete right now.

Something I notice when going to the stylesheet link ( http://thorirvidar.c...plate/style.css ) is that you can view the source of the page and see the entire index.php file. You shouldn't be able to do that.

Here's an example of how a properly working WP theme's stylesheet should look when you go straight to the file (it's mine): http://goo.gl/T6yCp

Edited by Susie, 13 March 2012 - 03:55 PM.

  • 0

#29 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 03:58 PM

Yes, the only files created at this point in the tutorial, are the index.php, and style.css. No other wp files.

I had been following the code from beginning, and sometimes in the last video or so (top level navigation), he was making changes to his css and was seeing the changes in his browser (working on localhost, which I am not). Then at some point I lost the link to my css, and he carried on, still linking to his css.

(I did realize that a wp theme needs more files, I just expected to be able to follow the code in the tutorial, with my files behaving in the same manner as the tutor's)
  • 0

#30 thorirv

thorirv

    Member

  • Member
  • PipPip
  • 17 posts

Posted 13 March 2012 - 04:05 PM

Yes, I found it really strange that when going to the css file itself, it brings up the file_not_found page.


Well, I think I'll let it rest for a couple of days, then continue with the tutorial and see if I starts to make sense.


In any case, many many thanks for all the input. I greatly appreciate it!


Best
Th
  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users