[Solved] X theme CSS problem

[Judco]

I’m Trying to implement some custom .CSS into wordpress X-theme

The Page: [REMOVED]

The code pen: http://codepen.io/Judco/pen/AIkfp

Now, in the word press theme my content is inside of a row with the ID=x-content-band-1

should i use:
<div id="x-content-band-1 "class="container">
in the html?

and use:
#x-content-band-1 .container{}
to call for my css code?

I’m a little confused about the selectors I suppose… More particularly how do I use my css within #x-content-band-1

Maybe im doing it right and revo slider is breaking my custom css?

sigh…not sure – can someone have a look?

[Kingslayer]

I am not quite sure what you want to do, so I cant answer what you should use.

http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/

Read up on this especially the first prat of the article.

[Judco]

simply put, I want to implement that code pen to the page I linked…

its just not functioning correctly

[Paulie_D]

If you have this

<div id="x-content-band-1 "class="container">

then this

#x-content-band-1 .container{}

is incorrect.

This refers to an element with a class of container inside an element with an ID if x-content-band-1.

This would work (note the missing space)

#x-content-band-1.container{}

but, frankly, it’s over-specific as

#x-content-band-1{}

is enough as there will only be one #x-content-band-1 per page.

[Kingslayer]

You have a negative Z-Index dont know why. If you want the things to actually show up give them a value euqal or bigger than 0. If you put your image on z-index 0 and your span on 1 they will show up

[Paulie_D]

You have a number of validation errors
http://validator.w3.org/check?uri=http%3A%2F%2Fgaelicheritage.com%2Fbrmwp1%2Four-dexter-cows%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

this is a big one

  <span>
   <p>
     Rhubarb
   </p>
  </span>

Element p not allowed as child of element span .

[Paulie_D]

If you remove the span completely (I’m not sure what you are trying to do exactly)…an d remove the z-index from

.container img {
display: block;
width: 100%;
margin: 0 auto;
position: relative;
/* z-index: -2; */
}

the picture shows up.

[Judco]

Thank goodness, you’re all god-kings…ok everything is showing correctly except the border

#x-content-band-1.container{
    position: relative;
    box-shadow: 7px 7px 0 rgba(0,0,0,0.025), 2px 2px 5px 2px rgba(0,0,0,0.25) inset;
    margin: 30px auto;
    border: 10px solid #709879;
    font-size: 1em;
    overflow: hidden;
    width: 300px;
}

should I add a z-index to the the border?

[Paulie_D]

You can’t add a z-index to the border…it’s part and parcel of the element.

…unless it’s en element meant to look like a border…nah, we wouldn’t do that, would we?

Oh…and your HTML is still invalid.

[Judco]

I’m just going for the hover effect with text, I removed the zindex from the .container img

this is borrowed css which would explain the difficulty I’m having, im fairly new to writing my own css

[Judco]

I certainly appreciate your guidance, I know this isnt a “hey write my code” forum.

Thanks for your input. ill keep playing with it, this is much further than i would have gotten on my own in an hours time.

[Paulie_D]

Ok…

If you are using this

#x-content-band-1.container{}

that’s fine BUT

the div in question does not have an ID

<div class="container">

So this (WITH SPACE)

#x-content-band-1 .container{}

is actually correct.

So give that div the right ID and boom…instant border. :)

[Judco]

adding the space made the difference. must be a parent/child issue

Anyway, thanks to everyone for the help. I may end up doing away with it simply because of all the issues. and html errors

[Author]

Posts