Help thread no longer active

[Mesenterium]

thread no longer active - user left site

 

[Sana Natsuko]

Div's are basically just a box that you implement into the forum by doing div inside [], to use these to a more advanced level what most people do is they assign a class to the div like 'div class="divName"' in []. By doing this you are basically saying this box is called this. Then you can style that box using CSS, by typing 'class name="divName"' in the [] (assume everything is in brackets that isn't just text or styles). These styles allow you to change the shape, size, color, font, add transitions. A lot of different things, and these two things are what make up most static forum pages without any script. An example would be

[div class="box"][/div]

[class name="box"]
    height: 100px;
    width: 100px;
    background-color: red;
[/class]
[comment]All styles have to end with a ';'[/comment]

[div class="box"][/div]

[class name="box"]
height: 100px;
width: 100px;
background-color: red;
[/class]
If you have any more questions, feel free to ask

 

[Mesenterium]

Div's are basically just a box that you implement into the forum by doing div inside [], to use these to a more advanced level what most people do is they assign a class to the div like 'div class="divName"' in []. By doing this you are basically saying this box is called this. Then you can style that box using CSS, by typing 'class name="divName"' in the [] (assume everything is in brackets that isn't just text or styles). These styles allow you to change the shape, size, color, font, add transitions. A lot of different things, and these two things are what make up most static forum pages without any script. An example would be

[div class="box"][/div]

[class name="box"]
    height: 100px;
    width: 100px;
    background-color: red;
[/class]
[comment]All styles have to end with a ';'[/comment]

[div class="box"][/div]

[class name="box"]
height: 100px;
width: 100px;
background-color: red;
[/class]
If you have any more questions, feel free to ask

Thanl you so much! So, basically, DIVs introduce CSS to BBCode, in general, no? Would it be better to have some knowledge on CSS before jumping into BBCode+?

 

[Sana Natsuko]

Basically yeah, in the normal BBCode, you're limited on your styling to inline code which is basically like a div but instead of typing div with words inside its font or color, where as with the introduction of classes in BBCode+ you can use pretty much all css, I would say learn it before hand, but thankfully we have the internet so its quick easy to get into at this point. Just start off with your div's and then in the classes when you need to do something look it up, some good websites are

CSS: Cascading Style Sheets | MDN

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

developer.mozilla.org

CSS Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

If you just look for the type of code you need in those you should be fine, you can of course check the code of other users

 

[Sana Natsuko]

No problem, I really enjoy coding and I am still learning. I have actually got html work to hand in soon so helping out like this helps keep me used to it and stay in touch

 

[Sana Natsuko]

Yeah, the three big website languages are html, css and JavaScript which all translate to here as div’s, classes and script tags. It is a shame you couldn’t find anything on the forum, but I am positive if you ask someone will know the answer, loads of good coders here

 

[Sana Natsuko]

That's cool, so does it mean that if you code in CSS here it will translate automatically to BBCode+?

Not exactly, css and the class tags here do differ, but what can be used inside the class tags is literally everything that can be used in css classes, but you still have to type it out as 'class name=(name)(styling stuff)/class'.

 

[blackout]

i was just looking over this, and noticed that sana was using classes rather than divs. while i totally suggest using classes because they're similar in difficulty and so much easier for nesting and efficiency, i figured i might show you how to use divs anyways. divs aren't actually bbcode+, which refers specifically to the bbcode update that included classes, so that's probably why you were a little lost. in sana's code, you define the styles within the class itself and then iterate the class inside the code by referencing it by the class name. however, with divs, you don't name them and put the full line with the style where you want it inside the code. so, instead of defining the class and iterating it later, you'd write it like this:

[div=height: 100px; width: 100px; background: red;][/div]

so, you'll see it looks the exact same. classes and divs do the same thing, but classes allow for easier repetition of items rather than having to define the styles for each individual item. again, i suggest using classes because they are SO much easier in the long run, but i figured i'd tell you how anyways! like sana said, bbcode+ uses other scripts like css, javascript, and html as a stepping stool, but they definitely aren't the same. there are some functions from said languages that won't work here, and you have to translate things either way. however, this means you can google css and html features for help with bbcode. my favorite resources for help are www.w3schools.com and www.css-tricks.com, though i don't remind reading through their tutorials word by word. rather, they're more helpful for when you need advice on a specific topic ( e.g. flexboxes or transitions! ).

overall, coding is tough, but not that tough if you know where to look. there are tons of helpful resources out there that really make it much less of a hassle, but if you ever need help, don't be afraid to ask me!

 

[constellation]

In the end, by what I was able to understand from you and Sana, classes allow us not to have to repeat a load of lines when coding, right?

this is absolutely correct! like blackout said, classes can be used many times in your code rather than using divs which can only be used once, thus saving you a lot of time from having to repeat yourself, and making the code look a lot more cleaner and easier to read.

 

[Sana Natsuko]

Your close, there are three ways to implement CSS into your code, first off is inline, which is basically normal BBCode and is more of the last resort type, then there is external, where you have a separate file to hold all your CSS code in, this is usually the most common in making web pages and such, but like here were we only have access to basically one file, we used it in the style tag

[div class="randomName"][/div]

