customizing header space

• 

  thesacredpath · Member · Aug 16, 2016 at 6:53 pm

  • Copy link

  It looks like you put the URL you want linked into the title field instead of into the content section of the widget. Paste the following into the content section on the text widget and then edit the text where it says “Link Label” in the code below.

  <h3><a href="https://mscf.givezooks.com/events/arts-dinner-auction-to-benefit-st-martin-s-ministries">Link Label</a></h3>

• 

  smmartsevent · Member · Aug 16, 2016 at 10:21 pm

  • Copy link

  That works really nicely. Thank you so much.

  How do I make the widget area narrower so it doesn’t take up so much of the page — leaving our invitation the large part — and making the “order tickets” a smaller font? And can I make the link open in a new page?

• 

  thesacredpath · Member · Aug 17, 2016 at 1:41 am

  • Copy link

  That will require us to use a Media Query so that we can affect the widths only on screens/windows 1000px and wider. At 999px and narrower, the widget area moves down below the content.

  @media screen and (min-width: 1000px) {
  .site-main .widget-area {
      width: 250px;
  }
  .sidebar .entry-header, .sidebar .entry-content, .sidebar .entry-summary, .sidebar .entry-meta {
      padding-right: 275px;
  }
  }

  In addition to the above, you will want to enter 704 in the Media Width field below the CSS entry area so that the media will widen to take up the new space.

• 

  smmartsevent · Member · Aug 17, 2016 at 9:48 pm

  • Copy link

  RE: In addition to the above, you will want to enter 704 in the Media Width field below the CSS entry area so that the media will widen to take up the new space.
  Where is this done? I’m not sure what the command is and where it goes.

  How do I make the font in the widget smaller to font-size 12 or 14 and change its color to the blue in the header?

  I did learn how to make the widget box even smaller. Thanks.

• 

  thesacredpath · Member · Aug 18, 2016 at 8:00 pm

  • Copy link

  In addition to the above, you will want to enter 704 in the Media Width field below the CSS entry area so that the media will widen to take up the new space.
  Where is this done? I’m not sure what the command is and where it goes.

  That is at Customize > CSS below the area you paste the CSS code into.

  On the text widget font size and color, add the following CSS. You can adjust the font size as desired.

  #text-3 h3 {
      font-size: 18px;
  }
  #text-3 h3 a {
      color: #2570B8;
  }