I am trying to style my odd and even posts in the wordpress loop differently. On multiple websites and forums, I have been seeing this code:
function oddeven_post_class ( $classes ) {
global $current_class;
$classes[] = $current_class;
$current_class = ($current_class == 'odd') ? 'even' : 'odd';
return $classes;
}
add_filter ( 'post_class' , 'oddeven_post_class' );
global $current_class;
$current_class = 'odd';
But this is NOT working. When I inspect, there is no odd or even assigned to my posts.
Live website: http://www.acetronaut.com
It looks like you're trying to mark your posts as odd or even for styling.
Even though it's possible to do it in both php (when you're iterating through your posts) and in JavaScript, relying on DOM structure, I personally prefer to do it where styling should be done: in CSS, especially since it has a special selector for this purpose: nth-child().
In your case, here's a CSS sample that will change the appearance of your odd posts, on front page:
.acetronaut-rem-fi:nth-child(2n) .acetronaut-post-content-rem {
background-color: #212121;
color: white;
}
.acetronaut-rem-fi:nth-child(2n) .acetronaut-post-content-rem * {
color: white;
}
The "key" part is :nth-child(2n).
And here's how this should render:
Related
I've created a child theme of the Renovation theme. In the child's theme folder I have a "style.css" and a "functions.php" file. My style.css looks like this:
/*
Theme Name: Renovation Child
Theme URI: http://renovation.thememove.com/
Author: ThemeMove
Author URI: http://thememove.com/
Version: 2.0.4
Template: tm-renovation
*/
/*
* #charset "UTF-8";
*/
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 65px!important;
padding-bottom: 35px!important;
}
My functions.php looks like this:
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
if ( !function_exists( 'renovation_enqueue_scripts' ) ):
function renovation_enqueue_scripts() {
wp_enqueue_style( 'renovation-child-style', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css' );
}
endif;
add_action( 'wp_enqueue_scripts', 'renovation_enqueue_scripts' );
// END ENQUEUE PARENT ACTION
Unsing the inspector I see that the parent css is being loaded first and it looks like this:
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 30px!important;
padding-bottom: 35px!important;
}
My CSS is being loaded after the parent CSS and it looks like this, except it's all crossed out:
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 65px!important; <-- MY CHANGE
padding-bottom: 35px!important;
}
I've read alot of threads about specificity, and I noticed that my css and the parent css are identical, except for the "padding-top" change I made. Since the child is loaded last, I expected my css to take precedence, but it's not. My css is crossed out in the inspector and the parent is being used.
This doesn't seem right to me, and I was hoping that someone could clarify my understanding of the parent/child relationship and help me fix this problem. Thank you.
if you are only going to override one element and not apply this to multiple it might be best to use an id instead of a class. The id is always overwrites a class.
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'd like to tinker with the content Worpress generates before it gets displayed.
A lot of examples I saw so far use regex to change the content even though it is bad practise and not advisable to parse html with regex.
My idea now is to use DOMDocument to parse and change the HTML. Is that a good idea or can this break the integrity of the content in any way?
Here is some example Wordpress content filter I created (it scales the images down half the size for retina displays):
function fancyContentParser( $content ) {
$dom = new DOMDocument();
$dom->loadHTML($content);
$images = $dom->getElementsByTagName('img');
foreach ($images as $image) {
$width = $image->getAttribute('width')/2;
$height = $image->getAttribute('height')/2;
$style = 'width: '.$width.'px; height: '.$height.'px';
$image->setAttribute('style', $style);
}
return $dom->saveHTML();
}
add_filter( 'the_content', 'fancyContentParser' );
The answers to this question are probably going to be primarily opinion-based...but I don't see anything wrong with it. However, why wouldn't you just change the width and height attributes, rather than overriding them with style?
foreach ($images as $image) {
$image->setAttribute( 'width', $image->getAttribute('width')/2 );
$image->setAttribute( 'height', $image->getAttribute('width')/2 );
}
Additionally, you can likely accomplish this without DOMDocument...and just use CSS (which is what you're proposing in your question by using a style attribute anyways). You can use the transform property:
img {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
I have and angularjs application that fetches data via api, and builds a webpage with it.
Usually I use ng-style to create dynamic styling, but now I have to use the nth-of-type attribute that can only be used in a css stylesheet (I cannot use individual styling since the number and order of elements always change).
I have tried this naive code (in the html page):
<style ng-if="styles.sc && styles.sc.length==3">
a.mosection:nth-of-type(3n) > div {
background-color: {{styles.sc[0]}} !important;
}
a.mosection:nth-of-type(3n+1) > div {
background-color: {{styles.sc[1]}} !important;
}
a.mosection:nth-of-type(3n+2) > div {
background-color: {{styles.sc[2]}} !important;
}
</style>
But it didn't work... Apparently angular doesn't bind the data inside the style tag (the ng-if attribute does get digested properly)
Does anyone have any idea how this can be done?
Thanks!
You should checkout those three ng-*
https://docs.angularjs.org/api/ng/directive/ngClass
https://docs.angularjs.org/api/ng/directive/ngClassOdd
https://docs.angularjs.org/api/ng/directive/ngClassEven
all of them can accept functions as attributes, you can also checkout
https://docs.angularjs.org/api/ng/directive/ngStyle
which might be actually the best in your case
Thanks!
I indeed solved it by using ng-style with a function
The HTML
<div class="widget widget-people" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-people', '#333333')}"></div>
<div class="widget widget-property" ng-style="{backgroundColor: staggerBgColors('widget', 'widget-property', '#24d10f')}"></div>
The scope function
$scope.staggerBgColors = function(elesClass, eleClass, defaultColor){
if (!$scope.styles || !$scope.styles.sc || $scope.styles.sc.length!=3){
return defaultColor;
}else{
var listItem = $('.'+eleClass);
var n = $('.'+elesClass).index( listItem ) % 3;
return '#' + $scope.preview.moment.sc[n];
}
}
I had to implement the same functionality of the css property "nth-of-type" using jQuery, but it works prefectly!
I have a link like this:
<h1>
Title 001 - Stuff
</h1>
I want to style only "Title 001". It's possible to create a css rule to do this?
I don't remember how I did in the past, I think it was something like this:
h1 a[text="Title 001"]
But this doesn't work
And... then I want to know if it possible to do that with "Title XXX" where XXX is a dynamic number.
You can't select by content, but you can use attributes (as you nearly did already).
<h1>
Title 001 - Stuff
</h1>
a[data-content="Title 0001 - Stuff"] {
color: red;
}
Duplicate Content in Attribute
If you would like to avoid using JavaScript, you could duplicate the content (gasp) in an actual attribute, and select based on that attribute:
Title 001 - Stuff
And then select anything that starts with "Title":
a[data-content^="Title"] {
color: red;
}
Manually Test textContent
Alternatively, you'd have to take an approach with JavaScript:
var links = document.querySelectorAll( "a" );
var pattern = /^Title\s\d{3}/;
for ( var i = 0; i < links.length; i++ ) {
if ( pattern.test( links[ i ].textContent ) ) {
links[ i ].classList.add( "distinguish" );
}
}
This is simply one example of how you could add a .distinguish class to all matching elements.
Filtering with jQuery
If you are using jQuery (or a similar utility) you could accomplish this without so much verbosity:
$("a").filter(function () {
return /^Title/.test( $(this).text() );
}).addClass("distinguish");
Isolating "Title :digits:"
If you only want to isolate, and style, the Title XXX portion and you don't have access to the source templates, you could do this too with JavaScript:
$("a").html(function ( index, html ) {
return html.replace(/(Title \d+)/, "<span>$1</span>");
});
The above assumes you are using jQuery, but if you're not you can accomplish the same thing with the following:
var anchors = document.getElementsByTagName("a")
, length = anchors.length
, el;
while ( length-- ) {
el = anchors[ length ];
el.innerHTML = el.innerHTML.replace(/(Title \d+)/, "<span>$1</span>");
}
With css
Title 001 - Stuff
a[data-content^="Title"] {
color: red;
}.
But
Here is what you can do with jQuery in much smarter way,
$('a').filter(function (i, element) {
return element.text == "Title 001 - Stuff";
}).css('color','green');
Working fiddle
I'm afraid this is impossible in CSS.
You're using an attribute selector:
a[text="Title 001"]
and your <a> hasn't got an attribute called text.
You would have to use Javascript to handle such situation. There was once an idea to have a :contains() pseudo-selector but this has never been implemented.