S.O.S. This Code's A Mess!!

[Lutalica]

Hello there, RpN community!
​

As most of you know, the recent coding update has granted us the HTML & CSS format instead of BBCode. I absolutely love the open customization HTML gives us, however, in times like this, I miss BBCode's simplicity. Nevertheless, after trying so desperately to wrap my head around where I went wrong in this character sheet's code, I decided to look to all of you lovely people for guidance and/or helpful tips. If you can give anything, really, that would be most appreciated. The code is in the spoiler below.
​

 
​

Possible questions you might have in order to help:
​

1. What browser are you using? - Firefox. I do have Chrome though.
​

2. What exactly is wrong with it? - At least from my view, the code will not show up if I use internal CSS. It just...breaks. I've tried converting everything to inline CSS, and even though it's hard to read, it works, but then the fonts I have set up won't show. By then, I left it alone and decided to seek help. A lot of it. I have declared myself officially dead because of this code.
​

 
​

Honestly, if you can fix it enough to where it shows with the internal CSS -- because I'd really hate for any of you to go through the headache of all that inline coding -- that would be spectacular. I'm just a poor girl who would love any helpful input. Thank you all in advance. 3
​

 
​

Spoiler

<link href="https://fonts.googleapis.com/css?family=Cormorant+Unicase" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet">
<style type="text/css">
.cl {
background-image: url(https://s-media-cache-ak0.pinimg.com/564x/4a/32/42/4a32423670bb93c003791ab6f438b94d.jpg);
border-style: solid;
border-width: 4px;
border-color: #383A20;
border-radius: 25%;
margin: auto;
padding: 14px;
}
.clea {
border-style: solid;
border-width: 0px;
border-radius: 45%;
height: 220px;
}
.fancy {
font-family: 'Cormorant Unicase', serif;
color: #7A3A34;
font-size: 30px;
text-align: center;
margin: auto;
padding: 14px;
}
.cl1 {
background-color: #AA7961;
font-family: 'Cormorant Unicase', serif;
color: #7A3A34;
font-size: 20px;
width: 200px;
height: 220px;
border: 6px double #DDC9B4;
padding: 15px;
border-radius: 8%;
opacity: 1.0;
}
.cl2 {
background-color: #AA7961;
border: 6px double #DDC9B4;
padding: 10px;
border-radius: 8%;
opacity: 0.9;
}
.clopt {
overflow-x: hidden;
overflow-y: scroll;
background-color: #AA7961;
font-family: 'Cormorant Unicase', serif;
color: #383A20;
font-size: 20px;
width: 200px;
height: 220px;
border: 6px double #DDC9B4;
padding: 15px;
border-radius: 8%;
opacity: 1.0;
}
.clopt2 {
overflow-x: hidden;
overflow-y: scroll;
background-color: #AA7961;
font-family: 'Cormorant Unicase', serif;
color: #7A3A34;
font-size: 20px;
width: 200px;
height: 220px;
border: 6px double #DDC9B4;
padding: 10px;
border-radius: 8%;
opacity: 1.0;
}
div div p {
font-family: 'Alegreya', serif;
font-size: 16px;
color: #DDC9B4;
}
.clwork {
-moz-column-count: 4;
-moz-column-gap: 20px;
}</style>
<div class="cl">
    <p class="cl2">
        &nbsp;&nbsp;&nbsp; <img class="clea" src="http://az617363.vo.msecnd.net/imgmodels/models/md10004276/1a5e8fe4-e987-4121-95e4-f3cec0f8020a_thumb.jpg"> <img class="clea" src="http://booker-dominique.s3.amazonaws.com/library/3644/20160822_134831100_M.JPG"> <img class="clea" src="http://booker-dominique.s3.amazonaws.com/library/3644/20160822_134859167_M.JPG"> <img class="clea" src="http://booker-dominique.s3.amazonaws.com/library/3644/20160617_12260546_M.JPG"> <img class="clea" src="http://sight-management.com/uploads/models/000/206/358/rebecca_munro_jukserei_04.jpg"> <span class="fancy">Clea Elizabeth Lincoln </span>
    </p>


    <div class="clwork">
        <div class="cl1">
            <strong>Requisite</strong>


            <p>
                Twenty-one
            </p>


            <p>
                October 25th
            </p>


            <p>
                Scorpio
            </p>


            <p>
                Female
            </p>


            <p>
                Demiromantic Pansexual
            </p>
        </div>


        <p>
            &nbsp;
        </p>


        <div class="clopt">
            <strong>Appearance</strong>


            <p>
                5&#39;8&quot;
            </p>


            <p>
                138 lbs.
            </p>


            <p>
                Baby blue
            </p>


            <p>
                Chestnut brown
            </p>


            <p>
                Her singular <a href="http://66.media.tumblr.com/29f55a8c9144c793e06aa4b4833b98e4/tumblr_obch7o4Vgb1qz6f9yo4_1280.jpg">tattoo</a> on her forearm // The hearing aids located in both of her ears
            </p>
        </div>


        <div class="clopt2">
            <strong>Persona</strong>


            <p>
                ❂ Deceptive, Faithless, Pedantic
            </p>


            <p>
                ❂ Observant, Innovative, Forthright
            </p>


            <p>
                ❂ Geological mapping, Herbalism, Photographic memory, Use of other senses
            </p>


            <p>
                ❂ Blood, Drowning, Confined spaces, Abrupt changes
            </p>


            <p>
                ENTP-T
            </p>


            <p>
                Neutral Good
            </p>
        </div>


        <div class="clopt">
            <strong>Theme</strong>


            <p>
                <a href="https://www.youtube.com/watch?v=dsWDUvuF0Xc">Wish You Were Here</a> by Florence + the Machine
            </p>


            <p style="font-family: 'Cormorant Unicase', serif; color: #383A20; font-size: 20px">
                <strong>Background</strong>
            </p>


            <p>
                If she was going to make any other entrance into the world, then she might as well come in with flare. After all, it would only be so many years before she couldn&#39;t hear the sound of thunder or the crash of lightning.
            </p>


            <p>
                &nbsp;
            </p>


            <p>
                Clea Elizabeth Lincoln was born during one of Connecticut&#39;s worst rainstorms in the fall months. While there was nothing wrong with the procedure, the birthday story always seemed to be brought up at reunions or dinner parties -- as if the first mention was never enough. That&#39;s just how the Lincoln family was: rather large, loud, and wealthy enough to afford a recurring dinner party every other month or so. If it were up to them, the whole neighborhood would be part of the family -- regardless if the kinfolk already extended to that size.
            </p>


            <p>
                &nbsp;
            </p>


            <p>
                With three older brothers, the household was always busy. Her dear mother worked as a stay-at-home mom, always juggling the kids like a modern day superhero, while her father worked for some law firm that Clea had no particular interest in. Even though her childhood felt like an endless competition for affirmation, it was worth every obnoxious second. Every strident crash of mother&#39;s new vase, every hair pull, and every ridiculous debate on who ate the last pizza roll was worth it because, as soon as Clea turned five, nothing would feel the same.
            </p>


            <p>
                &nbsp;
            </p>


            <p>
                It isn&#39;t uncommon for kids to get sick; however, when it occurs as often as it did for Clea, it&#39;s usually a sign that something is wrong. Sinusitis and pneumonia? Both seemed normal enough for an adolescent to contract. Most of her illnesses seemed normal for her age. Though the term &quot;normal&quot; didn&#39;t last long when the young girl started screaming because she couldn&#39;t hear her eldest brother while he helped her with her homework. When she was taken to the hospital, the doctors diagnosed her as having a B-Cell PID (Primary Immunodeficiency Disorder). Not only did it help to understand why Clea was always so sick, but it inevitably explained the loss of her hearing, which would unfortunately be permanent until the family invested in hearing aids.
            </p>


            <p>
                &nbsp;
            </p>


            <p>
                The rest of her juvenile years were lived vicariously through what she saw and felt. Her brothers helped her by being the first of the family to learn sign language, but it took time for her parents to properly adapt to what had happened. That branch of the Lincoln family tree became a pity party as word spread of Clea&#39;s supposed misfortune. Through that odd period, there was radio silence between all the kinfolk. Not a single reunion was held except the one around Christmas until Clea received her hearing aids. She was fifteen at the time, and the only real reason for the downtime was because the girl insisted on it being so. In her eyes, the loss of hearing was a chance to experience life in a new perspective -- one of which wasn&#39;t usually seen by many people. From then on, the world&#39;s ear-splitting noises had more meaning to them, and every crack of lightning seemed like lyrics to a song she hadn&#39;t heard in years, yet she remembered every word.
            </p>


            <p>
                &nbsp;
            </p>


            <p>
                Once she was in college and attending Cornell University, Clea was able to express her natural passion for botany in a whole new way. Few people understood her unusual intrigue in the subject, but the answer was all in the details. While she lived life through sight and touch, the natural world seemed far more than just grass and trees. Clea found beauty in every petal, every vein in a leaf, and every ring within a tree. Nature created a secret noise only she seemed to hear, and from then on it was her goal to make it her career.
            </p>


            <p>
                &nbsp;
            </p>


            <p style="font-family: 'Alegreya', serif; font-size: 16px; color: #DDC9B4">
                After returning home from a three week field trip to Uruguay for the semester&#39;s final botany project, an unsuspected pathogen decided to tag along in Clea&#39;s weak immune system. Originally, the girl thought she was simply coming down with a case of meningitis, but as time progressed, it seemed as though it was much worse. While taking notes on Uruguay&#39;s cockspur coral tree, she inhaled a fungus from the cryptococcus family, typically thriving in soil and&nbsp; the debris around tree bases. As the fungus thrived on her immunodeficiency, and her symptoms continued to feel normal in regards to her situation, the infection was left untreated until it was too late. She was back home for exactly one month until her mother found Clea in her bed, sleeping a sleep she couldn&#39;t wake from.
            </p>
        </div>
    </div>
</div>

You are wonderful and I love you.
​

- Lo
​

 

[Chordling]

1. Google Chrome
   
2. None of the CSS is being applied. Except for the last paragraph
   

Solution: I find it incredibly easier to use inline coding.  The only reason why I would use CSS is for Google fonts.  Everything else is a lot easier to do with inline and it is also a lot similar to the old BBCode that was once used on the site.  Using "t.thelovelydead" may also fix some of your issues.  This class name will direct your CSS only to the content in your post and not towards all of the other elements within the site.  As you can see, the last paragraph is fine.  This is because you used the inline coding.

​

 

[Dragon Slayer Arcos]

This is the hardest part for me. I am used to doing CSS as you did here, mostly because that is how I learned in my first coding class. This type of CSS is good for building webpages and websites where you control everyrthing and it helps keep your design east to follow. 


But as Musician said, inline is the way to go here. Sure, it is a pain in the butt, but it works. Make sure to use IDs and Classes the same though. Also, just a tip, make sure to include WebKit and regular backgrounds for other browsers. Limiting it to Firefox only would give plenty of people a headache with your customs character.

 

[eclipsa]

in helping this lovely lady you've helped me. I'll be using in-line coding from now on as well.

 

[Lutalica]

@Musician @Dragon Slayer Arcos A huge thank you to both of you. I was afraid internal CSS just wouldn't do. I appreciate the tips, though! I'll make sure to keep the codes inline from now on to detour from the same issue in the future.


You two have blessed this thread. Thanks again.

 

[Dragon Slayer Arcos]

Also it probably won't work for your CS but when doing in RP template that you have chosen to style, you only need to do one inline <p>. Then turn off source and you can type your regular post. You don't have to inline every <p> this way which is SO nice considering the beta state it's in

 

[Yunn]

1. Chrome


2. Effects of the CSS will show up if you put a <p> tag around the style like:


<p><style>  all the CSS stuff </style> </p>


I think there's something not closed within your code since whenever I copy and paste it onto my post it changes other peoples post (such as the color.)

 

[Chordling]

7 hours ago, Yunn said:



I think there's something not closed within your code since whenever I copy and paste it onto my post it changes other peoples post (such as the color.)




 

This is a result from the class element I referred to earlier.