Screenshot of my product page which showing SSSSS in place of stars. I just upgraded my theme and woocommerce with the latest version and started facing this issue. Before that everything was working good.
I have searched for that issue but couldn't get any solution. What can be the issue? I am little bit new to woocommerce
I have checked css file and I show '\53\53' & \73\73 symbols Do I need to replace it with \e021?
UPDATE:
This code is already there in my woocommerce.scss
/**
* Star ratings
*/
.star-rating {
float: right;
overflow: hidden;
position: relative;
height: 1em;
line-height: 1;
font-size: 1em;
width: 5.4em;
font-family: 'star';
&::before {
content: '\73\73\73\73\73';
color: darken( $secondary, 10% );
float: left;
top: 0;
left: 0;
position: absolute;
}
span {
overflow: hidden;
float: left;
top: 0;
left: 0;
position: absolute;
padding-top: 1.5em;
}
span::before {
content: '\53\53\53\53\53';
top: 0;
position: absolute;
left: 0;
}
}
.woocommerce-product-rating {
#include clearfix();
line-height: 2;
display: block;
.star-rating {
margin: 0.5em 4px 0 0;
float: left;
}
}
I think in your case font-family is missing or replaced for .star-rating class in css. If so, then add.star-rating{font-family: star} in your css and must checked its not overridden by others.
While I don't have any information about what theme you do use, I assume you are missing font which has all weird characters called glyphs.
Please take a look inside of your wp-header.php, functions.php for additional information about font(s), plus check if you have needed fonts inside wp-content/themes/your_theme/some_folder_with_fonts.
Additionally please clear your cache. It is likely to have the same CSS filename while content of the css is different and the 'places' (urls) of the fonts are different right now.
To do so, please push CTLR+SHIFT+R on the page you are visiting. Simplest things. Great problems. Been there many times.
EDIT: Added missing CSS part with font declaration found in original theme
So this is the code you are missing in your CSS file:
#font-face {
font-family: star;
src: url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.eot);
src: url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix) format('embedded-opentype'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.woff) format('woff'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.ttf) format('truetype'),url(/electro/wp-content/plugins/woocommerce/assets/fonts/star.svg#star) format('svg');
font-weight: 400;
font-style: normal
}
This comes from original theme.
Please let me know if this works.
Related
I'm preparing a custom mailing, through php, and I need to prepare four custom circles, filled on depending on some percentages ( which I receive them dinamically ), so I need some html tags for do it:
Firstly, I thought in canvas tag, but I read that a lot of email clients don't support canvas tag: https://www.campaignmonitor.com/blog/email-marketing/2013/08/support-for-html-5-elements-in-email/
So, I thought in svg tag, but now I realize that, for do the calculation of the percentage, I need javascript to do it, and mail clients don't support javascript either.
So, I understand that I can't do it to mailing templates, right?
Thanks you very much!
Following code snnippet may work for you
CSS
/**
* HTML5 / CSS3 Circle with Partial Border
* http://stackoverflow.com/q/13059190/1397351
*/
* { margin: 0; padding: 0; }
.circle {
position: relative;
margin: 7em auto;
width: 16em; height: 16em;
border-radius: 50%;
background: lightblue;
}
.arc {
overflow: hidden;
position: absolute;
top: -1em; right: 50%; bottom: 50%; left: -1em;
transform-origin: 100% 100%;
transform: rotate(45deg) skewX(30deg);
}
.arc:before {
box-sizing: border-box;
display: block;
border: solid 1em navy;
width: 200%; height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
HTML
<!-- content to be placed inside <body>…</body> -->
<div class='circle'>
<div class='arc'></div>
</div>
I have these two styles that position my div in the footer of my page. What happens is that when you generate the content of the page for php, these div can override the content.
div.panel-foot {
position: absolute;
z-index: 2;
height: 30px;
width: 100%;
bottom: 0;
color: white;
background-color: #333333;
white-space: nowrap;
padding: 5px 100px;
}
div.panel-foot-information {
background-color: rgb(65, 65, 65);
position: absolute;
bottom: 30px;
max-width: none !important;
z-index: 1;
color: white;
font-size: small;
padding-top: 10px;
padding-bottom: 10px;
}
So what I do is when the content is small they stay on radapé ie with position: absolute, and when the content is longer they stay position: relative.
Anyone know a solution to resize content dynamically?
Unlike the other answers so far, I'm going to assume you have images and other things that a real website has, besides text.
I suggest using Javascript (since you've got a jQuery tag). PHP ultimately has no idea how much space the content will take up in the browser, so JS is your best option.
Have a look at my example here. If you remove some of the div content, you will see the footer color changes (because it changes the classname). all you have to do is plug in your own selectors and classnames and you're good to go.
// check the size of your conent div
// assuming it's got an id of "content"
contentHeight = $("#content").height();
// set the threshold that will determine how big is too big
threshold = 300;
// or if you want to make the threshold as big as the window...
// threshold = $(window).height();
// if the content height is greater than the threshold..
if(contentHeight > threshold){
// remove one class and add another
$("#footer").removeClass('green');
$("#footer").addClass('red');
}
// otherwise, do the opposite
else{
$("#footer").removeClass('red');
$("#footer").addClass('green');
}
im doing this project for university. i'm currently facing a minor problem but yet disturbing.
link to site: http://haw.finekost.com/ws2013/PP_HATE_SITE/
CSS:
.box {
filter: grayscale(1);
float: left;
height: 0;
margin: 0;
moz-filter: grayscale(1);
ms-filter: grayscale(1);
o-filter: grayscale(1);
opacity: 0.5;
padding-bottom: 20%;
position: relative;
webkit-filter: grayscale(1);
width: 20%;
}
.box:hover {
cursor: pointer;
moz-filter: all .5s ease-in-out;
opacity: 1;
webkit-filter: grayscale(0);
webkit-transition: all .5s ease-in-out;
}
img {
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
the boxes are generated via php.
the image boxes change in size (just 1px) when i hover them. i really dont know why they do it. Hopefully someone can help me
it appears to be related to the webkit transition filter in your .box:hover
Maybe this will help?
Prevent flicker on webkit-transition of webkit-transform
actually if you add -webkit-backface-visibility: hidden; to the box:hover css it appears this will fix the problem.
It is happening due to your webkit-transition style rule setup on your box:hover selector.
If you take it out, then there is no 'flicker'. THe reason it does not happen in Firefox is because you do not have a firefox vendor property set there such as -moz-transition.
Why do you need a transition in this case ?
In your website you use for .box a width of 20%. It looks like this causes somehow a 1px gap. However this could be solved by using width: 20vw for .box.
vw is viewport width in % this removed the 1px border.
So use:
.box {
filter: grayscale(1);
float: left;
height: 0;
margin: 0;
moz-filter: grayscale(1);
ms-filter: grayscale(1);
o-filter: grayscale(1);
opacity: 0.5;
position: relative;
webkit-filter: grayscale(1);
padding-bottom: 20vw;
width: 20vw;
}
I am trying to make a website for my school, and I am working on getting a area where there is a content area and also a sidebar. As you can see here: lrch.harrisonbh.com and I want the top of "Header 1" to match the top of "Sidebar." I put the css on a jsFiddle here: http://jsfiddle.net/GHpux/
I am using the css code here:
div.body{
width: 1047px;
margin-top: 210px;
margin-left: auto;
margin-right: auto;
z-index: 1;
}
div.content{
background-color: #dbdbdb;
width: 750px;
max-width: 750px;
float: left;
padding: 15px;
margin-right: 15px;
z-index: 1;
display: inline-block;
}
div.sidebar{
background-color: #dbdbdb;
width: 215px;
float: right;
position: absolute;
padding: 15px;
display: inline-block;
}
But I get the undesired effect of the divs not matching up as you can see on the jsFiddle or my website. Im wonderding what is wrong with this? Thanks. I have tried many things. Thanks
Nice site, by the way. Sorry I didn't see the question. The fix is:
You need to remove the <br /> before the .sidebar.
Refer the screenshots.
Removing it makes it look this way:
Remove the <br> before sidebar, remove position:absolute and float:right from the sidebar and add vertical-align:top to sidebar and content.
http://jsfiddle.net/GHpux/1/
I wonder whether someone may be able to help me please.
I'm using Aurigma Image Uploader and FancyBox to produce this gallery page. The problem I'm having is that the images are positioned to go vertically down the page, whereas I would prefer them to go horizontally across the page, creating separate rows of images, one underneath the other.
I appreciate that some may not know anything about the Aurigma package, but I think I'm right in saying that 'Fancybox' is a little more widely used.
I just wondered whether someone could perhaps provide somne guidance please on the settings I would need to change within the Fancybox script so that the images are positioned horizontally rather than vertically.
Many thanks
.ccs file extract
.gallery-image-list { padding: 0; list-style-type: none; }
.gallery-image-list .item { display: inline-block; vertical-align: top; margin: 5px; padding: 15px; white-space: nowrap; width: 150px; float:left; }
.gallery-image-list .wide-item { width: 250px; }
.gallery-image-list .item .preview { display: inline-block; vertical-align: top; }
.gallery-image-list .item .data { margin: 5px; padding: 5px; list-style-type: none; display: inline-block; vertical-align: top; font-size: 95%; }
.gallery-image-list .item .data li { margin-bottom: 5px; }
I think what you want is to add float:left; to your item class in css.