OVERRIDE SLIDER FONT? { h2 }

  • Resolved kidkcstar

    (@kidkcstar)


    10 years, 1 month ago

    hello
    i have a slider, which has hyperlink font within it {h2 }
    so whatever change i make in the general { h2 } will effect it

    i dont want the slider’s font to be the same as the other h2 font
    so i went to the .css of my slider and tried entering

    text-transform: uppercase; }

    however this did not override it,
    but anytime i add :uppercase; to the .css of general h2
    my slider responds, however this ends up in my entire blog being in uppercase, which is not what i want
    any suggestions?

    here’s my general h2 code:

    h2 {
    color: #ff1919;
    font-family: Oswald-Bold, Georgia, Nunito, Oswald;
    font-size: 26px;
    border-bottom:2px solid #000000;
    margin-bottom: 10px;
    font-weight: bold;
    }

    here’s my slider .css

    .scrollable .caption {
    color: ;
    position: absolute; bottom:16px;
    padding-left: 1px;
    font: bold, 23px oswald;
    }

    simply adding :uppercase; to the slider does not work

Viewing 8 replies - 1 through 8 (of 8 total)
  • stephencottontail

    (@stephencottontail)

    10 years, 1 month ago

    What is your HTML structure for your slider? Your rule .scrollable .caption {} means that the rule applies to any element with the class name caption that’s contained within an element with the class name of scrollable. If you wanted the rule to apply to an element with both class names, then the rule should be written .scrollable.caption {}. Note that there’s no space.

    Thread Starter kidkcstar

    (@kidkcstar)

    10 years, 1 month ago

    yeh its exactly what you said
    the .caption is inside the .scrollable

    thats how the slider is made up, since the .caption refers to post_title and its within the .scrollable element, reffering to the slider

    i tried what you said, with the no space, but that overshadowed the text made it not appear.

    mlddev

    (@mlddev)

    10 years, 1 month ago

    Try the following CSS to control your slider headlines. Add additional properties such as font-size etc.

    #chained .caption a {
  text-transform: none;
}
    stephencottontail

    (@stephencottontail)

    10 years, 1 month ago

    Could you post a link to your website?

    Thread Starter kidkcstar

    (@kidkcstar)

    10 years, 1 month ago

    @mlddev

    i think you might be on to something
    let me give it a try and will report

    Thread Starter kidkcstar

    (@kidkcstar)

    10 years, 1 month ago

    woah @mlddev
    your suggestion worked

    the caption is in the .css is known as .scrollable .caption

    so i added this

    .scrollable .caption a, a:visited {
    text-transform: uppercase;
    }

    and it worked
    if you still want to see the site its http://www.citizenstars.com

    thank you @mlddev

    mlddev

    (@mlddev)

    10 years, 1 month ago

    Yep, using the #chained ID or .scrollable Class on it would work as they are on the same HTML element. Glad to be of help.

    Thread Starter kidkcstar

    (@kidkcstar)

    10 years, 1 month ago

    🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘OVERRIDE SLIDER FONT? { h2 }’ is closed to new replies.