How do I use a CSS from the site url?

Asked

Viewed 367 times

-4

I wonder if there’s a way I can use a different CSS for a "Java" web system without having to include it in the source code?

I have a new CSS file that I resized the buttons and spaces and I need to use it in this web application, I need to point the system to this new CSS without having to touch the source code.

A friend told me there’s a way through the URL, but I don’t know how to do it...

Example given by him http://address_do_meu_system/? e_o_CSS

Remembering that the system already has its CSS in the code.

Someone knows how to do it?

  • When you say without tampering with the source code you are referring to the Htmls or the part of the backend?

  • Dude, let me get this straight, can you work on HTML? or do you really want to go through the access link to your css page?

  • I won’t be able to touch the HTML, I would have to do something like pass this CSS through the URL. The Site would be called by the url and when it goes up it would have to read this css and change the buttons and spaces that are informed in this new css...

  • What you’re trying to do is impossible, if you don’t have access to the source code no matter where you try to pass the css it won’t interpret, since you can’t edit the system to search and apply the parameter you passed

  • And if I put the site in an Iframe I could change???

  • 3

    You can’t do that, you could create a javascript code to import the file and run it on the browser console as soon as you entered the site, but you would have to do this every time to access the website.

  • @Luizcarloscarvalho you can not change the contents of an iframe by css or by javascript

Show 2 more comments

2 answers

5


Answer

Impossible to do that.

Because?

Parameters in the URL are sent to the server, where your source code is, so in your code you will decide what to do with the parameter.

If you can’t mess with the source code, then you’re talking about the CSS, but the code isn’t "whatever" because it doesn’t know what to do with this information.

So you need some programming that imports this CSS file into your code, this is usually done on the server side, example:

//Endereço: http://endereco_do_meu_sistema/?css=meucss.css

$css = empty($_GET['css']) ? null : $_GET['css'];
// "Importa" o arquivo meucss.css
if (!is_null($css))
   echo "<link href=\"$css\" rel=\"stylesheet\" type=\"text/css\">";

The previous example was written in PHP.

Alternative

An alternative is to import the file via Javascript, for example:

(function(css){
    var el = document.createElement('link');
    el.setAttribute('href', css);
    el.setAttribute('rel', 'stylesheet');
    el.setAttribute('type', 'text/css');
    document.body.appendChild(el);
})('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')

For the modification to be performed you must perform this function every time you access the site (as you do not have access to the code, you can do this by the browser console if available), that is to say every page reload the code should be executed again, because these modifications are only made on the client side and are not saved server-side.


Attention: This answer is exclusively for educational purposes. NO example here should be used in production.

  • How to call this Function you created in javascript?

  • Oops @Luizcarloscarvalho, she’s already calling herself, she’s a anonymity function (read +). If you want to name it just copy what is inside the first parentheses and add a name function GetCSS(css){/... etc .../} and call her GetCSS('http://site/caminho/do/arquivo.css')

  • @Luizcarloscarvalho, if the answer served you mark it as accepted by clicking the button on the left below the number of votes. ;)

  • Kaduamaral - Thank you very much for the answer, it worked perfectly... But in the browser console and when switching pages I have to keep putting the code, how do I call the URL with this function and how would it stay for all pages. It will not be possible for the user to use console as the system is used in data collectors. Thanks in advance!

  • @Luizcarloscarvalho as I mentioned in the answer has no way to do that, and also this method NOT to be used in production at all. But you could make a browser app that would do that, but that subject doesn’t fit here.

0

To import a CSS file on a page just link inside the block HEAD of the page you want to use, example:

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

However, obviously, this css file must be inside the directory of your site or in some public link that you have access to.

  • From what I understand: "I need to point the system to this new CSS without having to touch the source code."

  • @Earendul when he talked about not messing with the source code I automatically thought of backend. Otherwise I delete this my answer

  • That won’t work because I don’t have access to the code Html... It would have to be something different by URL same. I tried to do via Iframe but it didn’t work either...

  • That’s right... I don’t have access to the HTML code... I needed to pass the CSS through the URL!!!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.