Jump to content

Frog for main school website


Sue Busher

Recommended Posts

Here is our one that we have been using for the past few months.

We run ours using a nested page which enables us to make the news look a little nicer. It would be better if you could generate pages automatically for news/notices but that would make the whole thing look incredibly messy for the admin as the main menu would have a LOT of pages showing within the hidden menu item.

Link to comment
Share on other sites

  • 2 months later...
  • 2 months later...
Quote

<style>
.widget_text a {
    color:#FFFFFF;
    font-weight: bold;
    text-decoration: underline;
        }

.CALTitles {
    object-fit: cover; 
    width: 100%;
    height: 250px;
}
    
.CALnews {
    width: 96%;
    height: auto;
    border: 9px solid #f2d300;
    display: block;
    margin: 0 auto; 
}

.CALnewstitles {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
    
.ui-theme-WEBSITEweb-container .ui-theme-WEBSITEweb-carouseldevider {
margin:0px auto 0px auto;
padding: 0px;
width:100%;
height:5px;
background: url("file/asset/75C6519220030A501D498F7CEE9C37000C40D07C6182E753") center top repeat-x;
}
.ui-theme-WEBSITEweb-container .ui-theme-WEBSITEweb-wrapcarousel {
margin:0px auto 0px auto;
padding: 0px;
width:100%;
max-height:450px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.ui-theme-WEBSITEweb-container .carousel{
margin-top: 0px;
margin-bottom: 0px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
overflow: hidden;
}
.ui-theme-WEBSITEweb-container .carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-border-radius: 0px!important;
-moz-border-radius: 0px!important;
border-radius: 0px!important;
}
.ui-theme-WEBSITEweb-container .carousel .container {
position: static;
z-index: 9;
}
.ui-theme-WEBSITEweb-container .carousel .item {
width:100%;
height:100%; 
}
.ui-theme-WEBSITEweb-container .carousel-indicators li {
background-color: none;
border:1px solid #ffffff;
}
.ui-theme-WEBSITEweb-container .carousel-indicators .active {
  background-color: #ffffff;
  border:1px solid #ffffff;
 }

.ui-theme-WEBSITEweb-container .carousel-indicators {
    position: absolute;
    top: 0;
    bottom: auto;
    z-index: 15;
    min-height: 15px;
    padding: 20px 0px 15px 0px !important;
    text-align: center;
    width: 100%;
    margin: 0px auto !important;
    margin-left: 0px;
    left: 0;
}

.ui-theme-WEBSITEweb-container .carousel-indicators li {
display: inline-block;
float: left;
width: 10px;
height: 10px;
margin-left: 2px;
margin-right: 2px;
text-indent: -999px;
background-color: rgba(255,255,255,0.25);
border-radius: 5px;
position: relative;
left: calc(50% - 35px);
right: calc(50% - 35px);
-webkit-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.75);
}


