WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] OVERRIDE SLIDER FONT? { h2 } (9 posts)

  1. kidkcstar
    Member
    Posted 4 months 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

  2. stephencottontail
    Member
    Posted 4 months 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.

  3. kidkcstar
    Member
    Posted 4 months 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.

  4. mlddev
    Member
    Posted 4 months ago #

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

    #chained .caption a {
      text-transform: none;
    }
  5. stephencottontail
    Member
    Posted 4 months ago #

    Could you post a link to your website?

  6. kidkcstar
    Member
    Posted 4 months ago #

    @mlddev

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

  7. kidkcstar
    Member
    Posted 4 months 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

  8. mlddev
    Member
    Posted 4 months 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.

  9. kidkcstar
    Member
    Posted 4 months ago #

    :)

Reply

You must log in to post.

About this Topic

Tags

No tags yet.