I am having trouble with applying CSS style in my view.
I have set base_url in config.php also..
config['base_url']='http://localhost/test_project/'
My code is
<html>
<head>
<title>Untitled Document</title>
<link type="text/css" href="<?php echo base_url()?> css/mycss.css" >
</link>
</head>
<body>
<p> This is test.</p>
</body>
</html>
My CSS code is
p
{
color:#0066CC;
}
But it shows only simple text..
How to apply CSS in codeigniter....
Put the path inside the function. Include rel="stylesheet" in the link tag. You don't need the closing </link> either.
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/mycss.css'); ?>">
View the source of the page, you should see the CSS included like this
<link rel="stylesheet" type="text/css" href="http://localhost/test_project/css/mycss.css">
You need put in html tag link the attribute rel="stylesheet"
<link type="text/css" href="<?php echo base_url('css/mycss.css') ?>" rel="stylesheet" >
Check with your firebug if your css files is load fine.
You could use html tag called "base" for example:
<base href="http://url" />
In your code:
<html>
<head>
<title>Untitled Document</title>
<base href="<?php echo base_url()?>" />
<link type="text/css" href="css/mycss.css" rel="stylesheet"></link>
</head>
<body>
<p> This is test.</p>
</body>
</html>
I use the default function of codeigniter. For example:
echo link_tag('assets/css/bootstrap.css');
Related
I added wow.min.js and initializing the WOW on the end of the body and animate.css on the header. But after adding the classes to elements, animation doesn't appear.
I tried adding the CSS and js file via function.php but that didn't work too.
body:
<?php wp_footer();?>
<script src="<?php echo get_template_directory_uri() . '/js/wow.min.js' ?>"></script>
<script>
wow = new WOW();
wow.init();
</script>
</body>
header:
<head>
<meta charset="<?php bloginfo('charset');?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/header.css' ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() . '/assets/styles/animate.min.css' ?>">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<?php wp_head();?>
</head>
Good day, curlybom.
Can you please check if Jquery also attached to template?
I think wow.js and animate js need Jquery.
<script src='https://code.jquery.com/jquery-3.6.0.min.js' id='jquery-core-js'></script>
Tell please if it works...
After spending 2 days on the issue, I've found out that I should add animate__animated along with other class names to execute the animation. I don't know if this is a new update on animate.css, but tutorials never mentioned this. Embedding the scripts was all fine.
This is my directory:
miuse/application
miuse/application/views/templates/header.php
miuse/bootstrap/css
miuse/bootstrap/js
miuse/bootstrap/fonts
This is my controller code:
<?php
class page extends CI_controller{
public function view($page= 'home')
{
if(!file_exists(APPPATH.'views/pages/'.$page.'.php'))
{
show_404();
}
$data['title']='Moodlist home';
$this->load->view('templates/header', $data);
}
}
?>
This is my view code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<?php echo $title; ?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="header.css" type="text/css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4">List</h1>
<nav class="col-sm-8 text-right">
<p>Home</p>
<p>Category</p>
<p>About us</p>
</nav>
</div>
</header>
</body>
</html>
when i run my view normally in a browser it shows proper output but when i load it with codeigniter view then it shows different output which i dont want.
I guess your header.css file is not being loaded.
Put the header.css file in miuse/bootstrap/css directory.
And change your code from,
<link rel="stylesheet" href="header.css" type="text/css">
to
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/header.css" type="text/css">
When loading css and other stuff I would recommend using base_url() in your head area
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('bootstrap/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/header.css');?>">
</head>
Make sure you have set the base url in config.php and autoload the url helper.
I'm learning PHP / HTML / CSS. Today I want use Bootsrap.
I use a basic HTML5 template called index.php In this file I want include a footer like this:
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="ressources/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="ressources/css/style.css">
<script type='text/javascript' src="ressources/script/jquery.js"></script>
<script type='text/javascript' src="ressources/bootstrap/js/bootstrap.js"></script>
<title>Index</title>
</head>
<body>
<div id="wrap">
<p>test</p>
</div>
<?php include('includes/footer.php'); ?>
</body>
</html>
But I dont see my footer in my page. I just put an "Hello World" in my footer.php
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
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>