I'm using Rotativa to generate some pdf's in a mvc application, now, I need to define an image as a watermark for the pdf, I was trying setting some custom css properties to the body tag, but in this case. I need to define the margin as 0, also I have a custom switch for a footer and with the margin 0 this is a problem.
I'm looking for a way t define a watermark, maybe using a custom switch.
Anyone knows if is possible?
Thanks,
Try this....
In your view put this HTML
<div class="watermark" style="background: url('../Images/watermark.png');"></div>
Also, add this style to your css file (or in a style section inside you view)
.watermark {
height: 100%;
width: 90%;
position: absolute;
top: 0;
bottom: 0;
z-index: 999;
opacity: 0.25;
}
Related
I am trying to display a PDF document in razor view but the height and width it displays are too small. The height is too short - just about 100px so one has to scroll so much to go through the document and the user would not be able to view the document properly this way. I have tried to set its height and the height/width of the containing css elements to 100% and yet it does not make any difference.
This is the code I tried to use to display it
<div class="panel-body">
<embed src="#ViewBag.sourcePath" type="#ViewBag.resourceType" style="width:100%; height:auto; min-height:100%" />
</div>
sourcePath is the location of the document.
Then I though of getting the dimensions (i.e. height and width) of the pdf document so I can set the display width on the fly but I dont know the method to get the dimensions of a file in c#. Again my fear in doing it this way is that I want it to be responsive so it can scale properly in different viewports
I will appreciate a guide to achieving this.
Thank you
It's possible that your panel-body class has height property set to 100 px.
It is also possible that the div with this class is constrained by other div element in which it is contained.
Anyway you should check yor CSS file or styling atributes on the page. Here's an example of how I display my pdf files.
View:
#{
ViewBag.Title = "ViewPDFB";
}
<style type="text/css">
#pdfbox {
width: 100%;
height: 1000px;
border: 5px solid #ccc;
}
</style>
<object id='pdfbox' type="application/pdf" data="#Url.Action("ViewPDF", "ControllerName", new { pth = "InputFilePathHere" })"/>
Controller:
public FileStreamResult ViewPDF(string pth)
{
FileStream fs = new FileStream(pth, FileMode.Open, FileAccess.Read);
return File(fs, "application/pdf");
}
I'm using Popline in a Windows Store app but the only way I can get the icons to show is by linking to the bootstrap CDN version of the file. When I try and reference my local copies of the files, it doesn't work.
Here's my path to fontAwesome.css
<link rel="stylesheet" type="text/css" href="ms-appx-web:///Assets/HTML/css/font-awesome.css">
I know this is correct, because if I edit that file and add
* { border: 1px solid red; }
To the top, everything in my document gets a red border. The issue seems to be with the font files themselves. All are imported into the project and Content is set to "Copy if Newer"
I've tried editing fontAwesome.css so that the font file paths are preceded by ms-appx-web:///Assets/HTML/. When that didn't work I tried taking that block out and putting it directly in my document, like so:
<style type="text/css" media="screen">
#font-face {
font-family: 'FontAwesome';
src: url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.eot?v=4.2.0');
src: url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('ms-appx-web:///Assets/HTML/fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
Can anyone see what I'm doing wrong?
update
Please note I am using NavigateToString to load my html. This is absolutely necessary and there's no way around it, so the solution must work for NavigateToString
After a lot of trial and error I finally found how to do this. There are several solutions out there which work if you're using the Source property to put HTML in the WebView, but none of these work if you're using NavigateToString
This one, from Matt Small's blog, does.
#font-face {
font-family: 'FontAwesome';
src: url(data:application/x-font-woff;charset=utf-8;base64,<BASE64 STRING OF fontawesome-webfont.woff>) format('woff'),
url('ms-appx-web:///fontawesome-webfont.ttf?v=4.2.0') format('truetype');
font-weight: normal;
font-style: normal;
}
You'll need to put this code into the head of your HTML file. This will not work if in a separate css file.
You can use this page to convert your fontawesome-webfont.woff file. If that link doesn't work there are lots of other pages out there that do the same.
We have created a dynamic JQUERY table with dynamic columns (Depending upon count value) and assigned it to DIV tag. However the thead and tbody is going outside DIV tag in IE7.
Looks like the width is automatically set dynamically by CSS, we are not able to override it.
Did anyone faced similar issues. Please help.
use important keyword like this.
width: 100px !important;
Added the following lines in DataTable.css file and it worked perfectly!!
table.display thead th div.DataTables_sort_wrapper
{
/*Fix for width issue*/
position: relative;
clear: both;
width:50px;
overflow:hidden;
word-wrap:break-word;
}
I have just started ASP .NET recently, I already know C# HTML and CSS so it wasn't too difficult to get a simple site running. All the online tutorials and documentation I have found , is either completely visual using the vs2005 ~ 2010 designers (I hate the designers) or mostly designing and some parts in VB .NET (I am er... not too keen on VB .NET). Overall , most only cover the basic and simple parts of web development , so I am getting problems in mastering the api. Anyway the thing that is bothering me the most is that I can't change the appearance of the web controls, the css properties work in some cases but not in all. The Site.Master part is almost completely unchanged. Screenshot:
screenshot
How do I change the blue and light blue colors of Site.Master?
From the looks of things, you are using the basic Web Application website which Visual Studio produces for you when creating a new project.
Going on this assumption, you need to look for the Site.css file in the /Content/ folder.
Inside this, will be all the styles used for the various elements of the site.
I think the areas you are wanting to change are the #header, #header h1',#menucontainer,ul#menu`
Just change the background and color properties to the colour you want. Also change the color of the border
You can open up site.master just like you would any other html page. In visual studio designer, you can do code view (html). Once in there you can make changes to your stylesheet/html page (in this case your master file) according to whatever elements you need to change. Im assuming you know htm/ css as you stated in your question.
Another way to quickly check html elements is to open the page in safari/chrome/firefox/opera, right click on the element of interest and "inspect element". Itll tell you what you need to change.
Btw:
<asp:menu converts to a div. Set a class for this element then add it to your stylesheet.
Many of the elements I was looking for were in the bootstrap.css file.
However, I modified my site.css to overwrite elements of those style.
I'm using Visual Studio 2013 Professional.
This link was helpful.
http://forums.asp.net/t/2009287.aspx?Changing+bootstrap+css
Site.css
.navbar-inverse {
background-color: #FFF;
}
.navbar-inverse li {
font-weight:bold;
}
Please read and learn1.
ASP.NET Theme and Skin.
Walkthrough: Customizing a Web Site Using Themes in Visual Studio
How to: Apply ASP.NET Themes
How to: Disable ASP.NET Themes
How to: Apply ASP.NET Themes Programmatically
Walkthrough: Creating User-Selectable Themes
How to: Define ASP.NET Page Themes
Site.Master.cs:
protected void Page_Load(object sender, EventArgs e)
{
foreach (MenuItem m in NavigationMenu.Items)
{
if (m.NavigateUrl.ToString() == "~" + HttpContext.Current.Request.Url.LocalPath.ToString())
{
m.Selected = true;
}
else
{
m.Selected = false;
}
}
this.DataBind();
}
Site.css:
Besides these two, I removed the "div.menu ul li a:hover" selector, the "div.menu ul li a:visited" selector and the "div.menu ul li a:active" selector.
div.menu ul li a.selected
{
background-color: #867F27;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a
{
background-color: #7E5B33;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
I am trying to get the value of a "Background-image"-tag in a stylesheet which is used on my web-site. The style-sheets are referenced from the HTML file as follows:
<style media="all" type="text/css">
#import "master.css";
</style>
<style media="all" type="text/css">
#import "layout.css";
</style>
The layout.css file contains:
#frontpage-main-features {
background: url('../elms/frontpage-main-gradient.jpg') no-repeat left top;
margin-bottom: 10px;
}
#frontpage-main-features-inner {
width: 700px;
padding: 20px 20px 10px 20px;
background: url('../elms/frontpage-main-gradient-bottom.jpg') no-repeat left bottom;
}
In the master.css file a background image is referenced which is then overloaded in the layout.css file by the #frontpage-main-features-inner section. I would very much like to access the "background"-tag in order to see which background image is currently being shown in a specific part of the page. Any suggestions?
Best,
Michael
Why not just use FireBug / the IE8 dev console? load the page, open the console, find the piece of html you are looking for and inspect the css properties, it will give you all applied styles for that element, overridden properties will be striked through...
You're talking about looking at the markup of the page from C#, i.e. this is the markup that is not an ASP.Net server control and is not viewable by ASP.Net.
Sorry, that's not possible using ASP.Net. You can only view data that is marked for server to view.
Why do you need this? There could be another way to do whatever you are trying to do. Maybe you need to turn the problem around (get markup to get the class name from c#) which is easier.
The problem is that CSS rules are not applied or enforced on the server, they are applied by the client browser. You could perhaps create a parser that goes through the referenced CSS files and figures out what image should be displayed but you really can't know with certainty how the client browser will interpret and apply the CSS rules.