I can't quite seem to get the hover to change colour based on the category the post is tagged in.
I've added both body_class() and post_class() to the header.php as well as adding a function that adds the current post's category back to the body class -
add_filter('body_class','add_category_to_single');
function add_category_to_single($classes) {
if (is_single() ) {
global $post;
foreach((get_the_category($post->ID)) as $category) {
$classes[] = 'category-'.$category->slug;
}
}
return $classes;
}
I'm able to change the hover on all the posts by using this styling -
.portfolio .portfolio-item:hover > .hover-item{
background-color:#000000;
}
but when I add the category class nothing happens. For example -
catergory-classes .portfolio-item:hover > .hover-item{
background-color:#000000;
}
Where am I going wrong?
Here is my site. Any help gratefully appreciated
i think you for get to put a point at the first of css code
your css is
catergory-classes .portfolio-item:hover > .hover-item{
background-color:#000000;
}
but correct is
.catergory-classes .portfolio-item:hover > .hover-item{
background-color:#000000;
}
I think you missed a dot (.)
.catergory-classes .portfolio-item:hover > .hover-item{
background-color:#000000;}
And if the .catergory-classes and .portfolio-item needs to be applied on the same tag , then it should be (no spaces b/w 2 classes)
.catergory-classes.portfolio-item:hover > .hover-item{
background-color:#000000;}
You shouldn't be setting a body class, since this will be the category of the front page itself (and won't change for each item). Instead, consider adding classes to the portfolio items (within The Loop). For example:
<?php
if ( have_posts() ) : while ( have_posts() ) : the_post();
$categories = get_the_category();
$category = ! empty( $categories ) ? 'category-' . $categories[0]->name : '';
?>
<li class="portfolio-content">
<div class="portfolio-item <?php echo $category; ?>">
<!-- Additional Content -->
</div>
</li>
You can then target these categories with:
.portfolio-item.category-somecategory:hover > .hover-item { }
Related
I've been searching for this for like 5 or 6 days now and nothing seems to be working...
I am trying to use the code below to hide the div "" only on woocommerce variable products... but I can't seem to get it to work.
add_action( 'show_hide_product_variable_price', 8 );
function show_hide_product_variable_price() {
global $product;
if( $product->has_child() ) {
?>
<style>
.summary-price-box {
display: none;
}
</style>
<?php
}
}
I have also tried using this line in the above code and still nothing...
if( $product->is_type('variable') ) {
So I actually solved this earlier today.
You can either achieve this using CSS like this:
.product-type-variable .summary-price-box {
display: none !important;
}
or you can achieve this using Javascript like this:
add_filter('woocommerce_get_price_html', 'lw_hide_variation_price', 10, 2);
function lw_hide_variation_price( $v_price, $v_product ) {
$v_product_types = array( 'variable');
if ( in_array ( $v_product->product_type, $v_product_types ) && !(is_shop()) ) {
return '';
}
// return regular price
return $v_price;
}
the css with hide the full "summary-price-box" and the javascript will hide only the "price range" or "From: $X.XX"
I'm kinda new to Wordpress and CSS, I hope you guys can help me out.
I want to change the position of the sitelogo .site-branding of all the posts under a specific category.
I can change the site-branding in my style.css to my liking but it effects the whole site including all pages, posts and category's.
.site-branding {
left: 50%;
position: absolute;
top: 40%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Hope you guys can help me out.
Thanks in advance.
WordPress gives you the ability to target the category by adding its name to your stylesheet (usually "category-x") and then you can uniquely target any and all categories in your css.
Here's a great step by step article for targeting this class in your css.
An example might be:
<body class="archive category category-agriculture category-40">
With category-agriculture being the class you want to target like so:
body.category-agriculture .site-branding {color: red;}
Thanks for the effort, but I have had a little help and fixed the problem.
I added this filter to my functions.php
function pn_body_class_add_categories( $classes ) {
// Only proceed if we're on a single post page
if ( !is_single() )
return $classes;
// Get the categories that are assigned to this post
$post_categories = get_the_category();
// Loop over each category in the $categories array
foreach( $post_categories as $current_category ) {
// Add the current category's slug to the $body_classes array
$classes[] = 'category-' . $current_category->slug;
}
// Finally, return the $body_classes array
return $classes;
}
add_filter( 'body_class', 'pn_body_class_add_categories' );
That filter will add the category name as a class to the body on single posts.
For example, if the category is called News, it will add category-news to the body as a class on single posts.
Once that’s done, you can use that body class to only target .site-branding on single posts in the News category like this:
.single.category-news .site-branding {
left: 20%;
}
You will likely need Javascript and Jquery for this.
So if this is your URL structure: www.mysite.com/home/category/,
(function($){
var $pathArray = window.location.pathname.split('/');
var $location = pathArray[2]
var $branding = $(".site-branding")
if ($location == 'cat1' || $location == 'cat2') {
$branding.css({
'left' : '50%',
'position' : 'absolute',
'top' : '40%',
'-webkit-transform' : 'translate(-50%, -50%)',
'-ms-transform' : 'translate(-50%, -50%)',
'transform' : 'translate(-50%, -50%)'
});
}
});
Assuming you are running a child theme on your wordpress instance (which if you are not, you definitely should) you can add this script at the bottom of your header.php file.
For that I think you will have to add a PHP conditional in your header.php that checks if the current post is in that specific category, and then add another class to your logo tag that changes it's position.
Would be something like this:
<h1 class="site-branding <?php in_array( YOUR_CATEGORY_ID, get_the_category((get_the_ID()) ) ? ' new-posision' : '' ; ?>"></h1>
Wordpress may add category as a class to body tag.
If it is so for your theme than you may add specific css rule for category.
.category .site-branding {
/* your css rules here */
}
I'm always using this method to display relevant css for the user, but I'd like to know if there was a better way to achieve this.
<?php
//MySQL request
$data = $request->fetch();
?>
<div
class="if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
echo "divLoggedInUser";
}
else {
echo "divLoggedInUser";
}
} else{
echo "divNotLoggedIn";
}"
id="<?php echo $data['id']; ?>">
<!--class is used for relavant css, id for javascript element selector -->
</div>
This is not such a big problem in this example, but it becomes a mess when you have a lot of code.
I'd like to know if there's a equivalent way to do this?
Something in css like this would be so greatfull:
.div::loggedIn
.div::notLoggedIn
There isn't, either way you have to generate some code which will allow you to determine in CSS whether you style an element for logged in user or not.
If you haven't done that already, put your code in function for a better read:
<?php
function getCssUserClass() {
if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
return "loggedIn";
} else {
return "notLoggedIn";
}
} else {
return "loggedIn";
}
}
?>
<div class="<?= getCssUserClass() ?>"><span class="username">Frank</span></div>
Then you can style your div and all elements inside it accordingly:
.loggedIn {
}
.loggedIn span.username {
color: #FF0000;
}
.notLoggedIn {
}
notLoggedIn span.username {
color: #999;
}
Why not present a different CSS file based on if the user is logged in and then assign generic classes to the divs that should be hidden or not.
Create 2 CSS files, loggedinusers.css and notloggedinusers.css. For your loggedinusers.css
div.showToLoggedInUser {
display:block;
}
and in your notoggedinusers.css
div.showToLoggedInUser {
display:none;
}
Then user your logged in logic to add the appropriate CSS file
<?php
$css_file = "notloggedinuser.css";
if(isset($_SESSION['id']) && !empty($_SESSION['id'])){
if($_SESSION['id'] == $data['id']) {
$css_file = "loggedinuser.css";
}
?>
<link rel="stylesheet" href="<?PHP echo $css_file; ?> />
You could set the loggedIn/notLoggedIn class on the body element, then add CSS rules that need to reference that setting like this:
div.anyOtherClass {
/* default styling */
}
body.loggedIn div.anyOtherClass{
/* logged-in styling */
}
body.loggedIn div.anyOtherClass{
/* logged-out styling */
}
I have some PHP which will output a set of images.If I write it this way
foreach( $data as $inform ) {
{if (isset($inform['file1'])) {
echo '<img src="'.$inform['file1'].'"><br><br>';
}
}
It will display the 4 different images in the array $inform['file1'] with 2 line breaks in between each, but if I want to position them on the page like this
foreach( $data as $inform ) {
if ( isset( $inform['file1'] ) ) {
echo '<div style="position:absolute; top:400px;"><img src="'.$inform['file1'].'"><br><br>
</div>';
}}
Then it displays all 4 images on top of each other, but in the right location.
I've tried styling it in css and nothing works. Can anybody help a newbie learn this?
Thanks in advance.
It's nothing to do with your foreach loop. You're literally telling the images to go on top of each other, so that's what they are doing. If you would like to add spacing to the top, put a container div around the images and do a margin-top: 400px;.
Your biggest problems here are:
You haven't explained what you want to achieve, and
You are mixing in PHP which is making a relatively simply problem seem harder to solve
The styling and positioning of elements should be managed through CSS (preferably not inline CSS).
Your PHP should be:
if( count( $data ) ){
echo '<div class="file1_container">';
# If there are elements in the $data array
foreach( $data as $inform ){
if( isset( $inform['file1'] ) ){
echo '<img src="'.$inform['file1'].'" />';
}
}
echo '</div>';
}else{
# No elements in the $data array
}
Your CSS could then be something like:
.file1_container {
position:absolute;
left:0;top:400px;right:0;
text-align:center;
}
This will position a DIV containing all the images at 400px from the origin, and the IMGs within it will be on the same horizontal line, aligned to the centre of the DIV.
Your practice is bad, but if you must:
foreach($data as $inform){
if(isset($inform['file1'])) {
echo "<div><img src='{$inform['file1']}' /></div><br /><br />";
}
}
Of course, this would add two breaks after the last one as well. You cannot have multiple items in different places using the same position:absolute, since they will all be relative to the last position:relative. Regardless, you should use CSS.
#PHP
foreach($data as $inform){
if(isset($inform['file1'])) {.
echo "<div class='someClass'><img src='{$inform['file1']}' /></div";
}
}
/*CSS*/
.someClass{
margin-top:10px;
}
Quick question. I want to change the color of an int based on the value being positive or negative, using CSS if possible.
Any ideas?
In PHP you could do this:
<span style="color: <?php echo ($var < 0 ? '#FF0000' : '#00FF00'); ?>">Some text</span>
This evaluates the variable $var, if less than zero, applies red to the style (FF0000) otherwise green (00FF00).
It depends on the language you are using. In just about any language you can set the class of the tags around the value using the dynamic part of the language. If the value doesn't have its own tags you can use <span></span> around the value to give it a class. then you just use the dynamic code to set the class.
If you are using a language like Ruby there are some CSS Selectors Gems you can use but I don't know much about them or if they will help.
I use wordpress and the table with newly posted posts and custom posts are on index.php, the code I am inserting between td tags
<td style="font-weight: <?php echo ($var <= 0 ? 'normal' : 'bold'); ?>"><?php echo get_portf_posts_count_from_last_24h(); ?></td>
I tried also this code and neither this works:
<?php
if ($output <= 0) {
$output = 'normal';
print $output;
}
else // +
{
$output = 'bold';
print $output;
}
?>