Howto create a (base controller) printer friendly version? - css

I working on a project and I would like to have a printer friendly version of the Views I have. Is there anybody who already did this and have some tips how to accomplish this? (what kind Routing is used, etc.)
I was thinking of making a PrintController. In the ActionResult of a method in the PrintController to return a View with a specific masterpage.
public ActionResult Index(string printView)
{
return View(#"~/Views/Product/Index", "PrinterFriendly_MasterPage");
}
Stephan Walter doesn't advice to use this kind of redirecting (tip #24) because it is not the way MVC was meant to be.
On the View there will be a link to print the page, e.g.:
- normal link: www.example.com/product;
- print link: www.example.com/print/product;
I don't want to use javascript or AJAX. Just show the same View the user is watching, only with a different masterpage (which will have specific print stylesheets).
Thanks for the quick reply, but I it is not exactly the way I want it. I already have specific css files for printing.
Take a look at the following Dutch website for example Normal View and Print View.
I want to have a link which displays the same View but with another masterpage. In the other masterpage I include the css files for printing.
So, the user gets a View which is almost the same as "Print preview" from the browsers menu.
The advantage of doing it this way is, it will comply to the WCAG standard.

What about just creating a print css which will hide navigation and whatever else you don't want showing on a print.
see http://meyerweb.com/eric/articles/webrev/200001.html and http://www.alistapart.com/articles/goingtoprint/ for more info.

Don't create separate views. Just create a print specific CSS file using media=print in the link, and the browser should automatically use this CSS when printing.

Why not just specify the "media" attribute in your css link?
<link href="normal.css" rel="stylesheet" media="screen" type="text/css" />
<link href="print.css" rel="stylesheet" media="print" type="text/css" />
That way you can use 1 masterpage but have both screen view and print view differently.

Related

The way to change CSS themes in React application?

The idea is to get a configuration JSON from the server after login. And depending on the config(let say a company the user is linked to) use one of the pre-set styles. The frontend is React-based. So, I'll not be able to get the main styles tag by id and change it on the fly:
<link type="text/css" rel="stylesheet" media="all" href="../green.css" id="theme_css" />
document.getElementById('theme_css').href = '../red.css';
Are there any other common ways to load files dynamicly in React(Redux) web-app?
You can try this way. It works great for even larger projects of your browser support is slightly higher or you can implement the same with the help of SASS/LESS.
https://medium.com/#harishv6665_49536/theming-with-react-js-or-any-in-minutes-with-css-variables-11d4ebecdb41

joomla wrong base href results in wrong CSS template

I have installed Joomla 3.x and some modules.
One of my modules is to display articles from certain categories of my articles, but when I navigate to my article, the CSS stylesheets do not load.
When I view the source, I discovered that the URL for the CSS stylesheet in the page above becomes:
<base href="http://cambridge.mywebcommunity.org/index.php/10-%E7%88%B1%E7%AB%8B%E6%96%B9%E5%8A%A8%E5%90%91%E6%9B%B4%E6%96%B0/3-welcome-to-your-blog" />
... instead of the original I put in, here:
<base href="http://cambridge.mywebcommunity.org/" />
This also happens to another CSS stylesheet from the module. The CSS URL loads like this:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/10-爱立方动向更新/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
... instead of the original CSS URL that I put in:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
So I have figured out that the issue is the URLs are not being added by Joomla correctly. How would I go about fixing this?
From what you've posted it looks like you (or extension developers) are trying to add css with absolute links. Looking at the source of your page will quickly show you that your links look different from the core links in that they are absolute not relative. You may need to look a the code in the modules doing this and fix or contact the developers and ask them to fix. Also ask them about the js.
In Joomla you add style sheets with code like this in your template index:
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
The change in behavior is most likely due to a recent security fix concerning uris in the header. I'm not going to link to details of the exploit but easy enough to find out why this was changed, but it was for good reasons.

Generate a report for screen view and for print view using css

I have a webpage with a report that is paginated while displaying on the screen. This is done using displaytag. Only the number of records to be displayed on screen are queried. While printing, however, it should print the complete report.
I wrote a javascript that is called on click of the print button. My idea was to regenerate the report without pagination parameters and then print it. Can this be done without displaying the complete content on the screen?
Are there any other ways to do this?
Thank you for your help.
than one otpion is create new style sheet where media=print
which look as like
<link rel="stylesheet" type="text/css" media="print" href="print.css">
you can read more : CSS Media types and printer friendly pages

Dynamically loading CSS elements in asp.net

I searched google and SO, but did not find a solution.
I have an asp.net web app that allows users to customize some GUI aspects (such as font color, add a custom logo etc). This information is stored in the user profile database.
I have a css file that populates font colors etc. The main page, loads the users profile from the database, and customizes the page accordingly.
Aside from having each label with its own "font-color=", how can I display the CSS elements, based on the user profile information returned from the database? Thx
You can include an extra CSS file that points to an ASPX page:
<link rel="stylesheet" type="text/css" href="/CustomStyles.aspx" />
Then in CustomStyles.aspx change the default content-type:
Response.Clear()
Response.ContentType = "text/css"
Then just start outputting your styles:
Response.Write("#awesome-button{color:" & ColorFromDatabase & ";}"
Make sure that this file is included after the other styles so that it takes precedence. You might want to also throw an !IMPORTANT in there, too.
Response.Write("#awesome-button{color:" & ColorFromDatabase & " !IMPORTANT;}"
It depends on how you have the information stored, but you can add styling to elements through code like this:
Button1.Style["font-weight"] = "bold";
Or you can just apply a CSS class to the control:
Button1.CssClass = "buttonStyle";
You could have a page that just returns a CSS file based on the preferences stored in the database. So you would have:
<link rel="stylesheet" href="somepage.aspx?userid=<%=userID%>">
You could probably even do that easily enough with a classic ASP page, a web service, etc.
The point is that that page would generate the same basic stylesheet, filling in the right colors etc. that the user has chosen. This way you don't have to perform a bunch of style changes in server-side or client-side code after the page has loaded, or mix your user preference code in with your HTML, or change much about the base pages if you want to change the way the stylesheet works. It also makes it easy to test your stylesheet outside of testing the site itself.

ASP MVC import CSS

I am new to ASP.NET MVC and I am trying to include a CSS file into my view.
The view is strongly typed and has a List Scaffold Template, it is linked to a master page which itself is linked to a css file and works fine for the master slide but when trying to link the view to a seperate css file I cant as I cannot include tags.
Anybody know how I can resolve this?
<link href="#Url.Content("~/Content/YOURSTYLESHEET.css")" rel="stylesheet" type="text/css" />
You should add a new content place holder in your site.master page in the head tags, i always have one called "HeadContent" which i use for inclusion of scripts and css that i only want on individual pages.

Resources