• Resolved juliaruc

    (@juliaruc)


    Hi,
    I am extremely NEW to blogging and I accidentally hit a button and when I refreshed my screen, my background pattern on the sides was gone and the blog space (text space) was wide. Now, I can only see my background image at the top of the blog. How can I get it back so that I can see it on the sides again? Also, if I get it back to how it was and I decide I actually like it wide like this again, how can I change it back?

    Thank you for any and all assistance. 🙂

    Here is my site: http://www.kleverkiddiewinks.com

Viewing 8 replies - 1 through 8 (of 8 total)
  • Hey Julia,

    Great work you’re doing there! I checked your site and we see the background image on each side. If you want the blog space to be full width, you can add this code to your “custom.css” file inside your editor (appearance/editor). You add this code at the bottom of the file:

    .site {
      max-width: 100%;
    }

    To return to your background image on each side of the blog then just delete the code you’ve just put in your “custom.css”. Hope that works for you! Chris

    Thread Starter juliaruc

    (@juliaruc)

    Thank you Chris!

    Another question…

    I want to change the ribbon color from black to light purple and center my page options. I know by doing this I’m editing the theme, and as I understand, in order to do this I should create a CSS stylesheet? But, I tried last night for a few hours to create a CSS stylesheet and I can’t get anything to happen. Do I have to purchase something in order to do this?
    I followed a tutorial and the BEGINNER BEGINNER step before it has you practice some code said ” so start a fresh new file with your text-editor and save the blank document as “style.css” in the same directory as your HTML file.”
    But, I have no idea how to even do that 🙁 Help!

    Again, my site is: http://www.kleverkiddiewinks.com

    Thank you for any help.

    Julia

    Hey Julia,

    Glad to help! I found out how to change the color of both top and bottom ribbons (footer). You just have to add this code to your “Custom.css” file.

    .navigation-main {
      background: none repeat scroll 0 0 #CC99FF;
    }
    .navigation-main:before, .navigation-main:after {
      border: 1.4em solid #CC66FF;
    }
    .site-footer {
      background: none repeat scroll 0 0 #CC99FF;
    }
    .site-footer:before, .site-footer:after {
      border: 1.1em solid #CC66FF;
    }

    If you want the changes to be lasting you must either put this code into your “custom.css” file and not use a new “styles.css” file. The reason is if the theme gets updated, the style sheet will be updated and you will lose the changes you’ve made. The other option is to create a child theme. Do you have a “custom.css” file in your theme? Even if your theme gets updated, the “custom.css” will retain the changes.

    As for the theme options, I do not understand what you mean. Is it the top menu that you want to center? Let me know. Regards Chris

    Thread Starter juliaruc

    (@juliaruc)

    Hi Chris,

    Thank you again!
    I do have a “custom.css” file in my theme, I just didn’t know how to edit it. I put in your HTML up there and it worked!! Thank you! Was wondering though, when I change it, the sides that did look like the end of a ribbon are now darker purple boxes. Is there a way around that?

    Yeah, the page options home, about me, contact me and all of that I wanted to see if I could get it centered instead of on the left side. I’ll have to figure out how to change the size and color of the font too because the white font is hard to see on a light purple background. THANK YOU SO MUCH!

    I think I am starting to get the hang of it now!

    Hi Julia,

    Great we’re getting there. All changes should be done in the “custom.css” sheet. If you want the sides of the ribbon to be the same color as the ribbon please add this code at the bottom of your “custom.css” sheet it should do the trick:

    .navigation-main:before, .navigation-main:after {
      border: 1.4em solid #0000;
    }
    .navigation-main:before, .navigation-main:after {
      border: 1.4em solid #CC99FF;
    }
    .site-footer:before, .site-footer:after {
      border: 1.1em solid #0000;
    }
    .site-footer:before, .site-footer:after {
      border: 1.1em solid #CC99FF;
    }

    As for the centering of the page options (menus), you can add this code also in the “custom.css” after the code I just gave you. This should center the menus.
    `#site-navigation .menu-main-container, #site-navigation .menu, .site-info {
    margin-left: 15.5em;
    }
    I hope it helps! Keep the good work. I love Chinese kids as my wife is Chinese and I was there last year. Regards Chris

    Sorry I forgot to put the last code inside the brackets. It should read like this:

    #site-navigation .menu-main-container, #site-navigation .menu, .site-info {
      margin-left: 15.5em;
    }

    Cheers!

    Thread Starter juliaruc

    (@juliaruc)

    Dear Chris,

    You are a legend. Thank you so much! I’ll definitely do some more toying around with the css, so I know how it works a bit better.

    The little kiddos are the best! That’s so great that you have been here! Take care Chris.

    Thank you again,

    Julia

    Glad I could be of help! Let me know if there is anything else! Regards Chris

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Background’ is closed to new replies.