I'm using mPDF with PHPExcel. I'm trying to configure layout with CSS. I can't get anything to work.
// this has no effect
$pdf->SetDefaultBodyCSS('color', '#ff0000');
I also try to use external style sheet:
// in php
$stylesheet = file_get_contents('pdf_styles.css');
$pdf->WriteHTML($stylesheet,1);
// in pdf_styles.css
body {
font-family: serif;
font-size: 5pt;
color: red;
}
Any help or hint would be highly appreciated!
I would suggest to put your CSS directly into your template, that works for me.
In you template add sth like this in the head part:
<html>
<head>
<style>
// all your styles come here
body {
font-family: serif;
font-size: 5pt;
color: red;
}
</style>
</head>
<body>
... all your other stuff comes here
</body>
</html>
you have to be very exact in your css usage.
for example does mpdf not accept this:
border-bottom: 1px #000000 solid;
this isnt prohibitted by browsers but mpdf needs this:
border-bottom: 1px solid #000000;
specfic informations can be found here:
http://www.plogin.net/mpdf/mpdf/docs/example_css.php
i use an external css file which i include like this into my template:
<link rel="stylesheet" href="css/pdf.css">
so there is no need to use any inline css.
Related
I am looking for support editing stylesheet of my website
I have the below in the file main.css
.bg-danger, .bg-success {
padding: 0 5px;
}
a {
color: #EF1F2F;
text-decoration: none;
}
Then there is a header file header.php with the following code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><?=isset($title) ? $title : null;?></title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style/main.css">
</head>
<body>
My requirement is to change the background, font etc.
I am not familiar with working on stylesheets. Requesting support from other members.. Thanks in advance
Into your main.css file you can start with adding some minimum properties like :
body {
background-color: #yourHexCodeColor;
font-family: "Helvetica", sans-serif;
}
Then learn the very basics of css right here => https://learn.shayhowe.com/html-css/getting-to-know-css/
Unfortunately, you can't edit CSS code coming from an external source.
So what you have to do is to overwrite the styles you need to be changed in another stylesheet. In your case, it would be the main.css file.
So if there is a style in the bootstrap file that looks like this:
body {
background-color: #fff;
}
You can make a copy of that style in your own file (main.css) and change the value. So in your file, you have this:
body {
background-color: #f7f7fe;
}
I'm new to CSS and am trying to use a class in my style.css that I created and want to use across a <div> ...
My CSS class:
.dave {
font-size: 56px;
text-transform: capitalize;
font-family: Arial, sans-serif;
font-weight: bold;
color:red
}
My HTML:
<div class="dave">
TEST
</div>
But my text "TEST" doesn't change. I've tried saving and clearing cache but no luck.
Any ideas?
Did you link user css style file in header?
Example:
<head>
<title>Ajax Chat</title>
<link rel="stylesheet" href="css/style.css">
</head>
Its either you didn't link your style.css to your HTML file, or it could be due to other errors such as, placing <style>....</style> in your style.css
When I change the index.php file to index.html, it runs main.css file on local. But when I run it with php, it does not see main.css. Bootstrap sees the css files.
Note:The index.html code works when I run on local. There is no problem with the code.
Edit:The problem is not in PHP
<!DOCTYPE HTML>
<html>
<head>
<title>Hi</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<button type="button" class="btn btn-primary btn-outline-danger">Danger</button>
</body>
</html>
main.css:
.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
This is not really a PHP problem. This is happening because Bootstrap is overwriting your main CSS. In fact, using the main CSS, give your button an ID name and change it to the main cass. I think this will work
bootstrap default css btn-primary
<a href="" class="btn-primary class_name" ></a>
use css
.class_name.btn-primary{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
Please do not overwrite the bootstrap classes,instead use custom class say .btnDelete.
.btnDelete{
font-size: 20px;
padding: 15px 60px;
background-color: #fed136;
text-transform: uppercase;
}
And also remove asterisk btn-primary.Bootstrap uses snake case notation for naming classes.why don't you use camelCase notation in order to distinguish between user-defined classes and bootstrap classes.
It is actually not a PHP problem. It is happening because Bootstrap is overwriting your main CSS. To actually use main CSS give your button a id name then change it in main.css. I think that will work. ;-)
I am not able to figure out why my button styles/colors are getting removed when I try to print my webpage. I am using bootstrap for some of my styles.
.button.primary {
font-size: 15px;
font-size: 1.5rem;
line-height: 18px;
line-height: 1.8rem;
background-color: #EEB111;
color: #FFF;
font-weight: 600;
text-decoration: none;
outline: 0;
}
It has to do with bootstrap. If your bootstrap includes print media styles, because it might be not customized in a way it excludes them, some styles will get changed.
(Hintergrundgrafiken = background graphics)
Also this is important, as you already did correctly in your screenshot:
To print the page with colors and stuff, e.g. in Firefox you have to tell the browser by clicking on File > Page Setup... > Print background or Print (icon in the top right menu) > Page Setup... > Print background.
Are you using #media print for printing those styles e.g.
#media print {
body { font-size: 10pt }
}
If not then follow here
https://developer.mozilla.org/en-US/docs/Web/Guide/Printing
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Media
https://www.w3.org/TR/CSS2/media.html#at-media-rule
Hope this will help you in some way (y).
It is getting removed because css-stylesheets have attribute known as media it defines in which media this css file will work.
try to put this on your style sheet media="all" or media="print"
<link rel="stylesheet" type="text/css" media="print" href="print.css">
UPDATED:
I have found out this : margin: 0 auto; in the body {} block of the style sheet makes the header move. If I remove it, the banner header picture moves to the right. So that piece of line is the culprit. Does anybody know why?
As I have progressed (somewhat in the mystery) the question goes the other way.
I have this header file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1> </div>
<body>
Which connects to this View file (I am on MVC)
The code in the view has nothing to do with the issue, I asked so we'll skip it.
Then I have this Style sheet.
<style type = "text/css">
::selection{ background-color: #E13300; color: white; }
::-moz-selection {background-color: #E13300; color: white; }
::webkit-selection{ background-color: #E13300; color: white; }
body {
background:url('../assets/uploads/miweb/gradient2.png');
background-repeat:repeat-x;
margin: 40px;
font: 13px/20px normal Helvetica, Arial, sans-serif;
color: #4F5155;
width:600px;
height:500px;
margin: 0 auto;
}
#header {
float:center;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
h2 {color:#ffffff;}
}
.header {
color:#ffffff;
}
ISSUE:
If I remove the 3 selection ::selection lines from the style sheet, the gradient effect, from the background body disappears.
If I leave it there, then the gradient effect works but then the #header jpg file that you see down the style sheet changes its position from the centered marging: 0 auto; to the right.
You have the full code there. I am puzzled as hell, because I cannot understand why something like ::selection would have a radical effect on the code snippet that refers to body {} where the call to the gradient picture is and also affects the font style within that body {}
II UPDATE
Here is the Controller
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Home_c extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->model('home_model');
}
public function index ()
{
$this->load->view('header');
$this->load->view('home');
}
public function load()
{ $this->load->view('header');
$data['paises'] = $this->home_model->devolverPaises();
$data['ofertas'] = $this->home_model->devolverOfertas();
I wouldn't be surprised if the strange effects you're seeing are tied to not having proper markup.
EDITED: As I made comments, I realized the may not have been clear enough for OP.
Your HTML structure needs to be valid, to start with:
<!DOCTYPE html >
<html>
<head>
<!-- title, meta, styles, etc go here -->
</head>
<body>
<!-- all your other content goes here -->
</body>
</html>
Make sure that when your page renders in the browser, when you look at View Source, you see those container elements in their proper places, nested as such. Better yet, run your page through a validation service. (http://validator.w3.org/ for example)
You have invalid CSS:
#header {
float:center; /* no such attribute... only left, right, none, or inherit */
h2 {color:#ffffff;} /* you can't nest tags inside other specs, except with the use of pre-processors like SASS or LESS */
}