Your cart is currently empty!
Hi Robert,
You have to give the <ol>
padding as well as give the <li>
a bullet list-style-type
The rule that is giving the <ol>
0 padding is still in place
ol, ul {
margin: 0px;
padding: 0px;
}
You have to give the <ol>
some left padding (40px), or remove this rule altogether, for the bullets to be visible.
Phil
Hi Robert,
In Epik style.css the list-style-type for the .sidebar li is currently set to none
.sidebar li {
list-style-type: none;
margin-bottom: 6px;
padding: 0px;
word-wrap: break-word;
}
Change this to some value other value like circle or disc(I thought it was set to disc yesterday)
.sidebar li {
list-style-type: disc;
margin-bottom: 6px;
padding: 0px;
word-wrap: break-word;
}
Doing this in combination with removing the padding should work. When I do this in the code Inspector I can see bulleted lists.
Cheers
Phil
Hi nickmustafa,
Find this in the Epik style.css
.genesis-nav-menu .menu-item {
float: left;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: left;
}
To add a solid line below each menu item add one line ‘border-bottom : 1px solid #000000;’ like so :
.genesis-nav-menu .menu-item {
float: left;
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: left;
border-bottom : 1px solid #000000;
}
which gives you a black, 1px thick, solid line. You can choose the hex colour of your line here http://www.colorpicker.com/
Cheers
Phil
Hi Robert,
This rule in the Epik style.css is setting the padding on the <ol>
to 0 which is pulling your list to the left edge of the container and hiding the bullets
ol, ul {
margin: 0px;
padding: 0px;
}
Phil
Hi,
Looking at the sites again I can see that on this site
http://newlilypad.wpengine.com/product-category/accessory/
there are two bits of CSS affecting the image sizes. Firstly in
href=’//newlilypad.wpengine.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css
there’s this
ul.products li.product a img {
width: 100%;
height: auto;
display: block;
margin: 0px 0px 8px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out 0s;
}
which is setting the image width to 100%. Setting things to % sizes is setting them relative to their containing block so an image that has 100% width isn’t necessarily its actual size, see here http://www.impressivewebs.com/width-100-percent-css/
Once you remove this the next problem is in the Epik style.css :
ul.products img {
background: none repeat scroll 0px 0px transparent;
border: 0px none;
float: left !important;
height: auto;
margin: 0px 12px 0px 0px;
padding: 0px;
width: 90px;
}
which is setting the img width to 90px. Remove this and the image displays at its correct size.
On the site http://www.lilypadev.com/product-category/accessory/ images are correct size because its not using the WooCommerce CSS and there’s a rule in the custom.css file
ul.products img {
width: auto;
height: auto;
}
If you change the rules in the Woo Commerce and Epik CSS style files, then you could affect something else. What I would do is create a new rule that is specific enough overrides these two rules. Something like the custom.css rule above with !important after it.
On this page the problem is similar http://newlilypad.wpengine.com/shop/electric-vehicle-charging-station-signs-two/
the woocommerce.css is sizing the images to 100%, which is why they are too big.
div.product div.images img, #content div.product div.images img {
display: block;
width: 100%;
height: auto;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
transition: all 0.2s ease-in-out 0s;
}
Really Woo should be fixing that as they shouldn’t be sizing stuff to 100%
The rule #main { width: 600px; } is looking for the ID main in your HTML but I don’t see one so that is why this is having no effect. The <main> container doesn’t have an ID by which you can select it. The Epik style.css is setting the <main> container to 740px so change that
.content {
float: right;
width: 740px;
}
I don’t see anything in the HTML with a class of col-left so this line isn’t affecting anything
.col-left { float: left; }
I’m just using the Inspector in Firefox to see the code ( Right-click, Inspect Element (Q) ). I have then opened the CSS file which is why I can see/copy the comments.
Phil
Hi HiNooril,
I assume it’s the way the images are not centered in their background that you are not happy with? You don’t say what it is you want to fix so I will assume this is the issue.
The problem is line 69 of the Epik style.css file which is giving the product image a 40px left margin
/* woo edited sept 2014, take out box, add width */
.woocommerce ul.products li.product a img, .woocommerce-page ul.products li.product a img {
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.3) !important;
display: block;
height: auto;
margin: 0 40px 8px; }
Because only 3 values are specified here
margin: 0 40px 8px
the 40px applies to both left and right margins. If you did this
margin: 0 40px 8px 0
then the left margin would be 0.
I assume you have edited the epik style.css and entered this code? I think this will get overwritten with Epik updates so you would be better off creating your own CSS file and putting your CSS in there. You can insert a link to this CSS file in the Genesis Theme Settings in the Header and Footer Scripts section – just stick it in the header OR footer.
You can give pages/posts their own custom body class and use this to target your CSS to the elements you want.
Cheers
Phil
Hi Eric,
Thanks for your reply.
I was just using Thesis 1.8. no extra skins installed.
Well there are 2 ways I can do this. Either use 301 redirects in my htaccess, or use the CDN capability in WP-Super Cache. Will prob got with WPSC.
Cheers
Phil