How I can remove comment count from my blog posts. I am using Creativo theme.
I have tired
.comments-count {display: none;}'''
but it didn't work
There's another CSS instruction from the theme itself with higher priority than yours. So to move up in the CSS hierarchy, be more specific with your instruction.
This works:
.post_meta li.comments_count {
display: none;
}
You should use the Chrome or Firefox developer tools to inspect the element and see why your CSS is not applied. Most times you will see a higher CSS rule that takes precedence and you can fix accordingly.
This is pretty vague/would need to see the HTML, but one thing that might work (assuming you're actually applying the class "comments-count" to the blog posts), would be to add an !important; modifier.
.comments-count{display: none !important;}
also, personally I sometimes have had issues with the "none" modifier -- you could try:
.comments-count{display: hidden !important;}
instead.
Your theme has different classes for the comments count. You can apply the following CSS to remove comments count from single post.
.single-post .post_meta .comments_count {
display: none;
}
To remove the border from the li after removing comment count, use this CSS.
.single-post .post_meta li:nth-child(2) {
border-right: none;
}
Related
guys I have a website on WordPress where I want to hide reviews tab on all product pages, currently I am using CSS hero to make changes but it applies only on the single page. I couldn't find a way to hide it on all pages, I can just do it by the changing element.style from block to none in inspect element, But I don't know how to apply it on my website. Here is the screenshot of the problem
Add this code to one of the public CSS that exist in all Pages.
.tab-content.tab-reviews {
display:none !important;
}
Do you have the same class name on other product pages too? If so, one way is to add a style:
.tab-reviews {
display: none !important;
}
classes may be repeated but ID's must be unique , please add your style with id like below
#content_tab_reviews {
display:none !important;
}
This will hide the class tab-content completely.
.tab-content{display:none !important;}
I have undefined (php determines how much) amount of divs appearing in another div. What i want is, the divs to appear that they are somehow collected. I don't know the right words to explain so i just made a little photomontage:
What I have:
What I want:
How can i achieve this effect. Do I need any other libraries or frameworks or something like that?
Seems like you want a 'masonry' style layout, checkout the isotope plugin by David DeSandro. Particularly the masonry layout style. http://isotope.metafizzy.co
I think you're looking to use the float CSS property. So add to your .post CSS class the following:
float: left;
.post {
vertical-align: top;
display: inline-block;
}
Remove center alignement otherwise the blocks are all centred.
.siteContainer {
text-align: center;
}
I'm having Sticky footer issues with this site:
http://dev.epicwebdesign.ca/allshipsrise/events/
For some reason or another, The #page div is limiting itself to the header.
I can't figure this out. All tags are closed, etc. The W3C Conformance checker only complains about "the acronym element is obsolete. Use the abbr element instead.". That is wordpress's doing.
It's similar to Footer isn't at the bottom of the page However I have set clear:both on the footer.
The footer is fine when the page is too tall. I need it on the bottom even when it's not.
There were a couple underlying issues, mostly from trying to compensate for the real issue. (Not setting body height:100%) They're all sorted out now.
In your body set the height to 100% and your footer will be displayed until the end of your page :)
Or another work around would be changing the margin-top: to 100%
You have a few problems. With element.style you are using absolute positioning and raising it up 85px. Change that to position="relative" and remove the bottom attribute.
This:
element.style {
bottom: 85px;
position: absolute;
}
Becomes:
element.style {
bottom: 0px;
position: relative;
}
Removing position:relative solves the problem. Just remove this element using firebug and you will get the result.
I have a problem with Wordpress Theme.
I'm trying to put sidebar in header.. and because of sidebar class style it receives "colored" backround. if I will change it then all sidebars will have a change.
How I can override that style class only so a change will be only in a place I need it?
part of section in template page.php
<?php display_ca_sidebar( $args ); ?>
css section of sidebar
#sidebar ul li{width:298px;float:left; background:url(i/Modern/sidebar.jpg) left top no-repeat #83b1cd; margin:0 0 19px 0;padding:0 0 10px 0; list-style:none; list-style-type:none; border:1px solid #536867;}
I need to override "background"
Thanks for Help!
Give it an unique id and use that id as css selector.
According to this https://wordpress.org/extend/plugins/content-aware-sidebars/faq/ you are in control of the HTML. So when you are creating the sidebar div, just give it a different class with which you can style that particular sidebar.
You shouldn't have to overwrite anything. When using #sidebar, you should try to use that ID for CSS that applies to all "sidebars", then use a specific class to make each sidebar appear the way you want. That gives you the ability to reuse classes and also create a default class, but you'll never have to worry about conflicts or overwriting things.
I'm not entirely sure what you mean, but if you're trying to change the background of one element in a list of elements (which I'm guessing it is if it's inside li tags), then this may be of use:
#sidebar ul li:nth-child(2)
{
background:blue;
}
and replace the number two with whichever number you need to get your sidebar to work
hope that helps
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...