Scrawl Theme: Remove Header Line, hover on sharing buttons and add a logo

• 

  sigmapersei · Member · Apr 26, 2015 at 7:24 am

  • Copy link
  • Add topic to favorites

  Hello!

  1. i would like to remove the header line (but without removing the header hover effect of the title/menu bar), is it possible?

  2. I would like to turn the tiny circles on sharing buttons from the “wordpress blue” to light gray if it’s possible, or to remove the blue at least! And also remove the red hover on the sharing buttons to light grey or to remove it totally!

  3. Also is it possible to instead of the Site title in the upper left, add a logo with approximatively the same size (rectangle) ?

  Thanks for your time!

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

• 

  thesacredpath · Member · Apr 27, 2015 at 1:36 am

  • Copy link

  Hi there,

  1. i would like to remove the header line (but without removing the header hover effect of the title/menu bar), is it possible?

  To remove the line below the site title on hover, add the following CSS.

  .site-header {
      border-bottom: none;
  }

  2. I would like to turn the tiny circles on sharing buttons from the “wordpress blue” to light gray if it’s possible, or to remove the blue at least! And also remove the red hover on the sharing buttons to light grey or to remove it totally!

  The following will allow you to adjust the color of the blue background and the text color of the share count. If you want no background on the share count, make background-color none.

  .sd-social .sd-button .share-count {
      background-color: #ccc;
      color: #cc0000;
  }

  3. Also is it possible to instead of the Site title in the upper left, add a logo with approximatively the same size (rectangle) ?

  Yes, upload your image to your Media Library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with that URL in the following. The image you use will have the shift in opacity when hovered just like the existing site title.

  .site-title a {
      display: block;
      background: url('URL_OF_IMAGE') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
      color: rgba(0, 0, 0, 0);
  }
  .site-title a:hover {
      color: rgba(0, 0, 0, 0);
  }

• 

  sigmapersei · Member · Apr 27, 2015 at 1:05 pm

  • Copy link

  Thanks a lot! everything worked!

  1.There is a little bug who showed up , when i added a logo in the upper left: it added another logo + title + another bigger title at the same place in the slide menu on the right, all three of them are superposed!
  is it possible to remove all of them? or remove at least two!

  2. Also is there a css code to change the color of the slide menu ? (it looks like a deep green/grey and would like to change it! )

  Thanks!!

• 

  thesacredpath · Member · Apr 28, 2015 at 7:08 pm

  • Copy link

  When you insert your logo, uncheck the “Display Header Text” box at Appearance > Site Title, Tagline, and Logo and it should leave only your logo in both places. If you wish to hide the logo, title and tagline from the slideout menu, you can use the following CSS.

  .slide-menu.expanded .site-title, .slide-menu.expanded .site-description {
      display: none;
  }