Custom CSS for the Rounded Theme

• 

  jtdigs · Member · Feb 14, 2012 at 4:40 am

  • Copy link
  • Add topic to favorites

  I’ve changed the CSS before on a previous blog, but this one has me stumped. I’d appreciate some help!

  1. I would like to change the background colour of both the menu and the second column.

  2. I would like to remove the little arrow that is under the title (beside the words James Thomson). I’d also would like to increase the font size of that subtitle (James Thomson Elementary.

  3. I would like to remove the option to comment on the blog as well as the date/time of posts.

  4. I would like to remove the little green tabs on corners of the sidebar.

  5. I would like to remove the footer bar.

  To start – thank you!!

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

• 

  timethief · Member · Feb 14, 2012 at 4:46 am

  • Copy link

  Staff will post into this thread probably tomorrow and help you. I suggest that you read this custom design FAQs section carefully because footer links cannot be removed.
  http://en.support.wordpress.com/custom-design/#frequently-asked-questions

• 

  jtdigs · Member · Feb 14, 2012 at 4:49 am

  • Copy link

  Thank you for your prompt reply!

• 

  timethief · Member · Feb 14, 2012 at 4:50 am

  • Copy link

  You’re welcome.

• 

  designsimply · Member · Feb 15, 2012 at 4:15 am

  • Copy link

  First, note that the Rounded theme uses images as part of its design. In order to change those kinds of things, you will need to recreate and re-upload the images and then replace the ones in the theme with the replacements you created and uploaded.

  1. I would like to change the background colour of both the menu and the second column.

  For the top right navigation, here are the images that are used:
  http://s0.wp.com/wp-content/themes/pub/rounded/img/lpt.gif
  http://s0.wp.com/wp-content/themes/pub/rounded/img/rpt.gif

  To change the background color of the top navigation menu at the top right, here is the part of the CSS that controls the main color, the left image, and the right image:

  #pagetab a {
    background: #74C0FA;
  }
  #pagetab .ltab {
    background: url(http://s0.wp.com/wp-content/themes/pub/rounded/img/lpt.gif) no-repeat;
  }
  #pagetab .rtab {
    background: url(http://s0.wp.com/wp-content/themes/pub/rounded/img/rpt.gif) no-repeat;
  }

  Another option would be to use border-radius, a CSS3 rule, to add rounded corners and just remove use of the images. Note that this works in IE9 or higher, so if you’re targeting IE8 then the other solution is better.

  #pagetab {
    padding: 0;
  }
  #pagetab ul {
    background: deepskyblue;
    padding-top: 35px;
    -webkit-border-bottom-left-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
  }
  #pagetab a {
    background: none;
  }
  #pagetab .ltab, #pagetab .rtab {
    background: none;
  }

• 

  designsimply · Member · Feb 15, 2012 at 2:36 pm

  • Copy link

  To change the background color of the 2nd column (right sidebar) on the Rounded theme, I would do this:

  .sideitembottom, .sideitemtop, .sideitemtop img {
    background: none;
    display: none;
  }
  .sideitem {
    background: tomato;
    padding: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
  }

  Change out “tomato” with a color of your choice.

• 

  designsimply · Member · Feb 15, 2012 at 2:39 pm

  • Copy link

  2. I would like to remove the little arrow that is under the title (beside the words James Thomson). I’d also would like to increase the font size of that subtitle (James Thomson Elementary.

  To remove the arrow from the tagline and increase the tagline font size in the Rounded theme:

  #masthead h2 {
    background: none;
    margin-left: 8px;
    font-size: 150%;
  }

• 

  designsimply · Member · Feb 15, 2012 at 2:42 pm

  • Copy link

  3. I would like to remove the option to comment on the blog as well as the date/time of posts.

  To disable comments, you will need to open each existing post or page and turn off comments by unchecking the “Allow comments” checkbox and saving the changes. You can also use the bulk editor. To change the option for future posts you create, turn off comments from your Settings → Discussion page. See http://en.support.wordpress.com/enable-disable-comments/

  To hide the date on posts in the Rounded theme, try this:

  .date {
    display: none;
  }

• 

  designsimply · Member · Feb 15, 2012 at 2:43 pm

  • Copy link

  4. I would like to remove the little green tabs on corners of the sidebar.

  Answered that one in an earlier comment about changing the background color of the sidebar.

• 

  designsimply · Member · Feb 15, 2012 at 2:50 pm

  • Copy link

  5. I would like to remove the footer bar.

  WordPress.com requires that you keep the footer credits. You could turn off the background color from the footer with this CSS though:

  #footertop img.corner, #footerbottom img {
    display: none !important;
  }
  #footer, #footertop, #footerbottom, #footer .rss {
    background: none;
  }

• 

  designsimply · Member · Feb 17, 2012 at 7:26 pm

  • Copy link

  I thought your Rounded theme questions looked neat, and I’m looking forward to see the changes you make on your site. Do you need any other help?