How to reference css code into HtmlToImageConverterHow to horizontally center a <div>?Set cellpadding and cellspacing in CSS?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSHow to disable resizable property of textarea?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?

Where to draw the line between quantum mechanics theory and its interpretation(s)?

What was the first story to feature the plot "the monsters were human all along"?

Game artist computer workstation set-up – is this overkill?

Can full drive backup be used instead of MSSQL database backup?

Can my 2 children, aged 10 and 12, who are US citizens, travel to the USA on expired American passports?

Would a small hole in a Faraday cage drastically reduce its effectiveness at blocking interference?

How to calculate rate of axial precession?

How to pass query parameters in URL in Salesforce Summer 19 Release?

Why didn't this character get a funeral at the end of Avengers: Endgame?

Why would a military not separate its forces into different branches?

Sheared off exhasut pipe: How to fix without a welder?

Is 'contemporary' ambiguous and if so is there a better word?

Is there an age requirement to play in Adventurers League?

What happens if I accidentally leave an app running and click "Install Now" in Software Updater?

How to remap repeating commands i.e. <number><command>?

What makes an isotope stable?

Some Russian letters overlap the next line of text when used in drop caps

Why did WWI include Japan?

Would a "Permanence" spell in 5e be overpowered?

In linear regression why does regularisation penalise the parameter values as well?

All superlinear runtime algorithms are asymptotically equivalent to convex function?

Clean sphere separation with a sphere created from a cube

Make me a minimum magic sum

How can Internet speed be 10 times slower without a router than when using the same connection with a router?



How to reference css code into HtmlToImageConverter


How to horizontally center a <div>?Set cellpadding and cellspacing in CSS?How do I give text or an image a transparent background using CSS?How to disable text selection highlighting?How to check whether a checkbox is checked in jQuery?Is there a CSS parent selector?Change an HTML5 input's placeholder color with CSSHow to disable resizable property of textarea?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?






.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;








1















For a Discord Bot I am creating, I need to generate a user profile through the "profile" command. The HTML is displaying normally, but is not using any of my CSS styling. How do I get the html string to include my CSS styling?



