Embedded code not publishing correctly

novembernoprob · ‎05-20-2021

Hi,

I'm working on my portfolio website, and I formatted my resum'e in embedded code. When I publish it, however, the formatting and fonts don't copy over. Is there a way I can fix this?

Here's the website: https://novembermullins.weebly.com/view-resumeacute.html

And here's what it looks like in the editor:

And here's the code:

<body style=padding:0; style="margin:0; color:#2A0008">
<div><header style="text-align: center;">
<h1 id="name" style="color:#A1001D;">November Mullins</h1>
<h3 id="pronouns" style="color:#580010";>(they/them/theirs)</h3>
<p id="contactinfo" style:color:#2A0008">825 Kirkwood Pkwy SW #114, Cedar Rapids, IA 52404 / 319.530.9146 / mullinsnovember@gmail.com</p>
<hr /></header></div>

<h2 id="experience" class="category"; style="text-align:center;bottom-padding:0;font-size:27;color:#A1001D";";>Experience</h2>
<h3 id="ksp" class="company" style="color:#580010";>Kirkwood Student Productions</h3>
<p id="script" class="position" style:"color:#2A0008"><em>Script Supervisor&nbsp;</em>(Aug 2017-May 2018)<br><em>Club Member </em>(Aug 2017-Present)</p>
<ul style="column-count:2; color:#2A0008" id="ksp-tasks" class="list">
<li>Create original scripts</li>
<li>Keep track of ongoing projects</li>
<li>Meet tight deadlines</li>
<li>Edit professional and recreational videos</li>
<li>Produce and direct video shoots</li>
<li>Work in a group setting</li>
</ul>
<p>&nbsp;</p>
<h3 id="criff" class="company"; style="color:#580010";>Cedar Rapids Independent Film Festival</h3>
<p id="criff-intern" class="position" style="color:#2A0008"><em>Intern </em>(Mar 2018-Apr 2018)</p>
<ul style="column-count:2; color:#2A0008" id="criff-tasks" class="list">
<li>Corresponded with suppliers and filmmakers</li>
<li>Cheerfully gave necessary information to patrons</li>
</ul>
<p>&nbsp;</p>
<h3 id="ccpa" class="company"; style="color:#580010";>Coralville Center for the Performing Arts</h3>
<p id="ccpa-intern" class="position" style="color:#2A0008"><em>Intern</em> (March 2017- May 2017)</p>
<ul style="column-count:2; color:#2A0008" id="ccpa-tasks" class="list">
<li>Adapted to the task to which I was assigned</li>
<li>Programmed and operated light board</li>
<li>Stage preparation and strike</li>
<li>Assisted with load-in and load-out of musical and theatrical equipment</li>
<li>Responsible for communication among crew member</li>
</ul>
<br>
<h2 class="category" style="text-align: center;font-size:27; color:#A1001D";">Education</h2>
<h3 id="kcc" class="company"; style="color:#580010";>Kirkwood Community College</h3>
<p id="major" class="position" style="color:#2A0008"><em>Digital Arts </em>(2017-Present)</p>
<h3 id="mphsap" class="company"; style="color:#580010";>Mid-Prairie Home School Assistance Program</h3>
<p id="diploma" class="positon" style="color:#2A0008"><em>High School Diploma </em>(May 2017)</p>
<ul style="column-count:2; color:#2A0008" id="mphsap-tasks" class="list">
<li>Yearbook</li>
<li>Newspaper Editor</li>
<br>
</ul>
<h2 id="skills" class="category" style="text-align: center; font-size:27; color:#A1001D";">Skills</h2>
<ul style=column-count:3; style="column-gap:10px; color:#2A0008";>
  <li>Professional Writing</li>
 <li>Creative Writing</li>
<li>Copy Editing</li>
<li>Adobe Premiere Pro</li>
<li>Adobe Illustrator</li>
<li>Adobe Photoshop</li>
<li>Basic HTML and CSS</li>
<li>Attention to Detail</li>
<li>Time Management</li>
<li>Team Collaboration</li>

</ul>
</body>

Thanks in advance!

Bernadette3 · ‎05-22-2021

Thanks for reaching out, @novembernoprob. Weebly employees are not able to assist with custom code, but another user on here may be able to guide you in the right direction.

