Search the Community

MyBB 1.8 Using CSS In Posts (<style> Tag) Mybb does not allow the use of <style> tags in posts, simply because they deem it 'dangerous' which can be true but for us forum role players... style tags can mean life or death when it comes to posting tables! I have here a solution for you! Actually two solutions. As a kind reminder: - Before ever touching any core files you should back up your site properly, or keep a copy of the original file you are editing so that you can paste the original code back in easily if something goes wrong. - This tutorial was created using MyBB 1.8.x software. ------------------------------------------------------ Tutorial Created By: Isoldehn Tutorial Permissions: Please do not re-post this tutorial else where, instead link someone to this thread. Tutorial Needs: FTP Access & Knowledge On Editing Core Files AND/OR Ability To Copy & Paste MyCode Style Tag or Core File Edit For HTML Style Tag MyCode Style Tag Step 1 - Go to: Admin CP --> Configuration Tab --> MyCode (found in left side navigation) --> Add New MyCode Step 2 - Create a title and short description, I generally title it "Style" and add the short description as "MyCode style tags to contain CSS." Step 3 - Add in the regular expression: \[style\](.*?)\[/style\] Step 4 - Add in the replacement: <style type="text/css">$1</style> Step 5 - Be sure the MyCode is enabled (check yes), parse order doesn't really matter. ------ Well how do I use it now that I've installed it? You use it just like a style tag but with brackets instead of greater than or less than signs and you need to make sure all line breaks and paragraph breaks are removed from the css. - This will work: <div class="bee">Bee class here!</div><div class="boop">Boop class here!</div> [style].bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; }[/style] - This will not work: [style] .bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; } [/style] Core File Edit For HTML Style Tag Step 1: - Open up your FTP - Navigate to inc/class_parser.php Step 2: - Open the file, take a deep breath and look at none of it (unless coding is beautiful to you, in that case stare at it hard) - Find and remove |style from this bit of code: $message = preg_replace('#<(/?)(base|meta|script|style)([^>]*)>#i', '&lt;$1$2$3&gt;', $message); Step 3: - Save!! Step 4: - Go make a test thread and use the style tag, make sure it works. Remember you will need to remove all line breaks/paragraph breaks from the CSS! - This will work: <div class="bee">Bee class here!</div><div class="boop">Boop class here!</div> <style>.bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; }</style> - This will not work: <div class="bee">Bee class here!</div><div class="boop">Boop class here!</div> <style> .bee { background: pink; padding: 5px; } .boop { background: blue; padding: 15px; } </style>

