CSS isn't used on php project in ubuntu 12.04 - php

i'm trying to run a php project i created using windows in ubuntu 12.04LTS. For that reason i installed php5 apache2 and open_jdk_7 in my ubuntu system. The next step was to put the project (the file index.php, the directory CSS and other files and directories) inside var/www/webserver directory. Then i opened firefox and wrote myip/weserver/index.php . It indeed loaded the page but it wasn't using the css. By the way i am new in ubuntu so keep it simple if possible :/ . Any help will be really appreciated.
This is the starting part of the code tha i used on the windows version in index.php
<?php
define("SUBFOLDER","");
//has to be changed to DOCUMENT ROOT
define("ROOT","C:\webdev\apache\htdocs");
?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php echo SUBFOLDER."/"; ?>css/myCSSfile.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="<?php echo SUBFOLDER."/"; ?>images/dit.ico">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/search.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button2.css">
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/resolutionfinder.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/changeInputValue.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/ajaxcalls.js"></script>
And this is how i changed the second define to use it on linux. maybe i give the root path wrong?
<?php
define("SUBFOLDER","/webserver");
//has to be changed to DOCUMENT ROOT
define("ROOT","/var/www/webserver");
?>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="<?php echo SUBFOLDER."/"; ?>css/myCSSfile.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="<?php echo SUBFOLDER."/"; ?>images/dit.ico">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/search.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button.css">
<link rel="stylesheet" href="<?php echo SUBFOLDER."/"; ?>css/button2.css">
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/resolutionfinder.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/changeInputValue.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo SUBFOLDER."/"; ?>js/ajaxcalls.js"></script>

Your OS has nothing to do with your CSS. Just check the path you are loading the CSS from, its most likely wrong.

Related

WordPress: Favicon not appearing on custom post types or child pages

I have the following favicon setup in header.php:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri()." /assets/build/favicon/apple-touch-icon.png "; ?>">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri()." /assets/build/favicon/favicon-32x32.png "; ?>">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri()." /assets/build/favicon/favicon-16x16.png "; ?>">
<link rel="manifest" href="<?php echo get_template_directory_uri()." /assets/build/favicon/site.webmanifest "; ?>">
<link rel="mask-icon" href="<?php echo get_template_directory_uri()." /assets/build/favicon/safari-pinned-tab.svg "; ?>" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<?php wp_head(); ?>
</head>
I have all the favicon files stored in assets/build/favicon.
On / or parent pages, my favicon appears. But on custom post types or child pages, my favicon doesn't show up.
The file paths are correct (otherwise they wouldn't show on the parent pages also).
Why doesn't it work on custom post type pages or child pages?
index.php
get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php get_footer();
archive-knowledge.php:
<?php get_header(); ?>
<body class="knowledgeListing">
<?php get_template_part('templates/parts/knowledge/level-one/listing'); ?>
<?php get_footer(); ?>
</body>
I do not know why, but sometimes Chrome does not display the favicon, like other browsers. Try to add favicon.ico in your header file, like you did with the others:
<link rel="icon" href="favicon.ico" type="image/x-icon" />
and place your favicon.ico file in the root directory. Thus, if the browsers does not recognize/get the favicon for some reason, they will take the default favicon.ico in your root folder. So that all browsers will find the icon eventually
As I am checking the main issue with your href URL, you can use like this:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-16x16.png">
<link rel="manifest" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="<?php echo get_template_directory_uri();?>/assets/build/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<?php wp_head(); ?>
</head>
If you follow this type of structure, all browsers/devices will support it.
You can also generate an online favicon from:
https://www.favicon-generator.org/
Your isue is closing php tags at wrong place, wp should not show them in any part of te site.
See this is the url in your head which is php tags closed in wrong place "; ?>"
<link rel="mask-icon" href="<?php echo get_template_directory_uri()." /assets/build/favicon/safari-pinned-tab.svg "; ?>" color="#5bbad5">
Correct url should be like this :
<link rel="mask-icon" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/safari-pinned-tab.svg" color="#5bbad5">
I correctede other urls given in your question
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/favicon-16x16.png">
<link rel="manifest" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/site.webmanifest">
<link rel="mask-icon" href="<?php echo get_template_directory_uri();?>/assets/build/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<?php wp_head(); ?>
</head>

Lightbox will not load properly on my wordpress site

I am having trouble getting lightbox http://lokeshdhakar.com/projects/lightbox2 to work. I have been able to create a new test html doc and get lightbox working. However when I put it into my website I can only get the images to load up.
My site is comprised of (header.php----portfolio.php(main content)----footer.php)
Header.php
<head>
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> ยป Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Karla%7CMontserrat">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>css/screen.css">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>css/lightbox.css">
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<!--header end-->
Portfolio.php
<img class="example-image" src="<?php bloginfo('template_directory'); ?>/img/demopage/image-1.jpg" alt="image-1" />'
footer.php
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox.js"></script>
</body>
</html>
I am lost on this and would appreciate some help.
Your image needs a link to the original image:
Portfolio.php
<a href="<?php bloginfo('template_directory'); ?>/img/demopage/image-1.jpg" data-lightbox="image-1" data-title="My caption">
<img class="example-image" src="<?php bloginfo('template_directory'); ?>/img/demopage/image-1-small.jpg" alt="image-1" />
</a>
Looking at the Lightbox documentation it mentions you need to list the images out in this fashion.
Add a data-lightbox attribute to any image link to activate Lightbox. For the value of the attribute, use a unique name for each image. For example:
Image #1

How to remove CDATA from Yii

I am a little bit new to yii. I am using the following code to create the main template:
<html xmlns="http://www.w3.org/1999/xhtml">
<title>Schedule an appointment with My business</title>
<link href='https://fonts.googleapis.com/css?family=Signika' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/style.css" type="text/css">
<link rel="stylesheet" media="all" type="text/css" href="<?php echo Yii::app()->request->baseUrl; ?>/css/modal-form-css/jquery-ui.css" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/bookpage/appointpress.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.datepicker.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery.ui.theme.css" type="text/css">
<link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/datepickercss/jquery-ui.css" type="text/css">
<!--<script type="text/javascript" src="//sslstatic.wix.com/services/js-sdk/1.19.0/js/Wix.js"></script> -->
<div class="header" style="height:60px;">
<div id="inner_header" style="padding-top:5px;">
<span style="float:right;color:rgb(68, 68, 68); margin-top:-10px;">Appointpress | Powerful Online Scheduling</span>
</div>
</div>
<body style="background-color:FFFFFF; font-family:Signika">
<div class="container-fluid">
<?php echo $content; ?>
</div>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-1.9.1.js"></script>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/css/appcal/jquery-ui-1.10.2.custom.js"></script>
<!--date validation-->
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl; ?>/js/date.js" /></script>
</body>
</html>
But in console I am getting some CDATA added in the last of the file when I see it into console.
<script type="text/javascript" src="/customers/js/date.js" /></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
jQuery('a[rel="tooltip"]').tooltip();
jQuery('a[rel="popover"]').popover();
});
/*]]>*/
</script>
</body>
thats not a problem in Firefox or Google chrome. but is problematic in IE. I am not able to figure out that from where it is coming out and how to remove this ?
Please guys help in out of this problem ?
Thanks
This is automatically created by Yii to prevent misinterpretation by old browsers, XML-Files or non JavaScript aware browsers.
This should not cause any problems at all.
Can you post a error message?
Furthermore when using Yii, you should use these "Yii-methods" to include JavaScript:
<?php
$baseUrl = Yii::app()->baseUrl;
Yii::app()->getClientScript()->registerScriptFile($baseUrl.'/js/someJs.js');
?>
Also check the Yii-Docu on JS: http://www.yiiframework.com/wiki/394/javascript-and-ajax-with-yii/#hh6

