• DONATE to NULLED!
    Вы можете помочь Форуму и команде, поддержать финансово.
    starwanderer - модератор этого раздела будет Вам благодарен!

Помощь Картинка в виджете.

Статус
В этой теме нельзя размещать новые ответы.

r0nin

Постоялец
Регистрация
12 Апр 2010
Сообщения
78
Реакции
4
Здрасте всем.
Возник такой вопрос.
Как вставить маленькую иконку в верхние левые части виджета.

Style.css

Код:
*/

body {
font-family : Verdana, Arial,Tahoma;
font-size : 11px;
color : #CCCCCC;
background :#000000;
margin:0; padding:0;
}

a {
color : #C4C4C4;
text-decoration : none;
}
a:hover {
text-decoration : underline;
}
img {margin:0; padding:0;}
a img {border:0;}
p {
padding : 1px 0;
margin : 0;
}

/*  ====================== Page Structure ======================= */

#header-wrapper {
width : 100%;  height:55px;
background : url(images/h-bg.gif) repeat-x ;
}

#header {
width : 100%; height:55px;margin:0 auto;
background : url(images/header.gif) repeat-x 70px 0;
}
#wrapper-outer{
  width : 100%; margin:0 auto; 
  background : #000 url(images/content-top.gif) repeat-x;
}

#wrapper {
  width : 100%; margin:0 auto; padding:0;
}


#content{width : 34%; float:right; margin:0 auto;padding:2px 5px 0 5px; display: inline;}

#lsidebar{width:16%; padding:2px 0 0  0;float:left;min-height:518px;}
#rsidebar{width:16%; padding:2px 0 0 5px;float:right;min-height:518px;}
#rsidebar2{width:16%; padding:2px 0 0 5px;float:right;min-height:518px;}
#lsidebar2{width:16%; padding:2px 0 0 5px;float:left;min-height:518px;}
* html #lsidebar {height:auto;}
* html #rsidebar {height:auto;}
* html #lsidebar2 {height:auto;}
* html #rsidebar2 {height:auto;}

#footer-wrapper {
width : 100%; margin:0 auto  2px auto;background : #0D0D0D ;
}

#footer {margin:0 auto; padding:20px 0; width : 940px;text-align:center;}

