Change Image - CSS

  • (2 Pages)
  • +
  • 1
  • 2

23 Replies - 4593 Views - Last Post: 18 December 2012 - 05:13 PM

#16 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: Change Image - CSS

Posted 18 December 2012 - 04:17 AM

View PostVompaudi, on 18 December 2012 - 11:01 AM, said:

Hyperlinks are added in HTML document. CSS are only for decorating.

Even though those are their intended roles, it's not entirely accurate. There is always some crossover between the three areas of web development. HTML can include some styling and behavior, while CSS is capable in limited ways to manipulate the content and behavior. Javascript is more than capable of dealing with all three roles, by manipulating both the HTML and CSS.

Your example is right though. CSS isn't capable of adding links. It can make things look like links, but not actually behave as such.

If you are interested in redefining the look and, more importantly, the behavior of websites in Firefox, then you may want to consider the Gresemonkey extension instead of your style manager extension. With Greasemonkey you can write Javascript snippets (generally called Userscripts) to run on select websites, which allows you to manipulate it in any way you see fit. Adding a button would be a trivial task using a Userscript.
Was This Post Helpful? 1
  • +
  • -

#17 Mortal Kombat  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 16
  • Joined: 16-December 12

Re: Change Image - CSS

Posted 18 December 2012 - 05:39 AM

View PostAtli, on 18 December 2012 - 04:17 AM, said:

View PostVompaudi, on 18 December 2012 - 11:01 AM, said:

Hyperlinks are added in HTML document. CSS are only for decorating.

Even though those are their intended roles, it's not entirely accurate. There is always some crossover between the three areas of web development. HTML can include some styling and behavior, while CSS is capable in limited ways to manipulate the content and behavior. Javascript is more than capable of dealing with all three roles, by manipulating both the HTML and CSS.

Your example is right though. CSS isn't capable of adding links. It can make things look like links, but not actually behave as such.

If you are interested in redefining the look and, more importantly, the behavior of websites in Firefox, then you may want to consider the Gresemonkey extension instead of your style manager extension. With Greasemonkey you can write Javascript snippets (generally called Userscripts) to run on select websites, which allows you to manipulate it in any way you see fit. Adding a button would be a trivial task using a Userscript.


With Greasemonkey how i add link in page? :bigsmile:
Was This Post Helpful? 0
  • +
  • -

#18 Mortal Kombat  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 16
  • Joined: 16-December 12

Re: Change Image - CSS

Posted 18 December 2012 - 06:12 AM

View PostMortal Kombat, on 18 December 2012 - 05:39 AM, said:

View PostAtli, on 18 December 2012 - 04:17 AM, said:

View PostVompaudi, on 18 December 2012 - 11:01 AM, said:

Hyperlinks are added in HTML document. CSS are only for decorating.

Even though those are their intended roles, it's not entirely accurate. There is always some crossover between the three areas of web development. HTML can include some styling and behavior, while CSS is capable in limited ways to manipulate the content and behavior. Javascript is more than capable of dealing with all three roles, by manipulating both the HTML and CSS.

Your example is right though. CSS isn't capable of adding links. It can make things look like links, but not actually behave as such.

If you are interested in redefining the look and, more importantly, the behavior of websites in Firefox, then you may want to consider the Gresemonkey extension instead of your style manager extension. With Greasemonkey you can write Javascript snippets (generally called Userscripts) to run on select websites, which allows you to manipulate it in any way you see fit. Adding a button would be a trivial task using a Userscript.


With Greasemonkey how i add link in page? :bigsmile:/>

How put text/image with hiperlink here:
<div class="postarea"> </div>

Was This Post Helpful? 0
  • +
  • -

#19 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: Change Image - CSS

Posted 18 December 2012 - 06:24 AM

Userscripts are just normal Javascript snippets, so in simplest terms, you could just do:
window.addEventListner("DOMContentLoaded", function() {
    document.querySelector(".postarea").innerHTML = '<a href="...">Linkage</a>';
});


Remember to look up the structure of a Greasemonkey script thoug. There are some headers and stuff that need to be defined. (Though if you create a new script through Greasemonkey it should add them for you. You'll just have to tweak the URls.)
Was This Post Helpful? 0
  • +
  • -

#20 Mortal Kombat  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 16
  • Joined: 16-December 12

Re: Change Image - CSS

Posted 18 December 2012 - 06:52 AM

View PostAtli, on 18 December 2012 - 06:24 AM, said:

Userscripts are just normal Javascript snippets, so in simplest terms, you could just do:
window.addEventListner("DOMContentLoaded", function() {
    document.querySelector(".postarea").innerHTML = '<a href="...">Linkage</a>';
});


Remember to look up the structure of a Greasemonkey script thoug. There are some headers and stuff that need to be defined. (Though if you create a new script through Greasemonkey it should add them for you. You'll just have to tweak the URls.)


Ty, but does not work with me. :(
Was This Post Helpful? 0
  • +
  • -

#21 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: Change Image - CSS

Posted 18 December 2012 - 06:59 AM

If you do it correctly, it should. Show us what you did and we may be able to help you fix it. What does the whole Userscript look like, including the headers Greasemonkey created?
Was This Post Helpful? 0
  • +
  • -

#22 Mortal Kombat  Icon User is offline

  • New D.I.C Head

Reputation: 3
  • View blog
  • Posts: 16
  • Joined: 16-December 12

Re: Change Image - CSS

Posted 18 December 2012 - 11:39 AM

View PostAtli, on 18 December 2012 - 06:59 AM, said:

If you do it correctly, it should. Show us what you did and we may be able to help you fix it. What does the whole Userscript look like, including the headers Greasemonkey created?


// ==UserScript==
// @name        WarezTuga
// @description Customization for cards displayed on the Jira RapidBoard - makes the font of the summaries smaller, the avatar pictures bigger and fades them into the background
// @include     http://name_website/forum/
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant       none
// ==/UserScript==

window.addEventListner("DOMContentLoaded", function() {
    
	document.querySelector(".postarea).innerHTML = '<a href="www.google.com">OLOAOLALALAL</a>';

});

Was This Post Helpful? 0
  • +
  • -

#23 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1134
  • View blog
  • Posts: 7,094
  • Joined: 07-September 06

Re: Change Image - CSS

Posted 18 December 2012 - 12:32 PM

You are missing a double quote:
// ==UserScript==
// @name        WarezTuga
// @description Customization for cards displayed on the Jira RapidBoard - makes the font of the summaries smaller, the avatar pictures bigger and fades them into the background
// @include     http://name_website/forum/
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant       none
// ==/UserScript==

window.addEventListner("DOMContentLoaded", function() {
    
	document.querySelector(".postarea").innerHTML = '<a href="www.google.com">OLOAOLALALAL</a>';

});


Was This Post Helpful? 0
  • +
  • -

#24 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3710
  • View blog
  • Posts: 5,958
  • Joined: 08-June 10

Re: Change Image - CSS

Posted 18 December 2012 - 05:13 PM

And since you appear to be including jQuery in that script, you may as well make user of it. (Either that or remove that requirement line.)
// ==UserScript==
// @name        WarezTuga
// @description Customization for cards displayed on the Jira RapidBoard - makes the font of the summaries smaller, the avatar pictures bigger and fades them into the background
// @include     http://name_website/forum/
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant       none
// ==/UserScript==

$(function() {
	$(".postarea").html('<a href="www.google.com">OLOAOLALALAL</a>');
});


Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2