Joomla Templates Club 406,261 posts

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#200121

Hello .. site: http://amv.dev.dnsnetworks.ca/

My clients were wondering if its possible to add an image for each (5) section of the slideshow … They gave me this graphic explaining what they wanted (its from another website they like) … I told them I would have to check since it could be impossible…

---

Attachments:

1. 

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#544020

Hi Sebbs,

Yes, we can use custom CSS to implement as you requested. Please prepare 5 image files and place them in root_folder/templates/ja_travel/images/ (you can create sub-folder if you want) then let me know your image file name, I will show you how to add CSS code after that.

1 user says Thank You to Adam M for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#544070

Wow! Thanks Adam M. !! I emailed my client and she will send me the 5 graphics…

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#544131

Hi,

Yes, please upload them to appropriate folder as noted in my previous reply and let me know.

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#545230

I have the 5 images, what size should they be before I put them in the folder?

<em>@Adam M 439026 wrote:</em><blockquote>Hi,

Yes, please upload them to appropriate folder as noted in my previous reply and let me know.</blockquote>

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#545271

Hi Adam, I’ve uploaded the five images in the following folder: amv.dev.dnsnetworks.ca/templates/ja_travel/images/five/

<em>@Adam M 438883 wrote:</em><blockquote>Hi Sebbs,

Yes, we can use custom CSS to implement as you requested. Please prepare 5 image files and place them in root_folder/templates/ja_travel/images/ (you can create sub-folder if you want) then let me know your image file name, I will show you how to add CSS code after that.</blockquote>

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#545380

Hi Sebbs,

Could you please also provide a temporary back-end account so I can try out the CSS code first ?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#546108

Hi,

Sorry for the delay, please open file root_folder/templates/ja_travel/css/template.css and add this code at the end of file :

