I'm using WooCommerce with a WordPress theme that hasn't been written to be compatible with the plugin. For the most part I have the CSS working so that the shop looks okay, but I have run into trouble. For some reason, when I go to a category of products, they show up on top of one another, and not in a grid or side by side. I am going nuts trying to figure out how to fix this, and failing.
Page: http://urbexploration.ca/product-category/sanatoriums/
At first, I realized that each < li > (product) had a huge margin on the right, so I took that out with margin-right: 0; but they still are not floating left in a grid. If any code is needed, please let me know. I've been trying to target the < li >tags which have the class 'product'. The < ul > is 'products'.
I've tried
.products li, .product{ float: left !important; margin-right: 0 !important; }
The ul tag seems to fill the area it should using Google Chrome developer tools, and the li is now sized properly (I think) but it still doesn't float? Or maybe it IS floating and I'm missing something else.
Took clear:both; out of the .excerpt class as suggested, and that seems to be floating them properly.
To make its own answer:
li.product.excerpt { clear: none; }
would be a good start. The double class selector should make sure the rule is more specific than the problematic .excerpt class itself.
Related
When I look at WordPress coding as well as other sites. I mainly see a while lot of scripts and css styles that it drives me bonkers. Here is evidence of what I am getting at:
Ul.nav setup
ul {
/* some css */
}
ul.nav {
/* some css */
}
/* and the rest goes on about ul nav and hover events */
Vs simple css (in my honest opinion)
.nav {
/* some css */
}
.nav:hover {
/* some css */
}
What will the difference be in these methods and are they the correct format of css writing? And if it is possible. Why isn't every code simple and concise to load faster etc? How it's done on both versions are correct to make a link work. (To be assumed)
Thank you all for taking your time to help!
In the first example you can add style to everything in the ul tags, and everything in the ul tags with a class of nav. In the second example you are adding style to anything with the class nav, and anything with the class nav when someone hovers their mouse over the nav. If that makes sense :-)
I think that what you chose as evidence probably is somebody specifically naming their elements .nav
For me, it's better to have more specific classnames, but not too long. But then we're going into the hardest job in IT "naming things".
Giving your ul or nav the classname .nav is a bit redundant. So i disagree with your assessment there that it's simpler. If you have a vertical nav and a horizontal nav, then .nav would be more complicated to style.
It really depends on the project, the scope and the readability.
CSS validators frown at the first example (overqualified elements) , but for the records
ul.nav will inherit everything from the class of .nav.
How do I fix the conflict I'm running into when trying to style the UL in this blog post with check mark images. There's a style set up in the skin that is taking precedence over my style I've applied to the ul. Not sure how to over-ride it. I've tried every variation I can think of, and I'm sure it's just a basic misunderstanding of how things cascade. Can you help?
The post is here: http://alexisexhibits.com/trade-show-preparation-checklist
The CSS I have for the style is:
.checklist {
list-style-image: url(http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg) !important;
}
I know, the !important declaration is hackery, but oftentimes I find it necessary in dealing with CMS stuff, since the CSS is so piled on top of each other. In this case, it doesn't seem to help, but I left it.
The offending rule that allows the checks to show up if I disable it in Chrome Dev inspector is:
.shortcodes ul li {
list-style: disc;
}
but I'm hesitant to change that as I don't want all ul li to change, just this specific one.
What's the right way to fix this? Any tips you can give on how to suss this sort of thing out for myself in the future?
list-style-image should be applied to the <li> not the <ul>
Like this:
.checklist li{
list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important;
}
I'm looking for a quick and easy way to hide an element on just two pages that is otherwise in the sidebar on all pages. I tried to do it with css but just can't seem to affect this one spot. This is one of the pages and the client wants the FDIC logo in the sidebar gone. I tried adding page ID and the sidebar css to display:none, but can't work out the right combo. Am I on the right track?
#page-id-63 .textwidget
{display:none;}
Thanks for your help!
"page-id-63" is a class, not an id on the page you linked, so you'd need:
.page-id-63 .textwidget {
display: none;
}
#text-9 > .textwidget {
display: none;
}
Try this out, either include it in a tweaks stylesheet specifically for those couple pages or throw it between style tags in the head.
Edit: I see you have the page number defined as a class in the body tag, you can put this in your main stylesheet adjusting the first class for your specific page (ex. .page-id-13 instead of 63) ..
.page-id-63 > #wrapper > #main > #secondary > #text-9 > .textwidget {
display: none;
}
You need
.page-id-63 .widget-area .text-widget {
display:none;
}
as you have many text widgets, and only want to hide the one in the sidebar.
Yes you are on the right track. What you need to do is apply the style and then have a look at the element using your browser dev tools. Then you will be able to see if
The style applied.
If any other styles are overriding it.
Update
Having checked your site now that is out of maintenance mode, try this
.page-id-63 .textwidget{
display: none;
}
This is driving me crazy. Can anyone tell me what I am missing here.
I have a word-press site I am trying to copy the design into an e-commerce skin
The wordpress site: http://solesu.clarityproductions.com/ and the
e-commerce skin i am working on is http://cspro.solesu.com/.
The words MAIN PAGE are slightly differently balanced from the wordpress site to the
e-commerce skin and I cant figure it out. Can anyone help me where the problem
is and what css change may need to be made. I have been looking a this for hours.
It looks like the background padding or height or something is a little taller
on top and bottom on the wordpress site but im not sure whats controlling this.
It seems that there is a quite a few differences in the code. Have you tried using Firebug for Firefox or the Webkit Developer Tools to inspect the page elements for differences?
After a quick look I can see that your missing elements and other stuff is going on.
This is what you have on line 54 in your styles.css:
.sidebox-categories-wrapper ul li a, x:-webkit-any-link, x:default {
padding-bottom: 3px;
}
It's the padding-bottom: 3px; that expands the height of the anchor tag.
Remove it, and you'll be fine.
This is the style giving you the issue
.sidebox-categories-wrapper ul li a, x:-webkit-any-link, x:default {
padding-bottom: 3px;
}
just make sure you overwrite it
#vmenu_8 a {
padding-bottom: 0;
}
And it'll be fine.
I’m having a problem with my links becoming deactive within some nested elements. I followed some instruction on creating rounded corner boxes via a tutorial by Andy Budd. Anyway, it all works great except when I wrap link tags around a few pieces of copy. I’m a bit of a beginner still so maybe this is a simple fix but I’ve spent over a days worth of time now trying to figure it out on my own and can’t seem to get it.
Just to clear this up, the links work everywhere on the page outside of the “box” element I’ll list below and I’ve double and triple checked that the link within the “box” element is written correctly and it is. The CSS even finds the link and styles it correctly, however, the mouse function seems to be disabled. Does this all make sense? Below is the CSS, any help would be greatly appreciated…
This is the code that creates the box and it works correctly…
.box {
width:831px;
background:url(../imgs/box-spacer.gif) repeat-y;
}
.box h1 {
background:url(../imgs/box-top.gif) no-repeat left top;
padding-top:40px;
font-weight: normal;
}
.box .last {
background:url(../imgs/box-bottom.gif) no-repeat left bottom;
padding-bottom:60px;
}
.box h1, .box p {
padding-left:60px;
padding-right:60px;
}
And this is the code I used to test that the page is seeing it as a link…
.box h1 a:link {
color:#00CCFF;
}
.box h1 a:hover {
color: #FF0066;
}
It changes the color correctly but the hover doesn’t work and if you click, it doesn’t link you anywhere. Again, the link is written correctly on the page. Can anyone help please? I appreciate it. Also, the website is up at http://www.fiddlergroup.com/zygote if it helps. The particular page I was using for testing is the “what’s in a name” page. As you’ll see, all the code and pages and what not is all very simple, just can’t seem to figure out how to fix this one odd issue.
The problem is with z-index: -100 on your #holder element. Click events are ending on the body element and not making it down through to the link. Remove the negative z-index and it should work.