Applying CSS based on a rule

PHP
1

Hello,

I have a list that at the moment that looks like this:

div.product ul.custom-attributes li.pa_attribute {
 list-style-type: none; margin-left: -18px; padding-left: 25px;
}
div.product ul.custom-attributes li.pa_attribute:first-child {
 background: url("/wp-content/uploads/2014/09/cf.png") no-repeat scroll left center rgba(0, 0, 0, 0)
}
div.product ul.custom-attributes li.pa_attribute:first-child +li {
 background: url("/wp-content/uploads/2014/09/df.png") no-repeat scroll left center rgba(0, 0, 0, 0)
}
div.product ul.custom-attributes li.pa_attribute:first-child +li +li {
 background: url("/wp-content/uploads/2014/09/ft.png") no-repeat scroll left center rgba(0, 0, 0, 0)
}

But the order of the list will change so I need to apply the CSS according to a rule. Is it possible to do this using PHP? The URLs are out put like this with an ‘attribute’ code attached, if this helps.

http://www.mysite.com/product-category/grocery/hot-cold-drinks/acv-drinks/?filter_attribute=552

I need to apply a statement like this:

if filter_attribute=“552” the apply this CSS = some css

Is this possible?

Thanks so much…

Chris

2

One member here would say “What happened when you tried it?”

Yes it should work; I would use:

if ( $_GET['filter_attribute'] == '552' ) {
echo something
}
else { echo something else }
1 Like
3

Thanks so much for your response, but my issue now is how to apply a CSS rule to that echo statement. Does that make sense…Can that be done like:

if ( $_GET['filter_attribute'] == '552' ) {
echo 'div.product ul.custom-attributes li.pa_attribute: {
 background: url("/wp-content/uploads/2014/09/cf.png") no-repeat scroll left center};'
else { echo something else }

Chris

4

Yes, the output from your echo() statement forms part of the html content that’s delivered to the browser, so as long as the conditional is run in the header of the page where you would normally add CSS rules, it shouldn’t be an issue.

Another option would be to use the include statement and hold the CSS in a separate file

if ($_GET['filter_attribute'] == '552' ) {
include "custom_css.css";
} else {
include "usual_css.css";
}

So your page would be like:

<doctype ... 
<html>
<head>
<?php 
if ($_GET .... 
?>
</head>
<body>

and so on

1 Like
5

Another option would be to do

if ($_GET['filter_attribute'] == '552' ) {
?>
 //rules here in regular CSS format
<?
} else {
?>
//rules here in regular CSS format
<?
}
?>

You’d need your server to be configured to allow .CSS files to parse PHP probably (not sure.)

1 Like
6

I’m not having any joy trying these at the moment - have I mislead everyone using this:

?filter_attribute=552

Is that filter attribute the correct thing to target? I was guessing! If I just run this statement:

<?php
if ( $_GET['filter_attribute'] == '552' ) {
echo "pass";
}
else { echo "fail"; }
?>

It fails…

Chris

7

Looking at your original link, you don’t seem to have a page name on there, just a directory which (presumably) then serves up the default page on opening that directory, perhaps via some redirect mechanism. If that’s true, I don’t think you’ll make it work because the redirect will strip the parameter. Easy way to tell is

<?php
echo $_GET['filter_attribute'];
?>

There may be some way to configure the server to keep parameters for this - I’m not up to speed on how these things work in the real world. Can you add the php page name to your link and try again, just to see if that helps?

1 Like
8

Thanks droopsnoot…

Trying that bit of code didn’t return anything, but there are a number of these filter attributes links on the page, would it struggle to return a value?

The permalinks within Wordpress are set to friendly links. The ‘non-friendly’ links look like thus:

http://www.thesiteofmine.com.au/?product_cat=herbal-tea&filter_attribute=550

Is that what you mean?

Chris

9

I know nothing about Wordpress, unfortunately. However a quick Google ( http://wordpress.org/support/topic/passing-variables-using-the-permalink-structure ) suggests that you have to create a plug-in to allow parameters to be passed around in this way. Have you done that?

1 Like
10

Thanks so much. I would have no idea if that would work in my case, but I’ll give it a try.