Change color of top bar, font and footer with CSS

• 

  cyberwear · Member · Dec 22, 2015 at 3:48 pm

  • Copy link
  • Add topic to favorites

  Hi there,
  unfortunately, I have no experience in CSS. Could you help me with changing the top bar and the footer? I want two different colors. For top bar: 382 C and for the footer: 5415 C. Font color still white for these two.

  Moreover, I’d like to change the color of the font for the headline and the posts into 877 C.

  Could someone give me a “copy and paste” Version of the css?

  Thank you & cheers!

  Sarah

  The blog I need help with is: (visible only to logged in users)

• 

  cyberwear · Member · Dec 22, 2015 at 3:49 pm

  • Copy link

  Using the Ubud theme right now…

• 

  ogurel · Member · Dec 22, 2015 at 7:49 pm

  • Copy link

  Hi,

  In order to change your top bar color to 382 C (#c4d600), footer to 5415 C (#5b7f95) and 877 C (#8a8d8f) please use the below custom CSS code:

  @media screen and (min-width: 1200px)
  {
      #site-nav {
          background: #c4d600 !important;
      }
      .search-wrap #searchform input#s {
          border-bottom: 1px solid #c4d600;
      }
      #site-nav ul li a:hover {  /* This is the color when the mouse hovers over the menu choices */
          color: #000 !important; /* No more color change to white as it made the text harder to read */
          background: #d5e711; /* Lighter background color on hover */
          border-bottom: 2px solid #444; /* Added a 2px border at the bottom that is completely up to you to keep */
      }
      .search-wrap #searchform input#s {
          border-bottom: 2px solid #c4d600;
          background: #c4d600 !important;
      }
  }
  @media screen and (max-width: 1199px)
  {
      #site-nav {
          background: #c4d600 !important;
          color: #000;
      }
      #site-nav ul li:hover {  /* This is the color when the mouse hovers over the menu choices */
          color: #000 !important; /* No more color change to white as it made the text harder to read */
          background: #d5e711; /* Lighter background color on hover */
      }
      .search-wrap #searchform input#s {
          border-bottom: 2px solid #c4d600;
          background: #c4d600 !important;
          color: #000 !important;
      }
      #site-nav ul li a, #site-nav ul li a:hover
      {
          color: #000 !important;
      }
      .search-wrap #searchform:before
      {
          color: #000;
      }
      /* To change the placeholder color for the word Suchen ... */
      #s::-moz-placeholder
      {
          color: #666;
      }
      #s:-moz-placeholder
      {
          color: #666;
      }
      #s::-webkit-input-placeholder
      {
          color: #666;
      }
      #s:-ms-input-placeholder
      {
          color: #666;
      }
  }
  #colophon
  {
      background: #5b7f95;
  }
  .page .entry-header h1.entry-title
  {
  	color: #8a8d8f; /* This will change the color of headlines such as Über uns and Impressum */
  }
  #site-title h1 a
  {
  	color: #8a8d8f; /*  This will change the color of the h1 headline "we love to create" */
  }

  I hope these are the modifications you needed and please write back if you need anything else.

  Take care,

  Onur

• 

  cyberwear · Member · Jan 4, 2016 at 10:30 am

  • Copy link

  Hi Onur,

  it worked! Thank you so much for making me happy :)

  Happy new 2016!

  Cheers,

  Sarah

• 

  ogurel · Member · Jan 4, 2016 at 11:01 am

  • Copy link

  It’s my pleasure :)

  Happy new year 2016 to you too!

  Onur

• 

  cyberwear · Member · Jan 5, 2016 at 8:51 am

  • Copy link

  Hi Onur,

  may I ask for your help again? I would like to know if it’s possible to add a translation button, so People can choose between german and english. Moreover, is it possible that all text is in the same color (grey) as the headline is?

  Thank you very much :)

• 

  ogurel · Member · Jan 14, 2016 at 5:29 pm

  • Copy link

  Hello again,

  I am sorry for the delay, I’ve been very busy these last couple of days.

  Unfortunately, it is not possible to install any plugins and because of this you cannot use Microsoft or Google translation widgets or any others, as they use JavaScript and it gets stripped out to preserve security on this multi-user blogging platform. http://en.support.wordpress.com/code/
  http://en.support.wordpress.com/code/#javascript

  However, timethief has some tips for translation on her blog at https://onecoolsite.wordpress.com/2011/02/14/translation-widget-for-wordpress-com-blogs/

  For the text color you can use the below custom CSS:

  body, a, h1, h2, h3, h4, h5, h6
  {
      color: #8a8d8f;
  }
  .entry-header h2.entry-title a, .entry-details, .entry-details a, #comments ul.comment-meta, #comments ul.comment-meta a, #respond a#cancel-comment-reply-link, #comments .comment-author a, .author-info h6 a, .nav-next a, .nav-previous a, .previous-image a, .next-image a
  {
      color: #8a8d8f;
  }

  Please note that this changes all text, pretty much everywhere in the body of the website to headline color.

  Please let me know if you need anything else,

  Onur