I made a report of Qweb in odoo 10. Put my css in tag and place it in ".page" class div. Like this
<div class="page">
<style type="text/css">
.header,
.footer {
display: none !important;
}
</style>
</div><!--end of page-->
It is working perfectly on screen but when I generate PDF or take print from the screen by CTRl + P. It doesn't shows the css colors, backgrounds, padding and margins. I have consulted following link:
Plus I also have one solution. If we apply this tag it reflects some of the properties on the printing page.
t-attf-style="background: #333;color: #FFF; padding: 10px 0px; margin: 0px 0px 0px 6px;"
Is there any way to print the backgrounds and some different font colors on printing page other than these options. The first link is not making any changes and the second solution don't work for all properties plus its very time taking to place this tag with all the HTML tags.
I am facing this problem from last one year. That would be great help and a new learning If someone helps me sort this problem.
Thanks
Well the right answer is always the one through that separate module of defining and calling color fields as done in custom invoicing module. But I suggest a hack. Create images of that color and put them on that area with position: absolute and adjust the remains(text) on it. Plus for font and other things t-attf-style works perfectly.
Related
I tried to convert this html resume to pdf and print it but as you see there is a problem in template after changing. For example compare skills in both html version and pdf version.
This is Github repo of this project: https://github.com/xriley/DevResume-Theme
And this is a sample of HTML file: https://themes.3rdwavemedia.com/demo/devresume/
How can I fix it for ever?
I need this: https://themes.3rdwavemedia.com/wp-content/uploads/2019/04/DevResume-Sketch-Template-PDF-Preview.pdf
Solution 1 - Without Coding:
You can select margins as custom from more settings to make changes for each page accordingly.
Then you can drag these blue dotted borders to adjust text based on your need.
As i have drag thelower border upward to make senior developer text to appear in next page.
Solution 2 - With Coding:
Simply adjust margins for each page from solution 1.
Then by using the #page in your CSS. You can modify margins when printing a document. You can't change all CSS properties with #page. Only few properties such as margins while printing the page etc.
#page:first { <----- first here is refering to only First Page
margin-left: 0.75cm;
margin-top: 0.25cm;
margin-bottom: 0.25cm;
margin-right: 0.75cm;
}
If you want to apply margins on all page then simply do this:
#page { your margins values }
You can read more about #page property here.
When I adjust the screen size , the orange line which is defined by a h1 tag doesn't move downwards with the text and also my orange boxes that i had floated to the right merge behind the text.
I know I need to include Media Queries somehow but no idea how, can anyone help me?
Thanks!
Ok, first of all I don't think I have ever seen anyone use as many breaks <br> tags on a single page as you have haha.
The answer to your question is to simply use the <hr> tag (horizontal rule), wherever you want a line.
For example after the closing div tag for timings add the <hr> tag. By default the <hr> tag is styled black so we need to add some simple styling to your stylesheet.css
hr {
border-top: 1px solid #bd6e22;
}
If you wanting to add spacing above, below or even both then add this to the styling.
hr {
border-top: 1px solid #bd6e22;
margin: 20px 0;
}
I have put 20px for an example but you can change that to what ever you want.
Hope this helps.
Ok you need to open up http://me14evb.leedsnewmedia.net/slate/stylesheet.css in a ftp client.
then https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ use the #media quieres for each page break size and adjust the style's accoridng to each device :D
good luck!
Chris
Motive
Google receantly added a feature to display only mobile friendly pages in a mobile google search. Since I did already some CSS tricks to adopt mobile devices, I've confidently tried their test, but surprised by the results. Although I could quickly address 2 errors, there is one, that I have difficulty to quickly fix it: Links are too close together.
My site sports a menu like list, that altough I could quickly fix (and I may already have) and adopt to a mobile screen without any change in the desktop appearance, however sometimes links are inevitabely ends up above in each other in the body of each page. Also on one page there is a list that happens to have a list of links each other, but I'm not sure I would like to apply a CSS style to the list elements, to leave greater space in between list items (yet). I'm not seeking help on how to properly resolve that, (Like only leave gap between them, if they are actually end above each other) because it may fall under the "rethorical" question category. (Of course, I'm open to suggestions, if you have one.)
Question
I've decided, that I'll go with an ugly solution for now, that to leave a margin above&below each link regardless, what is surrounded with. Simply changing the margin did not worked. How can I do this? The page I'm currently testing is at http://adam.lehelj.com/ but the sub-domain is in currently only in hungarian.
Edit
The pages are generated from Markdown using PHP Extra library by Michel Fortin and I would prefer not to modify these files. It has a limited feature where to apply classes. (I believe it is for title, code and links.)
The answer as to why you cannot set a margin top or bottom to an achor can be found here, more specifically about the margin top and bottom:
These properties have no effect on non-replaced inline elements.
one solution that you could use would be to set a line-height on your anchors.
With the links on the top left of your example page you can add a class to the anchor tags.
<a class="links" href=""></a>
The css could be something like..
.links {
display: block; /* default is inline and top margin won't work on an inline element */
margin: 3px 0px 3px 0px;
}
With the social links on the page bottom top margins should work fine for you as well. Just adjust the numbers until google is happy with the spacing and sure that people with fat fingers like me aren't clicking on 5 links at a time ;)
li {
margin: 3px 0px 3px 0px;
}
If the rest of your site is more complex add a class to the ul or li or wrapper div around them to differentiate styles as needed.
html
li class="social-links-item"
css
social-links-item {
css here
}
html
<div class="social-links-wrapper">
<ul>
<li></li>
</ul>
</div>
css
.social-links-wrapper li {
css here
}
I have the following simple piece of HTML:
<p class="indexsub">Browse by Name</p>
and I have the following piece of css to style it:
.indexsub {
font-size: 1.3em;
color: #efb03e;
margin: 5px 0 0 5px;
}
When I place the css in the HEAD of the web page, it works on all three accounts; size, colour and margins, all applied. If I then take it out to an external style sheet, it completely fails to get applied. Why would that happen?
A few hopefully helpful notes. 1. The rest of the external style sheet works fine. 2. The external style sheet has no conflicting entity called 'indexsub'. 3. I tried placing the css snippet at the very bottom of the external style sheet (so last thing mentioned) in case other settings were somehow countermanding it. This made no difference either. 4. I tried changing the HTML to use a SPAN tag instead of a P tag. Nothing made any difference.
It's important to me to have the css external to the HTML because I need to apply some media-queries to the font size to make it smaller in smaller mobile devices. Thanks.
This is a relatively small project that I've been working on however it's driving me insane...
I'm trying to port my original website (which was done completely in Dreamweaver, HTML) to a Visual Studio 2013 ASP.NET project where I can add databases, login's etc. for an assignment I have.
The main problem I have is the fact that my CSS code does not want to do what I tell it to do in terms of the layout.
I've tried completely remaking the website entirely step by step, making sure each aspect works correctly before moving on to the next.
This is what my original website looks like:
http://i.stack.imgur.com/sxfeg.png
(Original HTML + CSS) https://gist.github.com/anonymous/7ed94218f9374d41918e
Now, I used a template a long time back in order to get this design and I've experimented to see which CSS code affects the layout and found that the tag main_container (line 13 of the HTML gist) controls the white background of the website.
So if I remove the tag, this will happen: http://i.stack.imgur.com/BFNLE.png
^ This is important in my problem.
When porting over my website, I copied across all the code correctly and adapted it to ASP. (See Gist: https://gist.github.com/anonymous/9c09befeb8950f4c1416)
However, in doing so, I encountered a problem where the CSS code for the main_container was not being used correctly.
#main_container{
width:977px;
background:url(center_bg_repeat.gif) repeat-y center;
The image was not being repeated on the y axis like on the original website and here's the result: http://i.stack.imgur.com/E4TZU.png
Have I got the syntax wrong? Or what is wrong with my code?
I've placed all the images in the same folder as the CSS file for
convenience.
Is this a problem with Visual Studio 2013 or am I doing something
fundamentally wrong?
Is there perhaps another way to port this same design without
causing so many problems?
I'm not entirely clear on what you want to achieve but if it is the same layout as your original site, then it is better to replicate the html and css exactly first to get it working then look at restructuring or refactoring the code. For example, check that all element sizing is the same so that content displays as you expect.
There are a couple of key differences between your original and new code that could affect the behaviour in the new version of your site. In your original css you don't have a repeat style for center_bg_repeat.gif. Also, it looks like #main_container isn't referenced in your original code.
Repeating a background image won't cause content to repeat across the page. You are already including your content in your new html so you just need to use positioning (e.g. floats vs relative/absolute positioning) to get the tiles to layout in the way you want (see code snippet for an example).
html, body, .container
{
height: 100%;
min-height: 100%;
}
.tile {
float: left;
width: 20%;
height: 30%;
margin: 10px;
padding: 20px;
background-color: #ccc;
}
<div class="container">
<div class="tile">first</div>
<div class="tile">third</div>
<div class="tile">second</div>
<div class="tile">fourth</div>
<div class="tile">last</div>
</div>
In your case, if you want #main_container to scale to fit the content then set its style to min-height: 100%;