# Responsive Carousel with Search Box



## howard.a.s

Using the page at the following url as a starting point to explain what I'm trying to achieve. http://wrapbootstrap.com/preview/WB0412697. Once on this page, it is necessary to select home page variation number 8 from the Home drop down list. Ideally, I'd like to add to my existing web page a full width responsive carousel, complete with left and right navigation arrows and pagination, with a centrally aligned search box under which would appear a single line of text. The search box and the single line of text should remain static even when the carousel image changes. I'd also like to add a headline and sub headline centrally aligned above the search box and which changes with each image. Incidentally, the site to which this carousel is to be added is HTML and not Wordpress. This being the case, does anyone know of a readily available example of a carousel with the properties described and which I can plug straight in to my existing source code, or of any software capable of easily creating this (preferably free). I have Googled for a solution and discovered https://www.bootply.com/108847 and https://bootstrapious.com/p/bootstrap-carousel, but not having been blessed with the most technically minded brain, trying to put all of these pieces together so as to come up with a fully working carousel with the properties described seems pretty much an impossibility. Before I close, I'd just like to return to my original page example http://wrapbootstrap.com/preview/WB0412697 and to say that if I could easily add sliding images and navigation to this example, together with a new headline and sub headline above the search field, then I'd pretty-much have achieved my objective. Any constructive advice gratefully received.


----------



## JiminSA

Hi there Howard One thing I must say is that when you ask something on the forum, it's always a bit of a challenge,. So don't short-change yourself!
The problem here is that your example link is to the bootply template over which we have no control. (i.e. we can't start to integrate your preferred carousel unless we have the source code for 'Home 8'.
That said, I'm assuming that all you want is a responsive carousel landing page with navigation? Take a look at *this template* (free) and consider just adding your site search code on top of it (we'll help you there if needsbe).


----------



## howard.a.s

Hello there Jim. Thanks for your reply and apologies for the delay in posting back. I really do appreciate how you seem to manage to find time to help me out with my challenging questions.

Further to yesterdays post, I found a carousel with search box which can hopefully be tweaked to suit my needs. I've uploaded the source code and files for this to my hosting so you can take a look http://www.themetaldetective.co.uk/sandbox/paradise/x_016_search.html
Ideally, what I'd like to achieve is #1: while retaining format and layout of the headline and paragraph text above the search box, to be able to have this headline and paragraph text change with each new slide, #2: to understand how to loose what seems to be the automatic capitalization of the first letter of each example word within the search box.

After having hopefully got this sorted, I'll need to understand how to make the search box actually function as intended (what code to add to make this happen, and where) and to understand why when viewed in the smallest of screen sizes by means of Firefox developer tools responsive page viewer, the left and right navigation arrows appear to interfere with the rest of the layout, moving over the top of the search bar.

I think this ought to be enough for now, as although I'll also need to alter the color of the red text and search bar/navigation etc. I can hopefully find out how to do this for myself by looking through the css.

Oh, one final thing. I'll need to find some images to use in my shiny new carousel, kind of like the one used in the example Home Page 8. In the past I've bought images from Canstock, as theirs seem less costly. Ideally, I'd like to get free high quality images, to which end I recently came across an article talking about the CC0 license, which apparently means that images bearing this license are often free to obtain and use. Do you know of any sites offering such images, and might these be likely to be of high enough resolution to be used in a full width carousel?

Anyway, I hope you are able to make sense of my ramblings and that you might be able to give me a few pointers as and when you get the time.

Until then....... take care


----------



## howard.a.s

Almost forgot,  how would I loose the search icon situated above the headline text, and if the left and right navigation arrows pose a positioning problem, I can always loose these too. Hopefully, the finished layout should be possible to then just plug in to my existing page without too much trouble


----------



## howard.a.s

With regards to the matter of getting the search box to function, here is some code that I already use on another site (the form action destination url has been removed in this example) and I am wondering what parts of this code I should copy and paste across, and where to add these so as to make this new form work 



Code:


<!--Search Block-->
<li>
<i class="search fa fa-search search-btn"></i>
<div class="search-open">
<div class="input-group animated fadeInDown">
<form action="http://www." method="post">
<input type="hidden" name="a" value="2871!search">
<input style="margin:4px 0 0 0;width:227px !important;height:24px !important;font-size:16px !important;border:1px solid #eeeeee;-webkit-box-shadow:0px 0px 4px #eeeeee;-moz-box-shadow:0px 0px 4px #eeeeee;box-shadow:0px 0px 4px #eeeeee;" name="query" value="" type="text" placeholder="e.g: &quot;confidence&quot;,">
<span class="input-group-btn" style="float:right;margin:0 0 0 -66px;">
<button class="btn-u" name="submit" type="submit">Search</button>
</span></form>
</div>
</div>
</li>
<!--End Search Block-->


----------



## JiminSA

1. Get rid of search icon: take out this line


HTML:




should be line 78 or thereabouts, in your x_016_search.html script.
2. Get rid of capitalization: remove all lines containing


HTML:


  text-transform: capitalize;

in your css file - x_016_search.css
3. Change slider text overlay: unfotumately the slider is set up to just have the one static overlay for each slide (Lorem ipsum) i.e. there doesn't appear to be a change provided for in the javascript routine which handles the slider. However check out _*this snippet*_ which allows you to change text per slide (although they don't actually change the text in their example - Durh)


----------



## JiminSA

As regards your site search, I found *this tutorial* on W3Schools, which will hopefully help you


----------



## howard.a.s

Hi Jim, and thanks once again for all of your time.

So from what you are saying there is presumably no simple way for me to add a different message for each slide when using the paradise slider, and if I use the slider from the snippet you've posted, I can have different messages for each slide, but no search box.  Is there a simple way to chop and change either slider by using code from one to make the other include all the functionality I am looking for :notworthy:


----------



## howard.a.s

> Change slider text overlay: unfotumately the slider is set up to just have the one static overlay for each slide (Lorem ipsum) i.e. there doesn't appear to be a change provided for in the javascript routine which handles the slider.


Is there a way to replace the one static overlay for each slide with a separate overlay for each individual slide? Please can anyone suggest how this can be achieved?


----------



## JiminSA

Howard, I see no reason why you can't put the search box code:


HTML:


[B][SIZE=15]looking forsomething?[/SIZE][/B]

Lorem ipsum dolor sit amet consectetuer adipiscing elit nam nibh nunc varius.

            

                search

which is your in your original code into the snippet I suggested, replacing this code in each slide:


HTML:


[B][SIZE=15]Search for[/SIZE][/B]

It may even be advisable to drop all connection with the original script and use your own search routine (as suggested in the W3Schools link)


----------



## howard.a.s

Just a thought, but before I give up completely with the paradise slider and its already positioned search bar, is it possible for me to add a unique caption to each slide by using the techniques described in any of the following? https://stackoverflow.com/questions/29734492/adding-text-over-an-image-in-bootstrap-carousel
https://stackoverflow.com/questions/29734492/adding-text-over-an-image-in-bootstrap-carousel
https://stackoverflow.com/questions/21213154/bootstrap-carousel-caption-top-alignment
https://css-tricks.com/absolute-positioning-inside-relative-positioning/

I have also tried experimenting by adding the search box from this https://www.bootply.com/108847 into the snippet you previously suggested https://bootsnipp.com/snippets/rv1xd
and after tinkering around a bit came up with something that appeared kind of remotely like what I'd envisaged, but when resizing my attempt into the smallest screen dimensions, the search box and text interfere with each other so badly that it looks like a joke 

Oh well, you know what they say about a little knowledge 

To be honest, I wish I'd never come up with this idea at all - why don't I ever learn


----------



## JiminSA

howard.a.s said:


> by using the techniques described in any of the following?


The first link you give is worth copying and adapting ...


----------



## JiminSA

howard.a.s said:


> Oh, one final thing. I'll need to find some images to use in my shiny new carousel, kind of like the one used in the example Home Page 8. In the past I've bought images from Canstock, as theirs seem less costly. Ideally, I'd like to get free high quality images, to which end I recently came across an article talking about the CC0 license, which apparently means that images bearing this license are often free to obtain and use. Do you know of any sites offering such images, and might these be likely to be of high enough resolution to be used in a full width carousel?


If you Google 'no copyright images' you'll see plenty of options


----------



## howard.a.s

I've now found this https://www.bootply.com/Fu7DCdcxHO# and have been attempting to get this to work in my own page, only I can't. Please can you take a look to see what I am obviously missing in both of these 2 experiments http://www.themetaldetective.co.uk/sandbox/slider-search/index.html - http://www.themetaldetective.co.uk/sandbox/slider-search-2/index.html

