Can anyone help me please? There is some white space between top of my page and div container and I have no clue why: http://iwokolasinski.com/wtfq/
#optimus203 I can see that my HTML is messed up when look at it in browser. But this is my header.php file, it seems to be ok. I'm quite a newbie and I'm trying to create wordpress + bootstrap theme. I have no idea what am I doing wrong... :(
<html lang="en">
<head>
<meta charset="utf-8">
<title><?php wp_title('|',1,'right'); ?> <?php bloginfo('name'); ?></title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Styles -->
<link href="<?php bloginfo('stylesheet_url');?>" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lobster|Khula&subset=latin,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>
</head>
<body>
<div class="container-fluid kol">
That is the default settings of current browsers.
You can override this by setting your CSS like this:
html, body {
margin: 0;
padding: 0;
}
Your HTML is all messed up. You had your head content in the body tag, and other issues.
<html lang="en">
<head>
<meta charset="utf-8">
<title> WTF Design</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Styles -->
<link href="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/style.css" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lobster|Khula&subset=latin,latin-ext,cyrillic" rel="stylesheet" type="text/css">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="alternate" type="application/rss+xml" title="WTF Design » główna Kanał z komentarzami" href="http://iwokolasinski.com/wtfq/?feed=rss2&page_id=5">
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery.js?ver=1.11.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1"></script>
<script type="text/javascript" src="http://iwokolasinski.com/wtfq/wp-content/themes/mywtftheme/bootstrap/js/bootstrap.js?ver=4.1.1"></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://iwokolasinski.com/wtfq/xmlrpc.php?rsd">
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://iwokolasinski.com/wtfq/wp-includes/wlwmanifest.xml">
<meta name="generator" content="WordPress 4.1.1">
<link rel="canonical" href="http://iwokolasinski.com/wtfq/">
<link rel="shortlink" href="http://iwokolasinski.com/wtfq/">
</head>
<body>
<div class="container-fluid kol"> <h1>główna</h1>
<h1 style="text-align: center;">Heading 1</h1>
<h2 style="text-align: center;">Heading 2</h2>
<h3 style="text-align: center;">Content</h3>
<p style="text-align: center;">Paragraph</p>
<footer>
<p>footer</p>
</footer>
</div> <!-- /container -->
</body>
</html>
I added this to the end of your <head> section and it worked:
<style>
body {
margin-top:-25px;
}
</style>
Related
As you can see on my code, on the left panel, i have an UL and 2 LI.
I want all LI as white color.
I've set style but is not professional, perhaps setting my own style:
lblBiancoMenu does not affect
what can i do?
.lblBiancoMenu {
color: white;
}
;
.subCat .li {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pushy - Off-Canvas Navigation Menu</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div data-role="page" id="pageone">
<div style=" background-color: #101010; color: #ffffff;">
<h2 id="listCateg">Categories</h2>
<div id="SubCat3" class='subCat'>
<ul>
<li><a style="color:white" href="#">3</a></li>
<li><a class="lblBiancoMenu" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</body>
</HTML>
The theme you're importing has its own CSS styles. The color rule being imported has a higher specificity than your rule, so your rule is being overridden.
To override the theme styles, either use inline CSS (as you have done). Embedding the CSS in the HTML tag gives it higher specificity.
Or use the !important annotation, which overrides all other CSS declarations.
Use this in your code:
.lblBiancoMenu {
color: white !important;
}
.lblBiancoMenu {
color: white !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Pushy - Off-Canvas Navigation Menu</title>
<meta name="description" content="Pushy is an off-canvas navigation menu for your website.">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Icons list-> https://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div data-role="page" id="pageone">
<div style=" background-color: #101010; color: #ffffff;">
<h2 id="listCateg">Categories</h2>
<div id="SubCat3" class='subCat'>
<ul>
<li><a style="color:white" href="#">3</a></li>
<li><a class="lblBiancoMenu" href="#">4</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
I want to access .css file in FTL for generating PDF but I not able to see the effect in PDF.
I tried both ways
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
and
<link rel="stylesheet" href="/font/fonts.css"/>
<link rel="stylesheet" href="/stylesheets/global.css"/>
My folder location is, and Currently, I am using Liferay DXP
META-INF/resources/font/fonts.css
META-INF/resources/stylesheets/global.css
code is below
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="key, words"/>
<meta name="description" content="Website description"/>
<meta name="robots" content="noindex, nofollow"/>
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1"/>
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
</head>
<body>
<section id="wrapper">
<section id="mainCntr">
<article class="objectBox">
<div class="logo">
<img src=""/>
</div>
<div class="text">
<h2>Objects in <br/> this document <br/> are simpler <br/> than they seem.</h2>
</div>
</article>
</section>
</section>
</body>
</html>
Can anybody tell me the right approach to get effect fonts.css and global.css in FTL to generate PDF?
Finally, we applied inline CSS for whole pdf file code on each and every lines as per our requirements.
Remove below to lines from the pdf file code.
<link rel="stylesheet" href="../font/fonts.css"/>
<link rel="stylesheet" href="../stylesheets/global.css"/>
it's my today's work... that css :nth-child(odd){background-color:red;} doesn't work in lte ie8
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="style/selectivizr.css" type="text/css" />
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="js/selectivizr-min.js"></script>
<noscript>
<style> p.odd {background-color:red;}</style>
</noscript>
<![endif]-->
</head>
<body>
<div id="container">
<h1> title </h1>
<p> 단락 요소입니다. 홀</p>
<p class="odd"> 단락 요소입니다. 짝</p>
<p> 단락 요소입니다. 홀</p>
<p class="odd"> 단락 요소입니다. 짝</p>
</div>
</body>
I have the newest Foundation complete version and I am following this tutorial. https://www.youtube.com/watch?v=RK_k__4Y4TU
I am trying to get a menu but there is nothing on my website at all. It is just blank.
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Foundation for Sites</title>
<link rel="stylesheet" href="css/foundation.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="off-canvas position-left" id="offCanvas" data-off-canvas>
<ul class="menu vertical">
<li>Links</li>
<li>Links</li>
</ul>
</div>
<div class="off-canvas-content" data-off-canvas-content></div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/what-input.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
I tried your code and only mistake is you have written off-canvas insted of off-canvas-wrap.
No class exist with name off-canvas.
<div class="off-canvas-wrap position-left" id="offCanvas" data-off-canvas>
i am using ratchet framework but it showing black flash screen before starts my application on mobile and it is very annoying
how can i remove that screen or suggest me some other framework
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Notes</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Roboto -->
<link rel="stylesheet" href="../../dist/css/ratchet.min.css">
<link rel="stylesheet" href="../../dist/css/ratchet-theme-android.min.css">
<script src="../../dist/js/ratchet.min.js"></script>
</head>
<body>
<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left"></a>
<a class="icon icon-compose pull-right"></a>
<h1 class="title">Title</h1>
</header>
</body>