elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  [Resuelto] Ayuda para personalizar este CSS
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: [Resuelto] Ayuda para personalizar este CSS  (Leído 1,969 veces)
Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.885



Ver Perfil
[Resuelto] Ayuda para personalizar este CSS
« en: 23 Octubre 2015, 12:42 pm »

Buenas

Hace poco descubrí la extensión Stylish para firefox. Existen muchas extensiones parecidas pero esta me gustó mucho por su recopilación de user-scripts sobre todo de themes oscuros.
http://addons.mozilla.org/en-us/firefox/addon/stylish/
http://userstyles.org/

Estoy usando este script para modificar el aspecto de la MSDN:
https://userstyles.org/styles/107229/msdn-dark-docs https://userstyles.org/styles/96523/msdn-black-background-theme

El problema que tengo es que el aspecto que le han aplicado a los bloques de código es horrible, tanto por el gusto de colorización como para la lectura del código:


He conseguido personalizarlo un poco usando colores menos brillantes y más adecuados para la lectura:


Y ahora quiero modificar también el color de fondo de los bloques de código (para que no sea tan oscuro), pero no encuentro la propiedad correspndiente en el script, o a lo mejor es que debo añadirla yo.

¿Podrían ayudarme a conseguirlo?.

Este es el script (sin modificar):

