I have a option in my Wordpress theme options panel that I made to choose from five different styles. Running Wordpress on localhost if I choose yellow, red, green, blue or black the style is applied correctly and everything works fine. The code I'm using in header.php is this:
<link rel="stylesheet" type="text/css" media="screen"
href="<?php bloginfo('template_directory'); ?>/css/<?php echo get_option('of_cssstyles'); ?>.css" />
But when I install the same theme on the web I get a webpage with absolutly no CSS style, you can see it here: (http://macoverflow.org/p3dra/), as you can see no CSS style is beeing applied.
How to fix this?
The stylesheet you are linking to doesn't exist. You need to upload it to the server or link to somewhere it is uploaded.
edit: going to: http://macoverflow.org/p3dra/wp-content/themes/blankfolio/css/ shows that the stylesheet is actually called "yellow.css", but the page you are linking to is "Yellow.css" note the case of the "y".
Did you upload your stylesheets to the server?
Did you set the permissions on the stylesheet to be readable by apache?
I received the following by looking at the final html codein the finished page:
http://macoverflow.org/p3dra/wp-content/themes/blankfolio/css/Yellow.css
This is not found.
whats he is saying is the file name is caase sensitive so Yellow.css and yellow.css are two different files in the eyes of the apache, they are as different as having one called yellow.css and he other called pink.css , the detail is in the first letter, being a capital.
Related
Disclaimer: I haven't got a clue what I'm doing with PHP I'm just playing around with it.
I have my css file in a folder named CSS and then my header.php and footer.php in the main site folder. If i include the header.php in other directories I am just using:
<?php include('../header.php'); ?>
I know this isn't the way to do it however I don't know how to configure it probably (with a config.php file etc..) but my issue is, once the header's included in files in any directory of course it will look for the css/main.css file in that folder so I've tried doing the following:
<link rel="stylesheet" href="<?php echo $_SERVER['DOCUMENT_ROOT']. '/JAGS/css/main.css' ?>" />
When I use the php line in the body it displays the path
E:/xampp/htdocs/JAGS/css/main.css
but if I use it there in the link tag then doesn't work.
What seems to be my problem other than the fact I'm clueless with PHP. Is there something else I should be using? Is there something I need to do in my xampp config files?
Edit: By "doesn't work" I mean the styles are not being applied.
Edit 2: Inspecting shows the following:
<link rel="stylesheet" href="E:/xamppp/htdocs/JAGS/css/main.css">
I know there's an extra p on the end of xampp, this is actually what I have the folder named. Is it because it's not saying "localhost/JAGS/CSS/main.css"? If so what would be the reason for this?
Edit 3: Console shows error below:
Not allowed to load local resource: file:///E:/xamppp/htdocs/JAGS/css/main.css
Edit 4: Not using Laravel
Thank you
Why do you require the document root, you should just place a dot in front of it and set the base url in a meta tag.
<base href="yourdomain.com">
<link rel="stylesheet" href="./JAGS/css/main.css'/>
for my assignment next week we have to know following:
We get a template (not a Joomla template, but a website template with existing html and css + images). This template we have to "import" into Joomla and then add the menus, articles, etc. in Joomla for it
We have to just delete the protostar template files and paste in the template files, then rename the index.html to index.php
When I do this it works however with no css (because of the paths to css and images).
For example the standard path from my template is this:
<link rel="stylesheet" href="css/animate.css">
This, however, won't work.
I tried a few things and that worked:
<link rel="stylesheet" href="templates/protostar/css/animate.css">
But I don't know why templates/protostar is the root? I thought the root is the folder in which the index.php is located?
If I do the same with the images
<div class="fh5co-portfolio-figure animate-box" style="background-image: url(images/work_1.jpg);"></div>
to <div class="fh5co-portfolio-figure animate-box" style="background-image: url(templates/protostar/images/work_1.jpg);"></div>
this won't work. So the pictures still won't show on the page.
So could anyone explain to me that behavior and how to do this right?
I set an icon like that:
<link rel="icon" type="image/x-icon" href="/media/icon.ico">
<link rel="shortcut icon" type="image/x-icon" href="/media/icon.ico">
and I also tried this:
<link href="/media/icon.ico" rel="shortcut icon" type="image/x-icon" />
It works only in some parts of my website, but I don't know what I'm doing wrong. Is there something that I have to consider?
I use PHP and HTML. I don't know if it's coincidence or not, but it works with every HTML file and only with some of the PHP files.
Can anybody help me?
shivan
You'll need to make sure the URL (href) is valid for the page you are viewing.
Remember / is site level (/media/icon.ico = http://yourdomain.com/media/icon.ico).
Also make sure it is a valid .ico file. I recommend trying a .jpg file instead. (.png, .jpg, .gif and .ico are all valid favicon formats)
As well, depending on the icon size, it may not work in all browsers.
16x16 is the recommend size for favicons, but 32x32 may work as well.
Here is a link that should tell you everything about favicons: http://perishablepress.com/everything-you-ever-wanted-to-know-about-favicons/
If it only appears for your html pages and not your php ones, then you may be adding the link tag incorrectly or it may also be missing.
I suggest you use the developer tools of your browser (right-click anywhere on your page and choose Inspect Element - Chrome, Firefox) when you're on your php pages and check if you see the tag added correctly having the exact same path set there as in your html pages. Using developer tools you should also be able to hover over the link and it would tell you if the image existed or not.
I bet the path will be incorrect somehow depending on the placement of your php files versus the html ones and the icon.
Try accessing those pages from another browser. Also, try accessing them from a browser in incognito/private mode.
If you do see the favicon, try cleaning your browser's cache - it could be that something is left over from the last time you browse those pages (i.e. before you added the favicon to the HTML).
I had trouble getting this to work for me without using a direct link.
For example on my site: http://adamgressen.com/
I reference the image with a direct link:
<LINK rel="SHORTCUT ICON" href="http://adamgressen.com/favicon.ico">
You definitely want to clear your cache if you're testing locally because you may not see the changes for a while otherwise.
I just built a sit in Codeigniter, but when I click on a menu item the stylesheet breaks and it displays all of the content broken out on the page.
http://marciabrownproductions.com/
I uploaded it to a test server and all the links works perfectly.But when I uploaded the finished site ot my clients server the css issue starts. Is there something wrong with my clients server? Or is there a problem with how I coded the site? Why does it work on one server, but not the other.
Thanks!
First, I recommend using absolute paths instead of relative paths when referencing your assets. At the moment, they are being picked up with the index.php included.
So, let's say your link is http://domain.tld/index.php/home/actors, you should be calling your assets from their actual URLs - http://domain.tld/index.php/_/css/style.css would not work, for example. http://domain.tld/_/css/style.css, however, would work. (That's just a sample URL.)
I'd also recommend removing the index.php from your links, simply by using the htaccess RewriteEngine, and removing index.php from your app's config file.
Have a look at how your current source is being generated in a browser (right-click, View Source) to see what I mean.
Update:
Based on your comment, that may be an htaccess issue. Check to see if your hosting provider supports it.
In the meantime, put the index.php back in the app's main config file. However, leave your CSS asset link as it is. Make sure all your asset links look like this:
<link href="http://marciabrownproductions.com/_/css/styles.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://marciabrownproductions.com/_/js/jquery.validate.js'></script>
<script type='text/javascript' src='http://marciabrownproductions.com/_/js/effects.js'></script>
<link href="http://marciabrownproductions.com/_/css/bjqs.css" rel="stylesheet" type="text/css" media="screen" />
<script src="http://marciabrownproductions.com/_/js/bjqs-1.3.js"></script>
Your images are broken because their links are also including the index.php/home. You need to make sure that that is taken out. (What are you using to generate your links anyway?)
I've installed PixelPost (http://www.pixelpost.org/) photo blog script , and I'm using a template which has two CSS files , [Dark + Light] ,
The problem is here ; How should I make the dark CSS style default , in the file "browse_template" it has the following codes :
<link rel="stylesheet" type="text/css" href="templates/simple/styles/dark.css" title="dark" />
<link rel="alternate stylesheet" type="text/css" href="templates/simple/styles/light.css" title="light" />
which was vice versa , I mean the Alternate stylesheet was dark , I did change this to the above code but still the light style is defualt
here's the full template : Template Link
I'm not sure to understand correctly your question but i'll try to explain.
Everything happens on styleswitcher.js
At first load (never seen the page):
The js file will determine your "favourite" stylesheet following these conditions :
It's a <link> tag containing rel=*style*
It does NOT contain "alt" string in rel attribute.
It has a title attribute.
So ! With your code, the "dark" theme will be selected at first start.
When you leave the page, the js file is saving the selected favourite style into a cookie.
On next loads
The JS file is reading the previously saved cookie and show the last saved style by priority.
If you want to check the correct behaviour of your script, you must delete cookies on this domain, then refresh the page. It should see the "Dark" style at first.
Another option to check is to run your Chrome/Firefox in private browsing mode
Hope this solves your issue