Presentation page: Slider title hard to read, change border or add partially BG

  • Author
    Posts
  • #62531
    Jan
    Power User

    Hi,

    and thank you for this great plugin!

    Im using Nirvana with a presentation-page and a slider with my posts.

    Depending of the featured post-images, the big title is hard to read (on some slices with light post-image-colors).

    The partitial BG of the caption works fine, but the title has no a background color.
    There is a very small border around the title, but this is a lot too thin.

    How can I add a partitial transparent background to the slider-titles?
    And/or, make the title-font-border significantly more wide/thick?

    Screenshot of a hard-to-read slice-title:
    https://screenpresso.com/=XEV3e

    Here a screenshot of my nirvana-settings / color / presentation:
    https://screenpresso.com/=kkryc

    • This topic was modified 6 years ago by Jan.
    #62749
    Zed
    Cryout Creations mastermind

    The screenshot images are not loading.

    You need to use colors that work together or rely on custom CSS to tweak the visual appearance when your selected colors do not play nice.


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #62754
    Jan
    Power User

    Hi Zed,

    yes, the settings for background of the small text (caption) works well, but there is no option to have a partial transparent BG for the title.

    Can you give me some custom-css-code to make the title in sliders better readable, regardless from the main-color of the slider/slice-image?
    The title in the slider should be “easy to read”, even on black or white slider-images.

    #63210
    Jan
    Power User

    https://www.dropbox.com/s/b71cv6ijlkn47v0/cryout-slider-nirvana.jpg?dl=0

    Hi,

    its still an issue for me.
    The slider gets images from “blog-post-featured-images”, and their colors vary.
    Is there any solution?
    A partial title-background-color?
    Or: show title-text below the slices?

    #63292
    Zed
    Cryout Creations mastermind

    There is no magic solution to make sure the text is readable on any kind of slide images (without changing the theme’s design).

    You can try using a different slider plugin which displays captions below the images (or with an opaque background).


    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #63344

    Hi Jan__, is editing the image a possibility? If so, maybe try adding a subtle semi-opaque overlay to it? You can do this online using Pixlr or a site like that where you can add a new layer, fill it with black, then change the opacity to 10% – it will be a subtle effect but will really help make the text stand out.

    #63867

    find the custom-styles.php page
    then line 424 or around there

    .nivo-caption .inline-slide-text {
    background-color: rgba(<?php echo esc_html(cryout_hex2rgb($nirvana_fpslidercaptionbg)); ?>,0.3);

    change the 0.3 to a higher number between 0.1 and 1 that will darken the background colour you have nominated.

    #63901
    Zed
    Cryout Creations mastermind

    @Prellyan: editing theme files is generally a bad idea (and any changes are lost on the next update).
    You can accomplish the same with just CSS:

    body .nivo-caption .inline-slide-text {
        background-color: rgba( your, color, here, opacity); 
    }

    If you like our creations, help us share by rating them on WordPress.org.
    Please check the available documentation and search the forums before starting a topic.
    #63965
    Jan
    Power User

    Thanks for this idea.
    But the CSS-Code only changes the background-color of the caption (=the excerpt).
    There is no background-color added to the title.

    #63967

    in the style.css around line 2792

    .nivo-caption h2 {
    background:#C60; <—- this will set a background colour to the title
    display: inline;
    width: auto;
    margin-bottom: 10px;
    line-height: 1.4em;
    letter-spacing: 3px;
    padding: 5px;
    font-weight: 700;
    text-align: center;
    position: relative;
    -webkit-animation: myfirst .5s ease-out;
    animation: myfirst .5s ease-out;
    }

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Presentation page: Slider title hard to read, change border or add partially BG’ is closed to new replies.