[class name="randomName"]
css code goes here;
[/class]

If this was in html you would put it in a style tag in the head, you can do the same with javascript by using a script tag

 

[blackout]

Thank you so much for your explanation!

So, I guess I at least grasp the general concepts of HTML now, and I just started with CSS. Both languages seem logical and I am having no major difficulties in assimilatinng the basic concepts, the thing is, translating what I am learning for BBCode+ terms. As I can't open up multiple code files located inside of a folder here, I will need to code the "css part" inline with the HTML portion, right? Which, by what I learnt, is something one should never do, right? I am so sorry, I am just so confused when it comes to the translation between CSS ad BBCode+

i'm not all too experienced with either html or css, but i think what you're saying is somewhat right. while all elements of the code have to be in one post, the 'css' elements ( or classes ) are typically separated from the 'html' elements ( the div classes ) just by spacing. however, if you're not learning html/css for outside purposes, i wouldn't recommend learning it for bbcode. it's really not necessary, and there are many differences between them all. you can learn to translate from css/html to bbcode in theory, but like i said, some features in both languages aren't supported in bbcode.

 

[Sana Natsuko]

Yeah, pretty much. The way I like to remember it is html is all the words in the post/website, CSS is all the color, sizes and positioning and javascript is all the behind the scenes code. Also you can put the CSS wherever you want here, I just prefer to keep it under my div's so I have them in two sections.

 

[Sana Natsuko]

And you are definitely using the code editor? (green cog next to the save when typing a message)

 

[Ayama]

That definitely clears up things. 0About it, I have been trying to experiment simple codes here, but whenever I try to type in the code (using the code editor for the forum) it just doesn't "materialise" into what I though It just appears the wholecode text. And I am sure I am making some very idiotic mistake, but I am completely clueless.
Plus, I am so sorry for bothering you guys with these basic questions.

In order to write out your code without anything messing it up, always deactivate the RTE (Rich Text Editor- little green gear in the top right-hand corner) first. Then, after you've typed it up, hit either 'Preview' or 'Post reply' in order to see it actually working.

​

 

[Sana Natsuko]

[div class="test"]This is test code to see if I can type code in the in the editor without anything breaking[/div]

[class name="test"]
font-weight: bold;
color: blue;
border: solid 1px green;
width: 100px;
[/class]

[div class="test"]This is test code to see if I can type code in the in the editor without anything breaking[/div]

[class name="test"]
   font-weight: bold;
   color: blue;
   border: solid 1px green;
   width: 100px;
[/class]

It worked on my end, see if there is anything wrong with your code

 

[Sana Natsuko]

I just read Ayama as Kahir... I think I might be losing it

 

[blackout]

I guess I am.
Firstly, i clicked on such little green gear, wrote the code as best as I could (somehow I can't use my tab key in order to intend code), then I clicked on "preview" and nothing, just what I wrote. Then I deactivated that green gear button and clicked on "insert" then "code". It opened the code editor. I selected "Rich (BBCode)", wrote the code and the tried to preview it, but it only appeared the test text content I had written.
So sorry for bothering you all with this.

so usually if only plain text is displayed it means that the code is invalid or not formatted correctly. you should always have the gear green ( rte turned off ) so that the code doesn't get all wonky. the 'insert code' function is just to display text code for others to see, similar to the plain 'code' function. hope that helped!

 

[Ayama]

I guess I am.
Firstly, i clicked on such little green gear, wrote the code as best as I could (somehow I can't use my tab key in order to intend code), then I clicked on "preview" and nothing, just what I wrote. Then I deactivated that green gear button and clicked on "insert" then "code". It opened the code editor. I selected "Rich (BBCode)", wrote the code and the tried to preview it, but it only appeared the test text content I had written.
So sorry for bothering you all with this.

No bother at all- everyone here loves helping other people with coding stuff ^^ Glad you seem to have it figured out~

​

 

[Ayama]

[div class="box"]This is the content[/div]
[class="box"]
    width: 500px;
    background: blue;
    color: white;
    border: solid 10px red;
[/class]

Well, something wrong is not right here XD I am sorry for bothering again, really, but honestly, I am not seeing why it isn't working. Sorry for everything.

The only issue I see here is that naming a class doesn't require " " around the name. But using it doesn't break the code either xD

​

 

[Ayama]

Thank you! Just figured out how to do it Guess I'll try some new stuff and go from there Thank you so much for everything!

No problem- have fun learning! ^w^

​

 

[Ayama]

So I would recommend just going through the basic BBCode+ Guide first, and then maybe supplementing with this chart. Personally, my favorite tutorial for custom tabs is this one, but there are others out there.

I'm not quite sure what you mean by that last one- is it something like this?

​

 

[blackout]

side tabs are possible by positioning elements in a column and assigning tab scripts to them ( i'd be more than willing to help you with that in pms! ). while i'm pretty sure there's not a definite list, most of the simpler features in css/html are usable. usually, the order which you write classes or iterations doesn't matter. for example, you can put the div classes before the classes and it still works. what determines the x-axis placement is nesting and order when you place the div classes, not the regular classes. you can also use z-index for that, but that's usually not necessary and only used in rare occasions.