The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

how to make this?

View previous topic View next topic Go down

how to make this?

Post by akoe.akbar on November 8th 2011, 7:22 am

hello,
how to make this images,
you can see the images in http://kingscrafters.com/
its moving picture
please help me,.. Very Happy

akoe.akbar
Forumember

Male Posts : 251
Reputation : 4
Language : Bontang

http://www.tarsiusforum.forumid.net

Back to top Go down

Re: how to make this?

Post by Poser on November 8th 2011, 7:28 am

You can ask the graphic designers to make something like that for you.

Poser
Forum Reviewer
Forum Reviewer

Male Posts : 391
Reputation : 40
Language : English and Filipino
Location : Whale Island

http://www.bowtieblogs.forumotion.com

Back to top Go down

Re: how to make this?

Post by Guest on November 8th 2011, 8:24 am

You want the slider?

Guest
Guest


Back to top Go down

Re: how to make this?

Post by akoe.akbar on November 8th 2011, 8:25 am

Johnny. wrote:You want the slider?

sure,.

akoe.akbar
Forumember

Male Posts : 251
Reputation : 4
Language : Bontang

http://www.tarsiusforum.forumid.net

Back to top Go down

Re: how to make this?

Post by Guest on November 8th 2011, 9:23 am

This is the complete code:
Code:
<head>
<style>
#banner {
   margin:15px auto;
   width:100%;
}

.slideshow {
   height: 300.0px;
   width:100%;
   margin: 0 auto ;
}


.slideshow img {
   padding: 0;
   margin:0;
   width:920px;
   height:300.0px;
}

.slideshow a img { border:none }

.slideshowContainer {
   display:block;
   clear:both;
   width:100%;
   position:relative;
}




.slideshowBottom {
   clear:both;
   height:20px;
   position:absolute;
   top:280.0px;
   width:920px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowBottom.png') no-repeat scroll center center transparent;
}

.slideshowLeftCorner {
   height:10px;
   position:absolute;
   top:0;
   left:0;
   width:10px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowLeftCorner.png') no-repeat scroll center center transparent;
}

.slideshowRightCorner {
   height:10px;
   position:absolute;
   top:0;
   left:910px;
   width:10px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowRightCorner.png') no-repeat scroll center center transparent;
}
   


</style>

<script type="text/javascript" language="javascript" src="http://kingscrafters.com/js/addon.js"></script>
<script type="text/javascript" language="javascript" src="http://kingscrafters.com/js/custom.js"></script
</head>

<center>
      <div id="banner" class="slideshowContainer">
          <!-- put your slideshow images here --> 
          <div class="slideshow">
            <a href="#" title="Specs" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/stars.jpg" />
            </a> 
            <a href="#" title="Plugins" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/psyrchus.jpg" />
            </a> 
            <a href="#" title="KingsCraft" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/pseudoart.jpg" />
            </a>
          </div> 
          <div class="slideshowLeftCorner"></div> 
          <div class="slideshowRightCorner"></div> 
          <div class="slideshowBottom"></div>
        </div> 
</center>

Guest
Guest


Back to top Go down

Re: how to make this?

Post by akoe.akbar on November 8th 2011, 9:58 am

Johnny. wrote:This is the complete code:
Code:
<head>
<style>
#banner {
   margin:15px auto;
   width:100%;
}

.slideshow {
   height: 300.0px;
   width:100%;
   margin: 0 auto ;
}


.slideshow img {
   padding: 0;
   margin:0;
   width:920px;
   height:300.0px;
}

.slideshow a img { border:none }

.slideshowContainer {
   display:block;
   clear:both;
   width:100%;
   position:relative;
}




.slideshowBottom {
   clear:both;
   height:20px;
   position:absolute;
   top:280.0px;
   width:920px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowBottom.png') no-repeat scroll center center transparent;
}

.slideshowLeftCorner {
   height:10px;
   position:absolute;
   top:0;
   left:0;
   width:10px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowLeftCorner.png') no-repeat scroll center center transparent;
}

.slideshowRightCorner {
   height:10px;
   position:absolute;
   top:0;
   left:910px;
   width:10px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowRightCorner.png') no-repeat scroll center center transparent;
}
   


</style>

