I am completely new to this and am trying to learn on my own. One thing I am having an issue on finding a solution to is how to hide the page title on a WP site. I have read that leaving the page title blank, although solving the issue, may not be good in terms of SEO, so I would like to hide page titles instead.
I have tried using multiple plugins, all with no luck. Additionally, I have tried adding additional CSS code both to hide specific page titles and titles across the entire site.
The code I have been using is
.entry-title {
display: none;
}
and
.page-id-XXX .entry-title {
display: none;
}
None seem to work. Additionally, I tried to see if my theme has an option, and it doesn't.
Is anyone able to let me know what I may be doing wrong and point me in the right direction?
Use the code below to hide header.
.header-page {
display : none;
}
This will work when the header has class .header-page.
This CSS should go inside every page where you want to hide, if its site-wide add it on head.
<style>
.header-page {
display : none;
}
</style>
I'm trying to hide the page URL while showing the page number
I found some possible solutions on other questions, but none of them helped me.
#media print {
a:after { content:''; }
a[href]:after { content: none !important; }
}
The code above was supposed to hide the page URL, i guess.
You can go to print options and you can hide from there, like Firefox.
Print -> Page Setup -> Margin & Header/Footer -> Headers & Footers. Set it to '--blank--'.
Is not possible in Chrome and with css because is not a part of the html page.
And that code remove the urls only from the html page.
I am trying to show the information in the notice class.
I have try adding content: but this doesn't work.
.notice {
color:red;
content: "information below are instructions for this method for this page";
}
<div class="notice"></div>
I was wondering if the text in the content can be shown in the div?. I want to show actually what is in the notice class whenever I call the notice class. I have about 40 pages I need to do this to and some people might thing I should just type it in all pages but that information in the content changes.
Is they a way to do this in css?
The content property only works on the :after and :before psuedo classes, e.g. try:
.notice {
color:red;
}
.notice:after{
content: "information below are instructions for this method for this page";
}
<div class="notice"></div>
See this fiddle
That said, CSS should be kept for styling and not content - which should be output in your HTML, and controlled by either whichever serverside tech you're using (e.g. PHP, Python), or a JS bridge.
I think i your case it is better to make a PHP if statement for the notice. that would be pretty more usefull
I have written some stylesheets - including a print.css - and it's working fine.
I'd like to remove the URL from printing out on each of the pages. I am beginning to wonder if it is impossible. Is there an element/option that I can set to display:none to do this?
The reason is that the specific pages that have a 'normal' and 'print' stylesheet have been specially formatted so when printed, it forms a meaningful booklet. Therefore the URL is irrelevant.
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
In others browsers, I don't know, but you can view http://www.mintprintables.com/print-tips/header-footer-windows/
Sadly, no. The header and footer are generated by the browser. Only the end-user can change the footer - it might be an idea to give the user a step-by-step for each browser what to do. See for example here for a set of illustrated walk-throughs for windows based browsers.
The only alternative I know of is generating PDFs, with which you have full control over the printed output.
Use that code.that will help to solve your problem
#media print
{
#page { margin: 0; }
body { margin: 1.6cm; }
}
#media print
{
a[href]:after { content: none !important; }
img[src]:after { content: none !important; }
}
you can try this in the stylesheet:
#page{size:auto; margin-bottom:5mm;}
But this also removes the page number
This solution will do the trick in Chrome and Opera by setting margin to 0 in a css #page directive. It will not (currently) work for other browsers though...
It depends on your web browser. If you're using Firefox you can adjust or turn off those header and footer lines (URL, page number, etc) by going into File > Page Setup then clicking the Margins & Header/Footer tab.
If I understand you correctly, you talk about the page headers and footers. They are printed by the browser. They are not part of your HTML content, so you can't influence them directly.
Show your users how to disable headers and footers in the «Page setup...» dialog.
The headers and footers for printing from browsers is, sadly, a browser preference, not a document-level element that you can style. Refer to my very similar question for further workarounds and disappointment.
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
http://css-discuss.incutio.com/wiki/Print_Stylesheets#Print_headers.2Ffooters_and_print_margins
However, as of 2017, the #page at-rule has been standardized, which can be used to hide the page title and date in modern browsers:
#page { size: auto; margin: 0mm; }
Credit to Vigneswaran S for this tip.
Remove the url from header and footer using below method
#page { size: letter; margin-top: 4mm;margin-bottom: 4mm }
I've also tried everything but finally I'm writing below code to make URL shorter:
var curURL = window.location.href;
history.replaceState(history.state, '', '/');
window.print();
history.replaceState(history.state, '', curURL);
But you need to make a custom PRINT button for user to click.
Now we can do this with:
<style type="text/css" media="print">
#page {
size: auto; /* auto is the initial value */
margin: 0; /* this affects the margin in the printer settings */
}
</style>
Source: https://stackoverflow.com/a/14975912/1760939
I assume that you are talking about the URL that shows in the footer of the page.
If so, this is set by the browser and it is not something that you can do from your code.
I am not sure but the URL is added by a browser when you want to print. It is not part of the page so can not be affected by CSS. Maybe there is a way but it will be browser dependent.
i found something in the browser side itself.
Try this steps. here i have been mentioned the Steps to disable the Header and footer in all the three major browsers.
Chrome Click the Menu icon in the top right corner of the browser. Click Print. Uncheck Headers and Footers under the Options section.
Firefox Click Firefox in the top left corner of the browser. Place your mouse over Print, the click Page Setup. Click the Margins & Header/Footer tab. Change each value under Headers & Footers to --blank--.
Internet Explorer Click the Gear icon in the top right corner of the browser. Place your mouse over Print, then click Page Setup. Change each value under Headers and Footers to -Empty-.
This is a browser issue. But you can handle this problem by these line of codes:
<style type="text/css" media="print">
#media print
{
#page {
margin-top: 0;
margin-bottom: 0;
}
body {
padding-top: 72px;
padding-bottom: 72px ;
}
}
</style>
For Internet Explorer, go to Tools. Click on the print option and then page set up. Under headers and Footer, make all the choices "empty". Then it will not print out on your printed pages.
I hope this helps.
In CSS, with:
#page { #top-right { content: "Page " counter(page) " of " counter(pages); } }
I can have page numbers displayed at the top of every page when the page is printed. This works great. But now, how can I make it so the page number starts with 2 instead of 1? Can I do that by modifying the CSS rule above?
If you are using Flying Saucer (which was my case), use the following CSS:
table { -fs-table-paginate: paginate; }
It works like a charm. And Flying Saucer rocks :). Really highly recommended.
Try:
#page {
counter-increment: page;
counter-reset: page 1;
#top-right {
content: "Page " counter(page) " of " counter(pages);
}
}
using page 1 will reset the starting point of the counter. You can use any integer to start counting from. The default is 0.
After playing with Flying Saucer a bit, I guess there's no way to do this with CSS (or it's a very complicated one), as "page"/"pages" seem to be internal CSS variables. Perhaps it gets better with CSS 3, there seems to be a calc() function, so counter(calc(page+1)) could perhaps work...
But there is another way to get the PDF starting with page 2. You can add a blank first page to the PDF by adding this line to the xhtml file:
<h1 style="page-break-before:always"></h1>
Then you can either print only pages 2-... of the PDF when using a printer or remove the first page from the PDF with some PDF editor.
Have you seen the CSS documentation about counters? see here It seems to me that you can call the counter-reset. By default counters are set to 0. If in your Body tag you did a "content-reset: page 1;" then it should force the first page to start at 2 instead of 1.
Posting this for someone else viewing this page. You can also look into another stackoverflow post provided below. This has worked for me.
flying saucer - page count with css
.seq-start{
-fs-page-sequence: start;
}
Don't know if this works, but why don't you try counter(page+1)?