Dyad2 – Formatting Widget area and Widget title text

  • Author
    Posts
  • #3090581

    waltwould
    Member

    Hello,

    I have a few questions and request regarding the footer Widget Area of my website, which is using the Dyad2 theme.

    1) Text formatting
    : I would like to format the text of the Title for each widget. How can I do this with CSS? And would I be able to target each Widget title individually, or must they all be treated as a group?

    2) Formatting widget spaces: Is there any way to alter the size (meaning the width, in the case of Dyad2) of each Widget space in the footer? The default for a 2-widget footer is for the widgets to be an equal size (50/50), but is there a way to change it to 40/60, for example?

    3. Questions about the Search widget: Is there any way to:
    a) Change the color of the search input box?
    b) Add text before or after (i.e. above or below) the search widget box?
    c) Add text to the Search Results page? This website will be a “this day in history” blog, and we want to reassure our users who search for a certain date and get no results that we are in the midst of our first year and that some dates are not yet included in the blog. It’s pretty important that we can add some context or description to the Search process, instead of just a blank bar (or blank results page!) with no text whatsoever.

    Thank you very much for any help you can provide!

    The blog I need help with is todayincthistory.wordpress.com.

    #3090861

    Hi there,

    For #1, you need to use your web inspectorbuilt into your browser to find the unique widget CSS id and then use that to target the individual widgets. The following would be for the two you currently have in your footer widget area.

    #media_gallery-3 .widget-title {
      color: #cc0000;
    }
    #search-3 .widget-title {
      color: #33dd22
    }

    For #2, this can be done, but due to the way Dyad 2 is constructed, it is a bit tricky. you can try the following which changes the 50/50 width to 60/40 and then forces the images to be the full width of that 60% area.

    @media screen and (min-width: 678px) {
    .widget-area.widgets-two {
      position: relative !important;
    }
    .widget-area.widgets-two #media_gallery-3 {
      width: 60%;
    }
    .widget-area.widgets-two #search-3 {
      width: 40%;
      left: auto !important;
      right: 0 !important;
      top: 0 !important;
    }
    .widget-area.widgets-two #media_gallery-3 img {
      max-width: 70%;
      width: 100% !important;
      float: left;
    }
    }

    In the above I assumed you wanted the 60% on the images and 40% on the search. I’ve also limited this to screens/windows 678px and wider and let it go to a single column below that as the widgets get too narrow otherwise.

    #3090869

    For #3:

    This would add text after the search field.

    #search-3 form:after {
      content: "This is some added text";
      display: block;
      margin-top: 10px;
    }

    The background color on the search field can be changed, but the text color is difficult to change due to some changes in html and CSS specs and browsers are now sort of handling that on their own.

    #search-3 input.search-field {
      background-color: #fff;
    }

    Where did you want to add the text on the search results page?

The topic ‘Dyad2 – Formatting Widget area and Widget title text’ is closed to new replies.