Hi - I'm scratching my head over a chunk of css which I cannot get right.
J3 Responsive template
www.leadbetters.co.uk



When these pages are active/in focus the link above the picture should change colour - as in grid 3, the packing picture.

I can't get the one on the right, grid 4, to work - it stays yellow, even when I'm on that page.

This is the css I'm using:

#grid4 ul li a.shop{background-color:#faa21b; color:white; font-size:110%; text-align:center; padding: 3px 0px 3px 0px; font-weight:bolder; border-top-left-radius: 10px;
border-top-right-radius: 10px;}

#grid4 ul li a.shop:hover{background-color:#ba1414; color:white;}

.itemid-236 #grid4 .item-219 a.shop {background:#ba1414;}




#grid3 ul li a.packing{background-color:#faa21b; color:white; font-size:110%; text-align:center; padding: 3px 0px 3px 0px; font-weight:bolder; border-top-left-radius: 10px;
border-top-right-radius: 10px;}

#grid3 ul li a.packing:hover{background-color:#ba1414; color:white;}

.itemid-223 #grid3 .item-223 a.packing {background:#ba1414;}

In the last line of each of these I don't understand the significance of the itemid-xxx at the beginning of the line, nor where it comes from.

Any ideas what I'm doing wrong?

Thanks

Ian

Hi Ian,

Are we talking about the text or the picture?

For the first examples text colour use

.itemid-168 #grid1 .item-221 a.move {color:red;}

Using .itemid enables a developer to target specific pages using the pages .itemid class number

Any style only applies to the page with that itemid class

This is the easiest way to change any css for the colour or background

Does that make things a bit clearer?

Cheers
Paul

Hi Paul - thanks for getting back to me.

Yes, talking about the background behind the text, which is actually a menu module.

That's what I thought about itemid, but these four items are all on the same page, but have different item ids. What am I missing?

And .itemid-168 #grid1 .item-221 a.move {color:red;} changes the colour of the text. It's the background behind the text which I want to change.

Still puzzled…

Thanks

Ian

Hi Ian,

For me the background of the shop text turns red on hover.

Rob

Hi Rob

It's meant to turn red on hover. It's also supposed to turn red after you've clicked on it to go through to the shop page.

If you click on the word removals you'll see what I mean.

Thanks

Ian

Hi Ian

You need to target the current class on the item

Rob

Hi Rob - that certainly works

But… I'm I'm afraid I'm still puzzled.

In grid one this is the css:

#grid1 ul li a.move{background-color:#faa21b; color:white; font-size:110%; text-align:center; padding: 3px 0px 3px 0px; font-weight:bolder; border-top-left-radius: 10px;
border-top-right-radius: 10px;}
#grid1 ul li a.move:hover{background-color:#ba1414; color:white;}
.itemid-168 #grid1 .item-221 a.move {background:#ba1414;}

It seems to have three effects:
> Hover over the word removals, and its background, and the background turns red.
> Click on the word removals or background it takes you to the removals page, and the background stays red.
> Click on the picture below and it takes you to the removals page, and the background stays red.

I haven't used current in the code above.

Although your new line of code including current works when you click on the word shop and it's background, it doesn't work when you click on the picture below.

Sorry this is so pedantic, but I'm lost as to why the css works for three of the grids, but not the fourth.

Am I your most difficult customer?

Thanks

Ian

Hi Ian,

Not quite sure I follow the gist of above but looking at the last image block they look they are different pages as they have different body itemid classes

Cheers
Paul

And in answer to your last question

"Am I your most difficult customer?"

You're fine

Cheers
Paul

Different pages! Of course they are. I'm getting too close…

And I dread to think what some of your customers are like then

Thanks Paul

No problem - know that feeling all the time
I also restore photos so have to take day long breaks from images otherwise I miss the obvious

Customer wise - as they say "you could say that I couldn't possibly comment"

Cheers
Paul

Ah. I've fixed my colour issue. I'm not sure what was wrong, but the menu settings and links were inconsistent.

I've sorted it out and everything is working as it should - except when I click on the colour bar in grid 2, storage, in the address bar I see this: www.leadbetters.co.uk/2014-04-25-14-30-24 - which I think is the date the page was created (have I really been working on this site for THAT long?).

I can't see where this is coming from.

When I click on the picture below it, I get the correct url: www.leadbetters.co.uk/storage

Any ideas?

Thanks

Ian

Hi Ian,

Check the alias boxes for the links

What link type is the one with the date?

Cheers
Paul

Hi Paul - thanks for this.

I've managed to fix it - it was an alias problem, but it took me ages to find it, and I'm not sure what I've done.
Any way, it works now…

Thanks again for your help

Ian

Nice one

No problem

Cheers
Paul