You need to look at 2 Snippets:
Snippet1 Footer
Snippet2 Fader
Thanks rdell, I shall check that out!
However, when adding into the footer widget a grey area appears. Is it possible to add the menu below that? Where my social media icons are? http://www.albafitness.com
The footer is definitely possible as on the http://www.themesandco.com/ website, they have · About/Contact · Privacy next to Designed by Themes & Co.
That’s what I want to do. How can I do this?
Also, I couldn’t get the slider to do anything – it didn’t work when i added the code. I meant fade like on this site?
http://www.foodforfitness.co.uk/
Footer: Try this Snippet
Slider: Can’t see evidence that you’ve applied all the code in the Snippet? Suggest you check. Where did you put the code?
I added it to the custom CSS?
Shall check out that snippet, thank you!
Here’s what I can see in your CSS:
.carousel-inner > .next.left, .carousel-inner > .prev.right {
left: 0;
opacity: 1;
z-index: 1;
}
.carousel-inner > .active.left {
left: 0;
opacity: 0;
z-index: 2;
}
.carousel-inner > .active.right {
left: 0;
opacity: 0;
z-index: 2;
}
.home .carousel-control {
display: none;
}
This is missing:
/* Make Carousel fade - adapt 2s to required delay */
.carousel-inner > .item {
-webkit-transition: opacity 2s ease-in-out ;
transition: opacity 2s ease-in-out ;
}
That’s really strange because:
/* Make Carousel fade - adapt 2s to required delay */
.carousel-inner > .item {
-webkit-transition: opacity 7s ease-in-out ;
transition: opacity 7s ease-in-out ;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity: 1;
z-index: 1;
left: 0;
}
.carousel-inner > .active.left {
opacity: 0;
z-index: 2;
left: 0;
}
.carousel-inner > .active.right {
opacity: 0;
z-index: 2;
left: 0;
}
/* remove previous/next arrows from home page only */
.home .carousel-control {
display: none ;
}
Is definitely in my custom CSS…?
This is what is showing in your page source for Custom CSS:
.navbar .navbar-inner {
-webkit-box-shadow: 0px 0px 0px;
-moz-box-shadow: 0px 0px 0px;
box-shadow: 0px 0px 0px;
background:none
}
.navbar .nav {
display: block;
float: right;
left: 0;
margin: 0 10px 0 0;
position: relative;
}
/*make the menu sub-menu items drop down on mouse hover */
ul.nav li.dropdown:hover > ul.dropdown-menu{
display: block;
margin: 0;
}
.page .entry-title {
display: none;
}
/* Adjust colors as needed */
.footer-widgets {
background: none repeat scroll 0 0 #83C0E5;
color: #5A5A5A !important;
padding-top: 0px ;
}
ustomCSS or style.cssCSS
1
2
3
4
5
6
}
/* Make Carousel fade - adapt 2s to required delay */
.carousel-inner > .item {
-webkit-transition: opacity 7s ease-in-out ;
transition: opacity 7s ease-in-out ;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
opacity: 1;
z-index: 1;
left: 0;
}
.carousel-inner > .active.left {
opacity: 0;
z-index: 2;
left: 0;
}
.carousel-inner > .active.right {
opacity: 0;
z-index: 2;
left: 0;
}
/* remove previous/next arrows from home page only */
.home .carousel-control {
display: none ;
}
This:
ustomCSS or style.cssCSS
1
2
3
4
5
6
}
at a guess, looks like either a cut and paste error or some sort of plugin conflict.
Aah well spotted @ef. That happens when you try to cut & paste out of a Snippet. The ‘proper’ way is to:
Click Icon1 (4 bars) – that removes the numbers
Click Icon4 (2 pages) – that selects the code and allows you to Ctl/C (Copy) the code.
Ahh, legends! Thank you. I’m not very good at all of this, but I’m getting there. 🙂
