CSS Help!

christineneely · Member · Feb 17, 2012 at 6:23 pm
Copy link

Add topic to favorites
I need a lot of help with the CSS of my website…. I’ve gone through the forums but I am so confused so I really appreciate any help people might I’ve me. I’ve made a list of 5 things I need code for… I’m working on the website “ChristineNeely.net”

1) I want to center my “Christine Neely, photographer” logo so that it spans the whole page (a different logo, not yet uploaded)… it’s that same logo but it has a yellow ribbon which stretches from one side of the page to the other. When I uploaded the image previously it was only 1/3 of the page, too small.

2) I want to make my menu bigger and centered underneath the new logo/ribbon. Ideally is there a way to design my own buttons so that it is a jpeg file which says “home” for example in the script font I use?

3) I want to make the footer disappear or make the “Blog at WordPress.com” written in WHITE font.

4) Click “blog” in the menu… there is a faint grey line between the header and the blog. I want to remove that.

5) Click “about” or “contact” in the menu. I want to remove the faint grey line again AND I want to remove the type in the body of the page which says “about” or “contact”

Thank you so much!!!

The blog I need help with is: (visible only to logged in users)
timethief · Member · Feb 17, 2012 at 7:32 pm
Copy link
3) I want to make the footer disappear or make the “Blog at WordPress.com” written in WHITE font.

That’s not allowed. If you have CSS editing experience the upgrade will allow you to stylize the appearance of themes you find here > Appearance > Themes, but will not allow you to change the functionality, by editing the underlying template.

It does not allow you to remove footer links to the theme designer or to WordPress.com.

Also note that as CSS is theme specific, you cannot use the CSS stylesheets from other themes with the themes at WordPress.COM. http://en.support.wordpress.com/custom-design/custom-css/

Please read all of this section very carefully> http://en.support.wordpress.com/custom-design/#frequently-asked-questions

When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

Please see the advice, resources and tools suggestions for undertaking CSS editing in the support documentation.
http://en.support.wordpress.com/custom-design/custom-css/#css-help

See also the advice and resources provided in the two sticky posts at the head of the CSS Forum:
https://en.forums.wordpress.com/topic/learning-about-css-1?replies=1
https://en.forums.wordpress.com/topic/read-me-first-what-is-custom-css?replies=1
designsimply · Member · Feb 17, 2012 at 11:05 pm
Copy link
1) I want to center my “Christine Neely, photographer” logo so that it spans the whole page (a different logo, not yet uploaded)… it’s that same logo but it has a yellow ribbon which stretches from one side of the page to the other. When I uploaded the image previously it was only 1/3 of the page, too small.

You can setup a background image on a different element manually. For example, try adding this:
```
#header #title a img {
  display: none;
}

#header #title a {
  display: block;
  width: 960px;
  height: 270px;
  background: url(IMAGE_URL) no-repeat center bottom;
}
```
And replace IMAGE_URL with an image link after you upload your custom image into your media library.

You may also need to adjust the width and height to make it fit right, depending on the size of your image.
designsimply · Member · Feb 17, 2012 at 11:39 pm
Copy link
2) I want to make my menu bigger and centered underneath the new logo/ribbon. Ideally is there a way to design my own buttons so that it is a jpeg file which says “home” for example in the script font I use?

I wouldn’t recommend using image for the menu navigation. To move the top navigation in the React theme to below the header image and centered, start with this:
```
#navigation {
max-width: 960px;
width: 960px;
top: 330px;
position: absolute;
padding: 0;
margin: 0 !important;
text-align: center;
}
#navigation .nav {
width: auto;
display: inline-block;
}
```
Note that you may need to adjust the spacing such as the height depending on the other CSS you have added.
designsimply · Member · Feb 17, 2012 at 11:43 pm
Copy link
3) I want to make the footer disappear or make the “Blog at WordPress.com” written in WHITE font.

We require that the footer credits stay visible. Would centering it and making it lighter but still visible like this work?
```
#copyright {
  text-align: center;
  color: #ddd;
}

#copyright a {
  color: #ddd;
}
```
designsimply · Member · Feb 17, 2012 at 11:48 pm
Copy link
4) Click “blog” in the menu… there is a faint grey line between the header and the blog. I want to remove that.
```
#header {
  border-bottom: none;
}
```
designsimply · Member · Feb 17, 2012 at 11:50 pm
Copy link
5) Click “about” or “contact” in the menu. I want to remove the faint grey line again AND I want to remove the type in the body of the page which says “about” or “contact”

The code from #4 will hide the faint grey line from the “about” and “contact” pages too.

To hide the titles on pages in the React theme, try this:
```
.page .page-title {
  display: none;
}
```

No items found.