Tagged: , ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • August 25, 2016 at 2:24 am #98005
    phillycontemporary
    Participant

    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….

    August 25, 2016 at 2:14 pm #98060
    Mahesh
    Participant

    @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

    August 25, 2016 at 9:17 pm #98080
    phillycontemporary
    Participant

    Thank you! This worked perfectly!

    August 25, 2016 at 10:54 pm #98089
    phillycontemporary
    Participant

    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!

    August 26, 2016 at 10:06 am #98135
    Mahesh
    Participant

    @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

    August 26, 2016 at 8:14 pm #98154
    phillycontemporary
    Participant

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

    Thank you!

    August 28, 2016 at 9:33 am #98224
    Mahesh
    Participant

    @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

    August 31, 2016 at 7:30 pm #98462
    DB
    Participant

    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.

    September 1, 2016 at 6:50 pm #98520
    Mahesh
    Participant

    @db: Please post in your site url.

    Regards,
    Mahesh

    September 1, 2016 at 9:03 pm #98553
    phillycontemporary
    Participant

    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,

    September 2, 2016 at 9:49 am #98590
    Mahesh
    Participant

    @phillycontemporary: Add the following CSS:

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

    Regards,
    Mahesh

    December 4, 2016 at 10:31 am #104497
    vetrepreneur
    Participant

    @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!

    December 4, 2016 at 12:27 pm #104500
    Mahesh
    Participant

    @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

    December 5, 2016 at 3:28 am #104529
    vetrepreneur
    Participant

    @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!

    December 5, 2016 at 10:22 am #104550
    Mahesh
    Participant

    @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
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Formatting Slider title typography and position?’ is closed to new replies.