In this guide, we're going to guide you through the jungle of html and css syntax, whilst also explaining what different terms mean. Introducing: HTML HTML is the acronym for HyperText Markup Language, it's the the basic building blocks for the web, it's structure, or it's skeleton. Here is an example of some of the HTML from this post template. <div class="bstfrnds"> <div class="bstfrnds-header"> <img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" /> <h3>Here is a title</h3> </div> <div class="hc-tabs-wrapper"> <div class="hc-tabs"> <ul class="hc-tabs-list"> <li class="hc-tab-active"> <span data-tab="hc-tab01">Tab 01</span> </li> <li> <span data-tab="hc-tab02">Tab 02</span> </li> <li> <span data-tab="hc-tab03">Tab 03</span> </li> <li> <span data-tab="hc-tab04">Tab 04</span> </li> </ul> </div> <div class="hc-tab-content"> <div class="hc-content-block hc-tab01 hc-tab-show"> <h4>This Is Tab 01 Content</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! <a href="//google.com">Placeat</a> unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae illum dicta quidem laudantium sed voluptas ipsam repudiandae corporis veritatis, nostrum fugit harum, nihil dolorem saepe perferendis <a href="//google.com">cumque</a> temporibus eum. Atque.</p> </div> <div class="hc-content-block hc-tab02"> <h4>This Is Tab 02 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis laudantium, fugiat pariatur, saepe tenetur accusantium ut voluptates neque hic dolorum! Placeat unde qui cupiditate numquam aliquid, id illo. Quibusdam, ducimus.</p> <ul> <li>List item 01</li> <li>List item 02</li> <li>List item 03</li> </ul> </div> <div class="hc-content-block hc-tab03"> <h4>This Is Tab 03 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos ipsa distinctio id, neque repellendus quod corrupti voluptas rerum accusantium minus molestiae. Deserunt, dolores ex sapiente iusto iure hic soluta assumenda.</p> </div> <div class="hc-content-block hc-tab04"> <h4>This Is Tab 04 Content!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> </div> Every webpage (or post template!) is made up the HTML skeleton and every skeleton is made up of particular bones - or elements. Elements? Each element consists of two tags, an opening and a closing tag. The tag contains the name of the element and is wrapped in opening and closing angled brackets. Here's a picture to help you out! As you can see, <div> and </div> are the tags of the content division element. Therefore, the very first line in the above code consists of an opening tag for the first element of the code, a content division element. What kind of element you choose to use depends entirely upon what you are trying to achieve. It is important to choose the correct element for the job, just like it's important to choose the right tool for the job! This is because browsers interpret element types in particular ways, and have them behave accordingly. Some elements for example, will sit side by side with each other, because they're what is called an inline element. Others will start a new line because they're a block level element. In the above example, the coder wanted the content to be on it's own line but did not for example, consider it an article (<article></article> would be more appropriate then). Where all other semantic elements are exhausted, use div. So if <div> refers to an element, what does the rest of the line refer to? To refresh your memory on the line in question: <div class="bstfrnds"> The rest of this line is made up of attributes. Attributes? An attribute is a word used within the opening tag to control the element's behaviour, or providing metadata. It always uses the following syntax: name=value That is, the attribute's identifier (name) following by it's value. In this example, the attribute identifier is name, which tells the browser that the element will be referred to by attribute value, bstfrnds. This is useful when you have a collection of elements that you want to appear several times, on several pages, but to look the same. You will give those elements all the same name, so that later you can refer to them all in your CSS. Another example of an attribute can be found here: <img src="//images.rpginitiative.com/uploads/monthly_2018_08/large.bstfrnds-banner.jpg.b5fb9b34bbcfdcc684a507a74802f425.jpg" /> In this example, the attribute identifier is src, that is, the URL of an embeddable content. The attribute value is the URL for the image of the man with his dog. Paragraph vs Line Break Earlier I mentioned that your choice of element was important because it would behave in different ways. We'll talk more about this now, when comparing paragraphs with line breaks. Paragraph A paragraph element is, as expected, a paragraph. For example, this guide is made up of paragraph elements. <p> <strong>Paragraph vs Line Break</strong> </p> <p> Earlier I mentioned that your choice of element was important because it would behave in different ways. We&#39;ll talk more about this now, when comparing paragraphs with line breaks. </p> <p> <strong>Paragraph</strong> </p> <p> A paragraph element is, as expected, a paragraph. For example, this guide is made up of paragraph elements. </p> See? A paragraph element may render slightly differently in every browser but they will all separate paragraphs with a single blank line. This is different to a line break, which simply puts the proceeding text on a new line, under the preceding text. Example: This is<br> a line break Renders as: This is a line break using doHTML? Try this: <p /> That will create a new blank line without needing to type in two line breaks. So, want to create a paragraph? Use the paragraph tag. Want to make a line break? Use the line break tag. Style HTML without a style is a white page with words, elements following one after the another as the browser dictates. The magic happens after the style tag. You should only use the style tag for doHTML, in cases where your administrator does not provide you with a place to upload your own CSS document. The style tag contains the CSS! CSS - Cascading Stylesheet CSS is the acronym for Cascading Stylesheet, which is a list of code that controls how a page looks in the browser. The stylesheet is referred to as cascading because of the rules that govern how rules and declarations are prioritised. The most basic explanation is that the rule or declaration that comes later in the stylesheet is prioritised over those that come earlier in the stylesheet. For example: <div class="example"> I'm an example. </div> <style> .example { background: white; color: black; padding: 10px } .example { background: #1a1a1a; color: #008000; padding: 20px } </style> The first rule will not be used. The second will be. I'm an example. .example { background: white; color: black; padding: 10px; } .example { background: #1a1a1a; color: #008000; padding: 20px; } See? The background is off-black rather than white, the text is green, not black and the padding is set to 20px. There are exceptions to that general rule. Briefly: Putting !important after a declaration will make it override proceeding declarations. .example { color: red!important; } The more specific the selector, the more priority the browser will give the rule. I used a few unfamiliar terms there! Let's start breaking down what a stylesheet contains. CSS Ruleset/CSS Rule A CSS Ruleset is made up of a selector or selectors, and a declaration block. It looks like the following: .example { background: white; color: black } The entire code in the above example is called a CSS Ruleset. Selector A Selector is the first ingredient in the CSS Ruleset. It is used to select the element whose appearance you want to alter. The following is the selector from the above example. .example A CSS Ruleset may contain multiple selectors. An example from this very site is: .fulluserNav, .upperNav { background: #000; width: 100%; padding: 5px; height: 45px } This ruleset will alter two elements. One that is named fulluserNav and another that is named upperNav. Declarations Block The next ingredient to the CSS Ruleset is the declaration. Every declaration block starts with a curly bracket: { and ends with a curly bracket } From the earlier example: { background: white; color: black } The above is a declarations block. Declaration Within a declarations block is at least one declaration. background: white; The above is a declaration! We're going deeper! Property Within each declaration is a property. background The above is a property. Examples of properties include: height width float display color background padding margin Value The property is followed by a value, and the property and the value is divided by a colon. white The above is the value in the declaration we have been using as an example. Nearly every declaration should finish in a semi-colon. You do not need to add a semi-colon to the last declaration in a declaration block. Leaving out the semi-colon for the last declaration in every declaration block can decrease the amount of time it takes for your site to load! So, to bring it all together! /* the start of a ruleset */ selector /* start of a declaration block */ { /*start of a declaration */ property: value; /* end of a declaration */ /* start of another declaration */ property: value /* I am the last declaration in this declaration block, don't need a semi colon! */ } /* end of declaration block */ /* end of a rule set */ /* in other words! */ .example { background: white; color: black } These are all the basic building blocks of a webpage. The ability to identify what each aspect is called can help you in asking questions or in explaining what issue you're having.