Código
  1. @namespace url(http://www.w3.org/1999/xhtml);
  2.  
  3. @-moz-document domain("msdn.microsoft.com") {
  4.  
  5. ul#srv_shellHeaderNav
  6.  {
  7.    /* complete the silly border and make it a bit fleshier
  8.     */
  9.    border-bottom: 1px solid black;
  10.    /*
  11.     adjust for that 12px overhang on the right,
  12.     which was a concequence of using a linked border of our own
  13.     */
  14.    /*margin-right: -11px;*/
  15.    /* use above method, if you dont have firefox
  16.        this will have a greater chance of  interfering
  17.     with future modifications by microsoft, also it does not
  18.     seem to like the right margin as much (1px overhang persistent) */
  19.    -moz-margin-start: -11px;
  20.    -moz-margin-end: -11px;
  21.  }
  22.  
  23. *[role="menu"], .top-level-link-text
  24.  {
  25.    background-color: white !important;
  26.    filter: invert(100%) !important;
  27.  }
  28.  
  29. #body,#ux-header,#headerContainer
  30. {
  31.    width: auto  !important;
  32.    margin-left: 10px  !important;    
  33.    margin-right: 10px  !important;
  34.  
  35. }
  36. #body
  37. {
  38.  
  39.  
  40. }
  41.  
  42.  
  43. #content,#leftNav
  44. {
  45. margin-top: 25px !important;
  46. border-top: 1px solid gray !important;
  47. }    
  48. #content>div, #leftNav>div
  49. {
  50. margin-top: 35px;
  51. }
  52.  
  53. img[title="Visit the Windows Store"]
  54. {
  55.  border-radius: 20px !important;
  56. }
  57.  
  58. #BodyBackground,body,p,a
  59. {
  60. background: #252525 !important;
  61. color: #FFFFFF !important;
  62. }
  63.  
  64.  
  65.  
  66.  
  67. input
  68. {
  69. color: white !important;
  70. }
  71.  
  72. /* just images that are in table definitions, usually spaced out  as big buttons */
  73. tr>td>img,
  74. td a>img
  75. {
  76. border-radius: 4px !important;
  77. border: white solid !important;
  78. }
  79. td a>img:hover
  80. {
  81. border: white outset !important;
  82. }
  83. td a>img:active
  84. {
  85. border: white inset !important;
  86. }
  87.  
  88. body *
  89. {
  90.  border-color: gray !important;
  91.  outline-color: gray !important;
  92.  background-color: transparent !important;
  93. }
  94.  
  95. #VideoHowTo
  96. {
  97. width:0px;
  98. height: 100px;
  99. padding-left: 300px;
  100. background-color: transparent !important;
  101.  
  102. }
  103.  
  104. h1,h2,th, li.linksTitle a,
  105. td span[style="font-family:'Segoe UI',Verdana,Arial;font-size:1.385em;color:#5e5e5e;font-weight:bold;"],
  106. div dl dt span span a,
  107. div a,
  108. .HeaderContainerRefinement
  109. {
  110. color: #C0C0C0 !important;
  111. }
  112. h3,h4,.ResultDescription
  113. {
  114.  
  115. color: #A0A0A8 !important;
  116. }
  117. td
  118. {
  119. color: #A0A0A8 !important;
  120. }
  121. #rcA
  122. {
  123. color: #707070 !important;
  124. }
  125. /* code editor-like colors */
  126.  
  127.  
  128. pre
  129. {
  130. color: rgb(214,222,212) !important;
  131. font-family: terminal !important;
  132. font-weight: normal !important;
  133. font-style: normal !important;
  134. }
  135. /*COMMENT*/
  136. pre span[style="color:Green;"]
  137. {
  138. color: lime !important;
  139. }
  140.  
  141. pre span[style="color:Blue;"]
  142. {
  143. color: cyan !important;
  144. }
  145.  
  146. pre span[style="color:#A31515;"]
  147. {
  148. color: rgb(70,222,230)!important;
  149. background-color: rgb(37,71,70)!important;
  150. }
  151. /*
  152. unfortunately, the syntax highlighting in the code container tabs
  153. is somewhat limited. There's no way to change the colors of some of
  154. the elements (like identifiers, operators, numbers, etc) So until
  155. CSS adds the ability to modify content better than it does now, this
  156. will have to suffice
  157.  
  158. and finally, the little tag on the code container and the borders
  159.  
  160. */
  161.  
  162. div.codeSnippetContainerTabs>div>a
  163. {
  164. color: #34c6f3 !important;
  165. font-size: 12px;
  166. background-color: black !important;
  167. padding: 3px !important;
  168. padding-left: 8px !important;
  169. padding-right: 6px !important;
  170. border-radius: 10px !important;
  171. border: white 1px solid !important;
  172. font-weight: bold;
  173. text-shadow: 3px 3px 4px rgba(255,255,255,0.4);
  174. }
  175. div.codeSnippetContainerCodeContainer
  176. {
  177. border-radius: 10px !important;
  178. border-color: white !important;
  179. }
  180. div.FeedbackTitleContainer
  181. {
  182. color: silver !important;
  183. text-align: center;
  184. padding-top: 0px !important;
  185. padding-bottom: 6px !important;
  186. text-transform: uppercase !important;
  187. font-family: lucida console !important;
  188. font-size: x-small !important;
  189. }
  190. .BrandLogoImage.msdn
  191. {
  192. background-image: none !important;
  193. background-size: 136px 24px !important;
  194. }
  195. #SearchFlyoutContainer, #vsPanel
  196. {
  197. background: #252525 !important;
  198. color: white !important;
  199.  
  200. }
  201. #SearchFlyoutContainer div ul li
  202. {
  203. font-size: small !important;
  204. color: white !important;
  205. }
  206. #SearchFlyoutContainer div *
  207. {
  208. font-size: small !important;
  209. color: white !important;
  210. padding-right: 0px;
  211. text-shadow: gray 0 0 4px;
  212. }
  213.  
  214. #SearchFlyoutContainer a
  215. {
  216. color: white !important;
  217. font-size: x-small !important;
  218. text-transform: uppercase;
  219. text-shadow: gray 0 0 4px;
  220. }
  221. #SearchFlyoutContainer a:after
  222. {
  223. content: " This Flyout";
  224. }
  225. #feedBackImg
  226. {
  227. opacity: 0.55;
  228. }
  229. #FooterLogo, #FooterCopyright, #footerLeft
  230. {
  231. opacity: 0.50;
  232. }
  233. #HeaderSearchButton
  234. {
  235. /*disabled for the 2015 page
  236.   background-image: url("http://paradisim.uuuq.com/foldericons/find.png") !important;*/
  237. }
  238. .Divide
  239. {
  240. opacity: 1.0 !important;
  241. color: #999 !important;
  242.  
  243. }
  244.  
  245.  
  246. #contentFeedback,#contentFeedback *
  247. {
  248. border-style: none !important;
  249. color: #909090 !important;
  250. }
  251.  
  252. body script+script+script+div
  253. {
  254. border-radius: 10px;
  255. background-color: grey !important;
  256. color: black !important;
  257. }
  258.  
  259. .MetroButton
  260. {
  261. padding: 0px !important;
  262. margin: 0px !important;
  263. background-position: center !important;
  264. background-size: 19px !important;
  265. border: 1px white outset !important;
  266. border-radius: 5px;
  267. }
  268. .ResultMetaDataValue  { color: #bbb !important; }
  269. .ResultMetaDataName  { color: #999 !important; }
  270. .ResultUrl { color: #888 !important; }
  271.  
  272. body script+script+script+div img
  273. {
  274. border-radius: 10px;
  275. }
  276. body script+script+script+div a
  277. {
  278. color: gray !important;
  279. font-size: small !important;
  280. }
  281. #static
  282. {
  283. background-attachment: local !important;
  284. /*disabled for the 2015 page
  285.   background: url("http://paradisim.uuuq.com/foldericons/server.png") 2px 2px !important; */
  286.  
  287.  
  288. }
  289.  
  290.  #shell-header,
  291.  .shell-header-nav,
  292.  .shell-header-dropdown-tab,
  293.  .shell-header-dropdown-tab-label,
  294.  .shell-header,
  295. span.LW_CollapsibleArea_Title
  296. {
  297. color: #aeaeae !important;
  298. }
  299.  
  300. span.cl_CollapsibleArea_collapsing
  301. {
  302. /*disabled for the 2015 page
  303.   background-image: url("http://paradisim.uuuq.com/foldericons/Minus Red Button.png") !important; */
  304. background-size: 16px !important;
  305. background-position: center !important;
  306. width: 16px !important;
  307. height: 16px !important;
  308. opacity: 0.5;
  309. }
  310.  
  311. span.cl_CollapsibleArea_expanding
  312. {
  313. /*disabled for the 2015 page
  314.   background-image: url("http://paradisim.uuuq.com/foldericons/Add Green Button.png") !important; */
  315. background-size: 16px !important;
  316. background-position: center !important;
  317. width: 16px !important;
  318. height: 16px !important;
  319. opacity: 0.5;
  320. }
  321.  
  322. /**HIDDEN OBJECTS**/
  323.  
  324. .ResultStatusIcon
  325. {
  326. display: none !important;
  327. }
  328.  
  329. }
  330.  

Saludos!


« Última modificación: 27 Octubre 2015, 13:22 pm por #!drvy » En línea



#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Ayuda para personalizar este CSS
« Respuesta #1 en: 23 Octubre 2015, 12:52 pm »

Lo que buscas es la propiedad div.codeSnippetContainerCodeContainer, linea 175 del código que has puesto.

Ahora mismo estaria asi:
Código
  1. div.codeSnippetContainerCodeContainer
  2. {
  3. border-radius: 10px !important;
  4. border-color: white !important;
  5. }

Solo tienes que aplicarle un background: #elcolor !important;

Saludos


En línea

Eleкtro
Ex-Staff
*
Desconectado Desconectado

Mensajes: 9.885



Ver Perfil
Re: Ayuda para personalizar este CSS
« Respuesta #2 en: 23 Octubre 2015, 21:18 pm »

Lo que buscas es la propiedad div.codeSnippetContainerCodeContainer, linea 175 del código que has puesto.

Solo tienes que aplicarle un background: #elcolor !important;

Muxas gracias #!drvy, todavía no lo he probado pero confio en que funcionará xD.

PD: Mis dotes de CSS son muy tristes, pero al menos la intuición no me falló ...del todo.

Saludos!
En línea



Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[RESUELTO] Ayuda Para crear password con oportunidades limitadas..
Programación Visual Basic
BorecK 4 2,848 Último mensaje 5 Diciembre 2006, 03:53 am
por BorecK
Ayuda para Validar W3C una Web. (RESUELTO)
Desarrollo Web
MA40 4 4,832 Último mensaje 15 Octubre 2010, 11:46 am
por MA40
Problemas complilando (sin que el código esté mal) [edito: Resuelto]
Java
w_kats 0 2,504 Último mensaje 24 Octubre 2011, 02:54 am
por w_kats
[Resuelto] Una mano en este caso de ficheros
Programación C/C++
++c 2 1,975 Último mensaje 25 Agosto 2014, 00:09 am
por ++c
Cómo personalizar las carpetas de “Este equipo” en Windows 10
Noticias
wolfbcn 0 1,049 Último mensaje 24 Febrero 2016, 21:43 pm
por wolfbcn
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines