I'm having a brain fart...

pronounsThey/Them
544written posts
Coyoteearned bits
offlinecurrently
Coyote
Part of the Furniture
Coyote Avatar
I'm trying to remember how you style certain types of text decoration?

Like for example say I want to make bolded or italicized text a specific color by default or change the h1 tag so that it looks different? I don't remember the exact css input to tweak these things?

I used to but it's been a while and it's escaping me!
77written posts
cinearned bits
offlinecurrently
cin
Junior Member
cin Avatar
If this is not love, what should we call it?
i'm not sure if you want to know for skinning (so i won't touch on that since idk how pb skin works) or for templates but to change things like b / i / h1 is easy!!

for example if you have a post template and it's

<div class="post-temp">ur post here <b>bold</b> <i>italic</i> etc</div>

you can change things like bold, italics etc w/ the css!


.post-temp {ur post temp stuff like font-family and stuff!!}
.post-temp b {color: #abcdef;} /*would change the BOLD into that colour for anything bolded within the template*/
.post-temp i {font-family: cousine;} /*would change the ITALICS into that particular font-family*/
.post-temp h1 {styling goes here}


you would want it to have the class associated with it there or else it'll modify all the bolded text of the skin for example and not JUST the bold text of the template.

i also ripped a part of an old template of mine if you need an example in the funky way pb does it!

[newclass=.gg-post]padding: 20px; position: relative; font-family: Pt Sans; font-size: 10px; text-align: justify; line-height: 150%; margin-top: 170px; color: #eaeaea;[/newclass]
[newclass=.gg-post b]font-family: playfair display; font-size: 12px; color: #6AA9CC;[/newclass]
[newclass=.gg-post i]color: #6AA9CC; font-family: cousine;[/newclass]


i hope this make sense!!! this is why i never write code tutorials lmao
last edit on Jun 8, 2021 2:28:00 GMT by cin

pronounsThey/Them
544written posts
Coyoteearned bits
offlinecurrently
Coyote
Part of the Furniture
Coyote Avatar
I AM SO SORRY I was not specific and I should have been!

I'm talking about for the whole skin! I'm putzing with a Jcink skin and I know you can format bold/italicized/h1,2,3 to look a certain way or be certain colors I'm just not sure how to format the css in the stylesheet of the skin to do that!

phantom of the black parade
pronounsshe / her pronouns
4,237written posts
Kuroyaearned bits
offlinecurrently
Kuroya
Part of the Furniture
Kuroya Avatar
at this, the world's end, do we cast off tomorrow~!
it's the same basic idea as the first two examples cin showed - you use the same b, i, and h1 / h2 / h3 tags in the stylesheet to style them but you probably want to limit it to a certain area (like the "master class" for the posts or a header or something) so you're not doing it on every single use of that specific tag on the entire skin


77written posts
cinearned bits
offlinecurrently
cin
Junior Member
cin Avatar
If this is not love, what should we call it?
oh no worries!! : D

if it's jcink, it's the same as the example as above! just don't designate a class, so just put

b {font-family / color / etc}

in the stylesheets and it'll turn it all to bold! same goes for h1 / i / etc! i did a quick test on a test site and it should work! 

edit: i was a bit late, but like kurorya said u prob might want to designate it something specific or else it'll change it everywhere. 


last edit on Jun 8, 2021 2:48:48 GMT by cin

pronounshe/him
9written posts
chariotsearned bits
offlinecurrently
chariots
New Member
chariots Avatar
as long as i'm here, no one can hurt you.
everything above is gold just wanted to add for reference/help:

    
    html code:
<i>your text inside will become italic.</i> but anything outside this will just be regular pain text.



    jcink css stylesheet:
i {

   color: #d3f4ed;

}


or for an h1 tag:


   html code:
<h1>this is now a header which is automatically placed on it own line</h1>



but anything outside this will just be regular pain text.



   css stylesheet:    
h1 {

   color: green;  

}




i just wanted to clarify that you specifically said "how to style certain types of text decoration" but i think you mean how to style certain elements/tags or styling text in general because text-decoration is a very specific css property like color and font in the above example. italic text is not considered as a text-decoration. text-decoration only covers underline, overline, and line-through text. you can read about it here. font however, the actually font property below, is how you in general change a fonts family (like arial to playfair or times new roman), weight (bold versus thin or normal text) and all that jazz.


   html code:
<h1>this is now a header which is automatically placed on it own line</h1>



but anything outside this will just be regular pain text.



   css code:
h1 {

  font: italic 700 12px/12px Playfair Display;

}


font is actually the shorthand for this giant wall of text

   css code:
h1 {

  font-family: Playfair Display;

  font-weight: 700;

  font-style: italic;

  font-size: 12px;

  line-height: 12px;

}


if you use the font shorthand you have to put both the font-size and font-family in or else it wont work (font: 12px Playfair Display as an example). it's why i usually stick to just writing out all the font properties individually bcz i can never remember w/o google what the order is. 12px/12px is the font-size/line-height respectively and you don't need to add line height or specify it but i didn't want you to be confused if you see a XXpx/XXpx around the internet or whatever since that's all it means.

also like mentioned above if you specifically want every single h1 or bold tag to look a certain way then you don't give the element a tag name and just target the element above like so. however if you want for example two italic words to have different colors for example but be be right next to each other you should assign them specific class names in your css like so:


    html code:
<i class="red-italic">your text inside will become italic.</i> <i class="blue-italic">this text is no longer plain either it will be italic with a different color.</i>



   css jcink stylesheet: 
.red-italic {


  color: red;

}



.blue-italic {


  color: blue;

}


those class names can be put on anything other h1s, h2s, paragraph (p) span (<span></span>). don't forget the period in front of class names in you stylesheet. okay sorry to throw another bone into the pot but i think that answered it and you can fosho ask specific coding questions about jcink i'm not really familiar with proboards.

uwu7

last edit on Jun 8, 2021 3:31:06 GMT by chariots
internally screaming
pronounsshe/her
1,786written posts
Nekoearned bits
offlinecurrently
Neko
Administrator
Neko Avatar
stressed, depressed, and probably not well-dressed
[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.