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;
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
add a comment |
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
add a comment |
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
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
c# html css
asked Mar 23 at 2:53
stageosustageosu
82
82
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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);
Thank you so much!!
– stageosu
Mar 23 at 3:23
add a comment |
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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);
Thank you so much!!
– stageosu
Mar 23 at 3:23
add a comment |
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);
Thank you so much!!
– stageosu
Mar 23 at 3:23
add a comment |
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);
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);
answered Mar 23 at 3:16
Priyank PanchalPriyank Panchal
709714
709714
Thank you so much!!
– stageosu
Mar 23 at 3:23
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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