☰

Indeed.com: Design like Stepstone

This script changes the old-fashioned indeed.com design to the modern Stepstone.com design and adds new useful features like navigation, company search and unlocks 150km search radius.

  1. // ==UserScript==
  2. // @name           Indeed.com: Design like Stepstone
  3. // @namespace      https://greasyfork.org/de/scripts/21365
  4. // @description    This script changes the old-fashioned indeed.com design to the modern Stepstone.com design and adds new useful features like navigation, company search and unlocks 150km search radius.
  5.  
  6. // @include        *.indeed.com/*
  7. // @include        *.indeed.co.uk/*
  8. // @include        *.indeed.*/*
  9. // @include  	   *proxy-us.hide.me/*
  10. // @run-at         document-end
  11.  
  12. // @author         lukie80
  13. // @copyright      Creative Commons Attribution-ShareAlike 3.0 Unported (CC-BY-SA 3.0)
  14. // @license        http://creativecommons.org/licenses/by-sa/3.0/
  15. // @version        1.11
  16. // @lastupdated    2016.06.15
  17. // 
  18. // ==/UserScript==
  19. //-------------------------------------------------------------------------------------------------------------------
  20.  
  21. //needed for finding sponsored jobs, source: http://stackoverflow.com/a/4275177 - needed
  22. function getElementsStartsWithId( id ) {
  23.   var children = document.body.getElementsByTagName('*');
  24.   var elements = [], child;
  25.   for (var i = 0, length = children.length; i < length; i++) {
  26.     child = children[i];
  27.     if (child.id.substr(0, id.length) == id)
  28.       elements.push(child);
  29.   }
  30.   return elements;
  31. }
  32.  
  33. //needed for CSS replacement
  34. function addGlobalStyle(css) {
  35.     var head, style;
  36.     head = document.getElementsByTagName('head')[0];
  37.     if (!head) { return; }
  38.     style = document.createElement('style');
  39.     style.type = 'text/css';
  40.     style.innerHTML = css;
  41.     head.appendChild(style);
  42. }
  43.  
  44. //replacing CSS
  45. addGlobalStyle("\
  46. 	*{\
  47. 		font-family: Trebuchet ms !important; \
  48.     }\
  49. 	body{\
  50. 		font-family: Trebuchet ms !important; \
  51. 		color: #0C2577 !important; \
  52.         background: linear-gradient(#EFF5FA 0px, #EFF5FA 35px,#FFFFFF 205px) !important; \
  53. 	} \
  54. 	a{\
  55. 		color: #0C2577 !important; \
  56. 	} \
  57. 	a:visited{\
  58. 		color: #666 !important; \
  59. 	} \
  60. 	h1{\
  61. 		color: #0C2577 !important; \
  62. 	} \
  63. 	.company{\
  64. 		color: #1260cf !important; \
  65. 	} \
  66. 	.location{\
  67. 		color: #1260cf !important; \
  68. 	} \
  69. 	.summary{\
  70. 		color: #666 !important; \
  71. 	} \
  72. 	.inwrap{\
  73. 		border-right: none !important; \
  74. 		border-bottom: none !important; \
  75. 	} \
  76. 	.input_text{\
  77. 		border: thin solid #d4e4f2 !important; \
  78.     } \
  79.     .new{\
  80. 		color: #1260cf !important; \
  81. 	} \
  82. 	.nji{\
  83. 		color: #1260cf !important; \
  84. 	} \
  85. 	.nji nji recDecoration{\
  86. 		color: #1260cf !important; \
  87. 	} \
  88. 	.more_link{\
  89. 		color: #1260cf !important; \
  90. 	} \
  91. 	.iaLabel{\
  92. 		color: #1260cf !important; \
  93. 	} \
  94. 	.result-link-source{\
  95. 		color: #1260cf !important; \
  96. 	} \
  97. 	.date{\
  98. 		color: #1260cf !important; \
  99. 	} \
  100. 	#what_label_top{\
  101. 		color: #1260cf !important; \
  102. 	} \
  103. 	#where_label_top{\
  104. 		color: #1260cf !important; \
  105. 	} \
  106. 	#g_nav{\
  107. 		background: #fff !important; \
  108. 		border-bottom: thin solid #d4e4f2 !important; \
  109. 	} \
  110. 	#p_nav{\
  111. 		background: #fff !important; \
  112. 		border: none !important; \
  113. 	} \
  114. 	.inwrapBorder{\
  115. 		border: none !important; \
  116. 		thin solid #d4e4f2 !important; \
  117. 	} \
  118. 	.lnav{\
  119. 		border-spacing: 10px !important; \
  120. 	} \
  121. 	#pageContent{\
  122. 		border-spacing: 10px !important; \
  123. 	} \
  124. 	#refineresults{\
  125. 		background: #eff5fa !important; \
  126. 		background: linear-gradient(#EFF5FA 0px, #EFF5FA 35px,#FFFFFF 205px) !important; \
  127. 		border: thin solid #d4e4f2 !important; \
  128. 		border-radius: 6px !important; \
  129. 		padding-top: 17px !important; \
  130. 	} \
  131. 	#resultsCol{\
  132. 		border: thin solid #d4e4f2 !important; \
  133. 		border-radius: 6px !important; \
  134. 		background-color: #eff5fa !important; \
  135. 	} \
  136. 	#auxColDiv{\
  137. 		border: thin solid #d4e4f2 !important; \
  138. 		border-radius: 6px !important; \
  139. 		background-color: #eff5fa !important; \
  140. 		background: linear-gradient(#EFF5FA 0px, #EFF5FA 35px,#FFFFFF 205px) !important; \
  141. 		padding-right: 10px !important; \
  142. 		padding-left: 10px !important; \
  143. 	} \
  144. 	#auxCol{\
  145. 		padding: 0px !important; \
  146. 	} \
  147. 	.femp_item{\
  148. 		border: thin solid #d4e4f2 !important; \
  149. 		border-radius: 6px !important; \
  150. 		background: #ffffff !important; \
  151. 	} \
  152. 	.separator_top{\
  153. 		border-top: none !important; \
  154. 		background: none!important; \
  155. 	} \
  156. 	.separator_bottom{\
  157. 		border-bottom: none !important; \
  158. 		background: none!important; \
  159. 	} \
  160. 	.separator_top{\
  161. 		border-top: none !important; \
  162. 		background: none!important; \
  163. 	} \
  164. 	.header{\
  165. 		background-color: #eff5fa !important; \
  166. 	} \
  167. 	#cookie-alert{\
  168. 		border-radius: 10px !important; \
  169. 		border: thin solid #d4e4f2 !important; \
  170. 	} \
  171. 	.sdn{\
  172. 		color: #e09ee0 !important; \
  173. 	} \
  174. 	#tjobalerts{\
  175. 		background: none; \
  176. 	} \
  177. 	#bjobalerts{\
  178. 		background: none; \
  179. 	} \
  180. ");
  181.  
  182. //dynamic style application
  183. if (document.getElementsByTagName("h1")[0]){
  184. 	document.getElementsByTagName("h1")[0].textContent = "Search: " + document.getElementsByTagName("h1")[0].textContent;
  185. }
  186.  
  187. if (getElementsStartsWithId("pj_")[0]){
  188.   var badDivs = getElementsStartsWithId("pj_");
  189.   for (var i = 0; i < badDivs.length; i++){
  190.     badDivs[i].style.background = '#fdf9fd';
  191.     badDivs[i].style.border = 'thin solid #f7e6f7';
  192.     badDivs[i].style.margin = "-1px -1px -1px -1px";
  193.     //badDivs[i].remove(); 
  194.     //this can remove the sponsored jobs but this is not suggested 
  195.     //because they are not spam. However they are 
  196.     //quantitative spam.
  197.   }
  198. }
  199.  
  200.   
  201. var goodDivs = getElementsStartsWithId("p_");
  202. for (var i = 0; i < goodDivs.length; i++){
  203.   if (i % 2 == 0){
  204.     goodDivs[i].style.background = '#f9fbfd';
  205.   } else {
  206.     goodDivs[i].style.background = '#FFFFFF';
  207.   }
  208.   goodDivs[i].style.border = 'thin solid #d4e4f2';
  209.   goodDivs[i].style.margin = "-1px -1px -1px -1px";
  210.   //goodDivs[i].style.borderRadius = '6px';
  211. }
  212.  
  213. // show a link to google maps navigation
  214. var navOriginEles = document.getElementsByClassName("input_text");
  215. var navDestEles = document.getElementsByClassName("location");
  216. for (var i = 0; i < navDestEles.length; i++){
  217.   	var navDestTxt = navDestEles[i].firstChild.textContent;
  218.   	var navLinkEle = document.createElement('a');
  219.     navLinkEle.href = "https:\/\/www.google.de\/maps\/dir\/"+navOriginEles[1].getAttribute('value')+"\/"+navDestTxt;
  220.   	navLinkEle.innerHTML = "(Navigation)";
  221.   	navLinkEle.setAttribute("target", "_blank");
  222.   	var navSpace = document.createTextNode(" ");
  223.   	navDestEles[i].appendChild(navSpace);
  224. 	navDestEles[i].appendChild(navLinkEle);
  225. }
  226.  
  227. //style improvement
  228. if (getElementsStartsWithId("pj_")[0]){
  229. 	getElementsStartsWithId("pj_")[0].parentNode.style.marginBottom="0px";
  230. }
  231.   
  232. if (document.getElementById("auxCol")){
  233. 	var tempDiv = document.createElement('div');
  234. 	tempDiv.setAttribute("id", "auxColDiv");
  235. 	document.getElementById("auxCol").appendChild(tempDiv);
  236. 	tempDiv.appendChild(document.getElementById("tjobalertswrapper"));
  237.   	if (document.getElementById("femp_list")){
  238. 		tempDiv.appendChild(document.getElementById("femp_list"));
  239.     }
  240. }
  241.  
  242. // create link company job search
  243. if (document.getElementsByClassName("company")){
  244.   var companyEles = document.getElementsByClassName("company");
  245.   for (var i = 0; i < companyEles.length; i++){
  246.      	   	var companyLinkEle = document.createElement('a');
  247.     		companyLinkEle.href = "http:\/\/"+window.location.href.match(/[\w.]*indeed[\w.]+/)+"\/jobs?q=company:\""+encodeURI(companyEles[i].textContent.replace(/^\s*/, ''))+"\"&amp;l=";
  248.     		companyLinkEle.innerHTML = companyEles[i].textContent;
  249.     		companyLinkEle.setAttribute("target", "_blank");
  250.             companyEles[i].textContent="";
  251.     		companyEles[i].appendChild(companyLinkEle);
  252.   }
  253. }
  254.  
  255. // add 150km radius
  256. if (document.getElementById("distance_selector")){
  257.   var distEle = document.createElement('option');	
  258.   distEle.innerHTML = "150km";
  259.   distEle.setAttribute("value", "150");
  260.   document.getElementById("distance_selector").appendChild(distEle);
  261. }
  262.  
  263. if (document.getElementById("radius")){
  264.   var distEle = document.createElement('option');	
  265.   distEle.innerHTML = "150km";
  266.   distEle.setAttribute("value", "150");
  267.   document.getElementById("radius").appendChild(distEle);
  268. }
  269.  
  270.  
  271. //-------------------------------------------------------------------------------------------------------------------