Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 11.03.2013
Сообщений: 2
1

Изменение стилей

08.06.2013, 19:35. Показов 1676. Ответов 3
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
Доброго всем времени суток.

Собственно, есть следующая тема для WP: http://demo.wpzoom.com/photoria/

Очень хотелось бы узнать, где в прикрепленном файле стилей нужно внести изменения для того, чтобы:
1)при наведении на пункт меню, он становился кликабельным целиком
(т.е. таким, как подпункты меню из выпадающего списка)
2)аналогичный вопрос о записях под слайдером
(т.е. при наведении запись становится кликабельной полностью)
3)и еще один вопрос по поводу записей:
как изменить размер и положение фотоминиатюры внутри записи

Кликните здесь для просмотра всего текста
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
/*********************************************************************************************
 
Theme Name: Photoria
Theme URI: [url]http://www.wpzoom.com/themes/photoria[/url]
Version: 2.0.2
Author: WPZOOM
Author URI: [url]http://www.wpzoom.com[/url]
License: GNU General Public License v2.0
License URI: [url]http://www.gnu.org/licenses/gpl-2.0.html[/url]
 
The PHP code portions of this WPZOOM theme are subject to the GNU General Public 
License, version 2. All images, cascading style sheets, and JavaScript elements are
released under the WPZOOM Proprietary Use License below.
 
**********************************************************************************************
 
WARNING! DO NOT EDIT THIS FILE!
 
To make it easy to update your theme, you should not edit the styles in this file. Instead use 
the custom.css file to add your styles. You can copy a style from this file and paste it in 
custom.css and it will override the style in this file.
 
**********************************************************************************************/
 
 
html, body, div, h1, h2, h3, ul, ol, li, form, fieldset,  
input, textarea {margin: 0; padding: 0; font-size: 100%;}  
ul {list-style: none;}  
img, fieldset {border: 0;}
em {font-style: italic;}
strong {font-weight: bold;}
 
