#basket
New messages Members Forum rules Search RSS
Page 1 of 11
Forum » For webmasters » Template installation » how to increase the size of the picture * in the block ?
how to increase the size of the picture * in the block ?
ekssellennXdDate: Tuesday, 26.02.2013, 23:04 | Message # 1
Group: Users
Posts: 7
Awards: 0
Status: Offline
template: webbuilding
screenshot: http://imageshack.us/photo/my-images/541/14334409.jpg/[/code]
 
UndisPutedDate: Wednesday, 27.02.2013, 03:41 | Message # 2
Group: Verified
Posts: 245
Awards: 4
Status: Offline
ekssellennXd, Which Template do you use? and could you show us the block code?

 
ekssellennXdDate: Thursday, 28.02.2013, 14:19 | Message # 3
Group: Users
Posts: 7
Awards: 0
Status: Offline
template is Webbuilding and code

Code
/* ---- Slider ---- */
.slider {
position: relative;
z-index: 5;
width: 503px !important;
height: 387px !important;
background: url(/images/slider_bg.png) no-repeat;
}
.slide_con {
width: 413px !important;
height: 311px !important;
overflow: hidden;
position: absolute;
top: 38px;
left: 45px;
}
.custom-item{
width: 413px !important;
height: 311px !important;
position: relative;
}
.slider-box{
left: 0;
overflow: hidden;
position: absolute;
top: 0;
}
.slider-box .slider-item{
border: none;
float: left;
z-index: 1;
text-align: left;
position: relative;
}
.slider-item img {
width: 413px;
height: 311px;
position: absolute;
top: 0;
bottom: 0;
z-index: 1;
}
.color_w {
position: absolute;
z-index: 2;
bottom: 10px;
left: 30px;
width: 360px;
height: 58px;
oveflow: hidden;
color: #fff;
text-align: right;
}
.color_b {
position: absolute;
z-index: 2;
bottom: 10px;
left: 30px;
width: 360px;
height: 58px;
oveflow: hidden;
color: #191817;
}
.slider-item h3 {
font-size:24px;
font-weight: normal;
}
.mes_slide {
}
.slider-nav,
.slider-control {
bottom: 10px;
overflow: hidden;
padding: 7px 10px;
position: absolute;
z-index: 10;
}
.slider-nav {
right: 10px;
}
.slider-nav a:link, .slider-nav a:visited, .slider-nav a:active {
float: left;
display: block;
margin: 0 5px;
outline: none;
width: 8px;
height: 8px;
}
.slider-nav a:hover{}
.slider-nav a.slider-nav-focus{}
.slider-control {
left: 10px;
}
.slider-control a:link, .slider-control a:visited, .slider-control a:active {
}
.slider-control a:hover {
}
.slider-play, .slider-stop {
display: block;
float: left;
margin: 0 5px;
outline: none;
}
.slider-play {
width: 0;
height: 0;
}
.slider-stop {
height: 8px;
width: 7px;
}
.slider-arrow {
display:block !important;
outline: none;
position: absolute;
z-index: 10;
}
.slider-prev, .slider-next {
height: 53px;
top: 45%;
width: 53px;
}
.slider-prev{
background: url(/images/slider_arrow.png) left top no-repeat;
left: -105px;
}
.slider-next{
background: url(/images/slider_arrow.png) right top no-repeat;
right: -105px;
}
.slider-up, .slider-down {
}
.slider-up {
}
.slider-down {
}
.slide_info {
width: 615px;
margin: 0 auto;
font-style: italic;
color: #777777;
line-height: 19px;
position: relative;
margin: 50px 0 40px 0;
}
#mn3 a {
font-size:12px !important;
}
#header #second_line #menu ul li:hover .umn-ml {
background:url(/images/menu_c.png) repeat;
}
#header #second_line #menu ul li:hover .umn-mc {
background:url(/images/menu_l.png) no-repeat left top;
}
#header #second_line #menu ul li:hover .umn-mr {
background:url(/images/menu_r.png) no-repeat right top;
 
UndisPutedDate: Friday, 01.03.2013, 19:55 | Message # 4
Group: Verified
Posts: 245
Awards: 4
Status: Offline
Do you wanna change the size of this picture you showed or the whole size of the slider?

If its the picture then open it in paint, and save it as the same size and the same name as the other slider pictures, and then re-upload it.


 
ekssellennXdDate: Monday, 04.03.2013, 22:23 | Message # 5
Group: Users
Posts: 7
Awards: 0
Status: Offline
size of the block and picture show ?
 
UndisPutedDate: Tuesday, 05.03.2013, 02:39 | Message # 6
Group: Verified
Posts: 245
Awards: 4
Status: Offline
This is the code of the slider, You need to change the width and height to what you want it as.
What size is do u have that pics u showed us in? do u have link to original and not a screenie?

