I'm working on a WordPress site and running into a problem. I have a list on a page including download buttons, only I can't seem to work out how to change the colour of the button or the font? The code is as follows:
class="wp-block-file__button" download>Download</a></div>
How would I go about formatting the button here?
Thanks
Depending on where is your button (admin panel or theme):
For admin panel (Add to function.php)
<?php add_action( 'admin_head', 'theme_admin_css' );
function theme_admin_css() {
echo '
<style>
.wp-block-file__button {
background-color: red!important;
color: white!important;
}
</style>'; ?>
OR if in actual theme (Add to your style.css)
.wp-block-file__button {
background-color: red!important;
color: white!important;
}
Related
I try to remove white space above the header in WooCommerce email notifications.
I already pasted the email files into the folders:
public_html -> wp-content -> themes -> flatsome-child -> woocommerce -> emails
I already tryed to hide the header with:
/*do_action( 'woocommerce_email_header', $email_heading, $email );*/
But this is not solution because, yes it removes the white space above the header but also hides de header and I don't want this.
I just want to remove the empty space above the header (look the image attached)
The white space is applied via CSS. If you want to apply your own styles or want to modify the existing one in WooCommerce email notifications:
1) You can overwrite the template file:
The template file can be overridden by copying it to yourtheme/woocommerce/emails/email-styles.php.
Replace line 50 - 56 #version 4.0.0
#wrapper {
background-color: <?php echo esc_attr( $bg ); ?>;
margin: 0;
padding: 70px 0;
-webkit-text-size-adjust: none !important;
width: 100%;
}
With
#wrapper {
background-color: <?php echo esc_attr( $bg ); ?>;
margin: 0;
padding: 70px 0;
padding-top: 0;
-webkit-text-size-adjust: none !important;
width: 100%;
}
Also see: Template structure & Overriding templates via a theme - How to Edit files
OR
2) Use the woocommerce_email_styles filter hook:
// Add CSS to email
function filter_woocommerce_email_styles( $css, $email ) {
$extra_css = '#wrapper { padding-top: 0 }';
return $css . $extra_css;
}
add_filter( 'woocommerce_email_styles', 'filter_woocommerce_email_styles', 10, 2 );
Code goes in functions.php file of the active child theme (or active theme).
Optional: via $email->id == ... you can target specific emails, see How to target other WooCommerce email notifications
I want to add 'continue shopping' / 'add product' link before order review on checkout page. But I want it to be inline with "Your order" text.
See this screenshot: https://ibb.co/47f6vd7
I tried this code:
add_action('woocommerce_checkout_order_review','woocommerce_checkout_before_order_review_add_product');
function woocommerce_checkout_before_order_review_add_product(){
$continue_shopping_url = wc_get_page_permalink( 'shop' );
$add_product_label = 'add product';
if(!empty($continue_shopping_url)){
echo "$add_product_label";
}
}
But it show on the line below "Your order" text. So it looks ugly.
How do i make it inline with "Your order" text using additional css?
First of all you are using the wrong hook.
While woocommerce_checkout_order_review will cause the text to be added insde the #order_review div, the woocommerce_checkout_before_order_review hook will cause it to be placed before the #order_review div.
So you get:
function action_woocommerce_checkout_before_order_review(){
$continue_shopping_url = wc_get_page_permalink( 'shop' );
$add_product_label = 'add product';
if ( ! empty ( $continue_shopping_url ) ) {
echo '<div class="my-label">' . $add_product_label . '</div>';
}
}
add_action( 'woocommerce_checkout_before_order_review', 'action_woocommerce_checkout_before_order_review', 10, 0 );
Which CSS you will have to apply for this is completely theme dependent,
but using display: inline-block; can certainly come in handy
Make sure you have a child theme setup. You can then add the 'Continue shopping' link via the woocommerce_checkout_before_order_review action hook:
add_action( 'woocommerce_checkout_before_order_review', 'woocommerce_checkout_add_continue_shopping_link' );
function woocommerce_checkout_add_continue_shopping_link() {
printf( 'Continue shopping', wc_get_page_permalink( 'shop' ) );
}
Add the above code snippet to the functions.php of your child theme. Then take care of the CSS styling in the style.css of your child theme.
For instance like this:
body.woocommerce-checkout h3#order_review_heading {
float: left;
width: auto;
}
body.woocommerce-checkout a.checkout-continue-shopping {
font-size: 0.8em;
float: left;
padding: 0.5em 1em;
background: #444;
text-decoration: none;
color: white;
margin-left: 2em;
margin-top: 0.25em;
}
Which will give you the following result:
You will probably also have to add some CSS media queries to make this look good on mobile and tablet.
When the place order button is clicked on my woocommerce site it takes a few seconds to complete the order, the user however cant see that the wheel turning to show the script is running as this is at the top of the page. Is there a way to change the text on the button once clicked to 'Please Wait' or at least change the colour once visited.
I tried changing the colour of the visited state using the following css but it doent work
.woocommerce #respond input#submit, .woocommerce a.button:visited, .woocommerce button.button:visited, .woocommerce input.button:visited {
color: #ffffff;
background-color: #262a2b;
border-radius: 0px;
}
Use this:
add_action( 'wp_footer', 'custom_checkout_jquery_script' );
function custom_checkout_jquery_script() {
if ( is_checkout() && ! is_wc_endpoint_url() ) :
?>
<script type="text/javascript">
jQuery( function($){
jQuery('form.checkout').on('submit', function(event) {
jQuery('button#place_order').text('Please Wait');
event.preventDefault();
});
});
</script>
<?php
endif;
}
I want to achieve that when the page attribute selects a certain template, the background color of the page can be randomly changed. (Only this page, not for all pages).
Unfortunately, my code (PHP) doesn't work.
add_filter( 'body_class','modele_bg_couleur' );
function modele_bg_couleur($classes)
{
if(is_page_template('modele-bg-couleur.php')){
$test = array("beige", "azure", "linen", "snow");
$classes[] = $test[array_rand($test)];
}
return $classes;
}
add_action( 'admin_head', 'modele_bg_couleur_css' );
function modele_bg_couleur_css(){
echo "
<style type='text/css'>
.beige {
background-color: beige;
}
.azure {
background-color: azure;
}
.linen {
background-color: linen;
}
.snow {
background-color: snow;
}
</style>
";
}
The body_class filter lets you add classes to the front end of your site. The admin_head action lets you add custom code to the admin pages (Wordpress back end). So right now you are adding a body class to the front end of your site but applying the CSS to the back end.
I'm assuming you want this to work on your front end. You can then just add the following CSS to your theme via the customizer or via your own child theme:
body.beige { background-color: beige!important; }
body.azure { background-color: azure!important; }
body.linen { background-color: linen!important; }
body.snow { background-color: snow!important; }
I have created CSS for highlighting color of Active Menu in Joomla, though the color change is working fine on hover, but the color does not change in of Active Menu
Any getaways !! Note - we have one more site in Joomla 1.5 older version - there this code works fine as active menu color changes. However issue coming in Joomla 2.5
CSS
.bluetabs li a:visited{
color: #FFFFFF;
}
.bluetabs li a:hover{
text-decoration: underline;
color: #FFFFFF;
background:#b60205;
text-decoration:none;
}
.bluetabs li.selected{
background:#b60205;
padding:0;
}
.bluetabs li.selected a{ /*selected main tab style */
background:#b60205;
border-bottom-color: white;
}
.bluetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
This is the function wherein correctly defining selected menu too
foreach($rows as $row){
if(($lt+1) < $cnt ){
$maincls = "";
}else{
$maincls = "last ";
}
if($parentid == $row->id){
$class = $clsArray[$lt].'selected';
}else{
$class = $clsArray[$lt];
}
}
$list.='</ul>';
}
echo $list;
//echo $list_sub;
}
The site name is :- http://www.ecarloan.in
However, checked it through Firebug, its not taking up 'li class=selected' in the active menu, rather showing below :-
Its not executing :-
<li class="selected">
rather showing, this code in active css for a sample active menu
<li class="item-101 current active">
Discussion Board
</li>
The Entire Function Code is :-
foreach($rows as $row){
if(($lt+1) < $cnt ){
$maincls = "";
}else{
$maincls = "last ";
}
if($parentid == $row->id){
$class = $clsArray[$lt].'selected ';
}else{
$class = $clsArray[$lt];
}
if($vid!="" and $row->id==8){
$list.=' <li class="'.$class.'">Service</li>';
}else{
$list.=' <li class="'.$class.'">'.$row->name.'</li>';
}
}
$list.='</ul>';
}
echo $list;
//echo $list_sub;
}
What I believe to be your main issue is the change of mod_mainmenu to mod_menu in Joomla! 1.6+.
This causes your template override not to be executed.
You need to change its path to templates/<your template>/html/mod_menu/default.php.
Note that this will override all of the menus on your site, if you have more than one.
If you want to only override this menu, you can create a layout override, which you can selectively apply to components and modules. It is explained here.
Note that mod_mainmenu and mod_menu are not completely the same (e.g, the current id given to the current item has been changed to a current class to prevent w3c validation issues when more than one menu is displayed).
Therefore, you may need to slightly adjust your template override code.