#bd .ja-slide-thumbs-wrap {
overflow: visible;
}
#bd .ja-slidewrap_travel {
padding-bottom: 160px;
}
#bd .ja-slide-thumb-inner {
margin-top: -110px;
padding: 110px 0 0 0;
background: none;
font-size: 0;
}
#bd .ja-slide-thumbs .ja-slide-thumb h3 {
background: none;
font-size: 14px;
}
#bd .ja-slide-thumbs .ja-slide-thumb.active .ja-slide-thumb-inner h3 {
background: url("../themes/blue/images/active-bg.png") left top repeat-x;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(1) .ja-slide-thumb-inner {
background: url("../images/five/sud.png") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(2) .ja-slide-thumb-inner {
background: url("../images/five/mariage-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(3) .ja-slide-thumb-inner {
background: url("../images/five/croisiere.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(4) .ja-slide-thumb-inner {
background: url("../images/five/group-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(5) .ja-slide-thumb-inner {
background: url("../images/five/europe-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs-handles {
top: -120px;
}
#bd .ja-slide-thumbs-handles,
#bd .ja-slide-thumbs-handles span {
height: 160px !important;
}

1 user says Thank You to Adam M for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#546433

This looks amazing Adam! Wow! Thank you so very much!

<em>@Adam M 441450 wrote:</em><blockquote>Hi,

Sorry for the delay, please open file root_folder/templates/ja_travel/css/template.css and add this code at the end of file :

#bd .ja-slide-thumbs-wrap {
overflow: visible;
}
#bd .ja-slidewrap_travel {
padding-bottom: 160px;
}
#bd .ja-slide-thumb-inner {
margin-top: -110px;
padding: 110px 0 0 0;
background: none;
font-size: 0;
}
#bd .ja-slide-thumbs .ja-slide-thumb h3 {
background: none;
font-size: 14px;
}
#bd .ja-slide-thumbs .ja-slide-thumb.active .ja-slide-thumb-inner h3 {
background: url("../themes/blue/images/active-bg.png") left top repeat-x;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(1) .ja-slide-thumb-inner {
background: url("../images/five/sud.png") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(2) .ja-slide-thumb-inner {
background: url("../images/five/mariage-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(3) .ja-slide-thumb-inner {
background: url("../images/five/croisiere.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(4) .ja-slide-thumb-inner {
background: url("../images/five/group-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(5) .ja-slide-thumb-inner {
background: url("../images/five/europe-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs-handles {
top: -120px;
}
#bd .ja-slide-thumbs-handles,
#bd .ja-slide-thumbs-handles span {
height: 160px !important;
}
</blockquote>

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#547449

Hey Adam M. Since you did such a great job on getting those icons under my slidershow I was wondering if it would be easy to make them move when you slide over them – (kinda like they do in this site under What’s Trending Now: http://www.obbha.ca/
Just a question – if it’s easy then could you tell me how but if it’s a lot of work – no worries – I was just curious!

Thanks again!

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547468

Hi,

1. So you will have to update this code :

#bd .ja-slide-thumb-inner {
margin-top: -110px;
padding: 110px 0 0 0;
background: none;
font-size: 0;
}

as below :

#bd .ja-slide-thumb-inner {
margin-top: -119px;
padding: 119px 0 0 0;
background: none;
font-size: 0;
position: relative;
z-index: 999;
}

2. Then update this code :

#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(1) .ja-slide-thumb-inner {
background: url("../images/five/sud.png") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(2) .ja-slide-thumb-inner {
background: url("../images/five/mariage-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(3) .ja-slide-thumb-inner {
background: url("../images/five/croisiere.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(4) .ja-slide-thumb-inner {
background: url("../images/five/group-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(5) .ja-slide-thumb-inner {
background: url("../images/five/europe-icon.jpg") center top no-repeat;
}

as below :

#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(1) .ja-slide-thumb-inner:before {
background: url("../images/five/sud.png") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(2) .ja-slide-thumb-inner:before {
background: url("../images/five/mariage-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(3) .ja-slide-thumb-inner:before {
background: url("../images/five/croisiere.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(4) .ja-slide-thumb-inner:before {
background: url("../images/five/group-icon.jpg") center top no-repeat;
}
#bd .ja-slide-thumbs .ja-slide-thumb:nth-child(5) .ja-slide-thumb-inner:before {
background: url("../images/five/europe-icon.jpg") center top no-repeat;
}

3. Open template.css as mentioned in my previous reply and add this code :

#bd .ja-slide-thumb-inner:before {
content: "";
height: 100px;
left: 19px;
position: absolute;
top: 10px;
width: 112px;
transition: 0.3s linear;
-moz-transition: 0.3s linear;
-webkit-transition: 0.3s linear;
}
#bd .ja-slide-thumb-inner:hover:before {
transform: rotate(10deg);
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}

Save your file and recheck.

1 user says Thank You to Adam M for this useful post

1. sebbs

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#547581

Wow! That’s amazing !!! It looks so sharp! Thanks so much Adam M!

I hate to do this to you – I wouldn’t have asked for the previous favor if I would have known my clients were going to ask me to add another icon today (États-Unis), I was wondering is this something that’s easily done?

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547610

Hi,

Yes, you can replace the original image with the new one or if you take a look at previous CSS code, you will see the background property for each element, just change image name here if you want to keep old image.

[sebbs Friend sebbsJoin date: February 2006Posts: 529Downloads:0Uploads:62 Thanks: 164 Thanked: 6 times in 2 posts]

#547702

Hey Adam M. I am going to need your help again (if that’s okay!)

I’ve added the icon in the folder amv.dev.dnsnetworks.ca/templates/ja_travel/images/five/ called usa.png (it’s the same size as the other icons)

I’ve also added another article within my slideshow called Etats-Unis (as you can see it’s showing up however all my icons shoved over and now Europe is squeesed against the right side)

Can you help me with my template.css file to make the usa.png icon show up and have them look more aligned ?

So very much appreciated!!

<em>@Adam M 443370 wrote:</em><blockquote>Hi,

Yes, you can replace the original image with the new one or if you take a look at previous CSS code, you will see the background property for each element, just change image name here if you want to keep old image.</blockquote>

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#547906

Hi,

You can add and adjust this code to suite your need :

#bd .ja-slide-thumbs {
margin-left: 0;
}

1 user says Thank You to Adam M for this useful post

1. sebbs

[Author]

Posts