Change layout of splash

How can I set the join button at the left side and the login button to the right side ? see picture attached

Go to basic settings and then go to code view of the splash.  You would edit the code to move the position of the buttons.  Make a backup first of the code.

I already tried that GeekGirl, but they are going both either left or right. Can't separate them.

If you are talking about the splash block in basic settings, that is just HTML.

Got it ! It was a bit tricky. I put everything in a table, but had to set the table to 200% width for correct alignment.

better of use <div> and css instead of table.

better also with responsive template

Yes, tables are no longer used for layout.

Post your code and we can help.

Speaking of Splash Banner on the front page, would it be possible to have 3 or 4 banners rotating instead of one Banner ?

If it is doable by modifying the source code, please share how/where to do this change within source code..  Thx.  

 It would have been better for you to start your own thread but I will answer anyway; search on the internet for jquery sliders and you should find something that will do what you want.

Thx. I am aware of jquery, but where in source code I can do the changes ?  

 Admin Settings - Settings - Basic Settings - Splash

Here's the code and the two buttons are exactly where I want them.

This is for the EVO template.

<div class="bx-splash bx-def-round-corners" style="background-image: url('templates/base/images/bx_splash_image.jpg');">

<div class="bx-splash-txt">

<div class="bx-splash-txt-cnt">

<div class="bx-splash-txt-l1 bx-def-padding-sec-leftright">

<h2 class="bx-cd-headline zoom" style="text-align: center;"> </h2>

<h2 class="bx-cd-headline zoom" style="text-align: center;"><span class="bx-cd-words-wrapper"><strong class="bx-cd-word is-visible">Welcome</strong><strong class="bx-cd-word">Welcome</strong><strong class="bx-cd-word">Welcome</strong></span></h2>

</div>

<table border="0" width="210%">

<tbody>

<tr>

<td>

<div align="left"><button class="bx-btn bx-def-margin-left bx-btn-sa-login">Login</button></div>

</td>

<td>

<div align="right"><button class="bx-btn bx-btn-primary bx-btn-sa-join">Join</button></div>

</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

 You're right, it doesn't look good on my smartphone :-)

Better of using @media max or min screen size styling in stylesheet

look at this for info: http://stackoverflow.com/questions/13847755/css-media-queries-for-screen-sizes

like i said use divs as they are easy to style...

Sorry, but that's far beyond my knowledge 

Anne, you still have my Skype ID, just sent me the splash file or code and i'll have a look.
Do you have custom style sheet? if so send that also...

  put this in your Admin - Settings - Basic Settings - Splash - using source code view - link to your images:

<script type="text/javascript">

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');

    // uncomment the 3 lines below to pull the images in random order
    
    // var $sibs  = $active.siblings();
    // var rndNum = Math.floor(Math.random() * $sibs.length );
    // var $next  = $( $sibs[ rndNum ] );


    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

</script>
<style type="text/css">

/*** set the width and height to match your images **/

#slideshow {
    position:relative;
    height:240px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    width:100%;
    height:100%;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

</style>

<div id="slideshow">
    <img src="http://caredesign.org/media/images/image1.jpg" alt="Slideshow Image 1" class="active" />
    <img src="http://caredesign.org/media/images/image2.jpg" alt="Slideshow Image 2" />
    <img src="http://caredesign.org/media/images/image3.jpg" alt="Slideshow Image 3" />
    <img src="http://caredesign.org/media/images/image4.jpg" alt="Slideshow Image 4" />
    <img src="http://caredesign.org/media/images/image5.jpg" alt="Slideshow Image 5" />
</div>

 You could have just added this to your templates common.css

.bx-btn.bx-btn-primary.bx-btn-sa-join {
float: left;
left: 10px;
}

.bx-btn.bx-def-margin-left.bx-btn-sa-login {
float: right;
right:10px;
}