body {font-family: Arial, Helvetica, Tahoma, sans-serif; font-size: 62.5%; text-align:center; background-color: #16151a; color: #DFDFE0; }
a {text-decoration:none; color: #55bbcc; }
a:hover {text-decoration:underline; }
a:active {outline:none;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; margin:0; padding:0; color: #fff; }
p {margin: 0 0 16px; }
.aligncenter,div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 10px 15px 5px 0; }
.alignright { float: right; margin: 10px 0 8px 20px; }
.clear { clear: both; }
.floatleft,.more_left { float: left; }
.floatright { float: right; }
 
input { padding:5px; margin-right:4px;}
 
#container {width:100%; min-height: 200px; margin: 0 auto; text-align:center; font-size: 13px; line-height: 1.5; }
#container div.wrapper {margin: 0 auto; width: 950px; text-align: left; padding: 0; }
#container div.cleaner {clear: both; font-size:1px; height: 1px; margin:0; line-height: 1px; }
#container div.sep {font-size:1px; height: 1px; margin:0; line-height: 1px; margin: 2px 0; border-bottom: dotted 1px #58626a; }
 
#header {padding: 20px 0; border-bottom: solid 2px #58626a; margin: 25px 0 15px; }
#logo {float: left; display: inline; }
#logo h1 a { font-size: 50px; font-family: 'Lato', Arial, sans-serif; font-weight: bold; text-transform: uppercase; color:#fff; }
 
#nav {display: inline-block; margin: 20px 0 0; float: right; }
#nav li {float: left; display: inline; font-size: 16px; font-weight: bold; padding: 6px 12px; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
#nav li:hover {background-color: #58626a; }
#nav a {color: #fff; text-decoration: none; text-shadow: #185177 1px 1px 0; }
#nav li li {padding: 3px 0; line-height: 20px; font-size: 12px; font-weight: normal; }
#nav li.current-menu-item {background-color: #58626a; }
 
#menu {position:relative; z-index:200; }
#menu li li{margin-right: 0; border-left: none; }
 
.downarrowclass {   background:url(images/down.png) no-repeat center; padding:5px 12px;}
.rightarrowclass {background:url(images/right.png) no-repeat center right;  padding: 10px;  position:absolute; right:10px;  }
 
/*Top level list items*/
.dropdown ul li{position: relative; display: inline; margin-right: 0; }
/*Top level menu link items style*/
.dropdown ul li a{text-decoration: none; }
* html .dropdown ul li a{ /*IE6 hack to get sub menu links to behave correctly*/ display: inline-block; }
 
/*1st sub level menu*/
.dropdown ul li ul {position: absolute; left: 0; display: block; visibility: hidden; z-index:100; background:#333; text-align:left; margin:0; -moz-border-radius: 15px; -khtml-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.dropdown ul li ul li ul{top: 0;}
/* Sub level menu links style */
.dropdown ul li ul li a {width: 160px; padding: 5px 10px; margin: 0; border-top-width: 0; color:#fff; text-transform:none; display:block; }
.dropdown ul li ul li:last-child a, .dropdown ul li ul li:last-child a:hover {border:none;}
.dropdown ul li ul li a:hover { color:#000; }
 
#featPosts {margin-bottom: 10px; width: 950px; position:relative; position:relative; clear:both; }
#featPostsBig {min-height: 400px; }
#featPostsBig div.cover {}
 
/* Required */
.container { overflow:hidden; position:relative; }
.slides_container { position:absolute; top:0; left:0; }
.slides_container li.slide { position:absolute; top:0; width:950px; min-height: 400px; display:none; }
.postcontent { height:100%; overflow:hidden;}
        /* Optional */
 
#featPosts a.prev { position: absolute; top: 38%; left: -5px; }
#featPosts a.next { position: absolute; top: 38%; right: -5px; }
#featPosts a.browse { position: absolute; width: 44px; height: 82px; display: block; cursor: pointer; font-size: 1px; z-index: 99; text-indent: -2000px; background: url("https://www.cyberforum.ru/images/arrows.png") no-repeat 0 0; outline:none; border:none;}
#featPosts a.prev { background-position: 0 -83px; right: 15px; }
#featPosts a.prev:hover { background-position: 0 0; }
#featPosts a.next { background-position: -45px -83px; }
#featPosts a.next:hover { background-position: -45px 0; }
 
/* Main */
#main {float: left; display: inline; width: 630px; margin-right: 20px; }
 
#content {margin-top: 20px; }
#content ul.posts {margin: 15px 0 15px 0; }
#content ul.posts li {position: relative; float: left; display: inline; margin-right: 10px; width: 300px; padding: 5px; }
#content ul.posts li a {color:#fff;}
#content ul.posts li.last {margin-right: 0; }
#content ul.posts h2 {margin: 10px 0; font-size: 14px; line-height: 1.3; font-weight: bold; display: block; padding-bottom: 6px; border-bottom: solid 2px #58626a; }
#content ul.posts img {margin: 1px 0 10px; }
#content ul.posts li:hover {background-color: #5eacc5; color: #fff; -moz-border-radius: 7px; -khtml-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px;  }
#content ul.posts li:hover h2   {border-bottom-color: #fff; }
#content ul.posts li:hover h2 a { color:#fff;}
 
#content h1   {font-size: 32px; font-weight: bold; letter-spacing: -1px; line-height: 1.3; margin-bottom: 10px; color:#fff;}
#content h1 a {font-size: 32px; font-weight: bold; letter-spacing: -1px; line-height: 1.3; margin-bottom: 10px; color:#fff;}
.postcontent h2, .postcontent h3, .postcontent h4, .postcontent h5, .postcontent h6 {font-weight: bold; margin-bottom: 12px; } 
#container .postcontent h2 {font-size: 28px; line-height: 30px; }
#container .postcontent h3 {font-size: 26px; line-height: 30px; }
.postcontent h4 {font-size: 24px; line-height: 28px; }
.postcontent h5 {font-size: 20px; line-height: 24px; }
.postcontent h6 {font-size: 18px; line-height: 22px; }
.postcontent p {margin-bottom: 14px; }
.postcontent p img {margin-bottom: 10px;}
.postcontent ul, .postcontent ol {margin: 0 0 14px 14px; }
.postcontent li ul, .postcontent li ol {margin-bottom: 0; }
.postcontent li {list-style-position: inside;} 
.postcontent ul li {list-style-type: square;}
.postcontent ol li {list-style-type: decimal;}
.postcontent blockquote {font-style: italic; font-size: 18px; line-height: 24px; border-left: solid 5px #444; padding-left: 20px; margin-left: 20px; }
.postcontent .alignleft { float: left; margin: 10px 15px 10px 0; }
.postcontent .alignright { float: right; margin: 10px 0px 10px 15px; }
 
.attachment { margin: 1em 0 }
.wp-caption-text, .gallery-caption { color: #999; text-align: center; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 11px; }
 
.postcontent .gallery .gallery-item  {display: -moz-inline-stack; display: inline-block; vertical-align: top; zoom: 1; *display: inline; margin:10px;   }
.postcontent .gallery .gallery-item img { border: solid 5px #fff; }
.postcontent .gallery .gallery-item img:hover {border-color: #55bbcc;}
.postcontent .gallery { margin: auto; text-align:center; clear:both; }
.postcontent .gallery-caption { margin-left: 0; }
 
h2.title {font-size: 18px; font-weight: bold; margin-top: 25px; padding-bottom: 6px; border-bottom: solid 2px #58626a; }
 
/* Comments */
#content ol.normalComments {clear: left; padding: 1em 0; margin:0; }
#content ol.normalComments div.comment-body {position: relative; }
#content ol.normalComments div.reply {position: absolute; top: 0; right: 0; }
#content ol.normalComments li {clear: left; list-style-type: none; margin: 0 0 1em; padding: 10px 15px 5px 0; font-size: 11px; line-height: 16px; min-height: 80px; }
#content ol.normalComments li ul.children {padding: 10px 0 0; }
#content ol.normalComments li ul.children li {clear: left; margin: 0 10px 10px 10px; }
#content ol.normalComments li p {margin-bottom: 10px; line-height: 18px; overflow:hidden;}
 
#content ol.normalComments img.avatar { float: left; display: inline; margin: 0 15px 20px 0; }
#content ol.normalComments cite {font-size: 14px; line-height: 18px; font-weight: bold; font-style: normal; float: left; display: inline; margin-right: 10px;  }
#content ol.normalComments .commentmetadata {line-height: 18px; font-size: 11px; margin-bottom: 5px; }
#content ol.normalComments blockquote {font-size: 12px; line-height: 18px; }
#content ol.normalComments span.says {display: none; }
 
.reply a, .cancel-comment-reply a { padding: 2px 5px; margin-bottom: 5px; font-weight: normal; font-size: 11px; }
.reply a:hover, .cancel-comment-reply a:hover { text-decoration: none; }
 
#respond {clear: left;}
.cancel-comment-reply {margin: 10px 0 5px; }
 
#commentform {margin-top: 15px; clear: left; }
#commentform code {font-size: 11px; }
#commentform p {margin: 0 0 5px; font-size: 12px;}
#commentform #formLabels {float: left; display: block; width: 55%; }
#commentform #formContent {float: left; display: block; width: 75%;  }
#commentform label {text-align: left; font-weight:bold; line-height: 2.0em; font-size: 11px; display: block; text-transform: uppercase; }
#commentform input {width: 90%; padding: 8px 0 8px 7px; font-size: 14px; margin-bottom: 10px; }
#commentform textarea { width: 100%; height: 130px; padding: 4px; margin-bottom: 10px; font-size: 14px; line-height: 20px;  }
#commentspost p {font-size: 12px; line-height: 24px;}
 
#content label, #commentform label {font-weight:bold; line-height: 2.0em; font-size: 11px; display: block; text-transform: uppercase; }
#content #submit, #commentform #submit {background:none; font-size: 14px; padding: 5px 7px; width: auto; cursor: pointer; }
 
#content ol.normalComments img.avatar {}
#content #submit, #commentform #submit {background:none; background-color: #55bbcc; color: #fff; border: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 6px 15px; font-weight:bold; font-family:Arial;}
#content #submit:hover, #commentform #submit:hover {background-color: #444; }
 
/* Comments */
#content ol.normalComments .reply a, #content .cancel-comment-reply a { color: #4da5b4; }
#content ol.normalComments .reply a:hover, #content .cancel-comment-reply a:hover {color: #fff; }
 
#content ol.normalComments a {color: #58626a; }
#content ol.normalComments cite, #content ol.normalComments cite a {color: #4da5b4; }
#content .normalComments li.comment {color: #DEDEDE; border-bottom: dotted 1px #58626a; margin-bottom: 0; }
#content .normalComments li.parent {border-bottom: none; }
#content .normalComments ul.children {padding-top: 10px; border-top: dotted 1px #58626a; }
#content input, #content textarea, #commentform input, #commentform textarea {background-color: #fff; color: #333; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: none; }
#content .content h2.title {clear: left; }
#content .postmetadata {margin: 0 0 10px; padding:0 0 10px; color: #999; border-bottom:1px dotted #474747; text-transform:uppercase; font-size:10px; display:block;}
#content .postmetadata a {color:#fff;}
 
/* Sidebar */
#sidebar {float: left; display: inline; width: 300px; margin-top: 20px; }
#sidebar .banner { margin:15px 0; }
#sidebar .widget {margin-bottom: 20px; font-size: 12px; line-height: 18px; }
#sidebar ul {margin: 0;}
#sidebar ul.posts {margin: 15px 0; }
#sidebar ul.posts li {padding: 0 0 10px; border-bottom: solid 1px #30343a; margin-bottom: 10px; }
#sidebar ul.posts div.cover img { vertical-align: bottom; }
#sidebar div.cover {float: left; display: inline; margin-right: 10px; }
#sidebar div.content {overflow: hidden;}
#sidebar p.postmetadata {margin: 0; color: #ABB0B5; }
ul.social {margin: 10px; }
 
ul.social li { display: inline; float:left; width: 130px; float: left; padding: 8px 0; line-height: 1.2; }
ul.social li a { font-size: 14px; font-weight: bold; }
ul.social li a span { color: #ABB0B5; font-size: 11px; display: block; font-weight: normal; font-family:Georgia; font-style:italic; }
ul.social img { float: left; margin-right: 7px; }
ul.social span {display: block; }
 
.sidebarLeft #main {float: right; margin-left: 20px; margin-right: 0;}
.sidebarLeft #sidebar {float: right; }
 
/* Footer */
#preFooter {margin: 35px 0; font-size:11px; }
#preFooter a {color:#55bbcc; }
#preFooter div.column {float: left; display: inline; width: 230px; margin-right: 10px; }
#preFooter div.last {margin-right: 0;}
#preFooter h2, #sidebar h2 {color: #DFDFE0; font-size: 14px; font-weight: bold; line-height: 20px; padding-bottom: 6px; border-bottom: solid 2px #30343a; margin-bottom: 12px; }
#preFooter .widget:hover h2 { border-bottom:2px solid #58626a; }
#footer {text-align: left; padding: 15px 0; border-top: solid 2px #58626a; color: #ccc; margin: 30px 0; }
#footer p {margin:0; line-height: 18px; font-size: 12px;  }
#footer a {color: #999;  }
#footer a:hover {color: #fff; text-decoration: underline; }
#footer p.wpzoom {float: right; display: inline; line-height: 16px; width: 249px; }
#footer p.wpzoom img {float: right; display: inline; margin: 0 0 0 5px; padding:0;}
#footer p.wpzoom a {color: #ccc; text-decoration: none;}
#footer p.wpzoom a:hover { }
 
div.navigation {margin-top: 10px; text-align: center; padding: 15px 0; border-top: solid 2px #58626a; border-bottom: solid 2px #58626a; }
.navigation a, .navigation span.current { color: #58626a; vertical-align: middle; padding: 5px 6px; text-transform: uppercase; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: none; }
.navigation a:hover { color: #fff; text-decoration: none; background: #58626a; }
.navigation a.next { position: static; }
.navigation span.current { color: #58626a; background: rgba(255, 255, 255, 0.1); }
 
 
/* WPZOOM Gallery Widget */
.widget #flickr_badge_wrapper {padding: 0; margin:0;}
.widget #flickr_badge_wrapper .flickr_badge_image {list-style-type: none; float: left; display: inline; padding:0; margin: 0 11px 11px; }
.widget #flickr_badge_wrapper .flickr_badge_image.last {margin-right: 0;}
.widget #flickr_badge_wrapper .flickr_badge_image img {padding: 1px; }
 
#preFooter .widget { margin:0 0 25px; }
#preFooter .widget #flickr_badge_wrapper .flickr_badge_image img { height: 63px; width: 63px; }
#preFooter .widget #flickr_badge_wrapper .flickr_badge_image {list-style-type: none; float: left; display: inline; padding:0; margin: 0 5px 11px; }
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
08.06.2013, 19:35
Ответы с готовыми решениями:

Изменение стилей инпутов
Как изменить стиль инпутов, таких как tyрe=number. Или <select>. интересуют стили именно стрелочек.

Изменение стилей iframe
Здравствуйте, такая ситуация. Через iFrame подгружаю информацию с чужого сайта, но вместе с этим...

Переключение radio и изменение стилей label
Доброго времени суток. Подскажите, пожалуйста, как можно реализовать переключение радио и...

Изменение стилей элементов с помощью hover
Доброй ночи. Есть следующий блок: <div class='main-block'> <div class='block-1'> ...

3
странник
810 / 481 / 108
Регистрация: 28.05.2012
Сообщений: 1,518
Записей в блоге: 2
08.06.2013, 20:00 2
если вы думаете, что ваши вопросы решаются с помощью пары символов - то это не так. Тут серьезно надо вмешиваться в код, и одного файла css не достаточно.
0
285 / 234 / 113
Регистрация: 08.06.2013
Сообщений: 725
08.06.2013, 21:11 3
Ну если коротко...
1) Можно обернуть ссылкой(<a href="url">блок вытаскивающий подменю</a>) блок вытаскивающий подменю, тогда он будет ссылкой полностью, у вас наверно сейчас наоборот, ссылка обернута блоком вытаскивающий меню. Или можно просто у ссылок меню увеличить padding'и, чтобы они были равны внешнему блоку.
2) По сути аналогично первому.
3) Размер можно изменить, задавая принудительно нужный размер изображению(например задать по ширине 30 пикселей <img href="img.jpg" width="30">), изменение положения margin'ами и padding'ами, либо с помощью позиционирования.
0
Taatshi
08.06.2013, 21:50     Изменение стилей
  #4
 Комментарий модератора 
cheptil, одна тема - один вопрос. Предупреждение.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.06.2013, 21:50

Изменение стилей блока при нажатии на кнопку
Столкнулся с проблемой вывода статей. Хочу реализовать таким образом: изначально статьи на странице...

Изменение стилей элемента с помощью псевдокласса hover
Здравствуйте. Нужно сделать такой эффект при наведении, как на картинке, без использования...

Изменение стилей заголовка при клике по ссылке
Есть ссылка &lt;a href...&gt; на якорь &lt;a name...&gt; на странице html, размещённая на изображении...

Изменение стилей кнопок при наведение на них курсора
Добрый день. Имеется 4 кнопки на сайте, которые имеют какой-то статичный цвет. Я хочу сделать так...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru