header

A custom CSS plugin allows you to add pieces of CSS that override the theme’s defauult styles, to change the site layout or look-and-feel.

Adding CSS to the plugin’s CSS editor — instead of editing the theme files directly — ensures that your CSS tweaks won’t be overwritten and lost every time the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS. You could also install a standalone custom CSS plugin if you prefer.

Let me know if you have any other questions!

Hi there – I’ll answer your questions separately here.

Should I start another post for each of my new questions?

For new questions, please start a new thread. It’s not necessary to make a new thread for every single question, but it’s good to try to stick to a couple per thread.

with the custom CSS i can essentially make this theme look anyway I want?

CSS can do a lot to change the look and feel of your site if you’re comfortable with it or willing to learn! Larger changes, and those related to functionality, can be made in child theme instead.

Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

An Intro to CSS: Finding CSS Selectors

An Intro to CSS, or How to Make Things Look Like You Like

Intro to CSS: Previewing Changes with the Matched Rule Pane

How to Find Your Theme’s CSS

https://thewc.co/articles/view/web-inspector-tutorial

https://cssworkshop.wordpress.com/

If CSS is new to you, here are some resources for learning more about it:

• CSS Basics
• Editing CSS
• CSS tutorials

When changing positioning with CSS, be sure to consider and test smaller screens. If you decide to restrict your changes to certain screen sizes, you can learn more about using media queries that target certain screen sizes here:

Using Media Queries with Custom CSS

Media Queries for Standard Devices

http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

is there a way to make the back ground one image?

Try removing your background image from the Customizer and adding it via CSS instead:

html { 
  background: url(FULL-PATH-T0-YOUR-IMAGE) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

I don’t have time to test this one so if it doesn’t work as expected, let us know.

Great, glad to hear it!