How to edit text after code, pet profile
Replies
I've got another coding newbie question aha, I've put text below the code for my pet story, although every time I try to change the font it just doesn't work? I figured it was because I was using a font that wasn't recognized but it won't change to basic fonts either so I'm kind of lost. I've been trying to use html below the other code but it only works for certain things.
My other question is, how can I get a background image to not repeat? I looked up the css for it but that too fails to work and I'm not sure what else to do.
Ahhhh thank you to the person who answers this! I knew some coding stuff before but it's been a very long time since I've attempted and now I'm pretty rusty haha ;;
[edit] Ooone more thing, I changed the code a bit to insert an image (the image of the flowers) but the image is stuck in the pet description and I'm not sure how to go about fixing it
---> https://subeta.net/pets/Kale
The profile code
<style>
{text-indent: -9999px}
</style>
<style> .pet_age_info, .pet_age_info_date, .pet_wco_info, .pet_wco_info_date {display: none;} </style>
<style type="text/css">
body,font,td,div{color:;} i, a, a:link, a:visited, a:hover, a:active {color:;} .pet_name {color:;}
{position: relative; border-radius: 25px; left: -441px; top: 30px; margin-left:auto; margin-right:auto; opacity:0.5; } :hover {opacity:1;}
.pet_spotlight { position: relative; left: -440px; top: 16px; }
.pet_name {position: relative; font-family: verdana, sans-serif; font-size: 20px; color:; letter-spacing: 1px; left: -440px; top: 5px;}
.pet_color_info {position: relative; left: -440px; top: -10px;}
.owner {position: relative; left: -440px; top: -13px;}
{ display:none;}
.pet_age_info_date {position: relative; left: -440px; top: 280px;}
.pet_like { position: relative; left: -440px; top: -20px;}
{ width:600px; margin-left:auto; margin-right:auto; padding:0px; }
{position: relative; left: -375px; top: -12px;}
{ border-radius: 15px; position: absolute; left: 75px; top: 320px; opacity:0.5;} :hover {opacity:1;}
{ border-radius: 25px; font-family: verdana, sans-serif; font-size: 11px; color:; letter-spacing: 1px; width: 500px; height: 715px; background-color: ; position: absolute; left: 690px; top: 10px;}
{overflow: hidden!important;} :hover {overflow-y: scroll!important;} :hover{opacity:1;}
{ border-radius: 25px; border: 2px solid ; width: 300px; height: 677px; background-color:; position: absolute; left: 350px; top: 5px;}
{ position:absolute; top:300px; left:400px; height: 700px; width: 200px; }
{ border-radius: 25px; border: 2px solid ; width: 550px; height: 722px; text-align:center; background-color:; position: absolute; left: 665px; top: 5px;}
ul { border-radius: 25px; width: 300px; height: 755px; background-color:; position: absolute; left: 950px; top: 5px; padding:0px !important; }
img { text-align:center !important; }
{ position: absolute; left: 385px; width: 250px; top: 460px; margin-left:auto; margin-right:auto; height:250px; opacity: 0.5;} {overflow: hidden!important;} :hover {overflow-y: scroll!important;} :hover{opacity:1;}
.treasure_item { margin-top:5px; margin-left:5px; }
.treasure_item img { border-radius:25px; width:64px; height:64px; }
body, html, { background-color: border:0px; }
{ height:0px !important; margin-left:auto; margin-right:auto; }
, , -ban, -ban-main, -lrc, -rrc {display:none;}
, -right, , , , {display:none;}
, , body, , , {background-color:transparent;}
.pet, .pet_minion { font-family: verdana, sans-serif; font-size: 11px; color:; letter-spacing: 1px; }
td { font-family: verdana, sans-serif; font-size: 9px; color:; letter-spacing: 1px; background-color: !important; }
.title { font-size: 20px; font-family: Verdana, sans-serif; text-align: center; line-height: 20px; margin-top:20px; margin-bottom:10px;
} .treasure_item a:link { display: none; }
</style>
<style type="text/css"> /*** Body ***/ body, html { margin-right:auto !important; margin-left:auto !important; text-align:center; background: url() !important; background-repeat: no-repeat; }
div#right { margin-left:auto !important; margin-right:auto !important; position:relative !important; left:0px !important; width:100%; margin-top:20px; }
.leftpanelseparator, , , div#header, -container { display: none;}
</style><div class="title"></i></div><br /><br /> <center> <table width="100%"><tr> </style>
This is some text!
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
First off, you have multiple style tags here, but you can put all of your CSS inside of a single style tag :)
Anyway... you will want to change the font using CSS, not HTML. Web coding has changed a lot over the years, and nowadays there is a huge emphasis on separating style from content. Styles (like what font is being used) are supposed to only be in the CSS, whereas the HTML should only have content (the actual text of the story). The font tag in HTML is actually deprecated, which means we shouldn't use it anymore. It's sort of being phased out slowly, so to speak.
In the CSS, you can do it with a rule like this:
body { font-family: 'Calibri', sans-serif; }
This means that anything inside the body tag should have a font face of Calibri. And the "sans-serif" after that is a fallback: if it can't find Calibri on your visitor's computer, it will use whatever the default sans-serif font is on their computer instead.
For the background image, you can also specify it with a CSS attribute "background-repeat":
background-repeat: no-repeat;
Just add that to the styles for whatever element has the background image. Hope this helps!
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights
Oh, alright, thank you! Although I would like to know how to add a title, there was the bold text on top that said "this is some text" but it's just part of the rest of the text, how would I separate it from.the rest of the description also where would I add the code to change the font?
I'll also try that for the background image thanks! Now if I wanted to just add in an image (not a background image) that I could position wherever, what code would that be and where would it go? Ive tried to attempt with the html but it won't work as you said. What I was trying to do with the flower is position it to the side of the first column.
Ahh sorry again if these are dumb questions;;
The code to change the font should go in your CSS (in between the style tags). The code I gave you was to change the font for everything inside the body tag. If you only want to change the font for certain elements, you can change "body" to a different element instead. For instance, if you only want the p elements to be calibri, you can do:
p { font-family: 'Calibri', sans-serif; }
To position the title and image, it depends on where you want it to go. To position the flower to the side of the column, the easiest way would be to position it absolutely. I can try to explain but to be honest I think it would be helpful if you read a basic HTML/CSS tutorial first. Here's something I wrote that might be helpful: Basic HTML (start here) and Basic CSS
(Sorry the formatting on the tutorials is so plain - I just put them online now, for you actually)
Good luck!
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights
Alright! Thank you so much for the help! I took a look at the tutorials and the CSS one was really helpful and I've managed to pretty much finished Kale's profile (the layout that is). This is pretty much the first profile I've attempted coding in a few years haha, it feels good to do it though.
Thank you again!
No problem. I'm really glad my tutorials could help you :)
🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights