My WordPress theme ("Function") uses an ugly "progress bar" style ratings system which overrides the default WooCommerce star-ratings. See below:
http://demo.woothemes.com/function/shop/castillo-cap/#tab-reviews
For the life of me I can't figure out how remove this and replace it with the default/original WooCommerce star-ratings, the ones that actually look like stars (font awesome I believe?)
I believe what needs to be done is to somehow overwrite or prioritize WooCommerce star-ratings css over the theme's. Ultimately I would like for all of the progress bars (shop page & individual product pages, review submission forms) to be replaced with the default WordPress stars, however at the moment I can settle for just the shop page where the ratings (progress bars) appear under the product's photos
I was able to find the css code controlling (creating?) the progress bars in Function->Includes->Integrations->woocommerce->css->woocommerce.css However, I also found some suspicious looking code in woocommerce.less located in the same css folder.
Here is code I found in woocommerce.css:
star-rating {
width: 80px;
height: 1em;
background: #eaeaea;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
clear: both;
}
.star-rating span {
background: #52a0cd;
height: 100%;
overflow: hidden;
float: left;
text-indent: -999em;
-webkit-box-sizing: border-box;
/* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;
/* Firefox, other Gecko */
box-sizing: border-box;
/* Opera/IE 8+ */
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.star-rating span span {
display: none;
}
p.stars {
overflow: hidden;
zoom: 1;
}
p.stars span {
width: 80px;
height: 16px;
position: relative;
float: left;
background: #eaeaea;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a {
float: left;
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 0;
padding-top: 16px;
overflow: hidden;
}
p.stars span a:hover,
p.stars span a:focus {
background: #52a0cd;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.active {
background: #52a0cd;
-webkit-border-radius: 3.631em;
border-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.star-1 {
width: 16px;
z-index: 10;
-webkit-border-top-left-radius: 3.631em;
-webkit-border-bottom-left-radius: 3.631em;
border-top-left-radius: 3.631em;
border-bottom-left-radius: 3.631em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
p.stars span a.star-2 {
width: 32px;
z-index: 9;
}
p.stars span a.star-3 {
width: 48px;
z-index: 8;
}
p.stars span a.star-4 {
width: 64px;
z-index: 7;
}
p.stars span a.star-5 {
width: 80px;
z-index: 6;
}
...and here is what I found in woocommerce.less:
// Single product
.single-product {
.summary {
.woocommerce-product-rating {
.clearfix;
.star-rating {
float: left;
margin: .327em 0 0;
}
.woocommerce-review-link {
float: right;
display: block;
}
}
// General WooCommerce
.star-rating {
width:80px;
height: 1em;
background: #border_main;
.border_radius(3.631em);
clear:both;
span {
background: #color_links;
height:100%;
overflow: hidden;
float: left;
text-indent: -999em;
.borderbox;
.border_radius(3.631em);
span {
display: none;
}
}
}
p.stars {
overflow: hidden;
zoom: 1;
span {
width: 80px;
height: 16px;
position: relative;
float: left;
background: #border_main;
.border_radius(3.631em);
a {
float: left;
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 0;
padding-top: 16px;
overflow: hidden;
}
a:hover, a:focus {
background: #color_links;
.border_radius(3.631em);
}
a.active {
background: #color_links;
.border_radius(3.631em);
}
a.star-1 { width: 16px; z-index: 10; .border_radius_left(3.631em); }
a.star-2 { width: 32px; z-index: 9; }
a.star-3 { width: 48px; z-index: 8; }
a.star-4 { width: 64px; z-index: 7; }
a.star-5 { width: 80px; z-index: 6; }
}
}
...along with some more for the widget areas, reviews, etc. etc.
I've found a few posts on how to override default WooCommerce star-ratings with a Theme's, but I can't find anything on doing the reverse. I did come across this:
http://findnerd.com/list/view/How-to-show-stars-instead-of-theme-ratings-in-Woocommerce/3854/
However it didn't work for me...
Any help would be much MUCH appreciated. Thank you!
EDIT:
I was informed this might be caused by my functions.php file. Here is the code found in wp-content->themes->Function-Child->functions.php
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
/*-----------------------------------------------------------------------------------*/
/* Start WooThemes Functions - Please refrain from editing this section */
/*-----------------------------------------------------------------------------------*/
// WooFramework init
require_once ( get_template_directory() . '/functions/admin-init.php' );
/*-----------------------------------------------------------------------------------*/
/* Load the theme-specific files, with support for overriding via a child theme.
/*-----------------------------------------------------------------------------------*/
$includes = array(
'includes/theme-options.php', // Options panel settings and custom settings
'includes/theme-functions.php', // Custom theme functions
'includes/theme-actions.php', // Theme actions & user defined hooks
'includes/theme-comments.php', // Custom comments/pingback loop
'includes/theme-js.php', // Load JavaScript via wp_enqueue_script
'includes/sidebar-init.php', // Initialize widgetized areas
'includes/theme-widgets.php', // Theme widgets
'includes/theme-plugin-integrations.php' // Plugin integrations
);
// Allow child themes/plugins to add widgets to be loaded.
$includes = apply_filters( 'woo_includes', $includes );
foreach ( $includes as $i ) {
locate_template( $i, true );
}
/*-----------------------------------------------------------------------------------*/
/* You can add custom functions below */
/*-----------------------------------------------------------------------------------*/
This is the exact same as the code in my regular (non-child) theme's functions.php file. I do have some custom code below this, however none of it relates to anything that would be relevant here.
EDIT 2:
OK I think I'm getting closer here!! I found this file wp-content/themes/function/includes/integrations/woocommerce/woocommerce.php which included this code at the top:
<?php
if ( ! defined( 'ABSPATH' ) ) exit;
global $woo_options;
add_theme_support( 'woocommerce' );
// Disable WooCommerce styles
if ( version_compare( WOOCOMMERCE_VERSION, '2.1' ) >= 0 ) {
// WooCommerce 2.1 or above is active
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
} else {
// WooCommerce less than 2.1 is active
define( 'WOOCOMMERCE_USE_CSS', false );
}
// Load WooCommerce stylsheet
if ( ! is_admin() ) { add_action( 'wp_enqueue_scripts', 'woo_load_woocommerce_css', 20 ); }
if ( ! function_exists( 'woo_load_woocommerce_css' ) ) {
function woo_load_woocommerce_css () {
wp_register_style( 'woocommerce', esc_url( get_template_directory_uri() . '/includes/integrations/woocommerce/css/woocommerce.css' ) );
wp_enqueue_style( 'woocommerce' );
} // End woo_load_woocommerce_css()
}
When I deleted the above code, the progress bars changed a little, and in the add new review section I could actually see two blue STARS laid on top of the blank progress bar (which normally highlights blue when you scroll over to choose your rating). So it seems that removing this kinda half fixed the problem. Any further suggestions?
Related
I can't style my WordPress function correctly, and the sub-menu and menu are displayed together and on top of each other. I want to separate these two, what should I do? My codes are as follows:
i do not know about html vs css code please help me or if you have any details about nav menu in wordpress template so please Guide me
<?php wp_nav_menu( array( 'theme_location' => 'primary_menu', 'container' =>'', 'menu_class' =>'meno' ) ); ?>
<style>
.meno{
list-style-type: none;
padding-right:20px;
width:800px;
}
.meno li{
display: inline-block;
margin-left:50px;
border-radius: 5px 5px 5px 5px;
background-color: #fff;
padding:-3px ;
}
.meno li a {
display: block;
padding: 0;
text-decoration: none;
/* this is the width of the menu items */
line-height: 35px;
/* this is the hieght of the menu items */
/* list item font color */
text-align: center;
}
.meno li li a {
font-size: 80%;
width: 200px;
transition: all 0.2s;
}
.meno li:hover {
background: #e0d5d5;
border-radius: 5px 5px 5px 5px;
transition: all 0.4s;
box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31, 27, 45, 0.08), 0 0.25rem 0.75rem rgba(31, 27, 45, 0.08);
}
.meno ul {
padding: 0;
left: 0;
/* hides sublists */
width: 100px;
height: 100px;
transition: all 0.4s;
position: absolute;
display: none;
}
.meno li:hover ul ul {
display: none;
background: #493131;
transition: all 0.4s;
}
.meno li:hover ul {
position: relative;
display:block;
width: 200px;
height: auto;
}
/* shows sublist on hover */
.meno li li:hover ul {
display: block;
/* shows sub-sublist on hover */
margin-left: 200px;
/* this should be the same width as the parent list item */
margin-top: -35px;
/* aligns top of sub menu with top of list item */
background: #8a7c7c;
}
</style>
i am running a woo shop and want to add gallery arrows and an icon to my PDPs product gallery.
each of those hook work separately, but if I add them together, the arrows are not being called. is there a sort of prioritizing issue? I don't think it is a css issue.
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
function woocommerce_show_product_thumbnails()
{
echo '<img class="imgB1" src="https://placehold.it/100" style="
position: absolute;
top: 3.8%;
right: 15%;
height: 32px;
width: 32px;
border: 5px solid red;
">';
}
// Update WooCommerce Flexslider options
add_filter( 'woocommerce_single_product_carousel_options', 'ud_update_woo_flexslider_options' );
function ud_update_woo_flexslider_options( $options ) {
echo '<style type="text/css">
ul.flex-direction-nav {
position: absolute;
top: 30%;
z-index: 99999;
width: 100%;
left: 0%;
margin: 0;
padding: 0px;
list-style: none;
}
li.flex-nav-prev {float: left;}
li.flex-nav-next {float: right;}
a.flex-next {visibility:hidden;}
a.flex-prev {visibility:hidden;}
a.flex-next::after {
visibility:visible;content: "\f105";
font-family: FontAwesome;margin-right: 10px;font-size: 70px;
}
a.flex-prev::before {
visibility:visible;
content: "\f104";
font-family: FontAwesome; margin-left: 10px;font-size: 70px;
}
</style>';
$options['directionNav'] = true;
$options['animation'] = "slide";
$options['animationLoop'] = true;
return $options;
}
any idea?
thanks!
I'm currently setting up a sidebar menu for my Wordpress website. I'm running into 2 issues. The 1st one is that the text in the menu isn't lining up to the left side properly. I have tried to use the text-align attribute but it doesn't work.
The 2nd problem is that there is a bit of random space at the bottom of the menu that I don't know why is there.
Problem is happening here: http://dreamedbig.com/our-services/
My HTML/PHP:
<div class="page-content">
<div id="services-menu" class="services-sidebar">
<?php dynamic_sidebar('services'); ?>
</div>
</div>
The CSS:
#services-menu {
border: 1px solid black;
align-items: left;
float:left;
height: auto;
display: inline-block;
top:0;
left:0;
background-color: #BCE6FB;
}
#services-menu li{
list-style-type:none;
border-bottom: 1px solid black;
}
#services-menu a {
text-decoration: none;
color: #08203D;
}
#services-menu ul {
}
#services-menu ul li a {
position: relative;
display: block;
box-sizing: border-box;
z-index: 1;
margin: 5px;
padding-left: 5px;
padding-right: 5px;
}
#services-menu ul li a::after
{
content: "";
position: absolute;
top:0;
left: 0;
background-color: #00A2DA;
width: 0%;
height: 100%;
transition: all 1s;
z-index: -1;
}
#services-menu ul li a:hover::after
{
width: 100%;
}
#services-menu ul li:nth-child(odd) a::after
{
background-color: #00A2DA;
}
#services-menu ul li:nth-child(even) a::after
{
background-color: #FFFFFF;
}
It looks like you have some inherited styles from classes called .widget and there is margin and padding added to ul. This is common is your using something like WordPress or underscores that come with some stylesheets.
I think these styles will correct it
.widget, #services-menu ul{
margin:0;
padding:0;
}
I found the unwanted margin and padding by using inspect in my chrome browser. I highly recommend it for frontend styling because it makes troubleshooting these kinds of issue easier to resolve.
Here is an article to better explain how it works
I create a child theme, but then I want to add some style it not change in my main menu.
I create a folder aloshop-child in the direction
\public_html\wp-content\themes
In this folder I create two files style.css and function.php
In function.php I added code:
<?php
function aloshop_child_enqueue_styles() {
$parent_style = 'aloshop';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'aloshop',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'aloshop_child_enqueue_styles' );
and in style.css add just simple information
/*
Theme Name: Aloshop child theme
Author: Mantas Slau
Description: A child theme of the Aloshop default WordPress theme
Version: 1.1
Template: aloshop
*/
Next what I did, in the dashboard activated this child theme.
So I tried to check if this child theme works. I cut from my visual composer custom css code (which I was temporary added then I developed my page) and paste it in the child theme --> `style.css.
/*
Theme Name: Aloshop child theme
Author: Mantas Slau
Description: A child theme of the Aloshop default WordPress theme
Version: 1.1
Template: aloshop
*/
.footer-box h2 {
font-size: 14px;
font-weight: 700;
margin: 0 0 13px;
text-transform: uppercase;
color: #fe9c00;
}
.menu-footer a {
border-left: 1px solid #dadada;
display: block;
height: 14px;
line-height: 14px;
padding: 0 13px;
color: white;
}
.footer-box p {
color: white;
}
.footer-menu-box-end a {
color: white;
font-size: 14px;
padding-left: 10px;
position: relative;
}
.footer-menu-box-end a:hover{
color: #fe9c00;
}
.footer-menu-box-end h2 {
font-size: 14px;
font-weight: 700;
margin: 0 0 13px;
text-transform: uppercase;
color: #fe9c00;
}
.footer-box-contact a {
color: white;
}
.social-footer li:first-child a{
margin-left:10;
}
.social-footer.social-network label {
margin: 0 0 10px;
color: #fe9c00;
}
.category-home-label span {
color: #fff;
font-size: 12px;
font-weight: 700;
margin: 0;
text-transform: uppercase;
vertical-align: middle;
}
ul {
padding: 0;
list-style: none;
}
.sub-menu-top {
width: 200px;
}
.list-child-category {
min-height: 155px;
}
.woocommerce div.product .product_title {
font-size: 25px;
font-weight: 700;
margin: 0 0 13px;
text-transform: uppercase;
}
.price span {
font-size: 25px;
font-weight: 700;
margin: 0 0 13px;
text-transform: uppercase;
color: #fe9c00;
}
.woocommerce div.product div.images img {
/* display: block; */
/* width: 100%; */
/* height: auto; */
/* box-shadow: none; */
width: 350px;
padding: 1px;
border: 1px solid #e0e0d1;
background-color: #e0e0d1;
}
Style code but it doesn't make sense.
Save ---> refresh and style not working.
Can somebody help with this issue? What do I do wrong? Thanks in advance
In function.php file,
Instead of "aloshop"
wp_enqueue_style( 'aloshop',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));
use "aloshop-child" to call style.css file.
wp_enqueue_style( 'aloshop-child',get_stylesheet_directory_uri() . '/style.css',array( $parent_style ));
I find a solution. My browser creates cookies. So before the refresh needs press ctrl+f5 and it will clear the browser. My code is good.
So I am using the Twenty Twelve theme that I have customized. I need to remove the top margin above the header menu. See here http://blog.littlenomads.com/
In my child style sheet I have added:
.site-header {
padding: 0px 0 !important;
margin: 0px 0 !important;
}
/* remove site margin */
body .site{margin:0 !important;max-width: 100% !important;}
.site-content {
margin-top: 0px;
}
I found that solution here: https://wordpress.stackexchange.com/questions/85414/twenty-twelve-theme-remove-margins
I also fully commented out, in the theme Twenty Twelve stylesheet:
/* Minimum width of 960 pixels. */
#media screen and (min-width: 960px) {
body {
background-color: #e6e6e6;
}
/*Brian Ogden 8-12-2014*/
/*body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin-top: 48px;
margin-top: 3.428571429rem;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}*/
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}
* Minimum width of 600 pixels. */
#media screen and (min-width: 600px) {
.author-avatar {
float: left;
margin-top: 8px;
margin-top: 0.571428571rem;
}
.author-description {
float: right;
width: 80%;
}
/*.site {
margin: 0 auto;
max-width: 960px;
max-width: 68.571428571rem;
overflow: hidden;
}*/
I have also tried the solution found here: http://wordpress.org/support/topic/removing-page-title-and-white-space-from-twenty-twelve-theme
I'm guessing you're logged into your site and it's the wp-admin bar shifting the html/body (html { margin-top: 32px !important; } etc .. ) down with the !important styles that get fed into the head when you're logged in?