Welcome! To use this support forum, please Login or Join Today!

   

Installation of Element Theme

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Hi Casey,

Please don’t lose your patience with me, but I am having real trouble trying to get the slider to come out right.  I know it would help you to see it published, but I didn’t want to publish it all jacked up.  I think you know exactly what I’m wanting to do, and you’ve given me the snippets of code to make it work.  I am probably not placing the code in the right places.

1. I only want to make these changes to the “testimonial” slider on the home page.  Floating text slider with no container.  You gave me the code below to do that.

2. I wanted to change the font style for the “testimonial” slides.  I can see that you get what I’m wanting to do here and gave me the code below to do that. 

Slider code -

body.home li.slide,
body.home .flexslider,
body.home .flex-container {
background: none;
border: none;
  box-shadow: none;
}

Slider font code - 

.flexslider .inner p {
font-family: Georgia;
font-style: italic;
font-size: 20px;
line-height: 140%;
}

I placed both snippets of code in style1.css after /* @group Slider Customization */ as shown here..

.flex-control-nav li a {background: url(./images/style1/bg_control_nav.png) no-repeat 0 0;}

slider code…

slider font code…

/* @end */


Part of the problem could also be where I’m placing the slider on the home page.  I’m not sure if I’m getting it in the right place.  I actually created the slider on a test page and then copied and pasted the slider shortcode into my home page like you said..


....put your [slideshow] shortcode hereā€¦.

This is the slider shortcode I’m using..

[raw][slideshow effect=“fade” category=“67” width=“800” height=“250” autoplay=“5000” speed=“1000” pagination=“true” prevnext=“false”][/raw]

When I added your code and previewed, the slider was way too long (top to bottom), and it was blank (no display), but it had the little rotation buttons at the bottom and was actually rotating through blank slides.

I hope this all makes sense.  Can you see from this explanation where I’m messing up?  Maybe you can clarify exactly where the code changes need to be inserted?

Thanks again for your support,
Jeff

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

No worries. I’m glad to help. It’s just very difficult to do without an example. Could you create a copy of the page with your slideshow code and not include it in the menu, then share that link here?

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

I created a test page..  http://homeowneradvocacygroup.com/?page_id=767

1. the slider is showing a container/box.  I’d like for it to float - text only.

2. I’d like to lighten the slider text - not so black.  Just a bit more subtle.

Let me know what you think.

Thanks,
Jeff

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

This is part two of my last post…

I wanted to give you the code from my style1.css to show where I placed the code snippets you gave me.

——————————————————————————————
/* @group Slider Customization */

/* Slider Background Color */

li.slide,.flexslider {
background-color: #edece7;
}

.flex-control-nav li a {background: url(./images/style1/bg_control_nav.png) no-repeat 0 0;}

body.home li.slide,
body.home .flexslider,
body.home .flex-container {
background: none;
border: none;
  box-shadow: none;
}


.flexslider .inner p {
font-family: Georgia;
font-style: italic;
font-size: 20px;
line-height: 140%;
}


/* @end */
———————————————————————————————-

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

What you have should work - but not on the test page because you have the body.home selector. If you wanted to preview those changes on the test page, you’d need to use body.page-id-767. Or if you wanted this effect to be global across all sliders, you’d just remove that prefix entirely. To change the color, just edit the color property. The CSS edit below will show your slides as you’ve suggested in page ID 767.

http://homeowneradvocacygroup.com/?page_id=767

/* @group Slider Customization */

/* Slider Background Color */

li.slide,.flexslider {
 background-color: #edece7;
 color: #878583;
}

.flex-control-nav li a {background: url(./images/style1/bg_control_nav.png) no-repeat 0 0;}

body.page-id-767 li.slide,
body.page-id-767 .flexslider,
body.page-id-767 .flex-container {
 background: none;
 border: none;
 box-shadow: none;
}


.flexslider .inner p {
 font-family: Georgia;
 font-style: italic;
 font-size: 20px;
 line-height: 140%;
}


/* @end */


This would do the same only for the home page:

/* @group Slider Customization */

/* Slider Background Color */

li.slide,.flexslider {
 background-color: #edece7;
 color: #878583;
}

.flex-control-nav li a {background: url(./images/style1/bg_control_nav.png) no-repeat 0 0;}

body.home li.slide,
body.home .flexslider,
body.home .flex-container {
 background: none;
 border: none;
 box-shadow: none;
}


.flexslider .inner p {
 font-family: Georgia;
 font-style: italic;
 font-size: 20px;
 line-height: 140%;
}


/* @end */


And this would apply the style globally:

/* @group Slider Customization */

/* Slider Background Color */

li.slide,.flexslider {
 background-color: #edece7;
 color: #878583;
}

.flex-control-nav li a {background: url(./images/style1/bg_control_nav.png) no-repeat 0 0;}

li.slide,
.flexslider,
.flex-container {
 background: none;
 border: none;
 box-shadow: none;
}


.flexslider .inner p {
 font-family: Georgia;
 font-style: italic;
 font-size: 20px;
 line-height: 140%;
}


/* @end */
{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Awesome support Casey.  Thank you.

I have it live now..  http://www.homeowneradvocacygroup.com

Last thing, on the slider, a couple slides have one more line of text than the others.  The slider (frame?) keeps adjusting for this.  Is there a way to keep it from adjusting up and down?

Also, let me know what you think about the placement of the testimonials on the home page.

Thanks,
Jeff

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I think it looks great. I think it’s one of the better looking examples I’ve seen of Element. I appreciate your patience and taking the time to customize it as you did.


For the slide height, this should do the trick:

body.home li.slide .inner {
 min-height: 135px;
}
{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Thanks Casey!  I’ll add your last suggested code.

I’m so glad I switched to your theme. I was worried about switching and fumbling through the modifications, but my site looks worlds better than it did with the Elegant Themes site.  Thanks for the awesome support!

Jeff

{name}
Rank

Total Posts: 14

Joined 2013-04-11

PM

 

Added the fix. Works perfectly. You’re the best!  Thx Jeff