Motion theme addict

• 

  mysurfdeal · Member · Feb 20, 2013 at 11:41 pm

  • Copy link
  • Add topic to favorites

  All,
  Hopelessly in love with this theme for my blog http://www.surfdeals.ch

  except for the colors
  -the blocks in the sidebar (visible when looking at a blogarticle) and lines around blocks are very dominant …
  …i would like the blocks and lines have simular color as background so they blend in… favourable the background is white and so are the blocks/lines in sidebar and the block that wraps around title of article is also white. same for blocks in footer, also white..
  and text on whole page is black..

  —> message for this theme: Your current theme does not support Custom Colors yet. We are working to add support to most of our themes, including this one.

  I have the CSS upgrade..but not the skills :) Anyone that can guide me through the valley of darkness…?
  Thank you ver ymuch,
  Mark

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

• 

  designsimply · Member · Feb 24, 2013 at 4:43 am

  • Copy link

  -the blocks in the sidebar (visible when looking at a blogarticle) and lines around blocks are very dominant …

  Here is an example to get you started. It will change the background color for sidebar widget blocks, sidebar headings, and sidebar hover links:

  #sidebar ul li.boxed {
  	background: #888;
  }
  
  #sidebar h3,
  #sidebar ul ul li a:hover {
  	background: #777;
  }

  Adjust the colors to your liking.
  http://en.wikipedia.org/wiki/Web_colors#X11_color_names

• 

  designsimply · Member · Feb 24, 2013 at 5:07 am

  • Copy link

  …i would like the blocks and lines have simular color as background so they blend in… favourable the background is white and so are the blocks/lines in sidebar and the block that wraps around title of article is also white. same for blocks in footer, also white..
  and text on whole page is black..

  This will take some work. How I would approach it would be to look through the theme’s original stylesheet and find every case where “background” is used, and copy every selector into a comma-separated list. Then I would apply a new “background” and “color” property for those selectors all at once.

  I went through several and made and example for you. Note that it is not complete, and you may need to add to it if you want to adjust more of the colors:

  body.custom-background,
  #top #topmenu li a,
  #header #logo h1 a,
  #header #logo #desc,
  .posttop,
  .posttop h2.posttitle,
  a,
  .postcontent,
  #footer,
  #footer ul li,
  #footer a:hover,
  #credits a {
  	background: #fff;
  	color: #000;
  }
  
  #nav li a {
  	color: #666;
  }

  I’m not really a fan of how some of that text shadow property looks, so I would remove it like this:

  h1, h2, h3, h4, h5, h6, p, li, dt, dd, blockquote, label, th, td, a,
  #header #logo h1 a {
  	text-shadow: none;
  }

  The Motion theme uses transparent images like this one to setup the background colors normally:
  http://s0.wp.com/wp-content/themes/pub/motion/images/blacktrans.png

  But I used regular color blocks in my example above since we’re dealing with black and white.

  Here is a link to the Motion theme’s stylesheet so you can look through it to add more selectors to the example if you’d like:
  https://s1.wp.com/wp-content/themes/pub/motion/style.css?m=1355953138g&minify=false