Text styling footer widget Twenty Eleven

  • BoxerDog

    (@boxerdog)


    9 years, 1 month ago

    I am working with a Child Theme for all modifications.
    I want to change the widget titles text colour and link text variations in the footer of Twenty Eleven theme. I do not want the text styling to change on the other widget areas (in my instance that is the right panel).
    i.e. the footer area is set to dark blue – I want all text contained within this area to be white. Currently widget titles are set to a grey which is fine for all other widget areas but not visible in the footer.
    Widget areas are not set up with styles as per .widget-area_1 etc. They have a global style set via the h3 tag. So if I change this colour spec it changes for all widget titles.
    Appreciate any advice.

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

    (@stephencottontail)

    9 years, 1 month ago

    Can you post a link to your site?

    Thread Starter BoxerDog

    (@boxerdog)

    9 years, 1 month ago

    Sorry – developing offline via Mamp server.
    But if you look at the css and function code for Twenty Eleven you will identify my issue.

    Widget headers are styled as a heading – i.e. css style of header 1 for example however the widget position is not identified – i.e. one div tag for all widgets no matter where they sit. (side or footer). I need to create new code in my child theme for both function and css that separates the widget styling by placement – side or footer.

    I am new to .php and relatively inexperienced with css and do not want to write bad code that breaks the theme therefore seeking help.

    stephencottontail

    (@stephencottontail)

    9 years, 1 month ago

    I’m using version 2.0 of Twenty Eleven and on my local WP install, each widget area has a corresponding ID (except for the showcase template), so you can target each widget area individually:

    #secondary .widget-title { color: purple; }
.showcase .widget-title { color: pink;}
#first .widget-title { color: orange; }
#second .widget-title { color: blue; }
#third .widget-title { color: green; }

    Or, to target all the widgets in the footer area at the same time:

    #colophon .widget-title { color: blue; }

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Text styling footer widget Twenty Eleven’ is closed to new replies.