To customize some pages/plugins of a Wordpress page I have to use CSS because the dashboard doesn't allow these changes.
I'm having problems with a specific case. I want to change the text of an item in a list. In this case I want to change the text "Certificates" by "Certificados". The HTML code is this:
<ul>
...
<li class="certificates">
<a href="https://url/to/user_1/certificates" data-slug:"https://url/to/user_1/certificates">
<i class="fas fa-certificate">
::before
</i>
Certificates
::after
</a>
</li>
...
</ul>
In other cases I used something like this to change texts in CSS with success:
.class-to-change {
visibility: hidden;
}
.class-to-change:after {
visibility: visible;
content: "new text";
}
But my list item seems very complex to apply this solution. Could I change the text using CSS in that case?
There is an option that we can override our custom css with plugin css. These are the steps which fixed your issue.
Then add a dequeue function to the functions.php file, and invoke it on the wp_enqueue_scripts with a priority higher than the priority level set on the plugin's original enqueue function. e.g.
function custom_style() {
wp_dequeue_style( 'plugin_css' );
wp_dequeue_style( plugin_css_2' );
wp_enqueue_style( 'custom-style', get_bloginfo('stylesheet_url') );
}
add_action('wp_enqueue_scripts', 'custom_style', 99 );
In your custom_style you can write whatever css code you have written and override the property of class.
You may embed "Certificates" in html tag. In this way you will have p element nested into li tag. After that you could set its display property to "none" (display: none;) and then might use this code:
i::after { content: "new text"; }
Related
I'm using the WordPress antispambot code, from their Code Reference:
https://developer.wordpress.org/reference/functions/antispambot/
It's working, but I want to style the email addresses that the code displays. If the obfuscated email address is in the footer I want to apply a particular style, but if the obfuscated email address is, for example, in the body of a page I want to apply a different style.
I've tried adding a title attribute to the tag as shown in the code below:
function wpcodex_hide_email_shortcode( $atts , $content = null ) {
if ( ! is_email( $content ) ) {
return;
}
return '<a href="mailto:' . antispambot( $content ) . '" title="encrypted-email">' . antispambot(
$content ) . '</a>';
}
add_shortcode( 'email', 'wpcodex_hide_email_shortcode' );
And then style it using the following CSS:
/* GENERAL STYLE FOR ENCRYPTED EMAILS */
a[title="encrypted-email"]{
color:#4472e6 !important;
text-decoration:none !important;
}
a[title="encrypted-email"]:hover{
text-decoration:underline !important;
}
/* STYLE FOR ENCRYPTED EMAILS IN FOOTER */
.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]{
color:#ff0000;
text-decoration:none !important;
}
.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]:hover{
color:#e4d06f;
}
However, using the CSS above, ALL encrypted emails, including encrypted emails in footer, take the 'General' styles.
I wondering if this method is the best way to set up different CSS styles for encrypted emails in different parts of the page (eg body text vs footer).
And also, is my CSS correct?
UPDATE
The generated HTML is as follows:
<ul style="list-style-type:none; margin:0; padding:0;">
<li style="font-size:16px; margin-bottom:0px;"><a
href="mailto:wbu#bd"
title="encrypted-email">wbu#bd</a></li>
</ul>
1. The problem you are having is because of the use of !important in your CSS rules. Using this on your a[title="encrypted-email"] rules mean they will take precedence over the more specific "footer" rules.
To make your footer rules take precedence, the most preferable option is to remove !important from the main a[title="encrypted-email"] - Using !important is generally discouraged because it causes problems just like this.
If that is not possible, you need to use !important on all more specific rules to override the !important style. (Assuming the rules match your actual HTML elements), the following should work:
/* STYLE FOR ENCRYPTED EMAILS IN FOOTER */
.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]{
color:#ff0000 !important;
}
.fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"]:hover{
color:#e4d06f !important;
}
Note - you don't actually need the !important for the text decoration because you are not changing it from the style rule that it is overriding.
2. You also asked if this is how you should set up the CSS rules for this. Yes, this is the right way to style them - this is what the cascading part of the CSS name means. All you need to override the style is to use a more specific selector e.g. instead of "encrypted email links", you can say "encrypted email links in the footer widget".
So .fusion-footer-widget-area .custom-html-widget a[title="encrypted-email"] would normally work for your footer emails (i.e. if the other rules didn't use !important) because it is more specific (as long as the email addresses in an element with the class .custom-html-widget which is in an element with the class .fusion-footer-widget-areaof course!)
I have narrowed down the code to this filter so far (found this in another SO answer):
//Checkout page editor bootstrap
add_filter('woocommerce_checkout_fields', 'addBootstrapGlyphs' );
function addBootstrapGlyphs($fields) {
foreach ($fields as &$fieldset) {
foreach ($fieldset as &$field) {
// if you want to add the form-group class around the label and the input
$field['class'][] = 'input-group';
// add form-control to the actual input
$field['input_class'][] = 'form-control';
}
}
return $fields;
}
That sets my form and input elements. Now to add glyphicons, I tried reading from $fields but I just can't seem to get a good handle to something that will let me add a span element before the input. Glyphicon needs this:
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
jQuery let's me do it this way:
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('#billing_last_name_field').prepend('<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>');
});
</script>
but there has to be a better, more performant way to build the page with this in place already. I want to do this in php, so the checkout pageload remains fast. Please help. I come from a world of Java.
tl;dr: How to add a glyphicon to woocommerce checkout input boxes from https://github.com/woocommerce/woocommerce/blob/master/includes/wc-template-functions.php#L1920
Part 2
making progress w.r.t the above question using something like this:
// define the woocommerce_form_field_<type> callback
function filter_woocommerce_form_field_type( $field, $key, $args, $value ) {
$field = str_replace('<input','<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input',$field);
return $field;
};
// add the filter
add_filter( "woocommerce_form_field_email", 'filter_woocommerce_form_field_type', 10, 4 );
I know, that is not the right glyph. However, the next hurdle is to edit the html. Like Mithc mentioned in a comment below, I will now try to do this more elegantly with some type of DOM handling code.
So my follow-up question is, how do I add a DOM element the proper way with php? This time, I am looking for something like,
Convert string to DOM for processing
read some attributes from the <p> or <input>
Determine the type of glyph i should use
Add my span
Convert DOM back to string for return
Any elegant ways to do this, or is str_replace() good enough?
Apparently, there's no filter/action that allows you to modify the forms in that way. You can follow the clue of how the forms are built by checking the /templates/checkout/form-checkout.php and /includes/wc-template-functions.php.
Solution #1: Pure CSS
You could use CSS pseudo elements to add icons to the fields but due to the layout of the form, playing around with ::before and ::after could make the responsiveness a nightmare. But here's an example:
.form-row#billing_company_field {
position: relative;
padding-left: 2.8em;
}
.form-row#billing_company_field::before {
content: '';
width: 2.8em;
height: 2.8em;
background-color: #2d2e34;
position: absolute;
left: 0;
bottom: 0;
}
.form-row#billing_company_field::after {
content: "\e139";
position: absolute;
left: 0;
color: white;
font-family: 'Glyphicons Halflings';
/* Excluding position styling */
}
But as I mentioned before, the responsiveness could be a little bit like... A headache. But totally possible.
Solution #2: Template Override
WooCommerce allows you to override templates via themes. The only thing you have to do is to create a template folder in your theme's root folder.
For instance, if your theme's folder is my-store, you should have my-store/woocommerce. To override the template parts that contain the checkout form, you should have:
my-store/woocommerce/checkout/form-checkout.php
and
my-store/woocommerce/checkout/form-billing.php
Then you can modify any markup there. Just keep in mind that sometimes they update the templates, so keep an eye on them for big changes to keep them up to date too.
Solution #3: DOMDocument() [Update]
If you have the markup of each field on the filter, you can modify the output HTML with the DOMDocument() methods. Here's an example:
// Let's say this is the HTML coming from the filter.
$field = '<p class="form-row validate-required">';
$field .= '<input type="text">...';
$field .= '</p>';
// Create a DOM Object of $field. LIBXML_HTML_NOIMPLIED and LIBXML_HTML_NODEFDTD will help to prevent doctype, html and body tags being inserted at the end.
$field_object = new DOMDocument();
$field_object->loadHTML( $field, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD );
// Select the wrapper of the input (`<p>`) and the input (`<input />`) to know where to insert the glyph (between them).
$wrapper = $field_object->getElementsByTagName( 'p' )->item( 0 );
$input = $field_object->getElementsByTagName( 'input' )->item( 0 );
// Create the glyphicon HTML.
$glyph = $field_object->createDocumentFragment();
$glyph->appendXML( '<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>' );
// Insert the glyphicon HTML.
$wrapper->insertBefore( $glyph, $input );
The example above will get you:
<p class="form-row validate-required">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text">...
</p>
To load attributes you can use getAttribute( $attribute_name )
on the DOMElement (like the $wrapper and $input objects). And, to determine the glyphicon you have to use, you could get the class of the $wrapper and determine the class of the glyphicon based on it. For instance, if the $wrapper contains the class user, then glyphicon's class should be glyphicon glyphicon-user which you can easily insert when you create the glyphicon HTML.
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 am using the woocommerce product category widget on my sidebar and footer widget area.
I have 2 parent categories. I would like these to be displayed, but not be clickable links.
You can see the page here http://www.terrykirkwood.co.uk/w
Can anyone advise what css to add to stop these links being clickable?
Thanks
Here's the code from the first occurrence:
<li class="cat-item cat-item-47 cat-parent">Original Paintings<ul class="children">
CSS only controls style, so there is no CSS you can use to disable a hyperlink. You could change the CSS to not change cursors, so it doesn't "look" like a link.
.cat-parent a {
cursor: default;
text-decoration: none;
}
.cat-parent .children a {
cursor: pointer;
text-decoration: underline;
}
And then use some jQuery to actually disable the click function:
$('.cat-parent').click(function(e) {
e.preventDefault();
});
If you were bold you could probably also modify the widget to not print an <a> link for parents, but I can't check on that right now.
Edit
You can either add the script to one of your theme's scripts, load a new external script file or drop the following into your themes' functions.php:
function so_add_this_script_footer(){
if( !is_admin() ) { ?>
<script>
jQuery(document).ready(function($) {
$('.cat-parent > a').click(function(e) {
e.preventDefault();
});
});
</script>
<?php }
}
add_action('wp_print_footer_scripts', 'so_add_this_script_footer');
All parent classes have a 'cat-parent' class, so you can either add a condition - 'javascript: void(0)' - in widget for anchor tag 'href'.
Alternatively , you can add the below jquery code,
jQuery('.footer-widget').find('.product-categories li.cat-parent').each(function(){
if(jQuery(this).find('ul.children').length == 1){
jQuery(this).find('a').attr('href','javascript: void(0)');
}
});
This will reset all parent category links that have child categories. Now, If user clicks on parent category, it will not do anything.
This will also make sure, that if parent categories don't have child categories, then it will not be reset.
I have php that is generating content within <p> tags. I have two classes that I want to use.
Looks something like:
foreach ($record as $r){
print "<p>" . $r['content'] . "</p>";
}
One class is called readmore. I want to assign it to anything with an <a href>.
The other is called list01. I want to assign it to any <ul> tags.
Could anyone assist?
Add a class to your paragraph so that you can distinguish it from others, then use this CSS:
.myParagraphClass a
{
/* Your readmore styles go here */
}
.myParagraphClass ul
{
/* Your list01 styles go here */
}
You do not need to target those elements directly with a class since you can target them by the parent child relationship they have to the paragraph
You can use a number of ways to solve this, adding classes would be done in your PHP or after DOM load by Javascript/Jquery.
Using just CSS (and you don't care about ie6) you could:
p > a
{
/* <a> Styles here */
}
p > ul
{
/* <ul> styles */
}
Or maybe target just the last <a> in the <p>
p a:last-child
{
/* Last child styles */
}