Some modern browsers convert links like
Site
into
Site (http://somesite.com)
as part of the generated PDF.
Is there a way to omit the links from the generated PDF version by pure CSS?
Which CSS classes in the print.css must be defined in order to suppress the link URLs?
Here is an example for the way to manipulate the styling of <a href=...> tags inside a CSS file to make it appear as you dislike it:
#media print {
##....
a[href]:after {
content:" ("attr(href)")";
color:#868686;
background-color:inherit;
font-style:italic;
size:90%;
}
##....
}
To override this setting (and make it appear more to your liking), you may need to use a (user) print.css which contains the following (as part of its total content):
a[href]:after {
content:"" !important;
}
Your question is not very clear about the scope of your requirement:
Should it be valid just for a website you control and for the users visiting it?
Should it apply to any web page you visit?
If you want the first, you put the reference to your print.css into the HTML header section the usual way and host the file on your web server
If you want the second, you should google for "user stylesheets" to find links like the following:
Accessibility Features of CSS: User override of styles
Tap the power of Mozilla's user style sheets
How to write a user stylesheet for Safari
Related
Suppose we added the image in CKEdtitor and aligned it to right:
CKEditor will add image and image-style-align-right classes to figure element:
<p>Lorem ipsum of something like this </p>
<figure class="image image-style-align-right">
<img src="https://XXXXX.com/116cc956-4cf4-4d2a-98cf-ffa69ab0eb3c.jpeg">
</figure>
Now we want the inputted HTML will be submitted by email? Above HTML must be submitted to the backend, then all styles must be converted to inline CSS. But how the backend will know about .image, .image-style-align-right and similar CSS rules?
There are below styles in theme/imagestyle.css file of #ckeditor/ckeditor5-image package:
/*
* Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/
:root {
--ck-image-style-spacing: 1.5em;
}
.ck-content {
& .image-style-side {
float: right;
margin-left: var(--ck-image-style-spacing);
max-width: 50%;
}
& .image-style-align-left {
float: left;
margin-right: var(--ck-image-style-spacing);
}
& .image-style-align-center {
margin-left: auto;
margin-right: auto;
}
& .image-style-align-right {
float: right;
margin-left: var(--ck-image-style-spacing);
}
}
Problem 1: The source styles are in frontend and written by PostCSS
First, above code is PostCSS. Because I must not migrate to PostCSS just because using the CKEditor, I can not include this file to my source code written by other CSS preprocessor. In frontend, the Webpack compiles these styles an apply it dynamically when application starts (I mean, no file with compiled CSS available):
But how to bring up these styles to server?
Problem 2: How to bring up to server only these CSS classes which will be used and no more?
Well, even if I convert above .image-style-side , .image-style-align-center etc. to CSS and submit them to server, I will be enough only for Image feature. But the other CKEdtitor plugins adds other CCS classes and these classes are in numerous of other files!
Сonversely, there are a lot of CKEditor classes in which we are don't need on backend, e. g. ck-editor__editable, ck-rounded-corners, ck-editor__editable_inline: there classes are for CKEditor's GUI and will not require once editing will done?
Problem 3: The CSS variables
Above listing includes the CSS variables like --ck-image-style-spacing, --ck-image-style-spacing etc. To make inline CSS, server must know about them too.
As you stated, there are several major time consuming problems to be solved with approach that you took.
Key to a successful email template is compatibility with many different email clients.
Email clients support archaic HTML tags, such as <table> for creating layout. Inline styles are also preferred. Many modern CSS properties are not supported at all. For example, border radius is not compatible in some clients, so rounded buttons will actually be button images instead of code. Different fonts are also not rendered.
If I were you (and if CKEditor doesn't have email templating), I'd post the template you created to some of the freelancer platforms out there and say 'guys, how much to convert this HTML to email compatible HTML'. That's the fastest and cheapest way. Test resulting code by sending it in email and checking it out in different email clients.
Other way is for you to get to know what creating HTML and styling for emails is all about. Good starting point is to analyze (and perhaps reuse) HTML from HTML emails that you received from, let's say, your local cell service provider.
You'll need to do a research on the topic to find out what suits your needs, but here are some basic guidelines:
supported HTML tags in emails
step-by-step guide to creating email templates
I would like to re-style the page title (h1) on just one particular page (node) of a Drupal 7 site. What is the best way of targeting a single HTML element with CSS on a particular page?
Obviously, I want the page title on all other pages to be unaffected.
I am using a sub-theme of Bartik, if it make any difference.
Normally in most of the themes classes are added to the body tag. Unless you are using themes like mothership where you can force it to remove such classes, these can be pretty much handy. Even mothership provides a settings to enable/disable populating of body tag with such classes.
Use inspect element in chrome or Firebug in Firefox or Developer Toolbar in IE to look for the class that represent something like <content_type>-<entity-type>-<id> in <body> tag in the page you want to theme. For example page-node-12
An example output for omega theme is as below
<body class="html not-front logged-in page-node page-node- page-node-8 node-type-page context-page admin-menu coffee-processed omega-mediaqueries-processed alpha-debug-processed responsive-layout-wide">
An example body tag output for Bartic theme,
<body class="html not-front logged-in no-sidebars page-node page-node- page-node-33 node-type-team-member admin-menu coffee-processed">
then find the specific selector for your node title, which would be like say #page-title or in case it doesn't have an id figure out some rule to select it so its unique in a page. For example .page h1.title
Now you can use,
body.page-node-12 #page-title {
/* your css rule */
}
or
body.page-node-12 .page h1.title {
/* your css rule */
}
In my site I am stick with some CMS. In my cms there is some sticky layout.
Now My client needs two different look on it.
So when I am on "homepage" my DIV class test show different and when I am on other page so that same class work different.
This is for home page
.test {
some data
}
This is for Other Page
.test {
some data
some data
}
So is there any way to make condition in css that if my URL is homepage so call this otherwise call this.
You should add a custom class on your body, like the page name.
<body class="home">
...
</body>
<body class="my_page">
...
</body>
Then you can have a different style for each one.
.home .test {
background: red;
}
.my_page .test {
background: blue;
}
You can't use CSS to detect the URL. So, you'll need to detect the URL with JavaScript (like this), or better, detect it on the backend.
Same css wont work differently for different pages(URLs), One way you can do is changing the inline styles with JavaScript. But it will be painful if you suppose to change a whole style-sheet.
Other way is, it is more than detecting the URL, you need to change the style-sheets dynamically for different pages. Different style-sheets may have same classes but with different styles.
Therefore, create separate style-sheets and apply dynamically.
You can get some idea about changing style-sheets dynamically here
You could use JavaSctipt to detect the URL, and then again use JavaScript to add an extra class to the body if you are on the home page. You then write separate CSS styles for elements contained within this new class.
I have a button in asp.net (c#) that I want after click this button I could print from my html table that is in a update panel ,I only want Print my html table not all page
is there any component?
thanx very much
2 ways to handle it:
CSS to define a print media
Reporting services, hit the data directly from a sproc / direct table
and print a table layout of the data.
Based on OP comment
Straight from W3c:
http://www.w3.org/TR/CSS2/media.html
Read specifically about print media, it means you can define a .css file in your asp.net project with the media type "print":
#media print {
/* style sheet for print goes here */
}
This is nice because you can now define CSS to hide all elements on your screen:
display:none
Except the div / table of your choice:
#myDiv {
display: block;
}
In your asp.net page you have this define:
<link rel="stylesheet" media="print" title="Printer-Friendly Style"
type="text/css" href="printStyle.css">
This tells your application to use the printStyle.css file when it comes to printing your page.
And once you do try to print the app will use printStyle and all the formatting and styles you have defined.
Here is a good example: https://web.archive.org/web/20200724145536/http://www.4guysfromrolla.com:80/demos/printMediaCss.html
For the second point, if you are running SQL Server, reporting services is free. Of course you will need to set this up and deploy reports. Its a bit out of the scope of this question. If you do have reporting services you may want to open a new topic and ask questions about it.
Otherwise just create a print style css file.
You can probably use the CSS #print Media Type to hide the stuff you don't want to print.
Check out the w3 Schools tutorial for a basic overview.
You can use CSS classes to define media type like #print, #screen and then mark appropriate parts of your webapge with those classes.
For the button to do the print, you will need to add: onClientClick="window.print()" to the button's definition.
Use CSS like this:
#media print
{
printOnly {display:block;}
screenOnly {display:none;}
}
#media screen
{
printOnly {display:none;}
screenOnly {display:block;}
}
Then simply decorate your DIVs or other elements with the classes:
<div class="screenOnly">this will not print but will show on screen</div> or
<div class="printOnly">this will not show on screen but will print</div>
I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.