Customizing CSS Rounded Theme problems with corners

• 

  susanhobbs · Member · Dec 17, 2009 at 12:48 am

  • Copy link
  • Add topic to favorites

  Hi there,

  I am currently trying to update the Rounded theme for http://susanhobbs.wordpress.com. I have managed to change the background colors, however the left top and bottom left rounded corner images are not in the CSS.

  How can I fix the corners so the colors match the background. I’ve been able to save the images and upload them to the library, but don’t know how to actually replace the CSS.

  any help is appreciated.

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

• 

  devblog · Member · Dec 17, 2009 at 3:42 am

  • Copy link

  Those corners are in the markup so more tweaking to the CSS will be needed.

  Also, do not copy the whole CSS in the CSS editor. The only code in the CSS editor should be that of your modifications/additions to the style sheet. Please read this for more info:

  http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  I’ll come back later with a fix for your corners.

• 

  thesacredpath · Member · Dec 17, 2009 at 3:48 am

  • Copy link

  For the top corner, try adding the following to your CSS and put in the URL of the top corner

  .sideitemtop .corner {
  background: transparent url(URL_of_top_corner) no repeat scroll 0 0;
  }

  For the bottom corner the following and again put in the URL of the bottom corner

  .sideitembottom .corner {
  background: transparent url(URL_of_top_corner) no repeat scroll 0 0;
  }

  I haven’t checked the above, so let me know if they don’t work.

• 

  thesacredpath · Member · Dec 17, 2009 at 4:18 am

  • Copy link

  My solutions don’t seem to work, so we’ll wait for the CSSwiz, devblog.

• 

  devblog · Member · Dec 17, 2009 at 4:24 am

  • Copy link

  Unfortunately TSP’s code won’t work since, as I said before, the images are in the markup and a different approach needs to be taken.

  This code should do what you want:

  .postop, .postbottom, .sideitemtop, .sideitembottom, #footertop, #footerbottom {height: 15px;}
  
  .postop img, .postbottom img, .sideitemtop img, .sideitembottom img, #footertop img, #footerbottom img {display: none !important;}
  
  .postop {
  background: transparent url(URL-TO-YOUR-IMG) 0 0 no-repeat;
  }
  
  .postbottom {
  background: transparent url(URL-TO-YOUR-IMG) 0 0 no-repeat;
  }
  
  .sideitemtop {
  background: transparent url(URL-TO-YOUR-IMG) 0 0 no-repeat;
  }
  
  .sideitembottom {
  background: transparent url(URL-TO-YOUR-IMG) 0 0 no-repeat;
  }
  
  #footertop {
  background: transparent url(URL-TO-YOUR-IMG) 0 0 no-repeat;
  }
  
  #footerbottom {
  background: transparent url(URL-TO-YOUR-IMG) 0 0 no-repeat;
  }

  I still would encourage you to read the article I linked you to before.

• 

  thesacredpath · Member · Dec 17, 2009 at 5:30 am

  • Copy link

  Devblog to the rescue!

• 

  susanhobbs · Member · Dec 20, 2009 at 5:40 pm

  • Copy link

  Thank you, thank you! I will make the changes you suggested. Wish me luck.