Hot Swipe Carousel styling

hkeyzer
Inactive member
Topic Author
Member

8 years 8 months ago #46385 by hkeyzer

Hot Swipe Carousel styling was created by hkeyzer

Hi,

Site is : www.nzvirtuemart.co.nz

I want to add a "testimonial" to Bookstore template which is styled the same as shown in the Hot_Startup Template demo.

I installed Hot Swipe carousel extension on the Bookstore site.
I setup a row in the layout with the Class = "testimonialsrow"
I copied the style block:

/* testimonialsrow */

.testimonialsrow {
margin: 100px 0;
}

.hot_swipe_carousel_slides2 {
}

.hot_swipe_carousel_slides2 img {
width: auto !important;
border-radius: 50%;
position: relative;
z-index: 1;
}

.hot_swipe_carousel_slides2 .contents {
position: relative !important;
top: -60px !important;
padding-top: 110px;
border: 2px solid #eee;
min-height: 160px;
}

.hot_swipe_carousel_slides2 .contents p {
max-width: 600px;
margin: 0 auto;
}

.hot_swipe_carousel_slides2 .contents p:before {
font-family: FontAwesome;
content: "\f10d";
color: #23bfe8;
font-size: 24px;
position: absolute;
top: 130px;
left: 150px;
}

.hot_swipe_carousel_slides2 .gallery-cell, .hot_swipe_carousel_slides2 h4 {
text-align: center;
}

.hot_swipe_carousel_slides2 .flickity-page-dots {
bottom: 30px;
position: relative;
padding: 0;
}

.hot_swipe_carousel_slides2 .flickity-page-dots .dot {
width: 12px;
height: 12px;
background: #000;
}

.hot_swipe_carousel_slides2 .flickity-page-dots .dot.is-selected {
width: 12px;
height: 12px;
background: #23bfe8;
}

From the Hot-Startup - template_css.css to the bookstore - template_css.css file but do not see the same styling applied to the testimonial module.

Could you enlighten me to what I am missing or have done wrong.

Thanks

Attachments:

Please Log in to join the conversation.

milos
Support Staff
Moderator

8 years 8 months ago #46386 by milos

Replied by milos on topic Hot Swipe Carousel styling

Hello,

Make sure that all module parameters are copied from the module in Startup template (you need to have Startup template installed to see them), including the "Unique ID" set to 2

Thanks,
Milos

Please Log in to join the conversation.

hkeyzer
Inactive member
Topic Author
Member

8 years 8 months ago #46387 by hkeyzer

Replied by hkeyzer on topic Hot Swipe Carousel styling

Great that and some additional styling made it work well on the new site.

I do have one more question:
How do I get the "quotation" marks to show along side the slide content?

Note:
www.nzvirtuemart.co.nz the quote marks do not show.

However on www.cabinstogo.co.nz the quote marks do show. Refer attached image.

Attachments:

Please Log in to join the conversation.

milos
Support Staff
Moderator

8 years 8 months ago #46388 by milos

Replied by milos on topic Hot Swipe Carousel styling

Hello,

In Startup template, this is the CSS for quotation:

Code:

.hot_swipe_carousel_slides2 .contents p:before {
    font-family: FontAwesome;
    content: "\f10d";
    color: #23bfe8;
    font-size: 24px;
    position: absolute;
    top: 130px;
    left: 150px;
}

Also, you must include FontAwesome icon font library. It's not included in Bookstore template. You can copy Font Awesome files from Startup template to the same places where they are originally. So, copy /css/font-awesome.min.css and entire /fonts folder. Then in <head> section of Bookstore index.php file, add this:

Code:

<link rel="stylesheet" href="<?php echo $template_path ?>/css/font-awesome.min.css">

Regards,
Milos

Please Log in to join the conversation.

Time to create page: 0.318 seconds