PaulMathews · ‎05-23-2021

@novembernoprob I think you may be missing the point of using a drag-and-drop site editor. I see that you've replaced your coded resume with a picture of your resume. That's generally a bad idea since the text content of that picture cannot be indexed by search engines and, whenever you need to update the content of your resume, you'll have to do that with another image rather than by way of a simple text edit.

You may want to avail yourself of the "how to" articles on how to build page content in the Weebly Site Editor:

https://www.weebly.com/app/help/us/en/sections/content

Your resume contains just a few simple text elements: titles, subtitles, and paragraph text (mostly formatted in bullet points). Your titles ("November Mullins," "Kirkwood Student Productions," etc.) use a serif font and your paragraph text, a sans-serif font. You can choose and style (size, letter spacing, color) your site fonts through the theme design panel:

https://www.weebly.com/app/help/us/en/topics/choose-fonts

To replicate your resume in proper text, simply drag and drop all the necessary text elements on to your page:

Add a title element above your resume image and enter your name.
Below that, drop another title element, enter your gender pronouns, and use the floating text edit bar to shrink the size of the font to the desired smaller size.
Below that, drop a separator element and use the spacing parameter to add/remove space above/below the separator.
Below that drop another title element below the separator and make the text "Experience." and change the size as desired.
Below that drop another title element, change the text to "Kirkwood Student Productions" and change the size as desired.
Below that drop a text element and add your "script supervisor..." text and change the text to italic (click the italic button in the floating text edit bar).
Below that drop another text element and add the bulleted job description items (click the bullet button in the floating text edit bar).
Drop another text element to the immediate right of the bulleted list (when you see the vertical blue separator appear to the right of the bulleted list, drop the text element). This will automatically divide the row into two equally-sized columns the first of which contains your first bulleted item list (https://www.weebly.com/app/help/us/en/topics/working-with-columns). Add your second bulleted item list to the second column text element.
Drop a title element below the two-column bullet lists but be sure to drop it ONLY after you see a horizontal bar beneath both columns (we don't want to add the next job in either column, we want to do this in a new, full row below the columns. And repeat the process above for your other jobs.

Once you're done, delete the image of your resume. Dragging and dropping elements in Weebly is pretty easy and you'll get the hang of it in short order. You should find it fairly quick and easy to build your resume using titles and text in the Site Editor.

novembernoprob · ‎05-25-2021

@PaulMathews

That's definitely an option!

I couldn't get the leading close enought for my comfort between text elements, and that's why I wanted to change the html and eventually just decided to insert a png of my resumé.

novembernoprob · ‎05-25-2021

Never mind! I changed the margins in the css.

Thank you for pointing out the issues with just using an image; they never would have occurred to me.

@PaulMathews

jjulio1111 · ‎06-20-2021

Here is my embedded code: It seems like you guys or the weebly can't, or doesn't handle with kind of the source: <source: src="http://jjulio2222.ddnsfree.com:1935/live/tv/playlist.m3u8" type="application/x-mpegURL">

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JULIO TV CHANNEL</title>

PaulMathews · ‎05-25-2021

@novembernoprob Not quite sure what you meant by "I couldn't get the leading close enought for my comfort between text elements..." but just be aware that none of the text in your resume will be indexed by the search engines and the entire resume will shrink to fit mobile devices (and thus probably be difficult to read) since the resume is a picture of text rather than actual text.

Again, check out the theme font styling panel as this provides most of the styling attributes pertinent to text (font family, font size, font weight, font style (italic, bold, regular), line spacing, letter spacing, color). It's pretty unlikely that the theme panel is missing anything required to render in actual text what I see in your resume image (I'm a web designer and I do plenty of hand coding when required but outside of coding the desired css for text - which novices can pretty much entirely replicate via the theme font styling panel - I almost never need to hand code text directly in html).

jjulio1111 · ‎06-22-2021

Here is my embedded code: It seems like you guys or the weebly can't, or doesn't handle with kind of the source: <source: src="http://jjulio2222.ddnsfree.com:1935/live/tv/playlist.m3u8" type="application/x-mpegURL">

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JULIO TV CHANNEL</title>