php included file execution failure

Good afternoon everyone. I'm stuck on including a file that has all of my 'head' information in it. I wanted to break down my page so it's simpler and less complicated. in my index.php file i did this;
<?php
include 'Resources/includes/head.php';
?>
It finds the file and i know this because in dreamweaver when i go on my index page it comes up as a tab underneath it. However when i view my index page on the local server, it's as if none of the styles or scripts have been applied to the page. This is the code that my head.php file has in it.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="../images/design/icon.png" type="image/x-icon"/>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>
<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="../js/scripts.js" type="text/javascript"></script>
</head>
You may try something like this by using a base path
<?php
$basepath="http://www.mysite.com/path_to_theme/";
?>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="" />
<meta name="keywords" content=""/>
<link rel="shortcut icon" href="<?php echo $basepath; ?>/images/design/icon.png" type="image/x-icon"/>
<link rel="stylesheet" href="<?php echo $basepath; ?>/css/style.css" type="text/css" media="screen"/>
<script src="<?php echo $basepath; ?>/js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="<?php echo $basepath; ?>/js/scripts.js" type="text/javascript"></script>
</head>

External JavaScript working on localhost but not in remote host?

This is the site: http://www.hfwebdesign.com/
I'm getting this error: Uncaught TypeError: Object [object Object] has no method 'flexslider'
But in my localhost it works perfectly.
This is the <head> (where the script is being called):
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/js/flexslider/flexslider.css" />
<link rel="icon" type="image/png" href="<?php bloginfo( 'template_url' ); ?>/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="<?php bloginfo( 'template_url' ); ?>/js/flexslider/jquery.flexslider-min.js"></script>
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
footer:
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.flexslider').flexslider({
animation: "slide"
});
});
</script>
</body>
Could it be that the code is breaking in the web server in the remote host and not in my localhost (e.g. they are different version of LAMP/APACHE?)
Try chage the call place from:
<script src="http://www.hfwebdesign.com/wp-content/themes/twentytwelve/js/flexslider/jquery.flexslider-min.js.pagespeed.jm.noGKd8vLzs.js"></script>
<script type='text/javascript' src='http://www.hfwebdesign.com/wp-includes/js/jquery/jquery.js,qver=1.8.3.pagespeed.jm.1SksPi3j41.js'></script>
To:
<script type='text/javascript' src='http://www.hfwebdesign.com/wp-includes/js/jquery/jquery.js,qver=1.8.3.pagespeed.jm.1SksPi3j41.js'></script>
<script src="http://www.hfwebdesign.com/wp-content/themes/twentytwelve/js/flexslider/jquery.flexslider-min.js.pagespeed.jm.noGKd8vLzs.js"></script>
Don't sure about it, but try isn't bad.
Check case in your script path. If the script folder name is e.g. 'flexSlider' and in the script src path is 'flexslider', it will work on windows (most localhosts) but not on linux (most servers). It depends on the OS, not on the server SW, so running e.g. XAMPP on windows will work because windows works in case-insensitive way with paths.

Categories