Jump to content
Please Use CODE Tags

Changing the colour of a peice of text that has been pulled in to html from a text file

Doggo lover
By Doggo lover
in Programming
 Share
Posted

I am trying to use css to style a html file that in itself pulls some text in from a txt file. However when i try and use an object i cannot recolour the text. Here is my html: 

<!doctype html>
<html lang="en">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <head>
    <meta charset="utf-8">
    <title>ur mum</title>
  </head>

  <body>

    <!-- Add your site or application content here -->
    <object data="Snip.txt" class="title"></object>

  </body>

</html>

 

and here is my css: 

  body {
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
    color: #cb0000;
    font-family: 'Ubuntu', sans-serif;
  }
  .title {
    color: #ffffff;
  }

 

Any help would be greatly appreciated!

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, shadow_ray said:

You can use JavaScript to grab the contents of the .txt file and append it to the page.

 

https://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into-a-javascript-variable

https://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript

I don't think i can as i intend to open the file as a stand alone .html file and not host it in any way

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

This is what a quick google search reveals.

https://stackoverflow.com/questions/40377003/html-object-data-styling

 

The reason it doesn't work:

Quote

You cannot affect cross domain content

 

With the little knowledge I have with this, what I understand is: 

The data in the object can be a local or external, but is always considered external. And you cannot manipulate external data. Just display it as is. 

The data does not inherit properties from the parent. As seen in the picture below, you can see the parent object has the color red property, but #document(I think this is the container for the data) does not inherit it from the parent.

Spoiler

image.thumb.png.55ba9ffdc89e845d79c2fef86af4da2d.png

 

image.thumb.png.6f2f8a4461618ccbe460ec3fea3d9f24.png

 

I apologize if I'm messing up some terms here like objects or classes. Please correct me if I'm wrong.

Hope this helps!

On 4/5/2024 at 10:13 PM, LAwLz said:

I am getting pretty fucking sick and tired of the "watch something else" responses. It's such a cop out answer because you could say that about basically anything, and it doesn't address the actual complaints. People use it as some kind of card they pull when they can't actually respond to the criticism raised but they still feel like they need to defend some company/person. If you don't like this thread then stop reading it. See how stupid it is? It's basically like telling someone "shut the fuck up". It's not a clever responsive, it doesn't address anything said, and it is rude. 

 ^

 

bruh switch to dark mode its at the bottom of this page

VPN Server Guide

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
On 10/16/2021 at 2:47 PM, Doggo lover said:

I don't think i can as i intend to open the file as a stand alone .html file and not host it in any way

Javascript is rendered locally by the browser so it is not necessary to host it. Simply use <script> tags and the browser will take care of the rest when it renders the file.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
14 hours ago, Eww said:

Javascript is rendered locally by the browser so it is not necessary to host it. Simply use <script> tags and the browser will take care of the rest when it renders the file.

Make a JS file and include it in the HTML.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
On 10/16/2021 at 7:45 PM, shadow_ray said:

You can use JavaScript to grab the contents of the .txt file and append it to the page.

 

https://stackoverflow.com/questions/196498/how-do-i-load-the-contents-of-a-text-file-into-a-javascript-variable

https://stackoverflow.com/questions/5677799/how-to-append-data-to-div-using-javascript

This implies that the file to be imported is hosted on a web server, which isn't necessary the case here.

On 10/22/2021 at 8:48 PM, Eww said:

Javascript is rendered locally by the browser so it is not necessary to host it. Simply use <script> tags and the browser will take care of the rest when it renders the file.

Even if it's hosted locally, you'd still need a local web server to be able to make Ajax calls.

 

On 10/16/2021 at 7:03 PM, Doggo lover said:

I am trying to use css to style a html file that in itself pulls some text in from a txt file. However when i try and use an object i cannot recolour the text. Here is my html: 




<!doctype html>
<html lang="en">
  <link rel="stylesheet" type="text/css" href="css/main.css">
  <head>
    <meta charset="utf-8">
    <title>ur mum</title>
  </head>

  <body>

    <!-- Add your site or application content here -->
    <object data="Snip.txt" class="title"></object>

  </body>

</html>

 

and here is my css: 




  body {
    @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');
    color: #cb0000;
    font-family: 'Ubuntu', sans-serif;
  }
  .title {
    color: #ffffff;
  }

 

Any help would be greatly appreciated!

 

First there's an issue at the beginning of your CSS. You should import the font before the first line (with the "body" part).

 

Now as for your issue, as it has been mention, it's kinda tricky to edit the properties within object or frame tags, but on top of that, you aren't even importing some HTML but an txt file, which is a file on its own. A cleaner approach would be to just load the file contents (and not the file itself) in JS and you would need at least a local server for that.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

From Mozilla Developer Network:

Quote

The <object> HTML element represents an external resource, which can be treated as an image, a nested browsing context, or a resource to be handled by a plugin.

In this case, the content is treated as a nested browsing context, similar to an iframe. You cannot edit the content of a nested browsing context (at least not with CSS alone).

 

The simplest approach would be to load the content of the text file using JavaScript and adding it as the text content of some HTML element. You can't do this without a web server* because it's a security vulnerability, see CVE-2019-11730. Unless you can't spin up a local server for whatever reason, it's not very difficult to do and worthwhile if you develop sites often. That would be the correct way to solve this problem: it's efficient and versatile.

 

Alternatively, you could create a style file, change the extension of your text file to an html file, and then add a link to the aforementioned style file to the html file. I wouldn't consider this a good solution or even the correct solution, but it will certainly solve your problem.

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×