Change color of all bars

[daria mochan]

Hello.

I’d like to change the colors of all the dark gray bars, can you point me in the right direction?

Thanks

Daria

[daria mochan]

Figured it out! But now I’m wondering how I can get rid of the shadows under everything?

[Bill Robbins]

Daria,

Glad you were able to find the solution for the gray bars colors. Here’s how to take out the shadows:

1. Go to the appearance section of your WordPress dashboard and select theme options.
2. Select the styling tab and scroll down to the very bottom until you find a box called custom css.
3. Paste this into that box:

   
   .shadow, 
   .shadow-little, 
   .post-highlight img, 
   .wp-caption, 
   .gallery img, 
   input#submit  {
   	-webkit-box-shadow: none;
   	-moz-box-shadow: none;
   	box-shadow: none;
   }
   

4. Save your changes.

That should take out the shadows from the theme. If you have any trouble, please feel free to ask.

Thanks,
Bill

[daria mochan]

Thank you, works great! Is there also a way to change the font size on select widgets?

[Bill Robbins]

That’s great. You can change the font-size in your widgets.

1. To change the size of the text inside your widgets, you can use this styling in your Custom CSS box:

   
   .widget, 
   .widget p,
   .widget li {
   	font-size: 18px;
   }
   

2. Just change the 18 to the size you’d like to have in pixels and update your settings.

1. To change the title of the widgets, use this:

   
   h4.widgettitle {
   	font-size: 20px;
   }
   

2. Just change the 20 to the size in pixels you’d like to have the text be.
3. Update your settings.

If have any trouble, let me know.

[daria mochan]

Thanks! How about changing the font and size in Navigation bar and the donate and newsletter bars?

[daria mochan]

I may as well ask you about the button fonts too!

[Bill Robbins]

No problem. Here are the snippets:

• Navigation Menu Items:

  
  .menu a, .menu a:visited {
  	font-size: 12px;
  }
  

• Donate Button Title (in the arrow):

  
  #donate-title h4 {
  	font-size: 17px;
  }
  

• Donation Bar Description (over the progress graph):

  
  #donate-description p {
  	font-size: 14px;
  }
  

• Donation Goal:

  
  #donate-end p {
  	font-size: 18px;
  }
  

• Buttons:

  
  .action-form input.btn, 
  #donate form h4 a, 
  #donate h4 a:visited, 
  #donate h4 a {
  	font-size: 18px;
  }
  

I hope that helps you out.

[daria mochan]

Thanks! So if I want to change to another font would I just add “fontfamily:” after the size?

[Bill Robbins]

You’re on the right track. To change the font stack, you’d add something like this:

font-family: Georgia, "Times New Roman", Times, serif;

You can also combine the font size and the font stack like this:

font: 20px Georgia, "Times New Roman", Times, serif;

Either way, that should work. If you’d like a visual way to edit the typography, I really like a plugin called Fontific. It supports Google Fonts and has a nice visual way to define your typography.

Hope that helps you out.

[daria mochan]

Thanks! I did download the Fontific, but I’m a little unclear as to where I change the css style sheet to add font info. Can I do this through your styling box or do i need to go to the editor? I’m definitely a newbee at this and for some reason my Norton is blocking the fontific plugin site….

[Bill Robbins]

No problem at all. Fontific lets you edit the typography without then editing the CSS anyplace else. Just enter the “selector” you’d like to edit into the the top right corner of the editing box in the plugin. The selector would be something like .widget p to edit the paragraphs inside your widgets or h4.widgettitle for widget titles. After you add them in the top right corner, make your changes and then save them. The plugin will then add it to your site.

[daria mochan]

Thanks! It’s getting there! Where can I find the codes for each item I need to add to fontific? For example: menu header font, title font on blog, donate/newsletter bar and buttons? Also- I seemed to have changed the font on the homepage with my blog updates- but the not on the actual blog post page.

One more thing- is there a way to add text to the video widget? I’ve put a text widget under the video, but i’d like to make that text smaller andcant seem to figure that out either (i put iin the code you gave me and it made the other widgets smaller, but not that one?)

Thanks again, we are loving this theme!

allabilitiesplayground.org

[Bill Robbins]

The selectors are listed above. They are the items outside the { } in the code snippets above. Like in this one

.menu a, .menu a:visited {
	font-size: 12px;
}

the selector is .menu a, .menu a:visited

You can add text to a video widget. What you’ll want to do is paste your embed code into the box as normal and hit return. Then below it, you can type your text inside paragraph tags like this:

<p>Your text here</p>

Don’t copy the code above, but rather type in what it says. Then just replace the “Your text here” with what you’d like it to say and update your widget.

I’m glad you’re enjoying the theme.

[daria mochan]

Hi Bill.

I’m wondering what the code is for the the page titles and blog titles? When I click on the pages I’d like to change the fonts using fontific as well. The blog title is changing on the home page, but not elsewhere. Thanks!

[Bill Robbins]

Here are the selectors for the site title:

#text-logo h1 a, 
#text-logo h1 a:visited, 
#text-logo p a, 
#text-logo p a:visited

The inside page titles are:

h1

See if that doesn’t help,
Bill

[daria mochan]

Thanks! It worked for the pages, how would i change each blog post title? 🙂

[daria mochan]

Oh i see- it is changing the title when I click on the blog post, but not before?

[Bill Robbins]

The post titles on a blog archive page are:

h2

On the single view they are a h1 tag.

[Author]

Posts