CODEWITHSUNDEEP
cssfancybox
misaizdaleka
misaizdaleka

Reputation: 1816

Independent CSS for Fancybox

I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.

Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).

Is this somehow possible?

Upvotes: 2

Views: 2596

Answers (3)

Marko
Marko

Reputation: 72222

You have 3 options really.

  1. Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
  2. Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
  3. Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}

Upvotes: 1

nheinrich
nheinrich

Reputation: 1841

You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.

<body id="fancy_content">

and then adapt your styles for that template

body#fancy_content h3 {
  color: green;
}

You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.

Upvotes: 3

me_an
me_an

Reputation: 509

try adding IDs to your html elements then use CSS IDs 

 h3#idname { color: #FF0000; }

Upvotes: 0

Related Questions