The Wordpress WooCommerce StoreFront Theme queues styles in the header from the WooCommerce StoreFront Customiser;
<style id='storefront-woocommerce-style-inline-css' type='text/css'></style>
<style id='storefront-style-inline-css' type='text/css'></style>
I seem to spend more time over-righting these styles, than defining what I want. Does anyone know how to remove them or disable the Storefront customiser?
For anyone that is fighting with this, this is the solution I found:
function my_theme_remove_storefront_standard_functionality() {
//remove customizer inline styles from parent theme as I don't need it.
set_theme_mod('storefront_styles', '');
set_theme_mod('storefront_woocommerce_styles', '');
}
add_action( 'init', 'my_theme_remove_storefront_standard_functionality' );
The two of inline CSS was added in class-storefront-customizer.php.
For deregister storefront-style-inline-css:
add_filter('storefront_customizer_css', '__return_false');
For deregister storefront-woocommerce-style-inline-css:
add_filter('storefront_customizer_woocommerce_css', '__return_false');
I had to remove these recently, and the best way to do it is using Ngoc Nguyen's method.
Just put the below code in your functions.php
function wpcustom_deregister_scripts_and_styles(){
wp_deregister_style('storefront-woocommerce-style');
wp_deregister_style('storefront-style');
}
add_action( 'wp_print_styles', 'wpcustom_deregister_scripts_and_styles', 100 );
Is this working in Storefront 2.0.4?
Because i have these filters:
add_filter( 'storefront_customizer_enabled', '__return_false' );
add_filter( 'storefront_customizer_css', '__return_false' );
add_filter( 'storefront_customizer_woocommerce_css', '__return_false' );
but i have still inline css.
The first filter was mentioned in topic:
https://wordpress.org/support/topic/remove-inline-css-1?replies=8
Try this:
add_filter( 'storefront_customizer_enabled', 'woa_storefront_disable_customizer' );
function woa_storefront_disable_customizer() {
return false;
}
https://github.com/FrancySanchez/storefront-child/blob/master/functions.php
I had been having this problem and though my solution is quite specific to my own application, you may find use in it.
My problem was that I wanted white menu text with a hover color of a light grey. By default the inline css that you have a problem with seemed to take your menu text color, lighten it by a factor and set that color as the hover color. Obviously white cannot be lightened so my menu simply stayed the same on hover. Here is how I solved this:
In the file "class-storefront-customizer.php" located at wp-content/themes/storefront_child/inc/customizer there are functions defined on how the theme editor interface works. Firstly I took the following function:
public static function get_storefront_default_setting_values() {
return apply_filters( 'storefront_setting_default_values', $args = array(
'storefront_heading_color' => '#333333',
'storefront_text_color' => '#6d6d6d',
'storefront_accent_color' => '#aeaeae',
'storefront_header_background_color' => '#ffffff',
'storefront_header_text_color' => '#6d6d6d',
'storefront_header_link_color' => '#333333',
'storefront_footer_background_color' => '#f0f0f0',
'storefront_footer_heading_color' => '#333333',
'storefront_footer_text_color' => '#6d6d6d',
'storefront_footer_link_color' => '#333333',
'storefront_button_background_color' => '#eeeeee',
'storefront_button_text_color' => '#333333',
'storefront_button_alt_background_color' => '#333333',
'storefront_button_alt_text_color' => '#ffffff',
'storefront_layout' => 'right',
'background_color' => 'ffffff',
) );
}
And I set the storefront_accent_color var as the offset color I wanted, in my case #aeaeae. This set the default color to that value for the editor. This step is not necessary but does make it easier.
I also set this option to the same value as I was not sure which would really take effect...
$wp_customize->add_setting( 'storefront_accent_color', array(
'default' => apply_filters( 'storefront_default_accent_color', '#aeaeae' ),
'sanitize_callback' => 'sanitize_hex_color',
) );
On line 501 of this file is the definition of the function get_css() which sets up the inline css you see that you are trying to get rid of. For me, the value I needed to change was in this section:
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
a.cart-contents:hover,
.site-header-cart .widget_shopping_cart a:hover,
.site-header-cart:hover > li > a,
.site-header ul.menu li.current-menu-item > a {
color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_link_color'], 80 ) . ';
}
I changed the value of this css attribute to:
color: ' . $storefront_theme_mods['accent_color'] . ';
This did not change the set color of my offset on hover. What it did do however was change the editor.
So the final step is to go into the editor, go to the typography tab, select accent color, hit the default color button (which should now come up as my color) and then SAVE that. My menu worked fine after that.
This was a bit long and not quite what you were asking for, but I put it all in to illustrate how you can manipulate the values that are output into that inline css. Hopefully that info has helped you.
In case anyone else stumbles on this question here's how I managed to solve it:
Create a child theme from the parent storefront theme. (refer to this link to find out how to do that: https://developer.wordpress.org/themes/advanced-topics/child-themes/)
In the child theme's functions.php file put the following code:
remove_action( 'wp_enqueue_scripts', array( $storefront->customizer, 'add_customizer_css' ), 130 );
It basically grabs the function "add_customizer.css" from the class Storefront_Customizer, which adds the inline css, and removes that hooked function from the 'wp_enqueue_scripts'.
In the storefront theme's functions.php file there's the following code:
$storefront = (object) array(
'version' => $storefront_version,
/**
* Initialize all the things.
*/
'main' => require 'inc/class-storefront.php',
'customizer' => require 'inc/customizer/class-storefront-customizer.php',
);
What it does is it stores the class Storefront_Customizer from file 'class-storefront-customizer.php' in $storefront array and then converts the array into an object.
By creating a child theme you'll be able to update your parent storefront theme and the changes won't be lost.
after several trials I got a final solution to solve the problem!
It's to simple to believe :-)
Remove the following line in "class-storefront-customizer.php" and it works:
add_action( 'wp_enqueue_scripts',array( $this, 'add_customizer_css' ), 130 );
Regards
Herbert
Related
I would like to remove panel or breadcrumbs from dashboard.storefront theme woocommerce plugin as attached in image.This can be seen under woocommerce-->order
i tried unset and css display none for class.it didn't work.
.woocommerce-layout__header {
display: none !important;
}
Screenshot
Add the follows code snippet in your active theme's functions.php -
remove_action( 'in_admin_header', array( 'WC_Admin_Loader', 'embed_page_header' ) );
I am trying to resolve the issue of Impreza theme with mega menu
The issue is that we endeavour to ensure that our site https://www.aleaitsolutions.com/ only uses valid HTML (as we are a development company that is commercially important to us). When we used the industry standard W3 Validator service our Home Page is now only showing one HTML error. This relates to the illegal inclusion of DIVs within an Un-ordered List. It appears to us that this issue has been introduced by Mega Menu.
Details of the error can be found here:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.aleaitsolutions.com%2F
The error message is as follows:
Error: Element div not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
From line 210, column 1818; to line 210, column 1878
e hidden"><div id="mega-menu-wrap-us_main_menu" class="mega-menu-wrap"><div c
Contexts in which element div may be used:
Where flow content is expected.
As a child of a dl element.
Content model for element ul:
Zero or more li and script-supporting elements.
Now when I checked this to resolve the issue at my end, below is the details after applying the changes
Below is the structure
We have ul li and under li I was able to remove the div under li from "widget.manager_class.php" from my Impreza theme
Now, I want to remove the under which is "
Below is the code for your reference
wp_nav_menu( array(
'theme_location' => $menu_location,
//'container' => '',
//'container_class' => 'w-nav-list',
//'walker' => new US_Walker_Nav_Menu,
//'items_wrap' => '%3$s',
//'fallback_cb' => FALSE,
) );
echo '</ul>';
echo '<div class="w-nav-options hidden"';
echo us_pass_data_to_js( array(
'mobileWidth' => intval( $mobile_width ),
'mobileBehavior' => intval( $mobile_behavior ),
) );
echo '></div>';
echo '</nav>';
Though the is closed before the div.
Please check this and guide me for some solution. Many thanks in advance
I'm trying to remove the line under the logo at: http://buyfireworks-shop.co.uk/product-category/roman-candles/ I can't remove the white border under the logo. I have tried various css to no avail.
Update this class in inline style sheet #4, you might need to do it in your page builder if you're using one, like Visual Composer or DiviBuilder if you can't find it in WooCommerce; from memory Woo doesn't have admin side styling accessible:
.mk-header { border-bottom: 1px solid #ededed; }
Remove the white border by setting border-bottom to none:
.mk-header { border-bottom: none; }
This style is being added with an inline stylesheet on the page, so you'll need to override it either with important or being really careful about specificity; making sure your .mk-header border fix is in the last css file after the WooCommerce stuff loads.
If you're still having trouble with WooCommerce styles you can disable them entirely in functions.php
// Remove each style one by one
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
I have been trying to find out how to add PHP from ACF to style some text in CSS. Using: https://www.advancedcustomfields.com/resources/color-picker/
.special-color {
background-color: <?php the_field('color'); ?>;
}
To echo php into workable CSS, you'll have to include the CSS in the php sections of the site (or something more advanced, probably using functions.php). This will work if you simply add:
<style>
.special-color {
background-color: <?php the_field('color'); ?>;
}
</style>
..to (say) your single.php file within the loop.
As an aside, I don't think this would be a viable way to alter site colours (if that's what you are trying to do?), but more as a way of (say) specifying a particular color for a title of one post.
Then you might think of including the style INLINE (pseudo code):
<h1 style="color: <?php the_field('color'); ?>">Post title</h1>
Simply I get the "advanced custom field" value (which is custom_color for an element) of the current post, and then change the element's color using JQuery.
So I created a new js file (custom_css.js) in the child theme with the following code:
jQuery(document).ready(function($) {
console.log(css.custom_color);
// add dynamic css to the elements
});
Then here is the code in functions.php file:
add_action('wp_enqueue_scripts', 'custom_css');
/* Get position details */
function custom_css() {
wp_enqueue_script('custom_css', get_stylesheet_directory_uri() . '/js/custom_css.js', array('jquery'));
wp_localize_script('custom_css', 'css', array(
'admin_url' => admin_url(),
'custom_color' => get_field('custom_color', get_queried_object_id() )
));
}
I have googled around without finding a good solution for this. What i want to do is to create a masonry-like grid in a post where all images in the post should be in the masonry grid. How could i achieve this?
Note: With this idea you can get all attached image to the post either in gallery or inside the content
First let's add Masonry to your theme,
wp_enqueue_script( 'masonry' );
wp_enqueue_script( 'masonry', '//cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js' );
then add this javascript code to your theme somewhere in footer or in your custom.js file
jQuery(window).load(function() {
var container = jQuery('#mas-maincontainer');
var msnry = new Masonry(container, {
itemSelector: '.mas-item',
columnWidth: '.mas-item',
});
});
Now let's get all images attached to the post as you want
$attachments = get_children(array('post_parent' => $post->ID,
'post_status' => 'inherit',
'post_type' => 'attachment',
'post_mime_type' => 'image'));
foreach($attachments as $att_id => $attachment) {
$full_img_url = wp_get_attachment_url($attachment->ID);
//Here is your HTML to grid your images...
// Remember your images should be between <div id="mas-maincontainer"></div>
}
now you should add your custom CSS as below
.mas-item {
width: 50%; // if you want two column
}
.mas-item {
width: 33%; // if you want three column
}
This is the whole idea and hope it works for you
You can use wordpress's native gallery. This solution will give you good control on where you want to put the images in the content and it is easy to manage the gallery and it's images.
Disable the default style with this filter:
add_filter( 'use_default_gallery_style', '__return_false' );
And then use the desandro's masonry plugin to create the gird. This plugin is well documented and is the most common for creating masonry grids, so you should be fine with this plugin.
Remember to style the gallery so it will work with the masonry plugin. Here are the 2 selectors you will be using, .gallery (is the container for every gallery), and .gallery-item (is the conatiner for each image in the gallery).