white boxes disappeared

  • Resolved athomewithazlie

    (@athomewithazlie)


    8 years, 1 month ago

    Hi y’all,

    I’m such a beginner so I am sorry in advance if I’m wasting anyone’s time! I just don’t even know where to look for this … I’m still in the “google pretty much everything” phase.

    I just got my site up yesterday. The theme is Adelle, and at my original wordpress.com site (mrsonthemove.wordpress.com) there is a background image, and on top of that there is a white box for the content to sit on top of so it shows up nicely. But now at my self-hosted site (athomewithazelie.com) the white box is gone, so all of the content appears on the background and it’s terribly hard to read. Also, some fonts are different.

    Thank you so much in advance. I couldn’t even figure out what the white box is called to properly google! It seems like something got switched off somewhere along the way. Sigh!

    Thanks everyone!

Viewing 4 replies - 1 through 4 (of 4 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    The developers and users of this theme would be the best people to ask. You can reach them here:

    https://www.ads-software.com/support/theme/adelle

    Hi again @athomewithazlie.

    @sterndata – I requested that she post here as I was going to help, but the original post was on the WordPress.com forums so wanted to keep things separate from there.

    There are a few differences between the two themes, but let me let me just quickly run you through the tweaks I looked at.

    There’s a few bits to change in the CSS, but the main parts are .header and .container classes. Note, there are multiple versions of these declarations but it’s nothing to worry about!

    Under Appearance > Editor you’ll want to edit Styles.css (this should be automatically selected)

    FIRST! Copy all of the CSS code from the edit box you’ve just opened and save it to a new text file on your computer just to be safe. This is advised with all large edits you make. ??

    Find @media all and (min-width: 1200px) and under here you want to edit/add to .container and .header classes:

    .container {
    margin: 0 auto;
    width: 1020px;
    padding: 0 10px;
    overflow: hidden;
    background-color:#fff;

    and

    .header {
    position: relative;
    width: 1020px;
    margin: 0 auto;
    padding: 40px 10px;
    background-color:#fff;

    The things that I’ve changed in this, as you’ll see, is made sure that both declarations have background-color: #fff (this is a white background) and edited the margins and padding to make sure that they look good on the page and wrap around the content neatly. Make sure you only edit the background-color, margin, and padding. The rest should remain the same!

    Repeat this with the section under @media all and (min-width: 481px) and (max-width: 1199px) making sure you only edit background-color, margin, and padding and you should be golden!

    If you get stuck, please don’t hesitate to let me know.

    • This reply was modified 8 years, 1 month ago by demasiri.
    • This reply was modified 8 years, 1 month ago by demasiri.
    • This reply was modified 8 years, 1 month ago by demasiri.
    Thread Starter athomewithazlie

    (@athomewithazlie)

    Thank you both!

    @demasiri: IT WORKED! After a few attempts (literally never seen any kind of code before ever so) I got it right! I appreciate your help so so much! It was nerve-wracking but also exciting… now I want to learn all this stuff! (Like, how on freaking earth did you figure that out?!). Thanks again, so much!

    You’re welcome!

    Chrome has built-in features to let us view the CSS (stylesheets) on a website, so it let me see what was already there and work out tweaks for it.

    As for learning this, there are a wealth of resources online that will teach you how to work with CSS. As you make more changes and tweaks to your blog you’ll learn new tricks as you go. I’ve been doing this for a fair few years by now so it comes a little more naturally.

    Good luck, and you know where these forums are should you need any further help and advice in the future.

    • This reply was modified 8 years, 1 month ago by demasiri.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘white boxes disappeared’ is closed to new replies.