Google Fonts and Newclass Help

aliasOnyx
pronounsshe/they
45written posts
Bappity Rabbityearned bits
offlinecurrently
Bappity Rabbity
New Member
Bappity Rabbity Avatar
I'm currently having trouble understanding on how to use the google fonts and newclass codes. Everything else, I have a good knowledge of how to use. I'd like to create my own templates and such, although I can't really seem to find much on how to use them. Would someone be able to help me with this or even just direct me to a tutorial? I tried to look at the "Coding for Dummies" thread, but it doesn't help me. Thanks!

currently looking for staff members
message me here for more information :)
pronounsthey/them
23written posts
mercyearned bits
offlinecurrently
mercy
New Member
mercy Avatar
i could wake her, but there is mercy in her sleep
google fonts is pretty simple! to add one to a bbcode template you would simply put [*Googlefont=The+Font] separating any spaces with '+' (and no asterisks). To apply the font to a class, you'd simply go into that class and write: font-family:The Font; keeping in mind that it may be case sensitive and so you should try to match what is written in the class to what is written in the Googlefont tidbit.

As for newclass, I'm not as familiar with it as some others are but I can do my best to explain how to use them. Are you familiar with HTML & CSS classes at all, or are you new to coding completely?
last edit on Mar 3, 2020 0:28:30 GMT by mercy
aliasOnyx
pronounsshe/they
45written posts
Bappity Rabbityearned bits
offlinecurrently
Bappity Rabbity
New Member
Bappity Rabbity Avatar
I am completely new with coding, my previous co-admin did all of my coding, which is why im trying to learn them. also, with google fonts, do you need to put them into the CSS?
last edit on Mar 3, 2020 4:30:25 GMT by Bappity Rabbity

currently looking for staff members
message me here for more information :)
pronounsthey/them
23written posts
mercyearned bits
offlinecurrently
mercy
New Member
mercy Avatar
i could wake her, but there is mercy in her sleep
 depending on the type of coding your doing, the googlefont will look different but you can place it within the body of the code! (so not the style-sheet!).

for bbcodes (like on proboards) it would be formatted as follows:
[Googlefont=The+Font]
but for HTML, it will be something like this
<link href="https://fonts.googleapis.com/css?family=Asap:700&display=swap" rel="stylesheet">
now newclass tags, to my knowledge, are for bbcodes (i could be wrong, i am only saying this because i've only ever seen newclass used on proboards which i know uses bbcode). i believe that the newclass style tags require the Style Tags plugin in order to work properly on a proboards website.

i'll write out a style tag as i normally would in HTML & CSS, and then convert it to a newclass style tag as an example:
.myclass {
font-family:The Font;
font-size:10px;
color:#000;
}

and now in newclass,
[newclass=.myclass]font-family:The Font;font-size:10px;color:#000;[/newclass]
in my experience it has been very important in newclass tags to have them be one continuous line of code, otherwise they don't seem to work/translate into the body aspect of the code. another difference between newclass style tags & HTML/CSS is that CSS classes are always enclosed with the <style> </style> tags, whereas newclass is not enclosed by this tag. i personally don't know why but i'm sure there's a reason for this! 

another thing with newclass/bbcodes, is that you need to have the [*nospaces] (without asterisk) class somewhere within your code so that proboards/bbcodes doesn't automatically create a big long spaced-out code. i have forgotten this many a time and been like "what the--" when testing my codes, haha!

some other differences between the two:
  •  break tags in HTML are <br> but in bbcode they are [*break] (without asterisk)
  • < and > in HTML are [ and ] in bbcode
  • the div classes are different, we'll go over that next!

so for HTML the div classes usually look like this:
<div class="myclass"> </div>
however in bbcode they look like this:
[div][attr="class","myclass"] [/div]
again, i don't know why this is, it just works.


thhaaaaat's about what i can remember in terms of the structure of each type of coding & how they differ from one another. learning how to code is genuinely a process of trial and error (or it has been for me), and while it may seem daunting, it's incredibly rewarding. here's a list of some websites where you can learn to code, but i have my own resources for expanding upon coding that i would be happy to share with you if you want to send me a pm! to practice coding you can create a free account on codepen or jsfiddle. i personally recommend w3schools for simple introductory coding tutorials. also, if i were you i would focus on learning HTML & CSS first before dabbling in anything to do with javascript/jquery because that stuff can get really confusing and difficult (i honestly have a lot of trouble with it myself). 

hope this helped! if anyone wants to elaborate or add, please feel free! i'm sure i've missed things! xx

3,084written posts
Kitten4uearned bits
offlinecurrently
Kitten4u
Part of the Furniture
Kitten4u Avatar
[nospaces]

[attr="class","infoBG"]
[attr="class","infoBG2"]
[attr="class","infoBack"]
[attr="class","infoTitle"][attr="class","fa fa-star-o"] threadarchived
[attr="class","infoDiv"]

[attr="class","infoBody"]

To keep the forum clean and so people know that all threads in certain areas are current and that the OP is likely to still have interest, we archive threads that haven't gotten posts for 2 weeks. This thread is being archived for that reason. If you would like this thread reopened, contact a staff member.