<script type="text/javascript" language="javascript" src="http://kingscrafters.com/js/addon.js"></script>
<script type="text/javascript" language="javascript" src="http://kingscrafters.com/js/custom.js"></script
</head>

<center>
      <div id="banner" class="slideshowContainer">
          <!-- put your slideshow images here --> 
          <div class="slideshow">
            <a href="#" title="Specs" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/stars.jpg" />
            </a> 
            <a href="#" title="Plugins" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/psyrchus.jpg" />
            </a> 
            <a href="#" title="KingsCraft" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/pseudoart.jpg" />
            </a>
          </div> 
          <div class="slideshowLeftCorner"></div> 
          <div class="slideshowRightCorner"></div> 
          <div class="slideshowBottom"></div>
        </div> 
</center>

what is the background url?

akoe.akbar
Forumember

Male Posts : 251
Reputation : 4
Language : Bontang

http://www.tarsiusforum.forumid.net

Back to top Go down

Re: how to make this?

Post by Guest on November 8th 2011, 10:00 am

What background?

Guest
Guest


Back to top Go down

Re: how to make this?

Post by akoe.akbar on November 8th 2011, 10:01 am

Johnny. wrote:What background?

CLICK:

.slideshowBottom {
clear:both;
height:20px;
position:absolute;
top:280.0px;
width:920px;
z-index:10;
background:url('http://kingscrafters.com/images/css/slideshowBottom.png') no-repeat scroll center center transparent;
}

.slideshowLeftCorner {
height:10px;
position:absolute;
top:0;
left:0;
width:10px;
z-index:10;
background:url('http://kingscrafters.com/images/css/slideshowLeftCorner.png') no-repeat scroll center center transparent;
}

.slideshowRightCorner {
height:10px;
position:absolute;
top:0;
left:910px;
width:10px;
z-index:10;
background:url('http://kingscrafters.com/images/css/slideshowRightCorner.png') no-repeat scroll center center transparent;
}

akoe.akbar
Forumember

Male Posts : 251
Reputation : 4
Language : Bontang

http://www.tarsiusforum.forumid.net

Back to top Go down

Re: how to make this?

Post by Guest on November 8th 2011, 10:02 am

There are the backgrounds of border ( top - left; top - right and the main bottom background border )

Guest
Guest


Back to top Go down

Re: how to make this?

Post by akoe.akbar on November 8th 2011, 10:05 am

Johnny. wrote:There are the backgrounds of border ( top - left; top - right and the main bottom background border )

the link is that?

akoe.akbar
Forumember

Male Posts : 251
Reputation : 4
Language : Bontang

http://www.tarsiusforum.forumid.net

Back to top Go down

Re: how to make this?

Post by Guest on November 8th 2011, 10:08 am

Yes. If you delete the backgrounds, slider border will disappear.

Guest
Guest


Back to top Go down

Re: how to make this?

Post by akoe.akbar on November 8th 2011, 10:12 am

Johnny. wrote:Yes. If you delete the backgrounds, slider border will disappear.

where i can add the code?

akoe.akbar
Forumember

Male Posts : 251
Reputation : 4
Language : Bontang

http://www.tarsiusforum.forumid.net

Back to top Go down

Re: how to make this?

Post by Guest on November 8th 2011, 10:17 am

In to a HTML page, overall_header, overall_footer, index_body.

ACP > Display > Templates > General: overall_header, overall_footer, index_body.
ACP > Modules > HTML Pages administration > Create a new page.

Guest
Guest


Back to top Go down

Re: how to make this?

Post by akoe.akbar on November 8th 2011, 10:59 am

Johnny. wrote:In to a HTML page, overall_header, overall_footer, index_body.

ACP > Display > Templates > General: overall_header, overall_footer, index_body.
ACP > Modules > HTML Pages administration > Create a new page.

ok its solve, but its too big
i want to make it be header,.. how to make it?

akoe.akbar
Forumember

Male Posts : 251
Reputation : 4
Language : Bontang

http://www.tarsiusforum.forumid.net

Back to top Go down

Re: how to make this?

Post by tommycoo on November 8th 2011, 11:49 am

Johnny. wrote:This is the complete code:
Code:
<head>
<style>
#banner {
   margin:15px auto;
   width:100%;
}