Code
/* ---- Slider ---- */
.slider {
position: relative;
z-index: 5;
width: 503px !important;
height: 387px !important;
background: url(/images/slider_bg.png) no-repeat;
}


 
ekssellennXdDate: Tuesday, 05.03.2013, 23:18 | Message # 7
Group: Users
Posts: 7
Awards: 0
Status: Offline
this code is in top part of website ? 

 
Code
<div id="slider1" class="slider"><div class="slide_con">
  <div class="slider-box">

  <div class="slider-item custom-item">
  <img src="/images/slide1.jpg" alt="" />
  <div class="color_w">
  <h3>Web Developmet</h3>
  <span class="mes_slide">Lorem ipsum dolor sit amet, consectetur adipiscing eli</span>
  </div>
  </div>

  <div class="slider-item custom-item">
  <img src="/images/slide2.jpg" alt="" />
  </div>

  <div class="slider-item custom-item">
  <img src="/images/slide3.jpg" alt="" />
  <div class="color_w">
  <h3>Communication</h3>
  <span class="mes_slide">Lorem ipsum dolor sit amet, consectetur adipiscing eli</span>
  </div>
  </div>
   
  </div><!--/slider-box-->
  </div>
  <a href="#" class="slider-arrow slider-prev"></a>
  <a href="#" class="slider-arrow slider-next"></a>
  </div><!--/slider-->
  <div class=""><clear></div>

  <div class="slide_info">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/>
  Nulla vitae velit consectetur leo pretium hendrerit bibendum quis ipsum. Ut nunc lectus, posuere et ornare ut, ultri
  </div>

  <div id="middle">
  <div class="wrap">
  <div id="image">
  <img src="images/image.png" />
  </div>
  <div id="description">
  <h2>A little about me</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae velit consectetur leo pretium hendrerit bibendum quis ipsum. Ut nunc lectus, posuere et ornare ut, ultricies non elit. Morbi et dolor urna, id dapibus turpis. </p>
  <p>Aenean mauris lacus, vestibulum in semper sed, porta at mauris. Morbi venenatis dolor nec lacus elementum a aliquet nisl scelerisque. Duis vel ornare tortor. Phasellus tortor mi, rutrum dapibus sollicitudin non, ullamcorper vitae erat. Vestibulum euismod condimentum volutpat. Nunc ac rhoncus massa. Suspendisse pellentesque eros velit. </p>
  </div>
  </div>
  </div><!--/middle-->

$GLOBAL_BFOOTER$
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="/js/jquery.easing.compatibility.js"></script>
<script type="text/javascript" src="/js/jquery.slider.js"></script>
<script type="text/javascript">
$(function () {
  $("#slider1").slider({
  autoPlay: true,
  interval: 10000,
  speed: 305,
  width: 413,
  height: 311
  });
});
</script>
<script type="text/javascript">//]]></script>
</body>
</html>
 
UndisPutedDate: Wednesday, 06.03.2013, 02:32 | Message # 8
Group: Verified
Posts: 245
Awards: 4
Status: Offline
Quote (ekssellennXd)
this code is in top part of website ?


Thats code is in CSS, on line 923 it starts


 
ekssellennXdDate: Wednesday, 06.03.2013, 22:57 | Message # 9
Group: Users
Posts: 7
Awards: 0
Status: Offline
not work width & height 
plz make a css with a increase size and take me ! :S
 
UndisPutedDate: Wednesday, 06.03.2013, 23:37 | Message # 10
Group: Verified
Posts: 245
Awards: 4
Status: Offline
Do you want it smaller or bigger? Do you wanna change the picture inside? if so, gimme the link to the picture..ill see hwta i can do for you?

 
ekssellennXdDate: Thursday, 07.03.2013, 20:58 | Message # 11
Group: Users
Posts: 7
Awards: 0
Status: Offline
more bigger picture show !
 
UndisPutedDate: Friday, 08.03.2013, 01:20 | Message # 12
Group: Verified
Posts: 245
Awards: 4
Status: Offline
ok...First you need to change the size of the slider_bg to the size you want and do the same with the sliding pics, Then you have to edit the CSS slider...Its easier saed then done wink

 
ekssellennXdDate: Thursday, 14.03.2013, 23:55 | Message # 13
Group: Users
Posts: 7
Awards: 0
Status: Offline
which change ?

http://imageshack.us/photo/my-images/42/asdwpx.png/

Added (14.03.2013, 23:54)
---------------------------------------------

Quote (ekssellennXd)
which change ? http://imageshack.us/photo/my-images/42/asdwpx.png/

Added (14.03.2013, 23:55)
---------------------------------------------
how i dont now :@

Message edited by ekssellennXd - Saturday, 09.03.2013, 00:34
 
UndisPutedDate: Friday, 15.03.2013, 01:26 | Message # 14
Group: Verified
Posts: 245
Awards: 4
Status: Offline
You have to change the size in paint or any other programs that you edit photo's. And you also have to edit the css.

Code
/* ---- Slider ---- */
.slider {
position: relative;
z-index: 5;
width: 503px !important;
height: 387px !important;


If you dont know how to do it, then you should talk to the author and ask him to help you, so this will be done correctly.


 
Forum » For webmasters » Template installation » how to increase the size of the picture * in the block ?
Page 1 of 11
Search: