background image – how to cover in one view vs repetitive blocks

stacysnotes · Member · Jan 24, 2015 at 2:41 pm
Copy link

Add topic to favorites
Hi (not sure which forum to post!)
I’m using fictive theme. I’d like to add a “notebook” image in the background. I have one in place temporarily. I uploaded a better one in my media (see blue notebook) https://stacysnotes.files.wordpress.com/2015/01/screen-shot-2015-01-24-at-9-02-51-am.png
I don’t know how to apply it where the image doesn’t repeat in blocks but rather covers the whole background with one image view. Appreciate help to fix. Also want to make sure the navigation is still easy to read (make it white color on the blue notebook background?)

The blog I need help with is stacysnotes.com

The blog I need help with is: (visible only to logged in users)
staff-happychia · Staff · Jan 25, 2015 at 12:09 am
Copy link
Could you please make the file https://stacysnotes.files.wordpress.com/2015/01/screen-shot-2015-01-24-at-9-02-51-am.png available?
stacysnotes · Member · Jan 25, 2015 at 2:09 am
Copy link
I’ve uploaded a new background image (notebook) on stacysnotes.com
I need help with few things please.
1. how to move the copy in left side navigation over to the right more so that it’s not on top of the background line running down left side of the page. See it?
2. How to reduce spacing between “join the conversation” and the other sections underneath? Need to reduce spacing/ tighten up the navigation area.
3. How to turn “you are following this blog” section in white color to more readable color? can you fix to match my other sections?
4. how to reduce the spacing between each category listed and each posts? Is it double spaced – when it should be single spaced?
5. can you help me move facebook/ twitter text box with icons in navigation to the right more (they don’t seem lined up with the other navigation elements).
6. Should the background be placed as is or extend to the top of page and sides so you don’t see white space? opinions? If needs fixing, how?
7. When you look at my site on mobile, there is a teal /greenish color shown but not on desktop view. How do I change that color to match desktop?
Really appreciate help as I don’t understand CSS at all.
staff-happychia · Staff · Jan 25, 2015 at 4:30 am
Copy link
1. I did not understand what you mean.

2. You currently have the following rule that is adding 40px of margin on the top :
```
#secondary .widget {
    color: #fff;
    margin-top: 40px
}
```
Modify it to the following:
```
#secondary .widget {
    color: #000;
    margin-top: 20px;
margin-bottom: 12px
}
```
3. This is taken care in the above rule. Changed the color from #fff (white) to #000 (black).

4. Could you link a post that has category listed?

5.
```
#text-9 .textwidget a {
    margin-right: 25px;
    margin-left: 50px;
}
```
6. I think background looks good.

7.
```
.menu-toggle {
  background-color: rgb(45,58,77);
 }
```
stacysnotes · Member · Jan 25, 2015 at 12:41 pm
Copy link
HI. thank you so much for all your help!
more questions:

how do I make the header banner with my stacy’s notes logo stay white, not just when i hover over with my mouse.

How do I make headings in the navigation i.e. “categories”, “recent posts” – bolder/ stand out more?

how do I fix Ipad/tablet view.
1. background doesn’t stick when you scroll down all postings. There’s white space when you get to “feel the fear and do it anyway” post…and “live by the four agreements” post…. How do make the background consistent (not break) as you scroll? Same is true when you scroll the very bottom. There is a white space between my last post and the “blog at wordpress.com / the fictive theme” note that wordpress shows for each blog. fix?

how to fix the mobile (cell phone) view.
1. Go to home for example. scroll down. look at the “blog at wordpress.com / fictive theme”…The background cuts off /doesn’t extend to full right of screen. Looks visually bad. How to fix?
2. see post “feel the fear and do it anyway”…the copy is breaking in a weird spot. I want “everlasting impact” copy to (move up) continue where “books that have an” is shown. How to fix?
3. How to make tagline fit better under logo. Move “enjoy each day” all on the second line, vs what’s showing now: “enjoy” on the first line.
4. Look at the navigation section on cell phone, showing “join the conversation, follow stacy’s notes, categories, recent posts. The background doesn’t fit across the right side of screen. How to fix?
It also doesn’t show the spiral notebook background image on right side as you see on desktop view. If it’s because screen is too small, then ok… but the background looks bad on the right side of screen. How to extend image to right side on mobile?

When I create new posts: I see that I have options i.e.
standard vs image, quote… have I chosen the right ones for each of my posts? When do i pick standard vs an image (as all of my current blog posts have some picture in the post)

tags: do i have too many. is it mainly for search engines? should I pick one for each post or few is fine? Not sure how to leverage tags or leave blank?

“You are following this blog” in navigation is too close to the left edge. How to move it right?

Facebook and twitter buttons: how to move them closer to each other? Too much spacing in-between.

All the copy in navigation is left justified. wondering if it would look better being centered within that white section? How to test/look at it?
If I left it as is (left justified), then how do I adjust the Facebook and twitter icons to be moved to left a little, lined up with rest of copy that is left justified?

how to reduce white space between my blog post copy and the ‘share this” section. For example, look at “Introducing Stacy’s notes” (the first post)…too much white space.