.slideshow {
   height: 300.0px;
   width:100%;
   margin: 0 auto ;
}


.slideshow img {
   padding: 0;
   margin:0;
   width:920px;
   height:300.0px;
}

.slideshow a img { border:none }

.slideshowContainer {
   display:block;
   clear:both;
   width:100%;
   position:relative;
}




.slideshowBottom {
   clear:both;
   height:20px;
   position:absolute;
   top:280.0px;
   width:920px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowBottom.png') no-repeat scroll center center transparent;
}

.slideshowLeftCorner {
   height:10px;
   position:absolute;
   top:0;
   left:0;
   width:10px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowLeftCorner.png') no-repeat scroll center center transparent;
}

.slideshowRightCorner {
   height:10px;
   position:absolute;
   top:0;
   left:910px;
   width:10px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowRightCorner.png') no-repeat scroll center center transparent;
}
   


</style>

<script type="text/javascript" language="javascript" src="http://kingscrafters.com/js/addon.js"></script>
<script type="text/javascript" language="javascript" src="http://kingscrafters.com/js/custom.js"></script
</head>

<center>
      <div id="banner" class="slideshowContainer">
          <!-- put your slideshow images here --> 
          <div class="slideshow">
            <a href="#" title="Specs" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/stars.jpg" />
            </a> 
            <a href="#" title="Plugins" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/psyrchus.jpg" />
            </a> 
            <a href="#" title="KingsCraft" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/pseudoart.jpg" />
            </a>
          </div> 
          <div class="slideshowLeftCorner"></div> 
          <div class="slideshowRightCorner"></div> 
          <div class="slideshowBottom"></div>
        </div> 
</center>
can this code for invision ?

tommycoo
Forumember

Male Posts : 615
Reputation : 9
Language : Indonesia

http://www.atlanta.forumid.net

Back to top Go down

Re: how to make this?

Post by akoe.akbar on November 8th 2011, 12:00 pm

@tommycoo wrote:
Johnny. wrote:This is the complete code:
Code:
<head>
<style>
#banner {
   margin:15px auto;
   width:100%;
}

.slideshow {
   height: 300.0px;
   width:100%;
   margin: 0 auto ;
}


.slideshow img {
   padding: 0;
   margin:0;
   width:920px;
   height:300.0px;
}

.slideshow a img { border:none }

.slideshowContainer {
   display:block;
   clear:both;
   width:100%;
   position:relative;
}




.slideshowBottom {
   clear:both;
   height:20px;
   position:absolute;
   top:280.0px;
   width:920px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowBottom.png') no-repeat scroll center center transparent;
}

.slideshowLeftCorner {
   height:10px;
   position:absolute;
   top:0;
   left:0;
   width:10px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowLeftCorner.png') no-repeat scroll center center transparent;
}

.slideshowRightCorner {
   height:10px;
   position:absolute;
   top:0;
   left:910px;
   width:10px;
   z-index:10;
   background:url('http://kingscrafters.com/images/css/slideshowRightCorner.png') no-repeat scroll center center transparent;
}
   


</style>

<script type="text/javascript" language="javascript" src="http://kingscrafters.com/js/addon.js"></script>
<script type="text/javascript" language="javascript" src="http://kingscrafters.com/js/custom.js"></script
</head>

<center>
      <div id="banner" class="slideshowContainer">
          <!-- put your slideshow images here --> 
          <div class="slideshow">
            <a href="#" title="Specs" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/stars.jpg" />
            </a> 
            <a href="#" title="Plugins" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/psyrchus.jpg" />
            </a> 
            <a href="#" title="KingsCraft" target="_blank" shape="rect">
              <img src="http://kingscrafters.com/images/pseudoart.jpg" />
            </a>
          </div> 
          <div class="slideshowLeftCorner"></div> 
          <div class="slideshowRightCorner"></div> 
          <div class="slideshowBottom"></div>
        </div> 
</center>
can this code for invision ?

yes, i use it already

akoe.akbar
Forumember

Male Posts : 251
Reputation : 4
Language : Bontang

http://www.tarsiusforum.forumid.net

Back to top Go down

Re: how to make this?

Post by Guest on November 8th 2011, 6:23 pm

You you how to use them, you can make it for all versions.
So, you need more help?

Guest
Guest


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum