Jump to content

How to use two unique stylesheets on one page


Chappers

Recommended Posts

Hi

I want to use two different stylesheets with on page. I've got a php include function adding a comment form to one of my web pages, and would like this comment form to have its own stylesheet, rather than make include things for the comment form into the main site's stylesheet.

Is this possible? I assume it's important, if two can be used, to make sure that the two don't have similar things, like both having settings for "body", etc. Unless it's possible to keep one working just for the comment form, by applying the sheet before the comment code is added, and closing it afterwards?

The main page has the stylesheet linked like this:

[code]<style type="text/css" media="all">@import "css/style.css";</style>[/code]

And that's it.

Many thanks for any help,
James
Link to comment
Share on other sites

Why don't you just use one style sheet and include the comment for stuff in it. Wrap the comment include with a div id=comment_wrap

then in your css

#comment_wrap{
...
}

#comment_wrap .some_class{
(This class will only show up when it's in the comment_wrap div)
}

Hope this helps, Let me know if you have any questions

-Chris
Link to comment
Share on other sites

Thanks for that info Chris, it's helped broaden my knowledge of CSS a bit more. I'll implement it like you've said, but first there's one other thing I don't understand if you wouldn't mind shedding some light please?

The styles are within the included [i]comment form[/i] at the moment, but it'd be easier for me if they were in a separate stylesheet, which is why I wanted to know how to do the above.

Thing is, the comment form includes BBCode so people can add formatting to their comments. The styles for this formatting are put like this in the comment form code:

[code]?>
<style type="text/css">
<!--
body {
font: 12px Verdana, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
.italics {
font-style: italic;
}
.quotebody {
background-color: #FFFFFF;
font-family: Verdana, Courier new, courier, mono;
font-size: 11px;
color: #660002;
border: 1px solid #BFBFBF;
}

etc... etc...

-->
</style>[/code]

And later in the code more styles are laid out in this fashion, for the actual layout of the comment form itself, but they are not commented out, like the above ones.

If I remove the [code]<!-- -->[/code] from the above, it then messes up the layout of the comment form and the main page within which the form is included.

How would I go about adding the commented-out style code above into the main stylesheet without it messing other things up? And to help me understand, how come it's commented out yet still working, and why aren't the rest of the styles later in the code commented out?
Link to comment
Share on other sites

You can just copy [code]body {
font: 12px Verdana, Helvetica, sans-serif;
}
.bold {
font-weight: bold;
}
.italics {
font-style: italic;
}
.quotebody {
background-color: #FFFFFF;
font-family: Verdana, Courier new, courier, mono;
font-size: 11px;
color: #660002;
border: 1px solid #BFBFBF;
}

etc... etc...[/code] into your main style sheet and it should still work, just don't put the <style> or the comments stuff in.

What you sould do is where you past in the BB CSS you add the #comment_wrap to it. then it is just used in the comment_wrap div
[code]#comment_wrap .bold {
font-weight: bold;
}[/code]

I don't really know why you have to put the comment tags in the CSS if it is in the regular html page. I'm taking a guess here, but i think that it has something to do with how browsers read the <style>'s...but I could be totally wrong on that on. I'll try and research that and see what I can come up with.

hope that helped,
-chris
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.