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;}
Related
What is the correct way to hide only the view Button at My account/orders
Any help at all would be much appreciated.
This is difficult to answer without seeing any code, but assuming you are using WooCommerce out of the box, this CSS rule should work for you:
td.woocommerce-orders-table__cell.woocommerce-orders-table__cell-order-actions, th.woocommerce-orders-table__header.woocommerce-orders-table__header-order-actions {
display: none;
}
Instead of blanking out the entire table cell where other link buttons may exist for invoices, etc. just take out the View button:
.woocommerce-button button view {
display: none;
}
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;
}
On my website on all pages except the home page, here's an example: http://www.pantsdownrecords.com/discography/, the issue I have been having is with the custom header. In the customer header div element where it says: “div class=”custom-header” and right after this is a style tag adding a margin-bottom of 82px. I have looked in all of the template pages and even the few plugins I am running right now, and cannot find where this style tag is being added. And since it is a style tag I can’t override it with CSS since style tags take precedence. Since this margin bottom is there, on some pages I can’t even see the footer because the page can’t scroll to the bottom.
Could somebody help point me in the right direction of where this issue is coming from?
All help would be greatly appreciated,
Thanks
It's in this file - http://www.pantsdownrecords.com/wp-content/themes/twentyseventeen/assets/js/global.js?ver=1.0
Under the adjustScrollClass() function. And you can overwrite an inline style with !important in your CSS. You should use that feature sparingly, but it works if you need to overwrite an inline style.
You could open more files in notepad++ and use search with Find in all open documents if you want to find a specific string.
You could change this with CSS by using !important for the specific element or check with javascript or jQuery for pages where you have the problem and set the specific styles.
CSS:
.custom-header { margin-bottom: 0px !important")
JavaScript:
var winURL = window.location.href;
if(winURL == "http://www.pantsdownrecords.com/artists/") {
document.getElemetsByClassName("custom-header")[0].style.margin = "0px 0px 0px 0px";
}
jQuery:
var winURL = window.location.href;
if(winURL.indexOf("artist")) {
$(".custom-header").css("margin","0px");
}
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
Hey lets say i got two links on my page and i have some sub links(show up when main link clicked). Those two links have different background image.
*link1
-link1underlinkone
-link1underlinktwo
*link2
-link2underlinkone
-link2underlinktwo
-link2underlinkthree
I can easily change background image on those two main links, but how should i pass same background style to my under-links? And underunder-links if i would have any?
edit: woops forgot to tell i want change background image of BODY not the link/links ;)
You should try putting both the main links in seperate div's with their sub-links. Set the background on the div (set display to none so it is invisible), and then set the background on all the links to inherit, so they take the background from their parent div.
Edit: Use the code I made below
<head>
<style type="text/css">
#link1wrapper {
background-image: url(background1.jpg);
visiblity:hidden;
}
#link2wrapper {
background-image: url(background2.jpg);
visiblity:hidden;
}
.linkmenu a{
background-image: inherit;
visibility: visible;
}
</style>
</head>
<body>
<div id="link1wrapper" class="linkmenu">
*link1
-link1underlinkone
-link1underlinktwo
</div>
<div id="link2wrapper" class="linkmenu">
*link2
-link2underlinkone
-link2underlinktwo
-link2underlinkthree
</div>
</body>
Edit: I fixed the code. Now, it puts a background on the div's and hides the div's, then I set the links in the div's to visible and voila, all the links have inherited it's background. The things you should be aware of are not to put anything else in the div's. If you do, you have to style them to set them to visible and set their background to none.
That's all I could come up with based on the very limited information you have given me. You didn't use any code, any examples, or any references, so it's very hard to answer your question accurately.
I better get an upvote for this one =p
Guessing you want to make a proper menu structure here is a little demo I made.
http://jsfiddle.net/sg3s/fPu9S/
The two key properties used are background-image: inherit and visibility: hidden.
background-image: inherit will make the element inherit properties from its direct parent, if no image is specified this means no properties will be inherited. Due to this we need to make the ul for the sublinks / menu inherit the properties from its parent too... Then we mask this image on the ul using visibility: hidden and since visibility default setting is inherit we need to make the lis visible again with visibility:visible.
So thats the explanation of what is actually going on. inheriting the styles can't be used together with the anchor tags unless you nest the sub links inside the main anchors and I don't think that is even valid or accepted code.