If it is possible to get either of these pages working properly, please can you also give me any advice as to how I might go about styling the search bar button to appear similar in style and color to the button in home page 8 (the very first link I posted http://wrapbootstrap.com/preview/WB0412697) and also the styling of the text to appear similar in terms of font face - I understand it's possible to specify a Google font but I don't know how to go about doing this.


----------



## JiminSA

I have done a mock up of what I think you need which _*can be found here*_.
The html looks like so:


HTML:


<!DOCTYPE html>

    

    Bootstrap Carousel

    

    

    

      
      [LIST=1]
        [*]
        [*]
        [*]
      [/LIST]

          [IMG alt="First slide"]img/slider/1.jpg[/IMG]

                [I][/I]
               

[B][SIZE=15]Example headline.[/SIZE][/B]

Put anything you like in here or don't include it at all, if you like.

          [IMG alt="Second slide"]img/slider/2.jpg[/IMG]

                [I][/I]
               

[B][SIZE=15]Another example headline.[/SIZE][/B]

Content is entirely at your discretion

          [IMG alt="Third slide"]img/slider/3.jpg[/IMG]

                [I][/I]
               

[B][SIZE=15]One more for good measure.[/SIZE][/B]

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

      [URL=#myCarousel]
        [I][/I]
        Previous
      [/URL]
      [URL=#myCarousel]
        [I][/I]
        Next
      [/URL]

and the css here:


Code:


body {
  padding-bottom: 40px;
  color: #5a5a5a;
}

H1 {
   color: #fff;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.carousel {
  margin-bottom: 60px;
}

.carousel-control {
  top: 76%;
}

.carousel-caption {
  z-index: 10;
}

.carousel .item {
  height: 500px;
  background-color:#bbb;
  overflow:hidden;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

#searchForm {
    position:absolute;
      top:40%;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 768px) {

  .carousel-inner>.item>img, .carousel-inner>.item>a>img {
      max-width:inherit;
  }

  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }
}
.mytext {
    width: 500px;
    height:46px;
    color:black;
    font-size:16px;
    padding-left:20px;
}

Hopefully, Howard, this is what you are after. Be sure that all your img/css/javascript/fontawesome(which I prefer above glyphicons) links are resolved (valid) within your website structure, when you attempt to replicate this demo ...
Footnote:
The images, I got from Google image search 'wide images' and I have no idea about their copyright status, so apologies if you are the owner and offended by my usage of them, but they are nice pics


----------



## JiminSA

Now your bigger challenge starts! Activating the search! I hope *this link* helps


----------



## howard.a.s

Hi Jim. I have only just got back to this forum and found your reply. Thank you so much for taking your time to put this all together for me. I'm going to take a good look at the code you've posted and try to learn from it, as well as carrying it across to my own mock, hopefully without managing to break it. Once I've achieved this, I'll post back with the results. 

Just a few quick questions I can think of....

If I wanted to place the lines of text above the search box instead of underneath it, is this simple to achieve?

If I wanted to change the color of the search button, or to position it up, down, left, right, how would I do this? 

If I wanted to make the search box border more rounded, presumably I can do this by using the border radius css?

Finally, you mention in your post about the use of fontawesome. Presumably there are a range of icons and other symbols, fonts, etc. that this allows use of. How do I change fonts, icons, symbols etc. or find out what types there are to actually use?


----------



## howard.a.s

JiminSA said:


> Now your bigger challenge starts! Activating the search! I hope *this link* helps


I'm going to take a look at the page you've posted a link to and hopefully this will help me to get this working. I've referred to the Javascriptkit.com in the past and often found it helpful, as also is http://www.dynamicdrive.com/


----------



## howard.a.s

Incidentally, it may take me a day or two to tinker around with this and would like to post back with details of any progress. How long is this thread likely to be left active so we can keep posting to it?


----------



## JiminSA

howard.a.s said:


> If I wanted to place the lines of text above the search box instead of underneath it, is this simple to achieve?


AAbsolutely - literally change the order in the html as you wish.


howard.a.s said:


> If I wanted to change the color of the search button, or to position it up, down, left, right, how would I do this?


The buton is a bootstrap button, which allows for up to 5 colours - *check this out*


howard.a.s said:


> If I wanted to make the search box border more rounded, presumably I can do this by using the border radius css?


Yes indeed - if you look at the bottom of the css in the above post, you'll see a class 'mytext', which you can tinker with to your heart's content.


howard.a.s said:


> Finally, you mention in your post about the use of fontawesome. Presumably there are a range of icons and other symbols, fonts, etc. that this allows use of. How do I change fonts, icons, symbols etc. or find out what types there are to actually use?


Check out *this link* - you can download the icons or have your own cloud link for personal website usage - very flexible tool.



howard.a.s said:


> Incidentally, it may take me a day or two to tinker around with this and would like to post back with details of any progress. How long is this thread likely to be left active so we can keep posting to it?


As far as I know TSG retain threads in perpetuum


----------



## howard.a.s

Absolutely fantastic! It'll probably take me a day or two to properly read through all of the information to which you've posted links, and to tinker around with the code, so I'll keep you posted as to my progress and also let you know if and when I have any further related questions. As for now though, I'd just like to say again how grateful I am to you for all of your help with this, and to thank you from the bottom of my heart. Catch you soon. Take care.


----------



## JiminSA

You're welcome Howard


----------



## howard.a.s

Just a quickie. As this bootstrap carousel apparently functions without the need for any javascript, is there any way for me to alter the duration that slides display for, and of the slides transition, i.e: slide in from right, left, fade-in, pixelate, etc.


----------



## JiminSA

You can specify transition speed using data-interval thus:


HTML:




and change it from slide to fade, but that seems to be it
Check out _*this link*_


----------



## JiminSA

howard.a.s said:


> As this bootstrap carousel apparently functions without the need for any javascript


Actually it's javascript is contained within bootstrap.js, but as I have shown you can alter defaults using data- tags


----------



## howard.a.s

Here's a quick update on my progress. I've moved the test over to my own hosting: http://www.themetaldetective.co.uk/sandbox/test/index.html with the carousel functioning successfully except for the left and right navigation chevrons and search button icon which refuse to render. I've checked folder and file structure but seem unable to identify what might be the reason for this. I expect it's down to something I can't see for looking  Any suggestion? No doubt my 'flabber' will be well and truly 'gasted' 

Once I can get this part sorted, I'll tinker around some more and post back with further updates. Incidentally, if I wanted to change the font for the text, I was going to experiment by using Google fonts, but as you mentioned that you prefer Font Awesome I guessed I could use this instead, only after reading through some of the information on their website I've come away with the impression that font awesome is only for icons? Is this correct?


----------



## JiminSA

That's right Howard - bit of a mis-nomer, should be iconawesome
Regarding the non-render of their icons substitute this link:


HTML:


https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

in this link:


HTML:




as I think your css is lacking in some way


----------



## howard.a.s

After I'd posted my most recent reply and while eating my lunch I got to thinking about what I'd seen when reading through the Font Awesome web site just a couple of nights ago, and what came to me was this vague recollection that in order to use Font Awesome it's necessary to first download its files from their website. Upon return to my desk I checked the font-awesome.min.css which has links to a folder named fonts. I went back to the Font Awesome website, downloaded the zip file, unzipped and placed the fonts folder in my main test folder and, hey presto, navigation arrows and search icon appear as if by magic! From reading your previous replies, you appear to mention this, but I obviously missed the point.  Okay, so I'm stupid. I admit it! :notworthy:

As to all the other stuff in the unzipped file, the folder named 'less' 'scss', and the 'font-awesome.css' as opposed to the 'font-awesome.min.css' I'm already linked to, presumably I don't need these for my carousel?

If I wanted to use Google fonts, would I place a link to this in the header of my doc, or would I download its files and install these locally, as with Font Awesome?

How would I position the search button closer to/align this with the search bar, so that the two appear without visible gap between, or slight misalignment? Can I just tweak the alignment for this in the Carousel css?

This Carousel page has it's own head and body, so when I'm ready can I just copy and paste the carousel section from this page, inserting it into my existing web page, making certain to carry across all relevant links and folders/files necessary for this to function. What about if the version of bootstrap being used to run my existing site is different from the version running this carousel? Would I link to both?


----------



## howard.a.s

Oh, almost forgot. If I wanted to change the carousel indicators to the style shown in this example http://v4-alpha.getbootstrap.com/components/carousel/ (3 rectangular horizontal bars as opposed to round dots) can this easily be achieved and by altering what?


----------



## JiminSA

howard.a.s said:


> From reading your previous replies, you appear to mention this, but I obviously missed the point


The point you missed (and you are not stupid!) is that the fontawesome icons are made renderable by some magic in the fonts folder, which I intuited was incomplete on your site and that's why I recoomended you use the FA CDN link so that you would get it. But you beat me to it by doing the download and inclusion


howard.a.s said:


> As to all the other stuff in the unzipped file, the folder named 'less' 'scss', and the 'font-awesome.css' as opposed to the 'font-awesome.min.css' I'm already linked to, presumably I don't need these for my carousel?


It may seem you don't need 'em, but it's all part of their magic, which I don't understand or need to understand, so long as it works


howard.a.s said:


> If I wanted to use Google fonts, would I place a link to this in the header of my doc, or would I download its files and install these locally, as with Font Awesome?


That's up to you - you can keep it in-house or use the cdn links.


howard.a.s said:


> How would I position the search button closer to/align this with the search bar, so that the two appear without visible gap between, or slight misalignment? Can I just tweak the alignment for this in the Carousel css?


Yes, if you can isolate the class involved and slap in a negative margin-left value to bring them closer ...


howard.a.s said:


> Oh, almost forgot. If I wanted to change the carousel indicators to the style shown in this example http://v4-alpha.getbootstrap.com/components/carousel/ (3 rectangular horizontal bars as opposed to round dots) can this easily be achieved and by altering what?


... and finaly, I'm pretty sure that you would have to use the following html to get the rectangular indicators ...


HTML:


  [LIST=1]
    [*]
    [*]
    [*]
  [/LIST]


----------



## howard.a.s

> It may seem you don't need 'em, but it's all part of their magic, which I don't understand or need to understand, so long as it works


 So probably best to upload the folders containing these to my web page folder just in case they are needed - yes?



> Yes, if you can isolate the class involved and slap in a negative margin-left value to bring them closer ...


 Do you think this would be in the main bootstrap css?

Anyway, thanks for the information. I'm off to look more closely in to the matters discussed and will post back once I've experimented some.

Cheers mate.


----------



## JiminSA

howard.a.s said:


> so it's probably best to upload the folders containing these to my web page folder just in case they are needed - yes?


yes


howard.a.s said:


> do you think this would be in the main bootstrap css?


...it's actually a bootstrap button rendered using this html:


HTML:


[I][/I]

you could put in some inline style like so ...


HTML:


[I][/I]


----------



## howard.a.s

Code:


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

I've given this a try but unfortunately it seems to make no difference. After a bit more research (and if my understanding of this is correct) the round navigation dots come as standard with bootstrap 3 while the rectangular navigation dots come as standard with bootstrap 4. As the carousel we are working with runs on bootstrap 3 this would possibly explain it. I have tinkered by downloading bootstrap 4 and altering the links in our carousel to point to this instead of bootstrap 3, but after doing this the carousel appears broken, similar to my earlier efforts where all of the images and elements appear static and tiled down the page. Not sure if this is due to something I might of overlooked, or whether our carousel will not work with bootstrap 4. You'd probably know this more than I. I did find this


Code:


https://community.servicenow.com/thread/249080

 which describes how to change round dots to squares by adding


Code:


 list-style-type: square;

 to


Code:


.carousel-indicators li

 and wondered whether this could be slightly changed to


Code:


 list-style-type: rectangle;

 and went off to look through the boostrap css to find the entry for carousel indicators li. Close to the end of the css I discovered carousel indicators, but without the li, so not really certain whether I'm looking in the right place. Kind of grasping at straws here, I think.... 

Any suggestions gratefully received.


----------



## JiminSA

Convert the display from dots to rectangles by adding a width and height and removing the border-radius.
This is best achieved, by adding the following to your main css file, so as to override the dot css in bootstrap:


HTML:


.carousel-indicators > li,
.carousel-indicators > li.active{
    width: 40px;
    height: 5px;
    border-radius: 0;
    border: solid 1px grey;
    background: lightgrey;
    text-indent: 0;
}
.carousel-indicators > li.active {
    background: white;
}

... you can adjust height and width as needsbe Oh and make sure your link for the main stylesheet is the last one in the head section (below bootstrap.css)


----------



## howard.a.s

I'm really sorry for not having replied sooner. It's been one of those days I'm afraid, and it looks like tomorrow may be shaping up to be similar, meaning that just like today I might not be able to post back until later.

Anyway, a great big thank you for your help in relation to indicators. I'll try this out just as soon as I catch up from today's (and possibly tomorrows) backlog.

Following from my previous post, there are a few more questions I'd like to ask, that is if you're not tired of answering them for me out of the kindness of your heart. Your help is, as always, very much appreciated. Thing is, I have a mind always eager to learn, even when sometimes it pushes me almost to the point of burnout.

Earlier in this thread we discussed overlays, or the absence of them in a carousel I was originally planning to use, until you suggested your much better alternative.

This got me to thinking more about overlays and how I'd go about adding more to an existing design should I ever need to do so.

To this end I've read some more about the bootstrap carousel and the various ways this can be altered in order to make it more customized, although when it comes to overlays, I still can't quite grasp the concept.

Is it okay to think of overlays as being like Photoshop layers, in that one can be stacked on another? Also, is it right that overlays use the z-index approach, whereby the z-index with the lowest number, i.e: 1, would be the base or foundation layer (sorry, overlay) and that the next highest number, i.e: 2 would be the next overlay to be stacked on the top of it, and so on and so forth?

When it comes to Photoshop layers, in my experience it's not possible to edit the content of layers beneath the uppermost layer without first selecting the desired layer from the editable list.

Is this concept the same with overlays? What I mean to say is, based upon this principle, if for instance z-index 10 includes left and right navigation arrows, while z-index 11 includes clickable links, and z-index 12 includes a sign up box, etc. etc. would the lowest number layers (the layers underneath) the uppermost layer still be accessible to the visitor in order they can use left and right nav, clickable links, sign up box, even though these do not all occupy the uppermost layer, or overlay?

Whatever the case, I'd like to learn more, and would you say that the pages to which you've already provided links be the best place to learn more about this, or can you suggest others?

When it comes to our current carousel, I previously asked whether I could adjust the search box to occupy different positions on each slide. Supposing I wanted to do this, is it okay using inline styling, or should I stick to using the external style sheet?

In my recent post I mentioned how I'd tried altering bootstrap 3 to bootstrap 4 in our carousel so as to achieve the rectangular indicators, and that in doing so I managed to break the entire thing. Perhaps my fault because I didn't make the changes correctly, but if this failure is due to newer versions of bootstrap not being compatible with previous version layouts, then what (if anything) can be done to correct this?

One final question (for now ) and a question I meant to ask you earlier, but that somehow got forgotten. While not entirely connected with this thread, this question does concern bootstrap carousels and whether you know of a carousel that would appear similarly to the example used in the following web page (not mine) https://www.hypnoticworld.com/

I'd like to understand how to create a carousel that can be made to fit into a specific-sized space as in this example - possibly 8 columns wide, or thereabouts.

Is this type of carousel an overall smaller variety, or is it possible to size-down a standard bootstrap carousel?

I shall look forward to reading your reply as and when you can spare the time. Take care


----------



## JiminSA

Phew Are we going for the largest TSG thread record? I think we've got it!


howard.a.s said:


> Is it okay to think of overlays as being like Photoshop layers, in that one can be stacked on another?


Nope - AFAIK it's one "layer" or overlay per slide only, I'm afraid


howard.a.s said:


> Whatever the case, I'd like to learn more, and would you say that the pages to which you've already provided links be the best place to learn more about this, or can you suggest others?


The most comprehesive guide would be _*here*_


howard.a.s said:


> When it comes to our current carousel, I previously asked whether I could adjust the search box to occupy different positions on each slide. Supposing I wanted to do this, is it okay using inline styling, or should I stick to using the external style sheet?


If you are only using the code once on your site, inline is fine. I would put it in a css file if I were to use it more than once ...


howard.a.s said:


> In my recent post I mentioned how I'd tried altering bootstrap 3 to bootstrap 4 in our carousel so as to achieve the rectangular indicators, and that in doing so I managed to break the entire thing. Perhaps my fault because I didn't make the changes correctly, but if this failure is due to newer versions of bootstrap not being compatible with previous version layouts, then what (if anything) can be done to correct this?


Version 4 is a revamp of 3 and therefore a separate entity -


howard.a.s said:


> One final question (for now ) and a question I meant to ask you earlier, but that somehow got forgotten. While not entirely connected with this thread, this question does concern bootstrap carousels and whether you know of a carousel that would appear similarly to the example used in the following web page (not mine) https://www.hypnoticworld.com/


You can achieve all the same effects using bootsrap carousel - you just need to modify the overlay css


howard.a.s said:


> Is this type of carousel an overall smaller variety, or is it possible to size-down a standard bootstrap carousel?


You can downsize quite easily, simply by modifying your containing div thus:


HTML:


----------



## howard.a.s

So it's fair to suppose that carousels requiring bootstrap 3 in order to run will not work with bootstrap 4, and vice versa? As to the horizontal tabbed carousel, I found this https://codepen.io/RetinaInc/pen/lyEfx - do you think this would be a suitable match to the carousel I referred to in my previous post? or this https://bootsnipp.com/snippets/featured/tabbed-slider-carousel


----------



## JiminSA

Like a hand to a glove ... as I said before, the styling for the bootstrap carousel can be modified to to your liking and this codepen has catered for text tabs nicely


----------



## JiminSA

howard.a.s said:


> Anyway, a great big thank you for your help in relation to indicators. I'll try this out just as soon as I catch up from today's (and possibly tomorrows) backlog.


You might want to consider optimising you negative right margin so that the button is placed within the search box. If you do this I think the mobile display will not cause a new line ...


----------



## howard.a.s

Returning to one of my earlier questions, if I wanted to insert this bootstrap 3 carousel in to an existing web page running a later version of 3 (or even 4) is it allowed to insert links to more than one version of bootstrap from a single web page so as to make both the existing page and the carousel work properly, and, if yes, does it matter which version of bootstrap I include a link to first, as earlier you mentioned how it's important to always include the link to bootstrap first and then to my own style sheet second, so just wondered if the link to 4 should come before the link to 3, and how about the jQuery versions, does this apply to these also?


----------



## JiminSA

No - they are mutually exclusive


----------



## howard.a.s

Okay, so the web page I'd like to insert your carousel into is running Bootstrap v3.3.5 and the carousel is running Bootstrap v3.3.7, so is it likely that the carousel will integrate in to this page without problem, and will there be the need to add a link to the later version of Bootstrap alongside the original? While I'm asking (and so as to hopefully learn more) the active carousel tab on the carousel example I linked to earlier at hypnoticworld.com appears to include a central pointer. Do you know whether there is a tutorial that explains how I can add this pointer to the codepen carousel example tabs? Finally, I now need to go away and have a good read and experiment using all of the information you have so kindly provided, and should I come up against any more problems, or have any further questions, please can I come back and ask you for advice by continuing posting to this same thread? Will you receive any notification when I post again, or should I start a new thread?


----------



## JiminSA

howard.a.s said:


> so is it likely that the carousel will integrate in to this page without problem, and will there be the need to add a link to the later version of Bootstrap alongside the original?


I wouldn't worry about differences between version numbers and keep your current link as is. 
I am not sure exactly what you mean by a 'central pointer' - if you could elucidate?


----------



## howard.a.s

Just when you thought I'd exhausted all of my questions......

When using Firefox Responsive Page Viewer to size down the carousel at https://offthegridsystems.co.za/test.html

I would like to make the search field respond in the same way it does here https://www.bootply.com/render/KtHWPftQSV by shrinking horizontally to fit the reducing size of the available screen. Please can you explain how I might be able to achieve this?

If you take a close look at the carousel here https://www.hypnoticworld.com/ and look specifically at the tab which is linked to whichever slide is active, there appears a tiny central pointer facing upwards. Any ideas how I can add this to my tabs?

BTW. You mentioned previously how we have probably broken the record for the longest post on TSG. Is continuing to add to this thread likely to cause any problems?


----------



## JiminSA

howard.a.s said:


> BTW. You mentioned previously how we have probably broken the record for the longest post on TSG. Is continuing to add to this thread likely to cause any problems?


I very much doubt it - plenty of followers to this thread and unnecessary restrictions are not the way TSG rolls ...


howard.a.s said:


> I would like to make the search field respond in the same way it does here https://www.bootply.com/render/KtHWPftQSV by shrinking horizontally to fit the reducing size of the available screen. Please can you explain how I might be able to achieve this?


If you take a look at the form div on this link and emulate it as near as you can, you should get the desired responsiveness ...


HTML:


        [I][/I]




howard.a.s said:


> a tiny central pointer facing upwards. Any ideas how I can add this to my tabs?


... if you look at the souce code for the hypnoticworld.com page you'll find lines containing ...


HTML:


<svg><polygon points="10,5,15,10,5,10,10,5"></polygon></svg>

 - experiment with it


----------



## howard.a.s

Thanks. I'm going to spend some time tinkering around with all of this and will post back again tomorrow with an update.


----------



## howard.a.s

Just a quick update as I am still playing around with the carousel and will post back with a link to my latest iteration together with any questions just as soon as I've got a bit further. As to the whole polygon thing, I came across this CSS clip-path maker site https://bennettfeely.com/clippy/ and thought it worthy of a mention.


----------



## howard.a.s

Okay, so I've played around some more with the carousel and attempted to follow your advice so as to make the search box respond similarly to the one in the bootply snippet example here: https://www.bootply.com/render/KtHWPftQSV

I've commented out the original code for the search box and inserted this:


Code:


 <form class="col-sm-12" id="searchForm">
    <div class="form-group col-sm-4 col-sm-offset-4">
      <div class="input-group input-group-lg center-block">
        <input type="text" class="form-control" placeholder="Search">
        <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
      </div>
    </div>
  </form>

I've also tried re-positioning the H1 and P text above the search bar.

I've now ended up with (as you probably might well have already guessed) a broken layout, not to mention the search button icon missing.  Obviously, Bootstrap is not my strong point. 

Here's the link http://www.themetaldetective.co.uk/sandbox/test/index2.html

Would you please be able to offer me any pointers as to where I might have gone wrong, and also, if I wanted to alter the font face, size, color and horizontal/vertical position of H1 and P text as it appears above the search box, which of the existing classes would I need to make these changes to, or will it be necessary for me to create new classes in order to be able to do this?


----------



## JiminSA

This might have been due 'center-block' being replaced in Bootstrap-4 by 'mx-auto' as I've just discovered in _*this SO thread*_
But you seem to be using Bootstap-3, is that right?


----------



## JiminSA

howard.a.s said:


> not to mention the search button icon missing


That would be because of your use of glyphicons instead of fontawesome icons in this bit of code


HTML:


[I][/I]


----------



## howard.a.s

Yes, the bootply snippet with the shrinking search bar here https://www.bootply.com/render/KtHWPftQSV is linked in the page head to


Code:


<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

 while our carousel http://www.themetaldetective.co.uk/sandbox/test/index2.html
into which I've pasted 


Code:


<form class="col-sm-12" id="searchForm">
    <div class="form-group col-sm-4 col-sm-offset-4">
      <div class="input-group input-group-lg center-block">
        <input type="text" class="form-control" placeholder="Search">
        <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
      </div>
    </div>
  </form>

appears to be running Bootstrap v3.3.7.

I'm lost..... seems like there isn't such a thing as backwards compatibility where all this is concerned.


----------



## howard.a.s

With regards to the tabbed carousel we discussed, I've managed to successfully get this up and running http://www.themetaldetective.co.uk/sandbox/tabbed-carousel/index.html but when I introduce the polygon code into exactly the same place as it appears in the source code of the hypnotic site I see this http://www.themetaldetective.co.uk/sandbox/tabbed-carousel/index2.html so I guess there must be more involved with positioning this polygon code than my understanding allows.


----------



## JiminSA

try this cdn link instead and see what happens ...


HTML:


----------



## howard.a.s

By experimenting some more I've now managed to get this https://www.bootply.com/render/KtHWPftQSV moved across to my own hosting here http://www.themetaldetective.co.uk/sandbox/bootply-carousel/index.html apparently without breaking anything this time... even managed to get my head around the non-working glyphicons after realizing that the reason they originally failed to work was due to my not having included the fonts folder, as also was the case when trying to get my font awesome icons working in an earlier post. I've included the H1 and P code from the source of your carousel into the carousel caption tag, and specified some pretty crazy colors just to prove to myself that this works, but what I can't understand is why my text overlaps the search box when viewed in small screens. Is there a simple fix for this? Should I be using display block, or span, or is it more to do with ??? Oh, one other matter.... In the head of the page there appears this block


Code:


    <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png">

which I am uncertain what to do with. Should I click on each of these links and download/save the source to my folder containing my carousel, or does this code even now need to be included since I've moved this over from Bootply?


----------



## howard.a.s

errr.... almost forgot  if I wanted to add one more slide, so making the total number 4, is this just a matter of replicating this part of the html, or would you think the js might not allow for this?


----------



## JiminSA

howard.a.s said:


> errr.... almost forgot  if I wanted to add one more slide, so making the total number 4, is this just a matter of replicating this part of the html, or would you think the js might not allow for this?


the slider js should handle as many slides as you want Just ensure that you use a unique (next sequential) slide target ...
i.e.


HTML:


  [LIST=1]
    [*]
    [*]
    [*]
  [/LIST]

and don't forget to add a container for extra slides along theses lines:


Code:


    <div class="item">
      <img src="assets/img/extraslide.jpg">
      <div class="container">
        <div class="carousel-caption">
          <h1>Example headline.</h1>
              <p>Put anything you like in here or don't include it at all, if you like.</p>
        </div>
      </div>
    </div>


----------



## JiminSA

howard.a.s said:


> which I am uncertain what to do with.


your bootstrap folder is incomplete (ie no img folder) so for the apple-icon stuff to work you need to upload the missing folder ...


----------



## JiminSA

JiminSA said:


> your bootstrap folder is incomplete (ie no img folder) so for the apple-icon stuff to work you need to upload the missing folder ...


 ... this also applies to bootply.com! They also do not have an img folder. Rather take out the apple-icon stuff, but not the IE9 stuff.


----------



## howard.a.s

....so if I understand correctly, take out this


Code:


        <link rel="apple-touch-icon" href="/bootstrap/img/apple-touch-icon.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/bootstrap/img/apple-touch-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/bootstrap/img/apple-touch-icon-114x114.png">

while making certain I keep this


Code:


 <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

and as for this http://www.themetaldetective.co.uk/sandbox/bootply-carousel/index.html


> what I can't understand is why my text overlaps the search box when viewed in small screens. Is there a simple fix for this? Should I be using display block, or span, or is it more to do with ???


any ideas as to what adjustments I might try in order to correct this problem?

If I can get this text overlapping search box when viewed in smaller screens thing sorted, I think this could well mean that I'm just about okay to try and progress further without too many more questions, as even if I can't get my head around how to insert the polygons on to the buttons of the other carousel, I reckon I can probably live without them, or puzzle this out for myself.

Once again, I'd like to reaffirm how grateful I am for all your help so far


----------



## JiminSA

Yes Howard, that is the way to edit the links.
Regarding the text positioning:
There is styling in your html source code which places the captions 37% of the div height from the top:


HTML:


.carousel-caption {
    z-index: 10;
    position: absolute;
    top: 37%;
}

You could adjust that till you're happy with it


----------



## howard.a.s

Thanks for that. Not had much opportunity to experiment with this yet, so will give this a whirl and let you know once I've tried it out. Cheers. Take care.


----------



## howard.a.s

Just when you thought I'd disappeared without trace, here I am again with an update. Okay, so I haven't had very much time over the past few days to tinker with all of the many matters we've discussed throughout the course of this thread, but I am making slow progress and hope to be able to post a link to my latest iteration of this carousel within the next day or two. I also have questions concerning how to place my captions on backgrounds and with a certain amount of transparency when aligned to the left and also to the top in the tabbed version of the carousel. Anyhow, as I say, I'll post back again asap. Cheers for now.


----------



## JiminSA

Okeedo Howard - eyes peeled


----------



## howard.a.s

Following on from our earlier post and with regards to http://www.themetaldetective.co.uk/sandbox/tabbed-carousel/index.html. I have been doing my best to work out how to position the polygon point centrally on the top of the active tab of this carousel, having tried inserting the code for the pointer into the same place as it appears in the source code of https://www.hypnoticworld.com/
but still no luck in getting it to sit right. I've swapped the cdn link to the version of bootstrap you suggested. Please can you offer any suggestions as to how I can position the pointer at top center of the active tab? Here's my latest attempt http://www.themetaldetective.co.uk/sandbox/tabbed-carousel/index3.html


----------



## JiminSA

If you take a look at the source code (on chrome, right-click and view source code) for the original hypnoticworld link _*(here) *_you'll see a whole lot of custom styling we haven't included in your emulation (salient portion appears to be around line 202), but best to include the whole enchalada ...


----------



## JiminSA

To be more specific, place lines 159 - 261 in the head section of your html file:


HTML:


----------



## howard.a.s

I'm going to give this a try and will post back again later to let you know how I get on. In the meantime..... you mentioned earlier about how getting my search box to work would be my next challenge.... I've been trying to figure out were to insert this:



Code:


<table><tr><td>
<form action="http://www.mysite.com/cgi-bin/sgx2/asearch.cgi" method="post">
<input type="hidden" name="a" value="2871!search">
<input name="query" value="" type="text" size="11">
<input type="submit" name="submit" value="Search"></form></td></tr></table>

into this:



Code:


<form class="col-sm-12" id="searchForm">
    <div class="form-group col-sm-4 col-sm-offset-4">
      <div class="input-group input-group-lg center-block">
        <input type="text" class="form-control" placeholder="Search">
        <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
      </div>
    </div>
  </form>

in order to make the search form actually work.

The first example of code functions properly, albeit for the purposes of this post I've swapped out the actual external domain I'd like the form to search, having replaced this with www.mysite.com.

I've tried inserting blocks of the original code into various positions in the new responsive code, but nothing I've tried seems to work.

Please can you offer any advice as to how I can integrate these 2 together so as to end up with a working search box?


----------



## JiminSA

Sure - just drop the table elements and insert the form into your form like this:


HTML:


            [I][/I]

 ... although, I am not 100% confident that using a span element to submit the form will work, I think it ought to


----------



## howard.a.s

Seems you were right not to be 100% confident that using a span element to submit the form would work.

I've swapped out



Code:


span type="submit"

 for


Code:


input type="submit"

 and the form works but the layout becomes broken, with what appears to remain of the submit button now aligning left underneath the search bar and without its glyphicon.

What could I try so as to correct the layout?


----------



## JiminSA

Could you give us a link to the current setup?


----------



## howard.a.s

Here's a link to the current setup: http://www.themetaldetective.co.uk/sandbox/bootply-carousel-2/index.html

As you can see, slide 2 includes the working search field with its broken layout, with all of the other slides still using the span tag but obviously not working.

On the upside, as you can see I have managed to get the search box and its associated text to behave properly when resized down to smaller screens and altered the navigation tabs from round to rectangular. I've also added some semi-transparent backgrounds behind the text with rounded corners. I'm not 100% certain whether I've gone about coding all of this the right way, but at least it works. I think we've ended up with a kind of hybrid between your original carousel, the bootply version, together with some of my own adjustments made with the help of your advice.....

Do you think there's hope for the search form?

I did find this https://stackoverflow.com/questions/14542238/treat-a-span-as-input-element but was rather hoping there might be a simpler solution.


----------



## JiminSA

Just watching Liverpool v Sevilla - will take a gander tomorrow ...


----------



## JiminSA

To avoid the break (new line) try using a tag as opposed to the tag for the submit ... you may want to give it some inline styling to align it next to, or even in, the search box (style="margin-left:-xxpx")


----------



## howard.a.s

Okay, I'll give this a try tomorrow and see how I get on. I'm also still working on the polygon tabbed carousel and hope to also have an update on this over the next day or two. Watch this space..... BTW. I hope whichever football team you were hoping to win managed to do so.....


----------



## JiminSA

howard.a.s said:


> BTW. I hope whichever football team you were hoping to win managed to do so.....


I've been a Liverpool supporter for nigh on 60 years but last night's second half saw them lose a 3-0 advantage to draw 3-3 - disappointing


----------



## howard.a.s

Rather sooner than anticipated I've tried out what you suggest, by substituting the tag for the tag and then applying a little inline styling so as to position the button itself next to the search field. Having done this, the form does send successfully, but the search bar is much less wide than when using the tag, the result of which is that it no longer retains the same width as the text above it when resized in to smaller screens. I played around with this for some time, adding a width to the search field so as to make it appear the same width as the text above, but then it just refuses to resize smaller inline with the text  I've also been tinkering with the https://stackoverflow.com/questions/34505752/on-form-submit-using-span-button-redirect-to-new-site (using javascript to send form using the tag). I've tried inserting what appears to be the necessary code into my form where I think this should go, but still nothing works. Do you understand how to make the form send when still formatted with the original tags and by using the javascript method?


----------



## howard.a.s

Oh dear... I can only hope Liverpool do better for you next time they play 

Following up on what I just wrote, seems bootstrap routinely uses with input groups https://v4-alpha.getbootstrap.com/components/input-group/ so perhaps this problem is down to the formatting of the original code that came with this search bar? I also found this https://www.w3schools.com/tags/att_form_action.asp and am not certain whether something like this might be the answer, only I don't have a clue how to make this integrate and work with my existing form.


----------



## JiminSA

The w3schools link is for basic form submission using the input tag, which automaticall creates a new line - not what you want!


howard.a.s said:


> Do you understand how to make the form send when still formatted with the original tags and by using the javascript method?


Yes. We need to put in a javascript onclick function to the original form's span submit. Change your form thus:


HTML:


       [I][/I]

That ought to submit and retain the original alignment styling


----------



## howard.a.s

I've only just managed to read your answer to my post of yesterday evening and am happy to see that there may be a way to make my form submit without changing its original layout. I'm off to give this a try and will post back with results as soon as I can, although this may not be until tomorrow evening. Thanks again. Catch you soon.


----------



## JiminSA

howard.a.s said:


> Following up on what I just wrote, seems bootstrap routinely uses with input groups https://v4-alpha.getbootstrap.com/components/input-group/ so perhaps this problem is down to the formatting of the original code that came with this search bar?


What a find - I didn't know of this add-on function - I shall also take some time out to integrate it into your code, tomorrow ...


----------



## JiminSA

JiminSA said:


> What a find - I didn't know of this add-on function


Durh! Even though it's been staring me in the face for several posts!
I must be losing it! It's already in use


----------



## JiminSA

Howard I'm away for the weekend - will catch up Monday


----------



## howard.a.s

Following up on previous posts, I've tried adding


Code:


<span class="input-group-addon" onclick="document.forms['searchForm'].submit();><i class="glyphicon glyphicon-search"></i></span>

 with the result being that the form still stubbornly refuses to submit. Anyway, I'll spend some more time experimenting with this over the weekend and hopefully come up with a solution. I'll look forward to catching up with you at the beginning of next week. Enjoy your weekend.


----------



## howard.a.s

Just a quick update.... I've now managed to get the search submit to work properly and will post back again with a more detailed explanation, together with a link to the latest version, hopefully by tomorrow evening.


----------



## howard.a.s

Apologies for having taken rather longer than anticipated to post back with a more detailed explanation, but here goes... Following the advice you gave in your previous post, I copied and pasted the code snippet you suggested directly into my carousel, but still no good. After carefully checking the inserted code I discovered the problem to be down to a missing " as highlighted here . After entering the missing " the search began to work properly.  Spurred on by this success, I added some inline styling to bring the height of the search field into line with the submit button and to give the left-hand end of the search field some nicely rounded corners. I've also managed to add touch swipe capabilities by following http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/
Here's a link to the most recent version of the carousel http://www.themetaldetective.co.uk/sandbox/bootply-carousel-3/index.html
I've also been making progress with the polygon carousel and will be posting back again with a link to the latest version of this just as soon as possible.
Before I close, I'd just like to ask whether you know anything about adding custom certificates to web hosting so as to move from http to https? I realize this question is completely unrelated, but I thought I'd try asking you before posting this question in the appropriate section of the forum, whichever that may be.


----------



## JiminSA

Great that you have progressed


howard.a.s said:


> I'd just like to ask whether you know anything about adding custom certificates to web hosting so as to move from http to https?


Certainly ... just get (perhaps they'll charge) an SSL certificate from your Hosting company and they should make the necessary site adjustments. You might need to put in some .htaccess or even PHP script to redirect http links to https, but we'll cross that bridge when we come to it ...


----------



## JiminSA

howard.a.s said:


> After carefully checking the inserted code I discovered the problem to be down to a missing "


Woops My Bad! Typo! But well spotted (I like to keep you on yer toes!)


----------



## howard.a.s

As I say, completely unrelated to this thread, but yeah... I've already looked in to the possibility of having my web host set up SSL for me, only having several websites already working from my single hosting account, and with each requiring its own certificate, the charges are likely to become costly, and while eager to secure my websites I am unable to justify the additional expense right now. With this in mind, I did a bit of research and came across this https://letsencrypt.org/ and also checked the support pages of my hosting provider and found this https://www.123-reg.co.uk/support/category/SSL-Certificates/ and this https://www.123-reg.co.uk/support/a...d-an-ssl-certificate-to-my-domainwebsite-627/ and was kind of wondering whether this might be something I could do for myself, only I don't think (not yet had a conversation with my hosting provider) 123Reg have Let's Encrypt support installed on their servers, meaning I'd have to manually carry out the entire procedure and renew each certificate as and when they become due. According to the Let's encrypt website, apparently some large hosting providers such as 1&1 Internet and GoDaddy already support Let's Encrypt and may even go so far as to install these certificates for free, but unfortunately my hosting provider does not seem to appear among the list of those offering this support. I think this is a shame, as if serious about securing the web it really shouldn't come down to having to pay when free alternatives exist. I'd certainly have a go at this myself, but not having any experience of running instructions on the command line, who knows what kind of problems I might encounter, or what damage I could do  ..... 


JiminSA said:


> Woops My Bad! Typo! But well spotted (I like to keep you on yer toes!)


For anyone who's interested, here's the source code for the most recent iteration of our carousel, just in case the links to my working version become altered or broken.



Code:


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Bootply snippet - Bootstrap Carousel with Search Form</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="description" content="Bootstrap A Bootstrap carousel example with centered form example." />
   
       <link href="css/bootstrap.min.css" rel="stylesheet">
 
        <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
 
<style type="text/css">


body {
  padding-bottom: 40px;
  color: #5a5a5a;
}

H1 {
   color: #fff;
    font-size: 38px;
    background:#2e6200;
    background-color:rgba(46, 98, 0, 0.7);
    padding:5px 10px 5px 10px;
    border-radius:5px;
}

.container p {
     color: #fff;
     margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
     background:#666666;
     background-color:rgba(102, 102, 102, 0.6);
     padding:2px 10px 5px 10px;
     border-radius:5px;
}


/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

.carousel {
  margin-bottom: 60px;
}

.carousel-control {
  top: 76%;
}

.carousel-caption {
  z-index: 10;
}

.carousel .item {
  height: 500px;
  background-color:#bbb;
  overflow:hidden;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

#searchForm {
    position:absolute;
      top:7%;
    right:25%;
}

.carousel-indicators > li,
.carousel-indicators > li.active{
    width: 40px;
    height: 5px;
    border-radius: 0;
    border: solid 1px grey;
    background: lightgrey;
    text-indent: 0;
}
.carousel-indicators > li.active {
    background: white;
}

/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 768px) {

  .carousel-inner>.item>img, .carousel-inner>.item>a>img {
      max-width:inherit;
  }

  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }

</style>
 
     </head>
 
    <body >


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide">
  <!-- 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">
    <div class="item active">
      <img src="">
      <div class="container">
        <form class="col-sm-12" id="searchForm" action="http://www.google.com/cgi-bin/sgx2/asearch.cgi" method="post">
    <div class="form-group col-sm-4 col-sm-offset-4"><h1 class="text-center">First Slide</h1><p class="text-center">Lorem ipsum dolor. Lorem ipsum dolor sit amet consectetuer adipiscing elit.</p>
        <div class="input-group input-group-lg center-block">
            <input type="hidden" name="a" value="2871!search">
            <input type="text" name="query" class="form-control" style="height:50px;border-radius:5px 0 0 5px;" placeholder="Search">
                <span class="input-group-addon" onclick="document.forms['searchForm'].submit();"><i class="glyphicon glyphicon-search"></i></span>
        </div>
    </div>
</form>
 <div class="carousel-caption">
        </div>
      </div>
    </div>
    <div class="item">
      <img src="">
      <div class="container">
        <form class="col-sm-12" id="searchForm" action="http://www.google.com/cgi-bin/sgx2/asearch.cgi" method="post">
    <div class="form-group col-sm-4 col-sm-offset-4"><h1 class="text-center">Second Slide</h1><p class="text-center">Lorem ipsum dolor. Lorem ipsum dolor sit amet consectetuer adipiscing elit.</p>
        <div class="input-group input-group-lg center-block">
            <input type="hidden" name="a" value="2871!search">
                <input type="text" name="query" class="form-control" style="height:50px;border-radius:5px 0 0 5px;" placeholder="Search">
                <span class="input-group-addon" onclick="document.forms['searchForm'].submit();"><i class="glyphicon glyphicon-search"></i></span>
      </div>
    </div>
  </form>
   <div class="carousel-caption">
          </div>
      </div>
    </div>
    <div class="item">
      <img src="">
      <div class="container">
        <form class="col-sm-12" id="searchForm" action="http://www.google.com/cgi-bin/sgx2/asearch.cgi" method="post">
    <div class="form-group col-sm-4 col-sm-offset-4"><h1 class="text-center">Third Slide</h1><p class="text-center">Lorem ipsum dolor. Lorem ipsum dolor sit amet consectetuer adipiscing elit.</p>
        <div class="input-group input-group-lg center-block">
            <input type="hidden" name="a" value="2871!search">
                <input type="text" name="query" class="form-control" style="height:50px;border-radius:5px 0 0 5px;" placeholder="Search">
                <span class="input-group-addon" onclick="document.forms['searchForm'].submit();"><i class="glyphicon glyphicon-search"></i></span>
      </div>
    </div>
  </form>
   <div class="carousel-caption">
          </div>
      </div>
    </div>
     <div class="item">
      <img src="">
      <div class="container">
        <form class="col-sm-12" id="searchForm" action="http://www.google.com/cgi-bin/sgx2/asearch.cgi" method="post">
    <div class="form-group col-sm-4 col-sm-offset-4"><h1 class="text-center">Fourth Slide</h1><p class="text-center">Lorem ipsum dolor. Lorem ipsum dolor sit amet consectetuer adipiscing elit.</p>
        <div class="input-group input-group-lg center-block">
            <input type="hidden" name="a" value="2871!search">
                <input type="text" name="query" class="form-control" style="height:50px;border-radius:5px 0 0 5px;" placeholder="Search">
                <span class="input-group-addon" onclick="document.forms['searchForm'].submit();"><i class="glyphicon glyphicon-search"></i></span>
      </div>
    </div>
  </form>
   <div class="carousel-caption">
          </div>
        </div>
      </div>
     </div>
 
<!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <i class="glyphicon glyphicon-chevron-left"></i>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <i class="glyphicon glyphicon-chevron-right"></i>
  </a>
</div>
<!-- /.carousel -->

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="jquery.mobile.custom.min.js"></script>

<script>
$(document).ready(function() {
   $("#myCarousel").swiperight(function() {
      $(this).carousel('prev');
    });
   $("#myCarousel").swipeleft(function() {
      $(this).carousel('next');
   });
});
</script>
   
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!--<script type='text/javascript' src="js/bootstrap.min.js"></script>-->
 
</body>
</html>

and here's the


Code:


jquery.mobile.custom.min.js

 which I downloaded from http://jquerymobile.com/download-builder/ following advice given in the tutorial mentioned earlier http://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/

When constructing the custom download, I ticked only the Touch box under the heading Events, before downloading the zip file, unpacking and adding the relevant file to the folder containing my carousel.



Code:


/*! jQuery Mobile v1.4.5 | Copyright 2010, 2014 jQuery Foundation, Inc. | jquery.org/license */

(function(e,t,n){typeof define=="function"&&define.amd?define(["jquery"],function(r){return n(r,e,t),r.mobile}):n(e.jQuery,e,t)})(this,document,function(e,t,n,r){(function(e,t,n,r){function T(e){while(e&&typeof e.originalEvent!="undefined")e=e.originalEvent;return e}function N(t,n){var i=t.type,s,o,a,l,c,h,p,d,v;t=e.Event(t),t.type=n,s=t.originalEvent,o=e.event.props,i.search(/^(mouse|click)/)>-1&&(o=f);if(s)for(p=o.length,l;p;)l=o[--p],t[l]=s[l];i.search(/mouse(down|up)|click/)>-1&&!t.which&&(t.which=1);if(i.search(/^touch/)!==-1){a=T(s),i=a.touches,c=a.changedTouches,h=i&&i.length?i[0]:c&&c.length?c[0]:r;if(h)for(d=0,v=u.length;d<v;d++)l=u[d],t[l]=h[l]}return t}function C(t){var n={},r,s;while(t){r=e.data(t,i);for(s in r)r[s]&&(n[s]=n.hasVirtualBinding=!0);t=t.parentNode}return n}function k(t,n){var r;while(t){r=e.data(t,i);if(r&&(!n||r[n]))return t;t=t.parentNode}return null}function L(){g=!1}function A(){g=!0}function O(){E=0,v.length=0,m=!1,A()}function M(){L()}function _(){D(),c=setTimeout(function(){c=0,O()},e.vmouse.resetTimerDuration)}function D(){c&&(clearTimeout(c),c=0)}function P(t,n,r){var i;if(r&&r[t]||!r&&k(n.target,t))i=N(n,t),e(n.target).trigger(i);return i}function H(t){var n=e.data(t.target,s),r;!m&&(!E||E!==n)&&(r=P("v"+t.type,t),r&&(r.isDefaultPrevented()&&t.preventDefault(),r.isPropagationStopped()&&t.stopPropagation(),r.isImmediatePropagationStopped()&&t.stopImmediatePropagation()))}function B(t){var n=T(t).touches,r,i,o;n&&n.length===1&&(r=t.target,i=C(r),i.hasVirtualBinding&&(E=w++,e.data(r,s,E),D(),M(),d=!1,o=T(t).touches[0],h=o.pageX,p=o.pageY,P("vmouseover",t,i),P("vmousedown",t,i)))}function j(e){if(g)return;d||P("vmousecancel",e,C(e.target)),d=!0,_()}function F(t){if(g)return;var n=T(t).touches[0],r=d,i=e.vmouse.moveDistanceThreshold,s=C(t.target);d=d||Math.abs(n.pageX-h)>i||Math.abs(n.pageY-p)>i,d&&!r&&P("vmousecancel",t,s),P("vmousemove",t,s),_()}function I(e){if(g)return;A();var t=C(e.target),n,r;P("vmouseup",e,t),d||(n=P("vclick",e,t),n&&n.isDefaultPrevented()&&(r=T(e).changedTouches[0],v.push({touchID:E,x:r.clientX,y:r.clientY}),m=!0)),P("vmouseout",e,t),d=!1,_()}function q(t){var n=e.data(t,i),r;if(n)for(r in n)if(n[r])return!0;return!1}function R(){}function U(t){var n=t.substr(1);return{setup:function(){q(this)||e.data(this,i,{});var r=e.data(this,i);r[t]=!0,l[t]=(l[t]||0)+1,l[t]===1&&b.bind(n,H),e(this).bind(n,R),y&&(l.touchstart=(l.touchstart||0)+1,l.touchstart===1&&b.bind("touchstart",B).bind("touchend",I).bind("touchmove",F).bind("scroll",j))},teardown:function(){--l[t],l[t]||b.unbind(n,H),y&&(--l.touchstart,l.touchstart||b.unbind("touchstart",B).unbind("touchmove",F).unbind("touchend",I).unbind("scroll",j));var r=e(this),s=e.data(this,i);s&&(s[t]=!1),r.unbind(n,R),q(this)||r.removeData(i)}}}var i="virtualMouseBindings",s="virtualTouchID",o="vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),u="clientX clientY pageX pageY screenX screenY".split(" "),a=e.event.mouseHooks?e.event.mouseHooks.props:[],f=e.event.props.concat(a),l={},c=0,h=0,p=0,d=!1,v=[],m=!1,g=!1,y="addEventListener"in n,b=e(n),w=1,E=0,S,x;e.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(x=0;x<o.length;x++)e.event.special[o[x]]=U(o[x]);y&&n.addEventListener("click",function(t){var n=v.length,r=t.target,i,o,u,a,f,l;if(n){i=t.clientX,o=t.clientY,S=e.vmouse.clickDistanceThreshold,u=r;while(u){for(a=0;a<n;a++){f=v[a],l=0;if(u===r&&Math.abs(f.x-i)<S&&Math.abs(f.y-o)<S||e.data(u,s)===f.touchID){t.preventDefault(),t.stopPropagation();return}}u=u.parentNode}}},!0)})(e,t,n),function(e){e.mobile={}}(e),function(e,t){var r={touch:"ontouchend"in n};e.mobile.support=e.mobile.support||{},e.extend(e.support,r),e.extend(e.mobile.support,r)}(e),function(e,t,r){function l(t,n,i,s){var o=i.type;i.type=n,s?e.event.trigger(i,r,t):e.event.dispatch.call(t,i),i.type=o}var i=e(n),s=e.mobile.support.touch,o="touchmove scroll",u=s?"touchstart":"mousedown",a=s?"touchend":"mouseup",f=s?"touchmove":"mousemove";e.each("touchstart touchmove touchend tap taphold swipe swipeleft swiperight scrollstart scrollstop".split(" "),function(t,n){e.fn[n]=function(e){return e?this.bind(n,e):this.trigger(n)},e.attrFn&&(e.attrFn[n]=!0)}),e.event.special.scrollstart={enabled:!0,setup:function(){function s(e,n){r=n,l(t,r?"scrollstart":"scrollstop",e)}var t=this,n=e(t),r,i;n.bind(o,function(t){if(!e.event.special.scrollstart.enabled)return;r||s(t,!0),clearTimeout(i),i=setTimeout(function(){s(t,!1)},50)})},teardown:function(){e(this).unbind(o)}},e.event.special.tap={tapholdThreshold:750,emitTapOnTaphold:!0,setup:function(){var t=this,n=e(t),r=!1;n.bind("vmousedown",function(s){function a(){clearTimeout(u)}function f(){a(),n.unbind("vclick",c).unbind("vmouseup",a),i.unbind("vmousecancel",f)}function c(e){f(),!r&&o===e.target?l(t,"tap",e):r&&e.preventDefault()}r=!1;if(s.which&&s.which!==1)return!1;var o=s.target,u;n.bind("vmouseup",a).bind("vclick",c),i.bind("vmousecancel",f),u=setTimeout(function(){e.event.special.tap.emitTapOnTaphold||(r=!0),l(t,"taphold",e.Event("taphold",{target:o}))},e.event.special.tap.tapholdThreshold)})},teardown:function(){e(this).unbind("vmousedown").unbind("vclick").unbind("vmouseup"),i.unbind("vmousecancel")}},e.event.special.swipe={scrollSupressionThreshold:30,durationThreshold:1e3,horizontalDistanceThreshold:30,verticalDistanceThreshold:30,getLocation:function(e){var n=t.pageXOffset,r=t.pageYOffset,i=e.clientX,s=e.clientY;if(e.pageY===0&&Math.floor(s)>Math.floor(e.pageY)||e.pageX===0&&Math.floor(i)>Math.floor(e.pageX))i-=n,s-=r;else if(s<e.pageY-r||i<e.pageX-n)i=e.pageX-n,s=e.pageY-r;return{x:i,y:s}},start:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y],origin:e(t.target)}},stop:function(t){var n=t.originalEvent.touches?t.originalEvent.touches[0]:t,r=e.event.special.swipe.getLocation(n);return{time:(new Date).getTime(),coords:[r.x,r.y]}},handleSwipe:function(t,n,r,i){if(n.time-t.time<e.event.special.swipe.durationThreshold&&Math.abs(t.coords[0]-n.coords[0])>e.event.special.swipe.horizontalDistanceThreshold&&Math.abs(t.coords[1]-n.coords[1])<e.event.special.swipe.verticalDistanceThreshold){var s=t.coords[0]>n.coords[0]?"swipeleft":"swiperight";return l(r,"swipe",e.Event("swipe",{target:i,swipestart:t,swipestop:n}),!0),l(r,s,e.Event(s,{target:i,swipestart:t,swipestop:n}),!0),!0}return!1},eventInProgress:!1,setup:function(){var t,n=this,r=e(n),s={};t=e.data(this,"mobile-events"),t||(t={length:0},e.data(this,"mobile-events",t)),t.length++,t.swipe=s,s.start=function(t){if(e.event.special.swipe.eventInProgress)return;e.event.special.swipe.eventInProgress=!0;var r,o=e.event.special.swipe.start(t),u=t.target,l=!1;s.move=function(t){if(!o||t.isDefaultPrevented())return;r=e.event.special.swipe.stop(t),l||(l=e.event.special.swipe.handleSwipe(o,r,n,u),l&&(e.event.special.swipe.eventInProgress=!1)),Math.abs(o.coords[0]-r.coords[0])>e.event.special.swipe.scrollSupressionThreshold&&t.preventDefault()},s.stop=function(){l=!0,e.event.special.swipe.eventInProgress=!1,i.off(f,s.move),s.move=null},i.on(f,s.move).one(a,s.stop)},r.on(u,s.start)},teardown:function(){var t,n;t=e.data(this,"mobile-events"),t&&(n=t.swipe,delete t.swipe,t.length--,t.length===0&&e.removeData(this,"mobile-events")),n&&(n.start&&e(this).off(u,n.start),n.move&&i.off(f,n.move),n.stop&&i.off(a,n.stop))}},e.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe.left",swiperight:"swipe.right"},function(t,n){e.event.special[t]={setup:function(){e(this).bind(n,e.noop)},teardown:function(){e(this).unbind(n)}}})}(e,this)});

For the record, I plan to alter the link to the externally hosted version of bootstrap.min.js, replacing this with a link to bootstrap.min.js hosted on my own server. I also plan to move the custom css to its own external stylesheet. In the search form code, you can replace the link to http://www.google.com/cgi-bin/sgx2/asearch.cgi with a link to the destination of your choice. You can also remove and replace the


Code:


2871!search

 as this only exists for my own purposes. I hope this helps.

Jim, if you read this and consider that I should include additional guide notes for a future visitor, please just let me know - or go ahead and add these yourself.


----------



## JiminSA

howard.a.s said:


> I'd certainly have a go at this myself, but not having any experience of running instructions on the command line, who knows what kind of problems I might encounter, or what damage I could do  .....


I recommend that you post a new thread and open it up for comment from people who have more knowledge than just myself ...


howard.a.s said:


> Jim, if you read this and consider that I should include additional guide notes for a future visitor, please just let me know - or go ahead and add these yourself.


Quite frankly, the amount of infomation already available in the preceding posts is pretty conclusive and I don't see a need for more


----------



## howard.a.s

Okay, thank you Jim. I will probably also post the code for


Code:


jquery.mobile.custom.min.js

 as this is actually a cut down from the full version following advice given in the tutorial. I initially linked to the full version, but this seemed to cause problems with the width and height of my search field, so presumably the full version of jquery.mobile clashes with jquery itself? Anyway, having linked to the cut down version, all works fine. Anyone wanting to try out this carousel for themselves in the future will certainly benefit from having the correct compilation of jquery.mobile.

As for the Let's Encrypt question, I'll start a new thread in the appropriate section. Any ideas as to which section might be my best choice?

I'll leave this thread open so I can post back with a link to my polygon carousel just as soon as its ready, and I may also have further questions with regards to our search bar carousel once I've had an opportunity to check this cross browser.

Catch you soon..... Take care.


----------



## howard.a.s

For the record, additional notes, together with the custom jquery mobile code have now been added to my previous post.


----------



## JiminSA

howard.a.s said:


> Any ideas as to which section might be my best choice?


Right here bro!


----------



## howard.a.s

Whoa.... Sorry for the extended delay in posting back with an update. It's been a busy time just lately and it seems like I hardly ever get a spare moment. Still, anyway, here I am at long last! As promised, here is a link to the polygon pointer version of the carousel I currently have in development http://www.themetaldetective.co.uk/development/polygon-carousel/index.html

Just like with our search box carousel, I'd also like to add the touch swipe functionality to this carousel, especially considering how I found getting this to work with the search box carousel such a breeze - even for me, which has to be saying something  All I did was to follow the tutorial on how to add touch swipe (the same tutorial that I posted a link to previously) which actually involved adding only a small piece of code, together with a link to jquery mobile, and, hey presto! touch swipe sprang to life. Not so with this polygon carousel, apparently.  I added the same code and link to jquery mobile, but the carousel was having none of it. Perhaps I missed out something important? Anyway, I need to go back and try over again. Perhaps maybe it's because this is more of a customized carousel and the touch swipe functionality can't be plugged in so easily? Any thoughts?

As to the other question I was asking about in my most recent posts, with regards to upgrading my websites to https. After a recent conversation with my web hosts, it seems they won't allow any custom certificates to be installed on their servers, only the ones they sell and install themselves. So it looks like I shall have to either stick with my existing hosts and begin to move my websites over just as soon as I can afford to do so, or move my websites to a host that will allow free certificates, always assuming I could even figure out how to install and keep these up to date. There's certainly a lot to think about, and I'll have to ponder on this for a while..... 

Anyway, I'd just like to thank you again for all of your help and advice in connection with my website woes over the course of this year and also to wish you and yours a very Merry Christmas and a Happy New Year. I shall, of course, post back again over the course of the next few days once I've had an opportunity to play around with the touch swipe problem. Oh, and I have checked out our search box carousel in I.E, Opera, and Chrome, as well as Firefox, and it appears to resize and function okay, so all's good


----------



## JiminSA

Very positive, Howard and thanks for the Season's Greetings - straight back at ya I am not at all familiar with touch swipe, so can't offer a viewpoint offhand. But let's see how you progress and go from there ...


----------



## howard.a.s

Happy New Year!  Here's a quick update on my progress with the Polygon Carousel. I've tinkered around with adding the touch swipe support using jQuery, but despite my best efforts it just doesn't seem to want to work. Here's a link to the carousel with the jquery mobile added http://www.themetaldetective.co.uk/development/polygon-carousel-2/index.html. Following the tutorial at https://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/ I'm now going to try adding support by means of the second approach, and by using the touchswipe plugin. I'll post back again once this has been done to let you know whether or not it works. BTW, do you know anything about how to add Google Recaptcha to contact forms, and do you know of an even better and potentially simpler way of securing a contact form?


----------



## JiminSA

howard.a.s said:


> BTW, do you know anything about how to add Google Recaptcha to contact forms, and do you know of an even better and potentially simpler way of securing a contact form?


Part one of the question is easy-peasy and is explained quite simply *here ...*
Part two, I favour using a honeypot approach to detect spambots as explained _*here ...*_, basically because of it's invisibility. But it will not stop those bots that look for and hijack form fields named in a specific way (e.g. 'comments' or 'message').


----------



## howard.a.s

Step 1 seems simple enough, but I'm not really sure about Steps 2, 3, 4, 5. I'll re-read the page and try to fathom this out for myself before asking questions.


----------



## JiminSA

Ok Howard
On re-reading my previous post I should clarify that some bots which I've had tangles with, ignore all but specifically named input fields (e.g. 'comments', 'message' etc.,) and Honeypots are no fix for them, so you would be better off pursuing the 'I'm not a Robot' Google approach and forgetting the Honeypot.
But I did think it worth a mention ...


----------



## howard.a.s

Hello and thanks for your most recent reply. Picking up from where I left off in my previous post, I've read through the tutorial several times at https://webdesign.tutsplus.com/tuto...-captcha-recaptcha-in-your-website--cms-23024 and it all makes sense until I get to the part headed 'Putting It Together', Step 2 - where it begins to talk about 'To demonstrate that the reCAPTCHA test has been passed we'll need to run some server-side checks. In this case we'll do so with PHP, so save this file in a new project as index.php.' 'You'll notice the form's method is post, so when we submit the form data it will be returned to this page within an array of variables. We can output those variables by looping over them, so add the following to your page somewhere:' Steps 3, 4, 5, mention additional code snippets, and I remain unclear as to whether these also need to be inserted into my page, and, if so, where? Please can you offer any further advice? As for the Polygon carousel and my attempts to add touch swipe, I've now tried just about everything but am still unable to get this to work. I guess this is probably because, unlike the bootply carousel which accepted the touch swipe plugin without problem, the Polygon carousel is more customized and the plugin is somehow incompatible? Anyway, no worries, as this was only ever an after thought and not absolutely necessary. 

Almost forgot, I found this https://github.com/tutsplus/how-to-...captcha-on-your-website/blob/master/index.php and wondered whether if I were to use this exact code, inserting my public and private keys (not yet got these), whether this would actually work? Wouldn't including my private key in the head of the page be a security risk, as could someone not just access the pages source code and view my secret key?


----------



## JiminSA

howard.a.s said:


> Steps 3, 4, 5, mention additional code snippets, and I remain unclear as to whether these also need to be inserted into my page, and, if so, where? Please can you offer any further advice?


Wow this is a really convoluted procedure As to where stuff goes ...
The php loop mentioned as the first thing in step 2, can be inserted just before your form. Bare in mind that this would only be useful for testing and won't go into a production script. I would also add a check to see if something has just been posted to the page and so would enhance the script slightly, like this:


PHP:


<?php
if(isset($_POST))
{
     foreach ($_POST as $key => $value)
    {
         echo '

[B]' . key.':/strong>'.$value.'

';
    }
}
?>

This code you can place just before your form.
As per Step 3, you can copy the recaptchalib.php code at _*this link*_ and then paste it into a blank page in Notepad++, saving it as "recaptchalib" with a .php file type.
You can then safely insert the code:


PHP:


<?php

// grab recaptcha library
require_once "recaptchalib.php";

?>

... at the top of your .php form page (if this file is still an .html file, you'll need to save it with a .php extension and change any links to it from .html to .php)
Step 4 code can be inserted, right after your include code thus:


PHP:


<?php

// grab recaptcha library
require_once "recaptchalib.php";

// your secret key
$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";

// empty response
$response = null;

// check secret key
$reCaptcha = new ReCaptcha($secret);

// if submitted check response
if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}
?>

Finally your response to the User code in Step 5, can as they suggest, replace the test code we have in place, just before the form.
I hope that made sense ... If not, you know what to do
Oh and regarding the closing php tag after the form - don't worry about it - i.e. ignore it ...


----------



## howard.a.s

Thank you once again for your time in answering my questions. Your reply is very thorough and the process I need to follow seems straightforward enough, so I'll give this a whirl and see how I get on. I'll post back with a progress report on this in due course. Oh, by the way, what are your thoughts as to the questions I asked in the final paragraph of my previous post, reference the github.com code example, and the private key becoming potentially vulnerable?

I'd now like to ask another question in relation to the same project that I am currently working on.

I do hope it is okay for me to keep adding to this thread, which is now almost 8 pages long, not forgetting of course your kindness in taking the time to answer?

Backtracking right to the beginning of this thread, you might recall me referring to the Unify theme. It's this same theme that I am still working with, and its the Parallax slider on the index page that I intend to swap for the bootply carousel you have helped me to develop. Due to the fact that this project is something I am only able to tinker with in my spare time, I've not yet managed to insert our new carousel, but I do hope to be able to get to this very soon. In the meantime, I've been struggling to add a light grey background colour to the full width of the page area from directly beneath the carousel all the way down to where the footer area begins. This is the area currently coloured white. I've tried adding inline styling including the new background colour to numerous container tags, but am unable to achieve full width coverage of this entire area. As the existing carousel and footer areas stretch full width, the fact that I seem unable to get my chosen background colour to do the same can only mean that I must be overlooking something pretty obvious, but I just can't see it .... Should I be enclosing the content of this entire area into a new container and how would I make this new container fill the full width of the available screen like the carousel and footer? Please would you take a look and be able to offer any suggestions as to how this might best be achieved? Here's a link to the page in question http://www.themetaldetective.co.uk/sandbox/Unify-v1.8/HTML/index.html


----------



## JiminSA

howard.a.s said:


> I've been struggling to add a light grey background colour to the full width of the page area from directly beneath the carousel all the way down to where the footer area begins.


This white area is contained in a div with an associate class called wrapper, and is described in lines 66-68 of your style.css file - just change #fff (hex for white) to light grey (either #999 or #aaa should do it)


Code:


.wrapper {
    background: #fff;
}


----------



## JiminSA

howard.a.s said:


> I do hope it is okay for me to keep adding to this thread, which is now almost 8 pages long, not forgetting of course your kindness in taking the time to answer?


We've received no reprimand from TSG monitors, but as per usual I think they are being polite.
Maybe we should mark this thread solved, when the "majors" are all resolved and start a new one for new issues, even though they are on the same theme?
Plus, people who might also like to respond may well be intimidated by my monopoly of response and not do so ??


----------



## howard.a.s

I've just picked up your reply and so will try out the solution associated with the wrapper tag over the next couple of days and will then post back with a progress report. As for the new thread, do you think it's best for me to wait until I've had an opportunity to test out the ReCaptcha and the Wrapper issues, and then begin new threads for each new issue associated with this same theme as and when these crop up?


----------



## JiminSA

Yes that would be best, I think


----------

