[phillycontemporary]

Hi!

I am using the free version of Fabulous Fluid and I have a featured slider on my homepage. I was wondering if there is CSS I can put into my child theme to make the following changes:

– Ability to change the slider entry title to not be in all-caps, and to have more flexibility with the font-weight, etc.

– I would also like to hide (display:none) the entry titles in the image thumbnails at the bottom of the slider, but not in the larger main image.

– I’m also wondering if I can position the entry title and entry content farther to the left–I’ve used a custom CSS to align both to the left, however I’d like them to be moved even further to the side..

Thank you for any and all help you can offer! Sorry for so many questions….

[Mahesh]

@phillycontemporary: Go to Dashbaord=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

#feature-slider .thumbnail h2 {
    display: none;
}

#feature-slider .entry-title {
	text-transform: none;
	font-weight: bold;
}

#feature-slider .caption > .vcenter {
	left: 10%;
	margin: 0;
}

#feature-slider .caption,
#feature-slider .entry-content {
	text-align: left;
}

Regards,
Mahesh

[phillycontemporary]

Thank you! This worked perfectly!

[phillycontemporary]

H! One more question about the featured slider–

Is it possible to change the hover color overlay of the slider thumbnails?

Thank you and let me know!

[Mahesh]

@phillycontemporary: Do you mean to change the active white color? By default, the thumbs is using black overlay with 0.7 opacity and on hover it disappears.
Let me know further.

Regards,
Mahesh

[phillycontemporary]

I would like to change both the active white color and the black overlay on hover–Is this possible?

Thank you!

[Mahesh]

@phillycontemporary: Add the following CSS in your Custom CSS:

/* For active thumbnail */
#per-slide-template .cycle-pager-active::after {
    background-color: #ff00ff;
}
/* For hover */
#per-slide-template .thumbnail:hover .cover {
    display: block;
    background: rgba(255, 255, 0, 0.7) none repeat scroll 0 0;
}

Note: Please change the color as you desire.

Regards,
Mahesh

[DB]

I have a similar question if I may.

I have gone in, and changed the slider dimensions from 100% to 50% but it has not had an effect on the website. The Grid is just too large, and takes up an entire page. Any suggestions? I have changed the height and width from 100% down to 50% but it had no effect.

[Mahesh]

@db: Please post in your site url.

Regards,
Mahesh

[phillycontemporary]

Hi! This worked perfectly, but I am wondering if there is a way to change the color of the small triangle above the active thumbnail? Let me know!

Thank you,

[Mahesh]

@phillycontemporary: Add the following CSS:

#per-slide-template .cycle-pager-active::before {
    border-bottom-color: #d40f7d;
}

Regards,
Mahesh

[vetrepreneur]

@Mahesh — great job with the Fabulous Fluid!

I’ll post here as my question relates to the above conversations. Text in the Feature Slider main images that changes, is there a way to change the color from white to [?] as some of our images it is hard to see some of the white text. See http://www.tvfaz.org

Thank you!

[Mahesh]

@vetrepreneur: Go to Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS box and add the following CSS:

#feature-slider .entry-title, 
#feature-slider .entry-title a,
#feature-slider .entry-content,
#feature-slider .more {
    color: #ff00ff;
}

Note: Please change the color as desired.

Regards,
Mahesh

[vetrepreneur]

@Mahesh – amazing!

I try different colors [light, dark and in between] to get the best text color to be seen with the 5 images with some solution. To help more people’s eyes I feel I need to do one of two things:
1- Is there a way to add a shadow with color and width of shadow options?
2- Can I set text color per slider image?

Is there a setting to have the thumbnail active box ‘text’ color to be white? Right now it shows black text on the blue color that represents one of our non-profit colors.

see at http://www.tvfaz.org

To your success in life!

[Mahesh]

@vetrepreneur: Replace the above CSS with this one:

/* First Slider */
#feature-slider .post-149.slider-box .entry-title, 
#feature-slider .post-149.slider-box .entry-title a,
#feature-slider .post-149.slider-box .entry-content,
#feature-slider .post-149.slider-box .more {
    color: #fff0ff;
    text-shadow: 2px 2px #ff0000;
}
/* Second Slider */
#feature-slider .post-114.slider-box .entry-title, 
#feature-slider .post-114.slider-box .entry-title a,
#feature-slider .post-114.slider-box .entry-content,
#feature-slider .post-114.slider-box .more {
    color: #ff0fff;
    text-shadow: 2px 2px #fff000;
}
/* Third Slider */
#feature-slider .post-118.slider-box .entry-title, 
#feature-slider .post-118.slider-box .entry-title a,
#feature-slider .post-118.slider-box .entry-content,
#feature-slider .post-118.slider-box .more {
    color: #ffff00;
    text-shadow: 2px 2px #ffcc00;
}
/* Forth Slider */
#feature-slider .post-112.slider-box .entry-title, 
#feature-slider .post-112.slider-box .entry-title a,
#feature-slider .post-112.slider-box .entry-content,
#feature-slider .post-112.slider-box .more {
    color: #0000ff;
    text-shadow: 2px 2px #ff00cc;
}
/* Fifth Slider */
#feature-slider .post-108.slider-box .entry-title, 
#feature-slider .post-108.slider-box .entry-title a,
#feature-slider .post-108.slider-box .entry-content,
#feature-slider .post-108.slider-box .more {
    color: #ffddff;
    text-shadow: 2px 2px #ff0aa0;
}

Is there a setting to have the thumbnail active box ‘text’ color to be white? Right now it shows black text on the blue color that represents one of our non-profit colors.
-> Please clarify more

Regards,
Mahesh

[Author]

Posts