Jump to content
Sue Busher

Frog for main school website

Recommended Posts

Has anyone got their main (externally-facing) website on Frog Learn? If so, can you share a link please? I am particularly interested in how you are covering news and events

Share this post


Link to post
Share on other sites

We are, Bishops' Blue Coat

We use scrolling text under the 3 scrolling images for new event info such as upcoming open days. We then have the twitter feeds lower down which is the main source of news/photos at the moment. 

  • Thanks 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

@johnmorris01 would you mind sharing the HTML code you use for your slide show?

@Kris would you mind sharing the HTML code used for Orchard Park High School?

Edited by Sue Busher

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Similar Content

    • By Sue Busher
      Hi
      I have built our new website on Frog Learn (mobile template) and am in the final stages of testing. Whilst it looks great on screen, when i look at the tablet and mobile , I am having issues with the following:
      Anything using the table widget
      Text widget tables not automatically resize
      Slideshow images not automatically resizing.
       
      Can anyone advise what I need to do to correct these. Otherwise it is looking really good!
       
      Thank you in advance
    • By Sue Busher
      I am in the process of moving our website across to Frog Learn from Frog 3. But I am really struggling with the news/press releases. I don't want to create another site that houses the news in it, but can't seem to find another way of keeping it all in the same site without a very long secondary navigation. Anyone got any ideas?
    • By Guesty81
      Hi everyone,
      I have been asked to redesign our school website. I said FROG could facilitate this and as we have it as our VLE it would be straight forward to integrate those features. Then
      sign of it and I need your help. I've attached some images of the site I am trying to emulate in many ways - This has been designed using FROG, but it doesn't use the templates from what I can see. I would especially like the contact banner at the top and the image links at the bottom (are these just images linked to a url) 
      If anyone can help that would be great. I've attached some images of the elements I've described above and the full website I mention can be found below.
      https://www.kingsway.stockport.sch.uk/index.phtml?d=813758
      Thanks in advance,
      Chris


×
×
  • Create New...