I have another question but it’s easiest to explain by showing you visually. is there a way to attach a screenshot for you to see? Are you able to view my media? Is there another way to share with you?
staff-happychia · Staff · Jan 25, 2015 at 8:40 pm
Copy link
How do I make headings in the navigation i.e. “categories”, “recent posts” – bolder/ stand out more?
```
h1.widget-title {
    font-weight:bold;
    font-size: 17px;
}
```
standard vs image, quote… have I chosen the right ones for each of my posts? When do i pick standard vs an image (as all of my current blog posts have some picture in the post)

Please check this info reg. post formats:
http://en.support.wordpress.com/posts/post-formats/
https://dailypost.wordpress.com/2014/02/13/post-formats/
http://en.blog.wordpress.com/2013/01/15/post-formats/

tags: do i have too many. is it mainly for search engines?

Tags and Tags in the Reader support documents have some guidance on number of tags. Specifically check the Topic Listings and Get Your Content to Appear in Tags sections towards the end.

“You are following this blog” in navigation is too close to the left edge. How to move it right?
```
.widget_blog_subscription p {
    padding-left: 20px;
}
```
Facebook and twitter buttons: how to move them closer to each other? Too much spacing in-between.

Adjust the values in this rule to get the desired spacing:
```
#text-9 .textwidget a {
    margin-right: 1px;
    margin-left: 20px
}
```
All the copy in navigation is left justified. wondering if it would look better being centered within that white section? How to test/look at it?
```
div#secondary, nav#site-navigation {
    text-align: center;
}
```
If I left it as is (left justified), then how do I adjust the Facebook and twitter icons to be moved to left a little, lined up with rest of copy that is left justified?

By adjusting the left and right margin values in this rule:
```
#text-9 .textwidget a {
    margin-right: 1px;
    margin-left: 20px
}
```
how to reduce white space between my blog post copy and the ‘share this” section. For example, look at “Introducing Stacy’s notes” (the first post)…too much white space.

Introducing Stacy’s Notes post has whitespace / empty paragraphs at the end. You can remove it.

I will work on extending the background in the tablet/mobile little later. Please let me know if I missed anything else.
stacysnotes · Member · Jan 25, 2015 at 9:04 pm
Copy link
Will try out your recommendations. I can’t thank you enough!!!!
stacysnotes · Member · Jan 26, 2015 at 6:31 pm
Copy link
HI. hoping you can still help me fix the mobile/tablet issues.
Also, is there a way to make the notebook image as you can see on desktop (on left side of page/navigation area) appear on mobile? or is it too small of screen?
stacysnotes · Member · Jan 27, 2015 at 12:31 pm
Copy link
Hi.
besides the mobile issue I’m having with background…can you help me make the section: follow stays notes….enter email address box and subscribe now all centered. they seem right justified.

also how to make subscribe now in the box look bigger/stand out more?

How to make “follow stacy’s notes” fit on one line?

How to make “categories and recent posts” line become bold so they stand out from the text underneath it.

how do I make the logo stay white and not just when you hover mouse of it?
staff-happychia · Staff · Jan 28, 2015 at 9:22 am
Copy link
I think most of your questions in the previous update are resolved?

I can see your widgets centered, “follow stacy’s notes” fit on one line, “categories and recent posts” is bold, “subscribe now” stands out as well.

I am unable to understand what’s wrong with logo. It doesn’t look radically different between normal and hover.

Hopefully I will find time to check the mobile issues. I am still learning things so it might take a while before I have any solution at all.
thesacredpath · Member · Feb 21, 2015 at 2:31 am
Copy link
The sidebar and content area adjust in width to look good on all width screens, down to the point when the sidebar moves below the content. The first adjustment happens at 1040px, and at that point the sidebar narrows to keep your content prominent and “Follow Stacy’s Notes goes to two lines. The only way to adjust this would be to make the the sidebar titles a smaller size and adjust the letter spacing. You can give the following a try.
```
.wf-active .widget-title {
    font-size: 95%;
    letter-spacing: 0.7px;
}
```
On the spiral, you would take away about 200px of width from the content, making it about half the width of the screen on a phone, so I would suggest not making that change. What you could do though, would be to set the background image position/alignment as top and left, which would keep the spiral from disappearing so quickly. You can give that a try at Appearance > Customize > Colors & Backgrounds and set it for left alignment.
stacysnotes · Member · Apr 1, 2015 at 12:31 pm
Copy link
Hi, hoping you can help me again. 1. I am unclear how to add a new category within my widget without messing up the code. Trying to add ‘Parenting Strategies’ as I included in my last post (quality over quantity). Also, when I hover over the links in the sidebar, it doesn’t look clickable. Is there a way to make the post or category links turn blue color or bold upon hovering over it with curser? if not, other options?
thanks much! (www.stacysnotes.com)
thesacredpath · Member · Apr 2, 2015 at 1:16 am
Copy link
Hi, I would suggest adding the Categories Widget instead of using a text widget, which you have to update every time you create and use a new category. The Categories Widget will automatically add links to any new category with a published post in it.

You can give styling to the links in the sidebar using the following CSS. I’ve included a color and text underline declaration. You can use both, or either, and delete the one you do not use.
```
#secondary a:hover {
    color: #cc0000;
    text-decoration: underline;
}
```

No items found.