Border around large text/header area

  • Hello,

    I have been researching how to put borders on my webpage, but I keep getting results for a border for the WHOLE page. I would like to make a crisp deep purple border around the white area on my blog. (The white area contains my header, posts, and widgets area.
    Does anyone have an idea of how to do this?

    Also, on my page menu bar, the page that is selected shows up light pink. It is difficult to see on a light purple background. I would also like to make that color deep purple. How do I change the color of the page selected?

    Thank you so much for any and all help regarding these issues. It is greatly appreciated.

    My site is:
    https://www.kleverkiddiewinks.com

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi Julia,
    I saw your request and I’m glad to help again. Here’s for your purple border around the white area. You can add this css to your custom.css file at the bottom (always add stuff at the bottom so it keeps it’s priority)

    .site {
  border: 10px solid #800080;
}

    You can also change the color of your Home font to purple by adding this code:

    .navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
  color: #800080;
}

    Hope it works out for you. Let me know if you have any difficulty implementing these changes. Regards Chris

    Thread Starter juliaruc

    (@juliaruc)

    Hi Chris,

    You did it again. Thank you so much. I try hard to research how to do things on my own, but I’m so busy all the time that after a few hours of trying I always hope someone on here can help. THANK YOU AGAIN. It looks beautiful!

    ??

    Julia

    Glad I could be of help! Anything else you might need while we’re at it? Your text in the footer looks a little pale. Let me know your preferences. GBY! Regards Chris

    Thread Starter juliaruc

    (@juliaruc)

    The text in the footer: Maybe I can change it to the same colour that is in the header?

    I’m sorry it has taken awhile to respond. It has been busy busy here! I appreciate your help though!

    Sincerely,
    Julia

    Hey Julia,

    Here’s a purple and a white when you hover to give it more contrast:

    a, a:visited {
  color: #800080;
}
.site-info a:hover {
  color: #FFFFFF;
}

    Hope you are fine with your projects
    Chris

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Border around large text/header area’ is closed to new replies.