theglovner

It’s a fair point.

I assume any updates to the theme will obviously overwrite my changes to the theme’s style.css so getting a custom.css up an running will deal with that potential issue.

I’ll get things up and running with this as a band aid fix at the moment then look to get the bits of code moved over into that plugin you have suggested.

Thanks again for all the help.

Andrew

I did and working exactly as intended.

So the theme file seems to suggest that a custom.css should supersede the theme style.css. But didn’t seem to work in practice.

The second I dropped it into the style.css from the theme and purged the cache it appeared exactly as it had in your CSSDesk.

DJDoubleXL189.

I’ll try your suggestion in the sandbox page just now and see how it works out.

UPDATE:

It still doesn’t have the desired effect. Images are arranged vertically.

Andrew seems to have the winning ticket.

Which confused me at first since everything I found suggested CSS Layers using the z-index was the way to go.

Boom and there it is.

Yup, added the CSS you provided into the main style.css and it’s appearing exactly as it was in CSSDesk.

Thanks for your help solving this, it’s massively appreciated, thought I was going to have to back down and go for a simpler look.

Many thanks again.

Can’t see any red line anywhere, I guess that suggests that it isn’t looking at the custom.css but continuing to look at the style.css where it can’t find those div classes.

Next step try putting the css code you provided into the main style.css and be damned with their warnings!!

Into a custom.css that I created so I didn’t mess up any of the code that comes with the theme.

Main css for the theme had this at the top:

*/
/*
WARNING! DO NOT EDIT THIS FILE!

To make it easy to update your theme, you should not edit the styles in this file. Instead use
the custom.css file to add your styles. You can copy a style from this file and paste it in
custom.css and it will override the style in this file. You have been warned! :)

Although those styles aren’t new versions of existing ones, they are completely new.

I am interested in anything that might make this work. Spent most of the day trying to get it working.

Had a look at the CSSdesk page and that is exactly the result I’m looking for.

Tried porting the code over to my pages and purged the cache but again no change. Still shows the images vertically one after each other.

Could it possibly be something to do with the rest of the code in the php file that’s throwing it off? Since it certainly has the intended result when you show it on CSSDesk.

I do have a cache plugin, I’ll clear it now and see what happens.

Thanks for your help.

Sorry Andrew.

Drops as in, the example you provided didn’t have the background image in it so I wasn’t sure how that was supposed to be placed behind the rest of the images (i.e. was I on the right track with the z-index).

Tried the changes you’ve suggested:

php code is now:

<div class="Layer-1">
    <img src="https://www.klones.co.uk/wp-content/uploads/2013/07/Layer-1.png">

.....etc

CSS now:

#Layer-1 {
  position: relative;
  left: +0px;
  top: +0px;
  width: 1500px;
  height: 900px;
  z-index: 1;
}
.....etc

Doesn’t seem to have made any change though:

https://www.klones.co.uk/sandbox/

(Out of curiosity why # instead of .?)

Afraid you’ve lost me, apologies all I know has been learned from google so far, so parts of the theory and jargon are a bit foreign to me.

What you’ve suggested certainly appears to get the images side by side which is an improvement. But I was looking to get some space between each one.

Other problem is, your example drops the main background image (black background with the band logo and instructions to click each of the above pictures.

Apologies if I’m missing something obvious.