.ui-theme-WEBSITEweb-container .carousel-caption {
max-width: calc(100% - 140px);
padding: 29px 70px 0px 70px;
margin:0px 0px 0px 0;
min-height:82px;
background-color: rgba(35, 35, 35, 0.5);
z-index:6;
}
.carousel-control.right {
    right: 0px !Important;
    left: auto;
}
.carousel-control.left {
    left: 0px !Important;
    right: auto;
}
.ui-theme-WEBSITEweb-container .carousel-control {
top: calc(100% - 110px);
width: 40px;
height: 40px;
margin: 0px 0px 0px 0px;
padding: 40px 15px 30px 15px;
font-size: 140px;
font-weight: normal;
border: 0;
z-index: 10;
color: #ffffff !important;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
opacity: 1;
background-color: rgba(241,210,1,0.7);
font-family: "Myriad Pro", "Gill Sans", Calibri, "Gill Sans MT", 'Lato', sans-serif, Arial,   "DejaVu Sans Condensed", Helvetica;
}    
.ui-theme-WEBSITEweb-container .carousel-caption h1 {
color: #f2d300!important;
font-size: 29px;
font-weight: normal;
font-style:normal;
line-height: 35px;
text-align:center;
word-wrap: break-word;
margin:0 0 15px 0px;
}
.ui-theme-WEBSITEweb-container .carousel-caption p {
color: #ffffff !important;
font-size: 16px;
font-style:normal;
font-weight: normal;
line-height: 22px;
text-align:center;
word-wrap: break-word;
margin-bottom:10px;
}
.ui-theme-WEBSITEweb-container  .carousel-button {
width: 172px;
height: 87px;
text-align: center;
text-decoration: none;
display: block;
margin: 0px auto 0px auto;
cursor: pointer;
background: url("file/asset/752A2BE02003068EEA1EEFE6F2C5AA0A0D0ECC2C4D2C2149/") center bottom no-repeat;
}
.ui-theme-WEBSITEweb-container  .carousel-button:hover {
    text-decoration: none;
    opacity:0.7; /* Completely invisible. */
}
.ui-theme-WEBSITEweb-container  .carousel-button:active {
    text-decoration: none;
    opacity:0.7; /* Completely invisible. */

    
@media only screen
  and (max-width: 800px)
  {  
  .ui-theme-WEBSITEweb-container .ui-theme-WEBSITEweb-wrapcarousel {
max-height:450px;
height:100%; 
  }
  .ui-theme-WEBSITEweb-container  .carousel-button {
width: 172px;
height: 87px;
text-align: center;
text-decoration: none;
display: block;
margin: 0px auto 0px auto;
cursor: pointer;
background: url("file/asset/1AAED22720030B1F490EAF2B9D175E08C5E423ECE2D61E6C") center bottom no-repeat;
}
}

.ui-theme-WEBSITEweb-container .carousel-control {
margin:30px 0 0px 0px;
padding: 15px 15px 25px 15px;
font-size: 80px;
}      
      
.ui-theme-WEBSITEweb-container .carousel-caption h1 {
font-size: 18px;
line-height: 21px;
margin:0 0 5px 0px;
}
.ui-theme-WEBSITEweb-container .carousel-caption p {
font-size: 12px;
line-height: 15px;
margin-bottom:10px;
}
.ui-theme-WEBSITEweb-container .carousel-caption {
max-width: calc(100% - 100px);
padding: 20px 50px 0px 50px;
min-height:60px;
}
  }

    
@media only screen
  and (max-width: 600px)
  {  
      
.ui-theme-WEBSITEweb-container .carousel-control {
margin:55px 0 0px 0px;
padding: 5px 5px 10px 5px;
font-size: 40px;
}
.ui-theme-WEBSITEweb-container .carousel-caption h1 {
    font-size: 15px;
    line-height: 18px;
    margin: 0 0 3px 0px;
}       
.ui-theme-WEBSITEweb-container .carousel-caption {
max-width: calc(100% - 100px);
padding: 9px 50px 0px 50px;
min-height:45px;
}
  }
    
    
    
@media only screen
  and (max-width: 400px)
  {  
      
.ui-theme-WEBSITEweb-container .carousel-control {
margin:66px 0 0px 0px;
padding: 0px 0px 5px 0px;
font-size: 30px;
}       
      
.ui-theme-WEBSITEweb-container .carousel-caption {
display:none;
visibility:hidden;
}
      
  }

</style>

<div class="ui-theme-WEBSITEweb-wrapcarousel">
<div class="carousel slide" id="myCarousel">

<!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

<div class="carousel-inner">
  
    
<!-- slide musicals -->
<div class="item active">
<img alt="" src="LINK TO YOUR SLIDER IMAGE">
<div class="container">
</div>
</div>    
    
<!-- slide Future Day -->                
<div class="item">
<img alt="" src="LINK TO YOUR SLIDER IMAGE">
<div class="container">
<div class="carousel-caption">
<a href="LINK TO A DOCUMENT" target="_blank" class="carousel-button"></a>
</div>
</div>
</div>      
    
<!-- slide 2-->                                    
<div class="item">
<img alt="" src="LINK TO YOUR SLIDER IMAGE">
<div class="container">
<div class="carousel-caption">
<a href="LINK TO A DOCUMENT" target="_blank" class="carousel-button"></a>
</div>
</div>
</div>
    
 <!-- slide 3 -->
<div class="item">
<img alt="" src="LINK TO YOUR SLIDER IMAGE">
<div class="container">
</div>
</div>
    

<!-- slide 5-->                                    
<div class="item">
<img alt="" src="LINK TO YOUR SLIDER IMAGE">
<div class="container">
<div class="carousel-caption">
<a href="LINK TO A DOCUMENT" target="_self" class="carousel-button"></a>
</div>
</div>
</div>
    

</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">›</a>
</div><!-- /myCarousel -->
</div><!-- /ui-theme-WEBSITEweb-wrapcarousel -->

<div class="ui-theme-WEBSITEweb-carouseldevider"></div>

<script type="text/javascript">
    $(document).ready(function() {
        $('.carousel').carousel({
            interval: 5000,
            cycle: true
        });
    });
</script>

@Sue Busher - should be most of our slider code. Some slight tweaks with links removed which aren't necessary to make it work. 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...