Adelle css changes

• 

  fitformuk · Member · Jun 25, 2015 at 6:56 pm

  • Copy link
  • Add topic to favorites

  Hi i would like to make chanages to the adelle theme as follows:

  1. header image move to the very top
  2. menu links to show in right bottom section of header
  3. Links to be black and hover over red

  Thanks

• 

  thesacredpath · Member · Jun 26, 2015 at 5:07 am

  • Copy link

  Hi there, first off I notice you have hidden the footer credits. You are not allowed to hide the WordPress.com and theme footer credits per our Terms of Service (#11). Even the VIP sites here at WordPress.com (CNN, Time, etc.) are required to keep the footer credits. See the Frequently Asked Questions on the Custom Design support page for more information.

  You are allowed to restyle the footer credits to better fit with your design as long as they remain readable. Please remove the following from your custom CSS, or edit it so that they are visible. If you need help restyling them, just let us know.

  1. header image move to the very top

  I’m seeing your header image at the very top right now.

  2. menu links to show in right bottom section of header

  The menu is in a different div from the header image, and on Responsive designed themes such as Adelle, this is problematic since we have to use position:absolute to move it up and into position and when you use that, the element loses its relationship to the other elements in the page and doesn’t flow and move with them on narrower screens/windows. Another issue is that the header image size adjusts with the width of the screen/window it is viewed on, so we would quickly run out of room for the menu items.

  I do have a suggestion to try. Add the following CSS and see what you think.

  @media screen and (min-width: 601px) {
  	.site-header {
  		background: #000;
  	}
  	.navigation-main {
  		text-align: right;
  	}
  	.navigation-main ul {
  		display: inline-block;
  	}
  }

  3. Links to be black and hover over red

  If you make the links black when not hovered, it will be difficult for your users to see that a link is a link. You may want to consider a way to differentiate links from normal text.

  a, .widget a {
  	color: #000000;
  }
  a:hover, .widget a:hover {
  	color: #990000;
  }