I have little experience with HTML and CSS (someone else made this for me), but I believe href is where the reference for the CSS goes. I have tried inserting the name of the document, stylesheet.css and that did not work (maybe the HTML couldn't find it). Now, it is represented by 0, the first object in my formatted string. 0 is the css string variable above it.



Each n in these strings are what would normally be Enter keystrokes, this is only so the bot can read it. I have included the original HTML and CSS files below.



 [Command("profile")] //Generates a user's profile using HTML / CSS
public async Task Profile()

var account = UserAccounts.GetAccount(Context.User);

string css = "@font-face n font-family: 'Raleway';n src: URL('Raleway-Regular.ttf') format('truetype');nnnhtml " +
"n n font-family: 'Raleway', sans-serif;n nnn#probar n n height:24px;n width:50%;n " +
"background-color: skyblue;n border-radius: 30px;n nnn#probox n n background-color: lightblue;n " +
"width: 100%;n margin: auto;n border-radius: 30px;n nnn#window n n width: 300px;n " +
"background-color: lightgray;n margin: 0;n/*n background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);n " +
"background-size:cover;n background-repeat: no-repeat;n*/n nnn#header n n width: 90%;n margin: auto;n " +
"padding-top: 10px;n nnn#pfp nn height: 150px;n width: 150px;n border-radius: 30px;n margin: auto;n " +
"border: gray solid 1px;n nnn#name n n text-align: center;n nnn#contentn n width: 90%;n margin: auto;n " +
"padding-bottom: 10px;n color: black;n nnn.info n n padding-bottom: 5px;n font-size: 12px;n nn" +
"n#row n n display: flex;n color: black;n nnn#level n n margin: auto;n nnn#yes n n margin: 0;n text-align: center;n n" +
"nn#no nn font-size: 40px;n margin: 0;n text-align: center;n border: solid black 1px;nnnn#infolist n n text-align: center;n margin-top: 15px;n n" +
"nn#statlist n n text-align: right;n margin-top: 15px;n nnn.inforow n n flex-grow: 1;n width: 33.3%;n nnn#fixedbs n n text-align: center;n " +
"position: absolute;n top: 206px;n left: 70px;n color: black;n nnn";
string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
"<link rel="stylesheet" href="0">nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
"<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
"<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
"</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
" <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
" <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
" <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
" </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);
var converter = new HtmlToImageConverter

Width = 400,
Height = 400
;
var pngBytes = converter.GenerateImage(html, NReco.ImageGenerator.ImageFormat.Png);
await Context.Channel.SendFileAsync(new MemoryStream(pngBytes), "Profile.png");




CSS



@font-face 
font-family: 'Raleway';
src: URL('Raleway-Regular.ttf') format('truetype');


html

font-family: 'Raleway', sans-serif;



#probar

height:24px;
width:50%;
background-color: skyblue;
border-radius: 30px;



#probox

background-color: lightblue;
width: 100%;
margin: auto;
border-radius: 30px;



#window

width: 300px;
background-color: lightgray;
margin: 0;
/*
background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);
background-size:cover;
background-repeat: no-repeat;
*/



#header

width: 90%;
margin: auto;
padding-top: 10px;



#pfp

height: 150px;
width: 150px;
border-radius: 30px;
margin: auto;
border: gray solid 1px;



#name

text-align: center;



#content

width: 90%;
margin: auto;
padding-bottom: 10px;
color: black;



.info

padding-bottom: 5px;
font-size: 12px;



#row

display: flex;
color: black;



#level

margin: auto;



#yes

margin: 0;
text-align: center;



#no

font-size: 40px;
margin: 0;
text-align: center;
border: solid black 1px;



#infolist

text-align: center;
margin-top: 15px;



#statlist

text-align: right;
margin-top: 15px;



.inforow

flex-grow: 1;
width: 33.3%;



#fixedbs

text-align: center;
position: absolute;
top: 206px;
left: 70px;
color: black;





HTML:



<!doctype html>

<html lang="en">
<head>

<meta charset="utf-8">

<title>discord thing</title>

<link rel="stylesheet" href="stylesheet.css">

</head>

<body>

<div id="window">

<div id="header">

<div id="pfp"></div>

<p id="name"><b>Garonen#6115</b></p>

</div>

<div id="content">

<div id="probox">

<div id="probar"></div>

<p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>

</div>

<div id="row">

<div class="inforow" id="level">

<p id="yes">Level</p>
<p id="no"><b>11</b></p>

</div>

<div class="inforow" id="infolist">
<p class="info">Total EXP</p>
<p class="info">Server Rank</p>
<p class="info">Global Rank</p>
</div>

<div class="inforow" id="statlist">
<p class="info">xxxxEXP</p>
<p class="info">#xxxx</p>
<p class="info">#xxxx</p>
</div>

</div>

</div>

</div>

</body>
</html>


For the output, I am looking for something like this



Currently, the output is this










share|improve this question




























    1















    For a Discord Bot I am creating, I need to generate a user profile through the "profile" command. The HTML is displaying normally, but is not using any of my CSS styling. How do I get the html string to include my CSS styling?



    I have little experience with HTML and CSS (someone else made this for me), but I believe href is where the reference for the CSS goes. I have tried inserting the name of the document, stylesheet.css and that did not work (maybe the HTML couldn't find it). Now, it is represented by 0, the first object in my formatted string. 0 is the css string variable above it.



    Each n in these strings are what would normally be Enter keystrokes, this is only so the bot can read it. I have included the original HTML and CSS files below.



     [Command("profile")] //Generates a user's profile using HTML / CSS
    public async Task Profile()

    var account = UserAccounts.GetAccount(Context.User);

    string css = "@font-face n font-family: 'Raleway';n src: URL('Raleway-Regular.ttf') format('truetype');nnnhtml " +
    "n n font-family: 'Raleway', sans-serif;n nnn#probar n n height:24px;n width:50%;n " +
    "background-color: skyblue;n border-radius: 30px;n nnn#probox n n background-color: lightblue;n " +
    "width: 100%;n margin: auto;n border-radius: 30px;n nnn#window n n width: 300px;n " +
    "background-color: lightgray;n margin: 0;n/*n background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);n " +
    "background-size:cover;n background-repeat: no-repeat;n*/n nnn#header n n width: 90%;n margin: auto;n " +
    "padding-top: 10px;n nnn#pfp nn height: 150px;n width: 150px;n border-radius: 30px;n margin: auto;n " +
    "border: gray solid 1px;n nnn#name n n text-align: center;n nnn#contentn n width: 90%;n margin: auto;n " +
    "padding-bottom: 10px;n color: black;n nnn.info n n padding-bottom: 5px;n font-size: 12px;n nn" +
    "n#row n n display: flex;n color: black;n nnn#level n n margin: auto;n nnn#yes n n margin: 0;n text-align: center;n n" +
    "nn#no nn font-size: 40px;n margin: 0;n text-align: center;n border: solid black 1px;nnnn#infolist n n text-align: center;n margin-top: 15px;n n" +
    "nn#statlist n n text-align: right;n margin-top: 15px;n nnn.inforow n n flex-grow: 1;n width: 33.3%;n nnn#fixedbs n n text-align: center;n " +
    "position: absolute;n top: 206px;n left: 70px;n color: black;n nnn";
    string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
    "<link rel="stylesheet" href="0">nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
    "<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
    "<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
    "</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
    " <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
    " <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
    " <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
    " </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);
    var converter = new HtmlToImageConverter

    Width = 400,
    Height = 400
    ;
    var pngBytes = converter.GenerateImage(html, NReco.ImageGenerator.ImageFormat.Png);
    await Context.Channel.SendFileAsync(new MemoryStream(pngBytes), "Profile.png");




    CSS



    @font-face 
    font-family: 'Raleway';
    src: URL('Raleway-Regular.ttf') format('truetype');


    html

    font-family: 'Raleway', sans-serif;



    #probar

    height:24px;
    width:50%;
    background-color: skyblue;
    border-radius: 30px;



    #probox

    background-color: lightblue;
    width: 100%;
    margin: auto;
    border-radius: 30px;



    #window

    width: 300px;
    background-color: lightgray;
    margin: 0;
    /*
    background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    */



    #header

    width: 90%;
    margin: auto;
    padding-top: 10px;



    #pfp

    height: 150px;
    width: 150px;
    border-radius: 30px;
    margin: auto;
    border: gray solid 1px;



    #name

    text-align: center;



    #content

    width: 90%;
    margin: auto;
    padding-bottom: 10px;
    color: black;



    .info

    padding-bottom: 5px;
    font-size: 12px;



    #row

    display: flex;
    color: black;



    #level

    margin: auto;



    #yes

    margin: 0;
    text-align: center;



    #no

    font-size: 40px;
    margin: 0;
    text-align: center;
    border: solid black 1px;



    #infolist

    text-align: center;
    margin-top: 15px;



    #statlist

    text-align: right;
    margin-top: 15px;



    .inforow

    flex-grow: 1;
    width: 33.3%;



    #fixedbs

    text-align: center;
    position: absolute;
    top: 206px;
    left: 70px;
    color: black;





    HTML:



    <!doctype html>

    <html lang="en">
    <head>

    <meta charset="utf-8">

    <title>discord thing</title>

    <link rel="stylesheet" href="stylesheet.css">

    </head>

    <body>

    <div id="window">

    <div id="header">

    <div id="pfp"></div>

    <p id="name"><b>Garonen#6115</b></p>

    </div>

    <div id="content">

    <div id="probox">

    <div id="probar"></div>

    <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>

    </div>

    <div id="row">

    <div class="inforow" id="level">

    <p id="yes">Level</p>
    <p id="no"><b>11</b></p>

    </div>

    <div class="inforow" id="infolist">
    <p class="info">Total EXP</p>
    <p class="info">Server Rank</p>
    <p class="info">Global Rank</p>
    </div>

    <div class="inforow" id="statlist">
    <p class="info">xxxxEXP</p>
    <p class="info">#xxxx</p>
    <p class="info">#xxxx</p>
    </div>

    </div>

    </div>

    </div>

    </body>
    </html>


    For the output, I am looking for something like this



    Currently, the output is this










    share|improve this question
























      1












      1








      1








      For a Discord Bot I am creating, I need to generate a user profile through the "profile" command. The HTML is displaying normally, but is not using any of my CSS styling. How do I get the html string to include my CSS styling?



      I have little experience with HTML and CSS (someone else made this for me), but I believe href is where the reference for the CSS goes. I have tried inserting the name of the document, stylesheet.css and that did not work (maybe the HTML couldn't find it). Now, it is represented by 0, the first object in my formatted string. 0 is the css string variable above it.



      Each n in these strings are what would normally be Enter keystrokes, this is only so the bot can read it. I have included the original HTML and CSS files below.



       [Command("profile")] //Generates a user's profile using HTML / CSS
      public async Task Profile()

      var account = UserAccounts.GetAccount(Context.User);

      string css = "@font-face n font-family: 'Raleway';n src: URL('Raleway-Regular.ttf') format('truetype');nnnhtml " +
      "n n font-family: 'Raleway', sans-serif;n nnn#probar n n height:24px;n width:50%;n " +
      "background-color: skyblue;n border-radius: 30px;n nnn#probox n n background-color: lightblue;n " +
      "width: 100%;n margin: auto;n border-radius: 30px;n nnn#window n n width: 300px;n " +
      "background-color: lightgray;n margin: 0;n/*n background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);n " +
      "background-size:cover;n background-repeat: no-repeat;n*/n nnn#header n n width: 90%;n margin: auto;n " +
      "padding-top: 10px;n nnn#pfp nn height: 150px;n width: 150px;n border-radius: 30px;n margin: auto;n " +
      "border: gray solid 1px;n nnn#name n n text-align: center;n nnn#contentn n width: 90%;n margin: auto;n " +
      "padding-bottom: 10px;n color: black;n nnn.info n n padding-bottom: 5px;n font-size: 12px;n nn" +
      "n#row n n display: flex;n color: black;n nnn#level n n margin: auto;n nnn#yes n n margin: 0;n text-align: center;n n" +
      "nn#no nn font-size: 40px;n margin: 0;n text-align: center;n border: solid black 1px;nnnn#infolist n n text-align: center;n margin-top: 15px;n n" +
      "nn#statlist n n text-align: right;n margin-top: 15px;n nnn.inforow n n flex-grow: 1;n width: 33.3%;n nnn#fixedbs n n text-align: center;n " +
      "position: absolute;n top: 206px;n left: 70px;n color: black;n nnn";
      string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
      "<link rel="stylesheet" href="0">nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
      "<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
      "<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
      "</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
      " <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
      " <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
      " <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
      " </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);
      var converter = new HtmlToImageConverter

      Width = 400,
      Height = 400
      ;
      var pngBytes = converter.GenerateImage(html, NReco.ImageGenerator.ImageFormat.Png);
      await Context.Channel.SendFileAsync(new MemoryStream(pngBytes), "Profile.png");




      CSS



      @font-face 
      font-family: 'Raleway';
      src: URL('Raleway-Regular.ttf') format('truetype');


      html

      font-family: 'Raleway', sans-serif;



      #probar

      height:24px;
      width:50%;
      background-color: skyblue;
      border-radius: 30px;



      #probox

      background-color: lightblue;
      width: 100%;
      margin: auto;
      border-radius: 30px;



      #window

      width: 300px;
      background-color: lightgray;
      margin: 0;
      /*
      background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);
      background-size:cover;
      background-repeat: no-repeat;
      */



      #header

      width: 90%;
      margin: auto;
      padding-top: 10px;



      #pfp

      height: 150px;
      width: 150px;
      border-radius: 30px;
      margin: auto;
      border: gray solid 1px;



      #name

      text-align: center;



      #content

      width: 90%;
      margin: auto;
      padding-bottom: 10px;
      color: black;



      .info

      padding-bottom: 5px;
      font-size: 12px;



      #row

      display: flex;
      color: black;



      #level

      margin: auto;



      #yes

      margin: 0;
      text-align: center;



      #no

      font-size: 40px;
      margin: 0;
      text-align: center;
      border: solid black 1px;



      #infolist

      text-align: center;
      margin-top: 15px;



      #statlist

      text-align: right;
      margin-top: 15px;



      .inforow

      flex-grow: 1;
      width: 33.3%;



      #fixedbs

      text-align: center;
      position: absolute;
      top: 206px;
      left: 70px;
      color: black;





      HTML:



      <!doctype html>

      <html lang="en">
      <head>

      <meta charset="utf-8">

      <title>discord thing</title>

      <link rel="stylesheet" href="stylesheet.css">

      </head>

      <body>

      <div id="window">

      <div id="header">

      <div id="pfp"></div>

      <p id="name"><b>Garonen#6115</b></p>

      </div>

      <div id="content">

      <div id="probox">

      <div id="probar"></div>

      <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>

      </div>

      <div id="row">

      <div class="inforow" id="level">

      <p id="yes">Level</p>
      <p id="no"><b>11</b></p>

      </div>

      <div class="inforow" id="infolist">
      <p class="info">Total EXP</p>
      <p class="info">Server Rank</p>
      <p class="info">Global Rank</p>
      </div>

      <div class="inforow" id="statlist">
      <p class="info">xxxxEXP</p>
      <p class="info">#xxxx</p>
      <p class="info">#xxxx</p>
      </div>

      </div>

      </div>

      </div>

      </body>
      </html>


      For the output, I am looking for something like this



      Currently, the output is this










      share|improve this question














      For a Discord Bot I am creating, I need to generate a user profile through the "profile" command. The HTML is displaying normally, but is not using any of my CSS styling. How do I get the html string to include my CSS styling?



      I have little experience with HTML and CSS (someone else made this for me), but I believe href is where the reference for the CSS goes. I have tried inserting the name of the document, stylesheet.css and that did not work (maybe the HTML couldn't find it). Now, it is represented by 0, the first object in my formatted string. 0 is the css string variable above it.



      Each n in these strings are what would normally be Enter keystrokes, this is only so the bot can read it. I have included the original HTML and CSS files below.



       [Command("profile")] //Generates a user's profile using HTML / CSS
      public async Task Profile()

      var account = UserAccounts.GetAccount(Context.User);

      string css = "@font-face n font-family: 'Raleway';n src: URL('Raleway-Regular.ttf') format('truetype');nnnhtml " +
      "n n font-family: 'Raleway', sans-serif;n nnn#probar n n height:24px;n width:50%;n " +
      "background-color: skyblue;n border-radius: 30px;n nnn#probox n n background-color: lightblue;n " +
      "width: 100%;n margin: auto;n border-radius: 30px;n nnn#window n n width: 300px;n " +
      "background-color: lightgray;n margin: 0;n/*n background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);n " +
      "background-size:cover;n background-repeat: no-repeat;n*/n nnn#header n n width: 90%;n margin: auto;n " +
      "padding-top: 10px;n nnn#pfp nn height: 150px;n width: 150px;n border-radius: 30px;n margin: auto;n " +
      "border: gray solid 1px;n nnn#name n n text-align: center;n nnn#contentn n width: 90%;n margin: auto;n " +
      "padding-bottom: 10px;n color: black;n nnn.info n n padding-bottom: 5px;n font-size: 12px;n nn" +
      "n#row n n display: flex;n color: black;n nnn#level n n margin: auto;n nnn#yes n n margin: 0;n text-align: center;n n" +
      "nn#no nn font-size: 40px;n margin: 0;n text-align: center;n border: solid black 1px;nnnn#infolist n n text-align: center;n margin-top: 15px;n n" +
      "nn#statlist n n text-align: right;n margin-top: 15px;n nnn.inforow n n flex-grow: 1;n width: 33.3%;n nnn#fixedbs n n text-align: center;n " +
      "position: absolute;n top: 206px;n left: 70px;n color: black;n nnn";
      string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
      "<link rel="stylesheet" href="0">nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
      "<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
      "<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
      "</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
      " <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
      " <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
      " <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
      " </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);
      var converter = new HtmlToImageConverter

      Width = 400,
      Height = 400
      ;
      var pngBytes = converter.GenerateImage(html, NReco.ImageGenerator.ImageFormat.Png);
      await Context.Channel.SendFileAsync(new MemoryStream(pngBytes), "Profile.png");




      CSS



      @font-face 
      font-family: 'Raleway';
      src: URL('Raleway-Regular.ttf') format('truetype');


      html

      font-family: 'Raleway', sans-serif;



      #probar

      height:24px;
      width:50%;
      background-color: skyblue;
      border-radius: 30px;



      #probox

      background-color: lightblue;
      width: 100%;
      margin: auto;
      border-radius: 30px;



      #window

      width: 300px;
      background-color: lightgray;
      margin: 0;
      /*
      background-image: url(dafef97cb397e61f4c47ef27523b092c.jpg);
      background-size:cover;
      background-repeat: no-repeat;
      */



      #header

      width: 90%;
      margin: auto;
      padding-top: 10px;



      #pfp

      height: 150px;
      width: 150px;
      border-radius: 30px;
      margin: auto;
      border: gray solid 1px;



      #name

      text-align: center;



      #content

      width: 90%;
      margin: auto;
      padding-bottom: 10px;
      color: black;



      .info

      padding-bottom: 5px;
      font-size: 12px;



      #row

      display: flex;
      color: black;



      #level

      margin: auto;



      #yes

      margin: 0;
      text-align: center;



      #no

      font-size: 40px;
      margin: 0;
      text-align: center;
      border: solid black 1px;



      #infolist

      text-align: center;
      margin-top: 15px;



      #statlist

      text-align: right;
      margin-top: 15px;



      .inforow

      flex-grow: 1;
      width: 33.3%;



      #fixedbs

      text-align: center;
      position: absolute;
      top: 206px;
      left: 70px;
      color: black;





      HTML:



      <!doctype html>

      <html lang="en">
      <head>

      <meta charset="utf-8">

      <title>discord thing</title>

      <link rel="stylesheet" href="stylesheet.css">

      </head>

      <body>

      <div id="window">

      <div id="header">

      <div id="pfp"></div>

      <p id="name"><b>Garonen#6115</b></p>

      </div>

      <div id="content">

      <div id="probox">

      <div id="probar"></div>

      <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>

      </div>

      <div id="row">

      <div class="inforow" id="level">

      <p id="yes">Level</p>
      <p id="no"><b>11</b></p>

      </div>

      <div class="inforow" id="infolist">
      <p class="info">Total EXP</p>
      <p class="info">Server Rank</p>
      <p class="info">Global Rank</p>
      </div>

      <div class="inforow" id="statlist">
      <p class="info">xxxxEXP</p>
      <p class="info">#xxxx</p>
      <p class="info">#xxxx</p>
      </div>

      </div>

      </div>

      </div>

      </body>
      </html>


      For the output, I am looking for something like this



      Currently, the output is this







      c# html css






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Mar 23 at 2:53









      stageosustageosu

      82




      82






















          1 Answer
          1






          active

          oldest

          votes


















          0














          The <link> tag is used when we want to refer to the external css file. In your example, we have a css string which contains the actual css code, so you will have to use the <style> tag. Please replace your entire html string variable with the one given below.



          string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
          "<style>0</style>nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
          "<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
          "<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
          "</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
          " <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
          " <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
          " <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
          " </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);





          share|improve this answer























          • Thank you so much!!

            – stageosu
            Mar 23 at 3:23











          Your Answer






          StackExchange.ifUsing("editor", function ()
          StackExchange.using("externalEditor", function ()
          StackExchange.using("snippets", function ()
          StackExchange.snippets.init();
          );
          );
          , "code-snippets");

          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "1"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55310171%2fhow-to-reference-css-code-into-htmltoimageconverter%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          The <link> tag is used when we want to refer to the external css file. In your example, we have a css string which contains the actual css code, so you will have to use the <style> tag. Please replace your entire html string variable with the one given below.



          string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
          "<style>0</style>nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
          "<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
          "<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
          "</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
          " <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
          " <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
          " <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
          " </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);





          share|improve this answer























          • Thank you so much!!

            – stageosu
            Mar 23 at 3:23















          0














          The <link> tag is used when we want to refer to the external css file. In your example, we have a css string which contains the actual css code, so you will have to use the <style> tag. Please replace your entire html string variable with the one given below.



          string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
          "<style>0</style>nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
          "<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
          "<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
          "</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
          " <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
          " <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
          " <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
          " </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);





          share|improve this answer























          • Thank you so much!!

            – stageosu
            Mar 23 at 3:23













          0












          0








          0







          The <link> tag is used when we want to refer to the external css file. In your example, we have a css string which contains the actual css code, so you will have to use the <style> tag. Please replace your entire html string variable with the one given below.



          string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
          "<style>0</style>nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
          "<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
          "<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
          "</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
          " <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
          " <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
          " <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
          " </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);





          share|improve this answer













          The <link> tag is used when we want to refer to the external css file. In your example, we have a css string which contains the actual css code, so you will have to use the <style> tag. Please replace your entire html string variable with the one given below.



          string html = String.Format("<!doctype html>nn<html lang="en">n<head>n n <meta charset="utf-8">nn <title>StageBot User Profile</title>nn " +
          "<style>0</style>nn</head>nn<body> n n <div id="window">n n <div id="header">nn " +
          "<div id="pfp"></div>nn <p id="name"><b>1#2</b></p>nn </div>nn <div id="content">nn " +
          "<div id="probox">nn <div id="probar"></div>nn <p id="fixedbs"><i>cur lvl prog / total lvl exp</i></p>nn " +
          "</div>nn <div id="row">nn <div class="inforow" id="level">nn <p id="yes">Level</p>n " +
          " <p id="no"><b>11</b></p>nn </div>nn <div class="inforow" id="infolist">n <p class="info">Total EXP</p>n" +
          " <p class="info">Server Rank</p>n <p class="info">Global Rank</p>n </div>nn <div class="inforow" id="statlist">n" +
          " <p class="info">xxxxEXP</p>n <p class="info">#xxxx</p>n <p class="info">#xxxx</p>n </div>nn </div>nn " +
          " </div> n n </div>n n</body>n</html>", css, Context.User.Username, Context.User.Discriminator);






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Mar 23 at 3:16









          Priyank PanchalPriyank Panchal

          709714




          709714












          • Thank you so much!!

            – stageosu
            Mar 23 at 3:23

















          • Thank you so much!!

            – stageosu
            Mar 23 at 3:23
















          Thank you so much!!

          – stageosu
          Mar 23 at 3:23





          Thank you so much!!

          – stageosu
          Mar 23 at 3:23



















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55310171%2fhow-to-reference-css-code-into-htmltoimageconverter%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          SQL error code 1064 with creating Laravel foreign keysForeign key constraints: When to use ON UPDATE and ON DELETEDropping column with foreign key Laravel error: General error: 1025 Error on renameLaravel SQL Can't create tableLaravel Migration foreign key errorLaravel php artisan migrate:refresh giving a syntax errorSQLSTATE[42S01]: Base table or view already exists or Base table or view already exists: 1050 Tableerror in migrating laravel file to xampp serverSyntax error or access violation: 1064:syntax to use near 'unsigned not null, modelName varchar(191) not null, title varchar(191) not nLaravel cannot create new table field in mysqlLaravel 5.7:Last migration creates table but is not registered in the migration table

          용인 삼성생명 블루밍스 목차 통계 역대 감독 선수단 응원단 경기장 같이 보기 외부 링크 둘러보기 메뉴samsungblueminx.comeh선수 명단용인 삼성생명 블루밍스용인 삼성생명 블루밍스ehsamsungblueminx.comeheheheh

          155 수학 과학 기타 둘러보기 메뉴eh추가해eh문서를 완성해