brynn Posted June 3, 2013 Share Posted June 3, 2013 (edited) Hi Friends,I'm very new to CSS, and fairly new to coding webpages as well. But I do know the very most basic kind of HTML. However, some of the tags I would have been using are not supported in HTML5. So I'm trying to learn CSS. The problem I'm having, is that I'm trying to use CSS code to write an article, in the Simple Machines Forum's, Tiny Portal mod's articles feature. The code I've written, both in the Internal Style format, and Inline Style format, work in the browser by itself. But when I insert it into a Tiny Portal article, it ends up picking up parts of the portal itself, and putting it into the article as well. I'll put my code below, and then I'll attach a screenshot of the result. The site where I want to put the articles isn't open yet, so you wouldn't be able to see the articles via direct link. What I think is happening, is that the code I've written is somehow affecting the code that creates the site itself. I was thinking that I could maybe use the class selector, to make the article sort of separate from the rest of the site. But I'm not sure exactly where to start using class. My 1st thought was using with the <body> tag, like <body class=whatever>. But something tells me that's not quite the best solution. And I realize that whoever reads or answers this may have not idea how the SMF Tiny Portal articles feature works. I'm just hoping the screenshot will show you what's going wrong. Internal style: <!DOCTYPE html><html><head><style>body{background-color:#ffffff;background-image:url('http://forum.inkscapecommunity.com/tp-images/img/a-art2.png'); background-repeat:no-repeat;background-position:center top;font-size:100%;font-family:Verdana,Geneva,sans-serif;margin-right:20%;margin-left:20%;}h1{text-align:center;font-size:1.5em}p{font-size:1.2em}</style></head><body><br><br><br><h1>How To Make A Screenshot</h1><p>text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article</p><p>More text.</p></body></html> Inline style: <!DOCTYPE html><html><head><title>How To Make a Screenshot</title><head><body style="background-color:#ffffff;background-image:url('http://forum.inkscapecommunity.com/tp-images/img/a-art2.png');background-repeat:no-repeat;background-position:center top;font-size:100%;font-family:Verdana,Geneva,sans-serif;margin-right:20%;margin-left:20%;"><br><br><h1 style="font-size:1.5em;text-align:center;">How To Make a Screenshot</h1><p style="font-size:1.2em;text-align:left;">text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article, text of article</p><p style="font-size:1.2em;">More text.</p></body></html> EditPS - I thought I would add another screenshot (csstp2.png) of what a normal article might look like, although this would be a very simplified one. But you can see how my code sort of co-opts other parts of the page (in cssTP.PNG) Thanks again. (and let's see if I can save this msg without making a duplicate post ) Edit #2I think the key is going to be not using the body tags, which is why I was thinking about <body class=whatever>. I just like the idea of declaring all the margin, font, background image, all at once. While waitig for a reply, I'm going to try the Inline style, but without any <body> tags, and see how that works. Also, if you just don't have enough info about SMF's Tiny Portal, to be able to help, I can also try posting in their forum. But I would be curious about using class selector on the body element anyway, even if that's all you can answer for me Edited June 3, 2013 by brynn Link to comment Share on other sites More sharing options...
newseed Posted June 3, 2013 Share Posted June 3, 2013 Since you are a newbie you may be a bit over your head trying to do stuff to existing software/program such as Simple Machine Forum. Internal css will work fine but not so if you are applying a standard css element to another element that has child selectors. Your css could look like this: h1 {color: blue;} But the forum's default css could look like this: #article h1 {color: red;} The #article h1 will take precedence over your internal style. If you want to override the forums default then you need to determine what those selectors are and apply them in the same manner. I would suggest you install Firefbug for Firefox. It will help you find the html and related css to what you want to edit. Link to comment Share on other sites More sharing options...
brynn Posted June 4, 2013 Author Share Posted June 4, 2013 Oh, well no, I'm not trying to change or edit the SMF or Tiny Portal software. Tiny Portal offers a way for any forum member who happens to have permission, to write articles which other members can read or print or whatever. When you start to write a new article, there's a field where you can plug in your code for the article. But as I've mentioned, I think my code is somehow getting combined with the forum/portal code itself. I don't remember seeing anything about child selectors. I have read the CSS Basic, Styling and Box Model tutorials, but I don't think those tutorials mention child selectors. # is the ID selector, right? I thought the ID selector was for changing a single element. Since I don't want to change a single element, I didn't think # would be very helpful. I'll try asking in the TP forum. Thanks anyway. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now