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"/>
Related
abp.io landing page of blazor page loading and loading.
There is no error shown in the blazor application. HttpApi.Host projects work just fine. I have already upgraded Visual Studio 2022 Version 17.2.0 Preview 4.0. I have run the tutorial project without any problem.
Here's my index.html page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>ListTrader</title>
<base href="/" />
<!--ABP:Styles-->
<link href="global.css?_v=637843235595560988" rel="stylesheet" />
<link href="_content/Volo.Abp.AspNetCore.Components.Web.LeptonTheme/styles/lepton6.css" rel="stylesheet" id=LeptonStyle />
<link href="main.css" rel="stylesheet" />
<!--/ABP:Styles-->
<link href="DecisionTree.ListTrader.Blazor.styles.css" rel="stylesheet" />
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default-base.css">
<link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
</head>
<body class="abp-application-layout">
<div id="ApplicationContainer">
<div class="loader">
<div id="cover-spin"></div>
</div>
</div>
<!--ABP:Scripts-->
<script src="global.js?_v=637843235597089265"></script>
<script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
<!--/ABP:Scripts-->
</body>
</html>
Here's my logfile from HttpApi.Host projects.
It was the radzen script error. We remove it, and it works fine.
In my asp.net mvc web application I have a razor layout page with a partial view #Html.Partial("_HorizontalNavbar") in it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="#Url.Content("~/Content/kendo/2020.2.513/kendo.bootstrap-v4.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/angular.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/jszip.min.js")"></script>
<script src="#Url.Content("~/Scripts/kendo/2020.2.513/kendo.all.min.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
</head>
<body class="k-content">
#Html.Partial("_HorizontalNavbar")
<main>
<div class="container">
#RenderSection("featured", required: false)
#RenderBody()
</div>
</main>
</body>
</html>
For the partial view I do not need all the css that is referenced in the layout page; actually it interferes with the css that is inside the partial view.
Is there a way to setup a partial view so that it is not affected by the css of the layout page?
Any help will be gratefully appreciated.
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>
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>
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>