I am using the html5blank to create a site on WordPress. Locally, the media queries are working perfectly fine but when and I add them to the wordpress style.css file, they don't seem to work. I have got rid of all media queries and kept only a simple one just to test it and it's still not working. I have my media queries at the end.
This is part of my header.php file:
<!doctype html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Raleway:400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' :'; } ?> <?php bloginfo('name'); ?></title>
<link href="//www.google-analytics.com" rel="dns-prefetch">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory')?>/style.css" />
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/favicon.ico" rel="shortcut icon">
<link href="<?php echo get_template_directory_uri(); ?>/img/icons/touch.png" rel="apple-touch-icon-precomposed">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="<?php bloginfo('description'); ?>">
<?php wp_head(); ?>
<script>
// conditionizr.com
// configure environment tests
conditionizr.config({
assets: '<?php echo get_template_directory_uri(); ?>',
tests: {}
});
</script>
</head>
<body <?php body_class(); ?>>
<header>
These are the simple media queries I added for testing in Wordpress to the bottom of the css file, but are not working:
#media screen and (min-width: 600px) {
div.balancepersonal {
font-size: 100px;
}
}
#media screen and (max-width: 600px) {
div.balancepersonal {
font-size: 10px;
}
}
This is the p tag in the index.php file I'm trying to make responsive:
<div class="balance-personal">
<div class="balance-container">
<div class="top-div-balance">
<img src="img/IMG_6739.jpg" class="trees-photo">
<div class="trees-shadow">
<div class="container amenidades-txt">
<p class="balancepersonal">BALANCE PERSONAL</p>
You want the stylesheet_url param for bloginfo as seen here: https://developer.wordpress.org/reference/functions/get_bloginfo/
Reason: your current param gives location on the server file directory as opposed to a web location a browser can access.
Edit stylesheet_url should give you the complete location to your style.css.
Alternatively you could use the template_directory_uri (as you are elsewhere) and add the style.css part
Related
I'm trying to create my new own theme for wordpress (and the first one) and I encounter that my site isn't loading the header nor the content of index.php. It's pretty strange, I've read the WP WSoD documentation but I couldn't find anything helpful since my theme only have a couple of lines, I don't see the problem.
This is my theme structure:
And I've only edited index.php, header.php and footer.php. My functions.php seems to have something but I just added some lines to test, it's now blank again.
And this is what's inside my header.php:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> <?php bloginfo( 'name' ); ?> </title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="<?= get_template_directory_uri() ?>/assets/css/bootstrap.min.css">
<!-- Natural Stylesheet -->
<link rel="stylesheet" href="<?= get_template_directory_uri() ?>/style.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="<?= get_template_directory_uri(); ?>/assets/img/favicon.png"/>
</head>
<body>
This is what's inside my footer.php:
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/popper.js"></script>
<script type="text/javascript" src="<?= get_template_directory_uri(); ?>/assets/js/bootstrap.min.js"></script>
</body>
</html>
And this is what I've inside my index.php:
<?php get_header(); ?>
<?php while( have_posts() ) the_post(); ?>
<?php get_footer(); ?>
I edited index.php and WordPress was loading front-page.php
I have a page here: http://desertcinema.com/home-test/
And I want to add a fancybox for both video (youtube and vimeo) and image gallery for photos under my portfolio section using fancybox.
Since I am working on Wordpress site (custom page). I access header.php file and added the cdn links for both the jQuery and CSS of fancybox:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />
Here's the header.php file:
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]>
<!--><html <?php language_attributes(); ?>><!--<![endif]-->
<?php
global $theme_option;
global $wp_query;
$seo_title = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_title", true);
$seo_description = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_description", true);
$seo_keywords = get_post_meta($wp_query->get_queried_object_id(), "_cmb_seo_keywords", true);
?>
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php bloginfo('name'); ?> <?php is_front_page() ? bloginfo('description') : wp_title(''); ?></title>
<meta name="author" content="<?php if(isset($theme_option['text_facebook']) && $theme_option['text_facebook'] != ''){echo $theme_option['text_facebook'];}else{echo 'Vergatheme';} ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<?php if($seo_description!="") { ?>
<?php }elseif($theme_option['seo_des']){ ?>
<meta name="description" content="<?php echo $theme_option['seo_des']; ?>">
<?php } ?>
<?php if($seo_keywords!="") { ?>
<meta name="keywords" content="<?php echo $seo_keywords; ?>">
<?php }elseif($theme_option['seo_key']){ ?>
<meta name="keywords" content="<?php echo $theme_option['seo_key']; ?>">
<?php } ?>
<!-- CSS
================================================== -->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="<?php echo $theme_option['favicon']['url']; ?>" type="image/png">
<link rel="apple-touch-icon" href="<?php echo $theme_option['apple_icon']['url']; ?>">
<link rel="apple-touch-icon" sizes="72x72" href="<?php echo $theme_option['apple_icon_72']['url']; ?>">
<link rel="apple-touch-icon" sizes="114x114" href="<?php echo $theme_option['apple_icon_114']['url']; ?>">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" type="text/css" media="screen" />
<?php wp_head(); ?>
Now on my HTML I tried to add this codes here as per instruction:
To the wrap image to make sure it appears:
<li class="portfolio-box video-production ">
<a href="https://vimeo.com/169312968" class="more">
<img src="http://desertcinema.com/wp-content/uploads/bfi_thumb/ilive-1-31nhrb4atwt3ix3v5bwef4.jpg" alt="" />
<div class="mask"></div>
<div class="line-folio"></div>
<div class="line-folio1"></div>
<h4>iLiveAccountable</h4>
</a>
</li>
Now to finally make it work I created a script which I place at the footer of my custom page:
<script>
$("a.more").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
</script>
However when I tried it, it just link me to the link i place inside the link i presented:
Any idea what I am doing wrong? I really need to show up a responsive pop up/ligthbox for each image both video and image gallery.
Thanks in advance for the help.
The jquery plugin is not there. Check the console for error. Place it above the fancybox
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');
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>