/*  ====================== Header ======================= */
.sform-top {width:300px; margin:0 auto; padding:0 0 0 0;height:22px;}
.sform-page {padding:30px 120px;height:22px;}
.sform form {margin:0; padding:0;}
.sform form .form-left{background:url(images/search-left.gif) no-repeat;height:22px; width:2px;float:left;}
.sform form .form-rt{background:url(images/search-rt.gif) no-repeat;height:22px; width:2px;float:left;}
.sform form input {margin:0; padding:0;float:left;border:0 none;}
.sform form input.txt{background:url(images/search-bg.gif) repeat-x; padding:0 0 0 0; width:170px; height:22px; color:#fff;}
.sform form input.btn{padding:0 3px; height:22px; color:#fff;}


#logo {width:350px; margin:0px 2px;padding:10px 2px 12px 2px;height:auto;}
#logo h1 {margin:0px 2px;padding:0;font-size:24px; line-height:10px;color:#fff;font-weight:normal;}
#logo h1 a, #logo h1 a:hover {text-decoration:none;color:#fff;}
.desc {padding-top:0px;margin:12px 0 0 0; position:absolute; color:#fff; font-family : Arial,'Trebuchet MS', Verdana;font-size : 12px;}
#nav1{padding:0 0 0 0;}


/* --------- Navigation -------- */
#nav1 ul{margin:0; padding:0;}
#nav1 li{margin:0; padding:0;}
* html #nav li a{width:1px;}


/*  ================================= Conatent ============================= */

/* -------------------------- Posts ----------------------------- */

.post { padding-bottom:15px;}
.post-title{background:url(images/post-title1.gif) no-repeat;}
.post h2{margin:0; padding:9px 0 2px 0;color:#fff;font-size:14px;line-height:14px;}
.post h2.page{padding:12px 0 2px 0;}
.post h2 a, .post h2 a:hover{color:#fff;text-decoration:none;}
.datebox{padding:0 10px 0 0; float:left;width:51px;height:42px;text-align:center;color:#fff;}

.month {font-weight:bold;font-size:10px;line-height:14px;text-transform:uppercase;}
.date{font-size:24px;line-height:24px;color:#E12E2E;font-weight:bold;line-height:28px;}
.title {float:left;padding:0;}
.title p {padding:0;color:#E12E2E;}
.title a {color:#E12E2E;}
.entry {padding:0 10px;background:#1A1A1A url(images/post-bg.gif) repeat-y;line-height:15px;text-align:justify;}
.comnt {background:url(images/post-btm.gif) no-repeat;height:19px;text-align:right; padding:0 10px;line-height:19px;}


/* --------------- SideBars ----------------*/
.SHeader
{
	position:relative;
	z-index:0;
	height: 30px;
	padding: 0 6px;
	margin-bottom: 15px;
}

.sidebar top
{
    height: 25px;
	background-position:left top;
	background-image: url('images/test5.gif');
	padding:0 0 0 30px;
	background-repeat: no-repeat;
	min-height: 18px;
	margin: 0 0 0 5px;
}


.sidebar {font-weight:bold;}
.sidebar ul {list-style : none;margin:0;padding:0;}
.sidebar ul li {list-style : none;margin : 0;padding : 0;
background: url(images/sidebar_bg.gif) repeat;color : #A0A0A0;
}


.sidebar ul li h2 {
margin:0; padding:1px 0 0 10px;
height:23px;
font-size : 14px;
background : url(images/sidebar_top.gif) no-repeat;
color : #E12E2E;
}

.sidebar ul ul {
list-style : none;margin :0 0 10px 0;padding : 0 0 5px 0;
background : url(images/sidebar_btm.gif) no-repeat bottom left;
}
.sidebar ul ul ul{margin:0; padding:0;background : url(images/sidebar_btm1.gif) no-repeat bottom left;}

.sidebar ul ul li {
list-style : none;
margin : 0;
padding : 0 5px 0 10px; color : #A0A0A0;
font-size : 11px;line-height : 26px;
}

.sidebar ul ul li a {
color : #A0A0A0;
text-decoration : none;
}
.sidebar ul ul li a:hover {
color : #A0A0A0;
text-decoration :underline;
}



/*  ================================= Footer ============================= */
#footer {color:#F03030;font-size:10px;font-weight:bold;}
#footer a{ color:#fff; text-decoration:none;}
#footer a:hover{text-decoration:underline;}




/* Others */

.clr {clear : both; font-size:1px; line-height:1px;}

/* Search Form */
form {margin:0; padding:0;}
.newsearchform {margin: 0 auto; width:250px; height:80px;
background:url(images/search-box.gif) no-repeat;
padding :25px 0 0 42px;
}
.newsearchform p{margin:0; padding :0; line-height:28px;}
.newsearchform input {float:left;}
.newsearchform input.txt {
margin :20px 0 0 0; padding :0;
color : #516C94;background:transparent;
border : 0; width:120px;
font-size : 12px;
height:27px;
}
.newsearchform input.btn {
width : 77px;border : 0;
padding :0; margin :12px 0 0 10px;
height : 27px;
}



/* --------------------- common elements --------------------------- */
.navigation { display: block; width:99%;padding-bottom:20px;}
h2.pagetitle, h2.center {margin:0;text-align: center; padding:10px 0 0 0; font-size:14px; color:#E12E2E;}
h3 {padding: 0;margin: 5px; color : #E12E2E; font-size:14px;}
a.more-link {font-weight:bold;display:block;}


p.postmetadata {margin:0; padding:10px;}
.alt { background:#1A1A1A;}

input, select, textarea {
  border: 0; color:#9C9D9F; background:#565656;}

#commentform #submit {margin: 0; color:#fff; background:#1A1A1A; font-weight:bold;}
blockquote cite { display: block;}
blockquote { margin: 0 10px; padding: 0 10px;border-left: 2px solid #eee;}

ol.commentlist {margin:0;padding:0;}
.commentlist li { font-weight:normal;}
.commentlist cite, .commentlist cite a {
	font-weight: bold;
	font-style: normal;
	font-size: 12px;
	}
code { font: 1.1em 'Courier New', Courier, Fixed; display:block;padding:10px; margin:10px;border: 1px dotted #eee;}

/* Begin Calendar */
#wp-calendar {empty-cells: show;margin: 10px auto 0;width: 90%;	}
#wp-calendar #next a {padding-right: 10px;text-align: right;}
#wp-calendar #prev a {padding-left: 10px;text-align: left;	}
#wp-calendar a {display: block;}
#wp-calendar caption {text-align: center;width: 100%;}
#wp-calendar td {padding: 3px 0; text-align: center;}
#wp-calendar td.pad:hover { background-color: #424242; }
#wp-calendar #prev a, #wp-calendar #next a {font-size: 9pt;	}
#wp-calendar a {text-decoration: none;	}
#wp-calendar caption { 	text-align: center; }
#wp-calendar th { font-style: normal;text-transform: capitalize;}
#wp-calendar #today {font-weight:bold;color:#4E8A39;}
/* End Calendar */
.smallattachment {text-align: center; float: left;margin: 5px 5px 5px 0px;}
.attachment {text-align: center; margin: 5px 0px;}

/* Begin Images */
p img {	padding: 0;	max-width: 90%;	}
img.centered { display: block;	margin-left: auto;	margin-right: auto;	}
img.alignright {padding: 4px; margin: 0 0 2px 7px; display: inline;	}
img.alignleft { padding: 4px; margin: 0 7px 2px 0; display: inline; }
/* End Images */

/* Begin Lists */
.entry ol,.entry ul {margin: 0;	padding: 5px 0 5px 35px; }
.entry li {margin: 0; padding: 0; }
.postmetadata ul, .postmetadata li { display: inline; list-style: none;}

/* Begin Form Elements */
.entry form { text-align:center; }
select { width: 130px; }
#commentform input { width: 170px; padding: 2px; margin: 5px 5px 1px 0; }
#commentform textarea { width: 80%; padding: 2px;}
/* End Form Elements */

/* Begin Comments*/
.alt { 	margin: 0; padding: 10px; }
.commentlist { padding: 0; text-align: justify;}
.commentlist li { margin: 15px 0 3px; padding: 5px 10px 3px; list-style: none;}
.commentlist p {margin: 10px 5px 10px 0; }
#commentform p { margin: 5px 0;	}
.nocomments { text-align: center; }
.commentmetadata {display: block; font-size:10px;font-weight:normal;}
/* End Comments */

/* Begin Various Tags & Classes */
acronym, abbr, span.caps { 	cursor: help;}
acronym, abbr { border-bottom: 1px dashed #424242; }
.center { text-align: center;}
hr { display: none; }
.alignright { float: right;	}
.alignleft { float: left;}
.navigation .alignright { width:48%; text-align:left; 	}
.navigation .alignleft {width:48%; text-align:left;}
/* End Various Tags & Classes*/
 
Здрасте всем.
Возник такой вопрос.
Как вставить маленькую иконку в верхние левые части виджета.

ты не файл стилей показывай, а код виджета. А по коду и определить как уместить иконку
 
ты не файл стилей показывай, а код виджета. А по коду и определить как уместить иконку

Да там нечего)))

Код:
<div class="sidebar">
		<ul>

		<?php 	/* Widgetized sidebar, if you have the plugin installed. */
					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>

		
			<?php endif; ?>
		</ul>
	</div>
 
css класс названия виджета .sidebar ul li h2, там уже есть какая-то картинка, можно её поредактировать дорисовать иконку или вставить другую, например
Код:
.sidebar ul li h2 {
    margin:0;
    padding:1px 0 0 25px;
    height:23px;
    font-size:14px;
    background:url(http://www.google.com/images/icons/about_blogger.gif) left center no-repeat;
    color:#E12E2E;
}
 
css класс названия виджета .sidebar ul li h2, там уже есть какая-то картинка
Да но эта картиинка тоже нужна )
В данном случае новую иконку нужно как бы наложить и кстати именно на неё.
 
Да но эта картиинка тоже нужна )
В данном случае новую иконку нужно как бы наложить и кстати именно на неё.
попробу типа такого сделать
Код:
.sidebar ul {
display:block;
background:img(img.png) left top no-repeat;;
}
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху