My Theme renders differently on lcalhost and webserver

  • Hello!
    I am currently working on my own WP theme. I haven’t done that before, so it’s my beginning with css and wordpress layout. I encountered a very strange problem. The website is here: https://marztest.net63.net/ (it might change, so I will paste some code here).

    When I view this theme on the free hosting server (the address I pasted): it looks exactly as I wanted. But when I view it on my localhost server – the colors of the links are screwed.

    What I want now:
    -links in the menu: white
    -post header links: orange
    -rest: not set – blue

    But on localhost all links are orange. For example, HTML:

    <div class="entry">
												<p>Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!</p>

						<p class="postmetadata">
						Filed under: <a href="https://localhost/wordpress/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a> by admin<br />
						<a href="https://localhost/wordpress/?p=1#comments" title="Comment on Hello world!">1 Comment »</a> 						</p>

					</div>

    When I inspect that link in Firefox it shows no CSS rules set. The computed rule is RGB(0,0,238). But rendered color is orange (#ef4c1f).The only place I set that color in my CSS is:

    .post-header
{
	text-align:center;
	color: #ef4c1f;
}

.post-header a:link, a:visited
{
	font-family: Gabriola, sans-serif;
	font-weight: bold;
	color: #ef4c1f;
	text-decoration: none;
}

.post-header hr
{
	color: #ef4c1f;
	background-color: #ef4c1f;
	height: 1px;
}

    and post-header in HTML is used only here:

    <div class="post-header">
					<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
					 <p><?php the_time('H:i, j.m.Y'); ?></p>
					 <hr/>
				</div>

    What might be causing this?

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

  • What is the link to your stylesheet when you view the site on localhost?

    Also try clearing your browser cache — as stylesheets are cached by some browsers — so that changes are not immediately visible.

    Thread Starter PL_kolek

    (@pl_kolek)

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

    Cleared the cache many times, also tried refreshing with ctrl/shift (don’t remeber which one is correct ;)).

    I meant the rendered html link (i.e. look at the html for the page and see what the link is). In Firefox you can use Page Source…

    Thread Starter PL_kolek

    (@pl_kolek)

    Hah, I didn’t get it ;). Here it is:
    Localhost:
    <link rel="stylesheet" href="https://localhost/wordpress/wp-content/themes/marztheme2/style.css" type="text/css" />

    Remote host:

    <link rel="stylesheet" href="https://marztest.net63.net/wp-content/themes/marztheme2/style.css" type="text/css" />
<link rel='stylesheet' id='admin-bar-css'  href='https://marztest.net63.net/wp-includes/css/admin-bar.css?ver=20111209' type='text/css' media='all' />

    Don’t think the admin css fixes things on remote host…

    What is really strange, it looks like Firefox gets correct html and css, its inspector reads it correctly, but renders wrong. Same with Opera – issues with colors a little different, but still doesn’t look in a way it should.

    Hmm, very strange I agree. Have you validated the pages just to be sure there is not any CSS or HTML errors that might be causing this?

    Thread Starter PL_kolek

    (@pl_kolek)

    That’s what I did. I couldn’t get rid of this on localhost, so I installed the theme on the remote server for validation, but it rendered correctly. But I validated it – there was nothing more, than opened and not closed <hr> and some complaints about script added by hosting service.

    The only thought that is left in my mind is that my localhost server is incorrectly cofigured, but as I am not familiar with apache, I left it with the defaults.

    Here is the image of what is happening:
    https://i47.tinypic.com/2jbv2ut.jpg

    I’m not entirely clear on what the problem is — from the image you just posted, do you want it to be what is marked “crossed”? If so, it looks like maybe a CSS selector issue (i.e. the active code has .menu in front of the link tags…)

    Since it has to do with links (visited/active, etc.) it might also have to do with which of those “states” the links are in on your machine vs. online or how local host deals with those?? Just a guess…

    Thread Starter PL_kolek

    (@pl_kolek)

    As far as I understand CSS, what is marked as crossed, doesn’t matter for the browser, because another property is used to determine (in that case) the color. So the color should be as it marked ‘active’: white. But it is orange. But the crossed color is used all over my site, even though .menu a selector override it.

    Moreover, even when I remove the general a:link, a:active, every link stays orange. Not sure if I stated it clearly enough. I want to have white menu links (and as I see, Firefox detects that) but they are still orange. With the same css and html on the remote server everything is fine.

    But, I am just learning, so my undestanding of what is happening might be (and probably is) poor.

    EDIT: Uploaded to the linked website new version of my layout (work in progress). Still OK on the remote host.

    EDIT2:

    Proble SOLVED. This had nothing to do with localhost. I had incorrectly specified the color of a visited link (wrong selector). After clicking in the remote site I realised it.

    Thank you very much for your help, efforts and time. Sorry for the trouble ??

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘My Theme renders differently on lcalhost and webserver’ is closed to new replies.