Geek Answers Handbook

How to save styles of the embedded widget?

How to make an external PHP widget page have your own CSS. The trick is when the outer page included has been touched by the stylesheet of the main page.

The incoming page is actually a comment widget (with its own .css file, about 30 lines, a bit), and the flexibility in height and width MUST HAVE.

PHP include was the best solution, but I lost my hair by adjusting my CSS file to match / null (add / exclude / styles) of any possible host webpage.

<sub> Example: sub>
 if there are styles for borders on the main page img, I have to reset them from the style.css widget, the same for H3, Petc.

How would you preserve the style of widget styles from the influence of page styles on the main page, in addition to using iframes ?

+5
source share
5 answers

You know that CSS is a client thing; he does not know about PHP and how the page is generated on the server.

You need to focus on the final HTML result and override the tags and classes and identifiers so that your desired style rules apply to the correct elements.

You can limit the scope of CSS rules by surrounding this part in a div with a unique identifier or class and use it in your CSS selectors so that they do not apply to elements outside this div.

, , , . , , , , : .

, :

#comments .link { color: red; } /* Included page rule */
#header .link { color: blue !important; }


#comments .link { color: red; } /* Included page rule */
#header div a.link { color: blue; }
+4

div . CSS, .

.

<div id="widget"><p class="nav">hello</p></div>

<

.nav{
// styles
}


#widget.nav{
// styles
}
0

, -CSS reset . , :

<div id="widget">
    <!--your code here-->
</div>

reset , CSS reset, Eric Meyer's, : http://meyerweb.com/eric/tools/css/reset/

CSS. CSS , .

0

CSS :

  • ( )
  • ( HTML-)

, CSS , "head".
, .

0

, CSS, :

div {/*rules*/};
p {/*rules*/};

..

CSS (div div ) ( : id, class, child-selector), .

, , div, PHP :

<div id="my_page">
    <?php include "myPage.php"; ?>
</div>

my_page:

div {/*rules*/};


#my_page div {/*rules*/};
-1

More articles:


All Articles