I am trying to display a banner on a report while printing but it doesn't print. What I did was I set the display status to display:none in my regular CSS
#transfer_head2
{
display:none;
}
and I changed the display status to display:block in my print CSS
#transfer_head2
{
display:block;
}
but this is not working. Why? Can anybody help me?
Check the ordering of your CSS files and the media defined. Your print.css should come last so that it can override any CSS with media=all. Using Firefox with the Web Developer plugin you can change the CSS in your browser to display as if it were print media. You might want to try that in conjunction with the inspection facilities of Firebug to see what CSS is being applied from where.
Maybe your display: none is overwritten by another property later defined. Try !important
display:block !important;
Is #transfer_head2 a TABLE? If so, you need to use:
#transfer_head2 { display: table; }
Is it a TR?
#transfer_head2 { display: table-row; }
Is it a TD or a TH? Then it's the following:
#transfer_head2 { display: table-cell; }
Note that those are not supported in IE6 or lower. In which case you might want to use something like the following:
#media screen {
#transfer_head2 { height: 1px; width: 1px; overflow: hidden; visibility: hidden; }
}
#media print {
#transfer_head2 { height: 60px; width: 468px; visibility: visible; }
}
EDIT: I forgot to specify this in my original post but keep in mind that most browser configurations have background printing disabled by default, so if you have something like the following in your CSS:
#transfer_head2 { background-image: url('../image/print_banner.jpg'); }
it will not print no matter what the display mode. If you have control over the user's browser configuration, this is a non-issue, but in most cases, you will want to use an IMG tag for your banner.
Make sure the container divs (if any) is not hidden
Check the generated source with web developer toolbar to see the inherited properties of the div.
Without seeing the code of #transfer_head2 it's hard to tell, you should paste it into your question.
One possible reason could be that you have made the banner a background for #transfer_head2 element, and browsers are usually set not to print backgrounds by default.
EDIT: ugh, Andrew has covered that already...
Related
This is the website I'm working on http://www.jokerleb.com/ and I'm using this https://responsive.menu, the free version. it will appear on devices 400px and smaller.
How to split its columns into 2 like so?
Don't know how to edit the CSS to make it look right, if it's possible in the first place.
Adds these lines to your code :
#media screen and (max-width: 400px){
#responsive-menu-container{
width:100%;
}
#responsive-menu {
display: flex;
flex-wrap: wrap;
}
#responsive-menu li{
width:50%;
}
}
It works for me.
You'll want to use media queries, so something like this should do it for you:
<style>
#media screen and (max-width: 400px) {
#responsive-menu-container li.responsive-menu-item {
width: 50%;
display: inline-block;
}
}
</style>
Note that you may need to play around with this CSS a little, since widths will vary based upon padding, margin and the display type. If you provide a sample of your CSS (or better yet a fiddle) I can help you more exactly.
The lines above make it look like this once the category button is clicked:
If you'd prefer the thing go the whole width, include this in your #media option as well:
#responsive-menu-container {
width:100%;
}
I've got a Wordpress site using WooCommerce, and I've got a plugin that isn't working how it should. So, I managed to find a particular line in the PHP code that triggers when I need it to do something my way. Problem is, I need to change some CSS styling within the PHP code.
How exactly would one do something like this?
<woocommerce class="a.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
<woocommerce class="button.button.alt"><style>background: #FF8282; pointer-events: none;</style></h1>
Mind you that code above is incorrect. It is just an example of what I'm trying to achieve.
As for a more detailed breakdown, I'm trying to change/override a CSS style that already exists on my web page. Overall, the trick is to change some CSS style that already exists into doing something else. The CSS for the item I found (from Firefox's HTML debugger/inspector) is:
.woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt
And I need it to apply these styles instead:
background: #FF8282;
pointer-events: none;
If you need more information, just let me know.
Thank you.
I think that adding an !important behind would do the trick.
{ background: #FF8282 !important; pointer-events: none !important; }
Also, make sure u only link this after all other css occurences.
Would this help?
SOLVED
I included in the logic that was tripping some PHP code:
include '/wp-content/themes/my_theme/400.css';
And that CSS file (400.css) contained:
<style>
.woocommerce a.button.alt { background: #FF8282 !important; pointer-events: none !important; }
</style>
Thank you everyone for your help. Much appreciated.
Have you tried adding !important at the end of your css line ? This will force your new property to overide the one from your plugin :
background-color : red !important;
I guess something like this is your looking for. Just comment if you want modification.
$('button').click(function(){
$('div').addClass('changed');
});
.woocomerce{
background: cyan;
}
.changed{
background: #FF8282;
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Change CSS</button>
<div class="woocomerce">
Hello World
</div>
I'm trying to add an arrow to the left hand side of my active link in my categories sidebar for my wordpress site I'm building.
I've already put in the css for it to behave the way I'd like it, I've added a small change in colour just so I know it's working well.
I've attempted to add a background image with a small .png file and tried various CSS styling to get it how I want it but I've had no luck even showing the image.
I'm open to using the character such as "➤" or the like if I cannot use a background image, maybe I might be missing something.
http://94.23.211.70/~cewp/product-category/cushions/
The above my my URL that will go directly to the page you're wanting to see along with a link already highlighted on the sidebar.
Here is the css that is making this active:
.product-categories .current-cat a {
color: #000033;
background-image: url("images/ICONNAMEHERE.png");
}
Hopefully this is enough information to provide, anymore then just ask me.
Regards
You can achieve this by css and font awesome. First add font awesome to your project. You can also use unicode charecters instead.
.widget_product_categories li { margin-left: 2.5em; }
.widget_product_categories li:before {
display: block;
float: left;
margin-left: -2.5em;
font-family: 'fontawesome';
font-size: 14px;
content: "\f054";
}
if not interested in adding font awesome content:url("images/ICONNAMEHERE.png");
Here is my code for a fixed header.
<?php } ?>
<header id="header" class="<?php if ( theme_option( THEME_OPTIONS, 'enable_header_fixed' ) == 'true' ) : ?> fixed_header <?php else : ?> relative_header <?php endif; ?>">
I would like to incorporate CSS to disable fixed on mobile. My website is 780webdesign.com if you need to view source. Thanks much.
EDIT: Still not resolved
If you want to make the header "no longer fixed" but still visible, you can put it back to the default value, which is static.
/* To revert a fixed element to the default position */
.fixed-header {
position: static;
}
Currently you're telling it to not display at all. You'd want to adjust the position of the element. So you would do something like this:
#media screen and (max-width: 767px) {
.fixed-header {
position: relative;
}
You may have to add some additional properties to fix positioning but that would be a good start.
EDIT:
After getting linked to the site, and taking a look this is what you would want to use.
#media screen and (max-width: 767px){
.fixed-header{
position: relative;
margin-bottom: -270px;
}
}
You have inline styles which are going to cause issues with your classes, so you need !important on anyhting you use to overwrite them. The following will resolve you issue from what I see:
#header.fixed_header {position: relative !important;}
#page {margin-top: 0px !important;}
This code just needs wrapping in a css media query to set it to happen at what your preferred widths are.
If you visit http://sealbeach.thinkbluedesign.com/, you will see that there is a gap which I believe is for the WordPress Admin bar. I tried putting a filter that removes the space but it still shows to those who are not logged in.
This is the code that I used that worked for those who are logged in but did not for those who are not.
function remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_admin_login_header');
That space actually appears to be caused by the margin on the #topmenu element. Adding the following CSS to disable the margin on that element should solve your issue.
#topmenu {
margin: 0;
}
the problem is within your #topmenu.. it has float li...
try adding this in you css file...
#topmenu {
display: inline-block;
}
You can use margin to align it to the top. Add margin-top: -30px to div with css 'top-menuwrapper'. So it becomes -
.top-menuwrapper
{
background-image: url("images/top-banner-back.jpg");
background-repeat: repeat-x;
height: 44px;
margin-top: -30px;
}
Thanks & Regards
Yogi