Как изменить стиль модуля "Популярные новости"?

Доброго времени суток всем, подскажите пожалуйста как изменить внешний вид отображения модуля "Последние новости"? но есть задать им другой цвет ссылок, шрифт, границы..

Пыталась изменять в template_css.css

.mostread ul {
font:9px verdana, sans-serif;} /*Format fьr die "Beliebtesten Beitrдge" Liste, default ist
"Beliebteste Beitrдge" user2-Modul*/

.mostread li {
font:9px verdana, sans-serif;
color:#6E7045;
border-left:0px solid #6E7045;
padding:5px 0px 0px 5px;}

Но это никак не отобразилось на внешнем виде новостей на сайте((

Может нужно где-то еще прописать изменения?

 

первое какая версия джумлы 1.5.х или 1.0.х?

 

Жустина у меня, следовательно 1.0.х

 

Ну подскажите, а?

 

Ирина Ревин, дайте ссылку на сайт. У меня под рукой нет этого модуля

На вскидку, чтобы изменить внешний вид всего модуля, нужно в настройках модуля присвоить ему css-суффикс, скажем -read
Затем добавить в css:
table.modultable-read{
пишем тут что хотим
}
table.modultable-read a{
стиль для ссылок
}
table.modultable-read ul li{
стиль списка
}

 

вот ССЫЛКА

эээ.. а как именно это сделать?)

 

туда вставляй -read
а в своей таблице стилей в templates/тво_шаблон/CSS/template_css.css
пропиши

Код (CODE):

1. table.modultable-read{
2. пишем тут что хотим
3. }
4. table.modultable-read a{
5. стиль для ссылок
6. }
7. table.modultable-read ul li{
8. стиль списка
9. }

где по русски там свои значения выставишь

 

А в какое место именно прописывать данные значения?
Или не имеет значения?

Вот код моего template_css

Код (CODE):

1. html {background: url(../images/bg.gif);}
2.  
3. body {
4. color:black;
5. padding:206px 25px 0px 26px;
6. margin:0;
7. font:13px verdana, sans-serif;
8. background: repeat-y center top;
9. background: url(../images/bg-top.gif) repeat-x;
10. }
11. html>body { font:13px verdana, sans-serif; padding:206px 29px 0px 26px; }  
12. /* Allgemeine Einstellugen fьr das ganze Template*/
13.  
14. #menulinks {
15. width:120px;
16. border-left: 1px solid #A69D95;
17. background: url(../images/bg-navi.gif) repeat-x; padding:8px 88px 0 10px;
18. float:left;
19. }
20. html>body div#menulinks  { padding:8px 88px 0 10px; width:120px;}
21.  
22. #menurechts {
23. float:right;
24. width:120px;
25. border-right: 1px solid #A69D95;}
26.  
27. #top_menue {
28. border-top:1px solid #FFFFFF;
29. background: #DCD7D4 url(../images/bg-topmenu.gif) repeat-x;}
30.  
31. .div_topmenue {
32. padding-top:12px;
33. padding-left:12px;
34. vertical-align:left;
35. text-align:left;
36. width:570px;
37. height:30px;
38. border-left:1px solid #A69D95;
39. border-right:1px solid #A69D95;}
40. html>body .div_topmenue { height:30px; padding-top:10px;}
41.  
42. #content {
43. color:black;
44. background:#ededed;
45. margin:0 157px 0 219px;
46. border-left: 1px solid #A69D95;
47. border-right: 1px solid #A69D95;
48. padding:0px 0px 0px 0px;}
49.  
50. #content h2 {
51. margin:0 0 10px 0;
52. padding:2px 0 2px 5px;
53. font:bold 16px verdana, sans-serif;
54. border-left:10px solid #bcbcbc;
55. border-bottom:1px solid #bcbcbc;}
56.  
57. #content h3 {
58. margin:25px 0 10px 0;
59. padding:2px 0 2px 5px;
60. font:bold 14px verdana, sans-serif;
61. border-left:8px solid #bcbcbc;
62. border-bottom:1px solid #bcbcbc;}
63.  
64. #content h4 {
65. margin:25px 0 10px 0;
66. padding:2px 0 2px 5px;
67. font:bold 12px verdana, sans-serif;
68. border-left:6px solid #bcbcbc;
69. border-bottom:1px solid #bcbcbc;}
70.  
71. #menurechts {
72. float:right;
73. width:120px;
74. border-right: 1px solid #A69D95;}
75.  
76. #menurechts ul {
77. margin:0px;
78. padding:30px 0 0 0px;
79. list-style:none;}
80.  
81. #menurechts li {
82. padding:0 0 5px 0;
83. margin:0;}
84.  
85. #menurechts a {
86. color:black;
87. background:#e1e1e1;
88. padding:2px 20px 2px 20px;
89. border:1px solid black;
90. font:bold 12px verdana, sans-serif;
91. text-decoration:none;
92. text-align:center;}
93.  
94. #menurechts a:hover {
95. color:white;background:#9a9a9a;}
96.  
97. .div_newsflash {
98. height:150px;
99. width:140px;
100. margin:auto;
101. padding-top:5px;
102. padding-bottom:5px;
103. padding-right:5px;
104. text-align:left;
105. font:11px arial, trebuchet mssans-serif; font-weight:normal;}
106. html>body .div_newsflash { margin-left:-27px;}
107.  
108. .div_newsflash h3 {
109. color:#123456;
110. margin:0;
111. padding:0;
112. line-height:100%;
113. font:11px arial, trebuchet mssans-serif; font-weight:normal;}
114.  
115. a:link {font-family:arial, trebuchet ms; font-size:11px; color:#497EA8;
116. text-decoration:none; font-weight:bold;} /* Link-Styl fьr das ganze Template*/
117. a:visited {font-family:arial, trebuchet ms; font-size:11px; color:#497EA8;
118. text-decoration:none; font-weight:bold;} /* Besuchter Link-Styl fьr das ganze Template*/
119. a:active {font-family:arial, trebuchet ms; font-size:11px; color:#497EA8;
120. text-decoration:none; font-weight:bold;} /* Aktiver Link-Styl fьr das ganze Template*/
121. a:hover {font-family:arial, trebuchet ms; font-size:11px; color:#B20000;
122. text-decoration:none; font-weight:bold; border-bottom-width:1px;
123. border-bottom-style:solid;} /* Angewдhlter Link-Styl fьr das ganze Template*/
124.  
125. /* FORMULAR EINSTELLUGEN */
126. .button {font-family:arial, trebuchet ms; font-size:12px; color:#497EA8;
127. text-decoration:none; font-weight:bold;}
128. .inputbox {font-family:arial, trebuchet ms; font-size:10px; color:#497EA8;
129. text-decoration:none; font-weight:bold;}
130. .search {font-family:arial, trebuchet ms; font-size:12px; color:#B90000;
131. text-decoration:none; font-weight:bold;}
132.  
133. ul#mainlevel-nav {
134. margin:0;
135. margin-left:-10px;
136. padding:0;}
137.  
138. ul#mainlevel-nav li {
139. list-style: none;
140. display:inline;
141. background:url(../images/top_menue_trennbalken.gif) right no-repeat;
142. padding:0px 10px 0px 10px;}
143.  
144. ul#mainlevel-nav li a {
145. color:#FFFFFF;
146. font-weight:bold;}
147.  
148. #mainlevel-nav a:hover {font-family:arial, trebuchet ms; font-size:10px; color:#C6E400;}
149. a.sublevel {font-family:arial, trebuchet ms; font-size:10px; color:#C6E400;}
150. /* Einstellungen fьr Elemente im Hauptmenь, die ein ьbergeordnetes Element haben */
151.  
152. a.readon:link {
153. font:10px verdana, sans-serif;
154. color:#B60000;
155. border-left:1px solid #B60000;
156. padding:5px 0px 0px 5px;} /*Fromat fьr den "Read More" Link*/
157.  
158. a.readon:hover {
159. font:10px verdana, sans-serif;
160. color:#B60000;
161. border-left:1px solid #B60000;
162. padding:5px 0px 0px 5px;}
163.  
164. a.readon:visited {
165. font:10px verdana, sans-serif;
166. color:#B60000;
167. border-left:1px solid #B60000;
168. padding:5px 0px 0px 5px;}
169.  
170. .latestnews ul {
171. font:10px verdana, sans-serif;
172. color:#CFD383;
173. border-left:1px solid #CFD383;
174. padding:5px 0px 0px 5px;} /*Format fьr die "Letzte Beitrдge" Liste, default ist "Letzte
175. Beitrдge" user1-Modul*/
176.  
177. .latestnews li {
178. font:10px verdana, sans-serif;
179. color:#EDEDED;
180. border-left:1px solid #CFD383;
181. padding:5px 0px 0px 5px;}
182.  
183. .mostread ul {
184. font:9px verdana, sans-serif;} /*Format fьr die "Beliebtesten Beitrдge" Liste, default ist
185. "Beliebteste Beitrдge" user2-Modul*/
186.  
187. .mostread li {
188. font:9px verdana, sans-serif;
189. color:#6E7045;
190. border-left:0px solid #6E7045;
191. padding:5px 0px 0px 5px;}
192.  
193. /* SEITENINHALT EINSTELLUGEN */
194. a.category:link {
195. font:10px verdana, sans-serif;
196. color:#B60000;}
197.  
198. a.category:hover {
199. font:10px verdana, sans-serif;
200. color:#B60000;}
201.  
202. a.category:visited {
203. font:10px verdana, sans-serif;
204. color:#B60000;}
205.  
206. .blogsection {
207. font:10px verdana, sans-serif;
208. color:#B60000;} /* Format fьr Links in Blog-Sektion */
209.  
210. .blog_more {
211. font:10px verdana, sans-serif;
212. color:#B60000;} /* Format fьr "More" Text in Blog-Sektion*/
213.  
214. a.blogsection:link {
215. font:10px verdana, sans-serif;
216. color:#B60000;} /* Format Link */
217.  
218. a.blogsection:visited {
219. font:10px verdana, sans-serif;
220. color:#B60000;} /* Format besuchter Link */
221.  
222. a.blogsection:hover {
223. font:10px verdana, sans-serif;
224. color:#B60000;} /* Format Link, auf dem der Mauszeiger steht */
225.  
226. .componentheading {
227. font:15px trebuchet ms,arial, sans-serif;
228. font-weight:bold;
229. background: #EDEDED;
230. color:#000000;
231. padding:1px 0px 0px 0px;
232. height:49px;
233. width:545px;
234. background: #DCD7D4 url(../images/bg-componentheading.gif);} /* Format des Titel der
235. Komponente */
236.  
237. .contentheading {
238. font:13px verdana, sans-serif;
239. color:#999900;
240. text-decoration:none;
241. font-weight:bold;} /* Format des Titel des Inhalts*/
242.  
243. .contentpane {
244. font:11px trebuchet ms,arial, sans-serif;
245. font-weight:normal;
246. padding:5px;
247. background: #EDEDED;}
248.  
249. .contentpaneopen {
250. font:11px trebuchet ms,arial, sans-serif;
251. font-weight:normal;
252. border-bottom:1px dotted;
253. border-color:#A69D95;
254. margin:5px 10px 5px 5px;} /* Tabelle die den aktuellen Text eines Artikels hat */
255.  
256. .contentpagetitle {
257. font:11px trebuchet ms,arial, sans-serif;
258. font-weight:normal;
259. padding:5px;
260. background: #EDEDED;} /*Titel eines Artikel */
261.  
262. a.contentpagetitle:hover {
263. font:11px trebuchet ms,arial, sans-serif;
264. font-weight:normal;
265. padding:5px;
266. background: #EDEDED;} /*Titel eines Artikels, wenn er eni Link ist */
267.  
268. a.contentpagetitle:link {
269. font:11px trebuchet ms,arial, sans-serif;
270. font-weight:normal;
271. padding:5px;
272. background: #EDEDED;}
273.  
274. a.contentpagetitle:visited {font:11px trebuchet ms,arial, sans-serif;
275. font-weight:normal;
276. padding:5px;
277. background: #EDEDED;}
278.  
279. .contentdescription {font:11px trebuchet ms,arial, sans-serif;
280. font-weight:normal;
281. padding:5px;
282. background: #EDEDED;} /* Format von "DESCRIPTION" von Sektionen und Kategorien */
283.  
284. table.contenttoc {font:11px trebuchet ms,arial, sans-serif;
285. font-weight:normal;
286. padding:5px;
287. background: #EDEDED;} /* Format fьr die Tabelle einer Tabelle mit mehreren Inhalten oder
288. Artikel */
289.  
290. table.contenttoc td {font:11px trebuchet ms,arial, sans-serif;
291. font-weight:normal;
292. padding:5px;
293. background: #EDEDED;}
294.  
295. table.contenttoc th {font:11px trebuchet ms,arial, sans-serif;
296. font-weight:normal;
297. padding:5px;
298. background: #EDEDED;}
299.  
300. table.contenttoc td.toclink {font:11px trebuchet ms,arial, sans-serif;
301. font-weight:normal;
302. padding:5px;
303. background: #EDEDED;}
304.  
305. a.toclink:link {font:11px trebuchet ms,arial, sans-serif;
306. font-weight:normal;
307. padding:5px;
308. background: #EDEDED;}
309.  
310. a.toclink:visited {font:11px trebuchet ms,arial, sans-serif;
311. font-weight:normal;
312. padding:5px;
313. background: #EDEDED;}
314.  
315. a.toclink:hover {font:11px trebuchet ms,arial, sans-serif;
316. font-weight:normal;
317. padding:5px;
318. background: #EDEDED;}
319.  
320. /* JOOMLA! SEKTION LISTE EINSTELLUNG*/
321. .sectiontableheader {
322. font:11px trebuchet ms,arial, sans-serif;
323. font-weight:bold;
324. padding:5px;} /* Format fьr die Liste der Sektione */
325.  
326. .sectiontableentry1 {
327. font:11px trebuchet ms,arial, sans-serif;
328. font-weight:normal;
329. padding:5px;}
330.  
331. .sectiontableentry2 {font:11px trebuchet ms,arial, sans-serif;
332. font-weight:normal;
333. padding:5px;}
334.  
335. /* JOOMLA! ODUL EINSTELLUNG */
336. table.moduletable {
337. margin-top:5px;
338. border-width:medium;
339. border-color:#000000;
340. border-style:double;
341. padding:4px;
342. width:120px;} /* Format der Modul-Tabelle */
343. table.moduletable th { background-color:#CCCCCC;} /* Format der Modulьberschrift und
344. Modulttitel */
345. table.moduletable td { background-color:#FFFFFF;} /* Format der Zellern der Tabelle der
346. Module */
347.  
348.  
349. /* VERSCHIEDENE EINSTELLUGEN */
350. /* Datum, Autor*/
351. .createdate {font-family:arial, trebuchet ms; font-size:10px;color:#B60000;} /*Format fьr
352. Datum und Autor */
353. .modifydate {font-family:arial, trebuchet ms; font-size:10px;color:#123456;} /* Format fьr
354. "Last updated on" */
355. .small {font-family:arial, trebuchet ms; font-size:10px;color:#123456;} /* Format fьr
356. "Written by:...." */
357. .smalldark {font-family:arial, trebuchet ms; font-size:10px;color:#B60000;} /* Formatfьr
358. Umfrageergebnisseite, fьr " Number of Voters" */
359.  
360. /* Umfrage */
361. .poll {font:11px trebuchet ms,arial, sans-serif; font-weight:normal; padding:5px;
362. background: #EDEDED;} /* Format fьr td der Umfragetabelle */
363. .pollstableborder {font:11px trebuchet ms,arial, sans-serif; font-weight:normal;
364. padding:5px; background: #EDEDED;} /* Eigenschaften der Umfragetabelle */
365.  
366. /* Weblinks */
367. .weblinks{font:11px trebuchet ms,arial, sans-serif; font-weight:normal; padding:5px;
368. background: #EDEDED;}
369. a.weblinks:hover {font:11px trebuchet ms,arial, sans-serif; font-weight:normal; padding:5px;
370. background: #EDEDED;}
371.  
372. /* Newsfeeds */
373. .newsfeedheading {font:11px trebuchet ms,arial, sans-serif; font-weight:normal; padding:5px;
374. background: #EDEDED;} /* Format des Newsfeed Titels */
375. .newsfeeddate {font:11px trebuchet ms,arial, sans-serif; font-weight:normal; padding:5px;
376. background: #EDEDED;} /* Datum des Newsfeed */
377. .fase4rdf {font:11px trebuchet ms,arial, sans-serif; font-weight:normal; padding:5px;
378. background: #EDEDED;} /* Format des Inhalts des Newsfeed */
379.  
380. /* Suche */
381. table.searchintro {font:11px trebuchet ms,arial, sans-serif; font-weight:normal;
382. padding:5px; background: #EDEDED;} /* Format fьr "Search Keyword: test returned 4 matches"
383. Box, die nach der Suche angezeigt wird. */
384.  
385. /* Grafik-Layer */
386.  
387. div.dd-head-suche {
388. position:absolute;
389. left:63px;
390. top:155px;
391. widht:100%;
392. height:100%;
393. color:black;
394. z-index: 900;}
395.  
396. div.dd-head-02 {
397. position:absolute;
398. left:26px;
399. top:0px;
400. widht:219px;
401. height:130px;}
402.  
403. div.dd-head-03 {
404. position:absolute;
405. left:245px;
406. top:0px;
407. widht:303px;
408. height:130px;}
409.  
410. div.dd-head-04 {
411. position:absolute;
412. left:548px;
413. top:0px;
414. widht:274px;
415. height:130px;}
416.  
417. div.dd-head-05 {
418. position:absolute;
419. left:822px;
420. top:0px;
421. widht:157px;
422. height:164px;}
423.  
424. div.dd-head-07 {
425. position:absolute;
426. left:26px;
427. top:130px;
428. widht:219px;
429. height:35px;}
430.  
431. div.dd-head-08 {
432. position:absolute;
433. left:245px;
434. top:130px;
435. widht:303px;
436. height:35px;}
437.  
438. div.dd-head-09 {
439. position:absolute;
440. left:548px;
441. top:130px;
442. widht:274px;
443. height:35px;}
444.  
445. div.dd-head-10 {
446. position:absolute;
447. left:26px;
448. top:165px;
449. widht:219px;
450. height:41px;}
451.  
452. div.dd-head-11 {
453. position:absolute;
454. left:245px;
455. top:165px;
456. widht:100%;}
457.  
458. div.dd-head-16 {
459. position:absolute;
460. left:822px;
461. top:165px;
462. widht:156px;
463. height:45px;}
464.  
465. div.dd-head-021 {
466. position:absolute;
467. left:245px;
468. top:206px;}
469. html>body div.dd-head-021  {position:absolute; left:245px; top:207px;}
470.  
471.  
472. div.dd-head-latest {
473. position:absolute;
474. left:270px;
475. top:210px;
476. z-index: 800;}
477.  
478. div.dd-head-popular {
479. position:absolute;
480. left:530px;
481. top:230px;
482. z-index: 900;}
483.  
484. /* Format fьr Footer */
485. #footer {
486. position: relative;
487. background:#a8a8a8;
488. background: url(../images/foot_bg.gif) repeat-x;height:80px;
489. padding:0;
490. margin:0;
491. border-top:0px solid black;
492. font:10px verdana, sans-serif;
493. }

 

Ирина Ревин, в конец css допишите и все. После всего

 

Все сделала как сказали... но ничего не изменилось((


Но я тут заметила одну вещь..
Если менять место отображения модуля на сайте.. например с топ на лефт.. то меняется и его визуальный стиль! Следовательно не в настройках стиля модуля дело... а настройках позиций самого шаблона(((

Где искать то эти настройки, а??? Как поменять?!

 

подскажите..

 

посмотрите в файле index как называется контейнер div в котором выводится модуль left или right например. а потом в стилях css ищите это название. и там уже меняйте. и все это в папке с шаблоном.

 

У меня модуль выводится в позиции top
Нашла в index.php шаблона вот эти значения:
<div class="div_newsflash">
<?php mosLoadModules ( 'top', -3 );?>

потом в template_css шаблона нашла
.div_newsflash {
height:150px;
width:140px;
margin:auto;
padding-top:0px;
padding-bottom:0px;
padding-right:5px;
text-align:left;
font:7px arial, trebuchet mssans-serif; font-weight:normal;}
html>body .div_newsflash { margin-left:-27px;}

.div_newsflash h3 {
color:#123456;
margin:0;
padding:0;
line-height:100%;
font:7px arial, trebuchet mssans-serif; font-weight:normal;}

но изменения этих значений также никак не отобразились внешне на сайте(((

 

кеширование сайта выключено?

 

Ура!!! Нашла я значения которые отвечают за стиль отображение данной позиции!!!!

Вот они:
#menurechts {
float:center;
width:120px;
border-right: 0px normal #A691111;}

#menurechts ul {
margin:8px;
padding:5px 1 1 5px;
list-style:none;}

#menurechts li {
padding:5 5 5px 1;
margin:10;}

#menurechts a {
color:black;
background:#e1e1e1;
padding:5px 20px 5px 20px;
border:0px solid black;
font:bold 9px verdana, sans-serif;
text-decoration:none;
text-align:center;}

теперь нужно найти как уладить саму проблему.. а состоит она в том.. что отображающиеся "популярные" наезжают одна на другую.. вот как на скрине:


Подскажите, что нужно подправить чтобы между статьями появилось достаточный интервал?