MonophobiaStudio
MonophobiaStudio Recent Posts Threads Started
56 posts
  • Bought between 1 and 9 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 2-3 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United States
MonophobiaStudio says

Hello ThemeForest Authors,

I recently purchased a WordPress theme from Brankic1979 that was the closest to the vision I have for my website. However, I want to make some simple custom changes that require some CSS. I am somewhat familiar with CSS but for some reason I am not able to achieve the look I’m going for. I already asked Brankic1979 but they said that since this is a design issue, they can’t help. They also said that what I’m asking is quite simple.

So here’s my question. The theme has a “content-wrapper” for the whole site, including the header, body, sidebar and footer. They all share the same background and there’s no visible separation. I would like to know how to separate all the elements from each other (header, body, sidebar and footer) so that each one can have its own “box” and you can see the site’s background in between each “box”.

I know that this might be somewhat confusing and I’m not sure I’m explaining myself correctly.

I’m an AudioJungle author and I can offer to write an original piece of music for any of your projects in exchange for your help.

Let me know if you can help,

Thanks in advance

3672 posts
  • Bought between 500 and 999 items
  • Community Superstar
  • Exclusive Author
  • Forum Superstar
  • Has been a member for 4-5 years
  • United Kingdom
charlie4282 says

Link to your site so we can see the site in more detail. Thanks

MonophobiaStudio
MonophobiaStudio Recent Posts Threads Started
56 posts
  • Bought between 1 and 9 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 2-3 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United States
MonophobiaStudio says

www.themakingitproject.com

The site doesn’t actually have any content yet, just a fake post.

407 posts
  • Bought between 1 and 9 items
  • Europe
  • Has been a member for 2-3 years
PaddyTaylor says

Yeah its not too hard – you can send me an email at paddy.taylor@gmx.com and I will talk you through it. (Bear in mind its late here in UK so you will need to be quick or it will have to be in the morning our time). Thanks

203 posts
  • Beta Tester
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
biyanpasau says

I’m not sure i understand you correctly, but If i’m not wrong you might need multiple class or ID for each element

MonophobiaStudio
MonophobiaStudio Recent Posts Threads Started
56 posts
  • Bought between 1 and 9 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 2-3 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United States
MonophobiaStudio says

If i’m not wrong, you might need multiple class or ID for each element

Yes, I thought that could be it, however, I’m not sure how to do that…

MonophobiaStudio
MonophobiaStudio Recent Posts Threads Started
56 posts
  • Bought between 1 and 9 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 2-3 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United States
MonophobiaStudio says

To see an example of what I’m trying to accomplish, please visit this site.

http://www.makingit.co/

Note how the posts and widgets have their own “boxes” and you can see the wood-like pattern of the site’s background in between.

This is exactly what I’m trying to accomplish.

Thanks again

203 posts
  • Beta Tester
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Referred between 100 and 199 users
  • Bought between 10 and 49 items
  • Has been a member for 4-5 years
biyanpasau says
<div class="content-wrapper">

    <div class="main white">
    </div>

    <div class="sidebar white">
    </div>

</div>
.content-wrapper {
    background: black;
}
.white {
    background: white;
}

-

Anyway, what theme is it?

MonophobiaStudio
MonophobiaStudio Recent Posts Threads Started
56 posts
  • Bought between 1 and 9 items
  • Elite Author
  • Exclusive Author
  • Has been a member for 2-3 years
  • Referred between 10 and 49 users
  • Sold between 50 000 and 100 000 dollars
  • United States
MonophobiaStudio says
19 posts
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Korea, Republic of
  • Referred between 1 and 9 users
  • Sold between 100 and 1 000 dollars
YuKhinThemes says

Hello ThemeForest Authors,

I recently purchased a WordPress theme from Brankic1979 that was the closest to the vision I have for my website. However, I want to make some simple custom changes that require some CSS. I am somewhat familiar with CSS but for some reason I am not able to achieve the look I’m going for. I already asked Brankic1979 but they said that since this is a design issue, they can’t help. They also said that what I’m asking is quite simple.

So here’s my question. The theme has a “content-wrapper” for the whole site, including the header, body, sidebar and footer. They all share the same background and there’s no visible separation. I would like to know how to separate all the elements from each other (header, body, sidebar and footer) so that each one can have its own “box” and you can see the site’s background in between each “box”.

I know that this might be somewhat confusing and I’m not sure I’m explaining myself correctly.

I’m an AudioJungle author and I can offer to write an original piece of music for any of your projects in exchange for your help.

Let me know if you can help,

Thanks in advance

Hi, here is CSS to accomplete your need (copy/paste it to below original CSS, NOT replace):

.content-wrapper {
    background:none;
    box-shadow:none;
}

.header {
    background:#fff; /* set verything you want */
    width: 900px;
    /* = 960 - (padding-left + padding-right). In this case I set padding 30px. so 900 = 960 - (30 + 30) */
    padding: 0 30px 30px 30px;
}
.section-title {
    background:#fff;
    border-bottom:none;
    margin:30px 0;
    padding: 30px;
}
#inner-content {
    background:#fff;
    padding:30px;
    width: 640px; /* same calculation with .header's width above */
}
.blog1 .post-content {
    width: 540px; /* same calculation with .header's width above */
}

#sidebar {
    background: #fff;
    padding:30px;
    width: 170px;
}

#footer {
    margin-top: 0;
    padding: 30px 30px 0 30px;
}

#footer-content {
    background-color: #444444;
    margin: 0 0 0 -30px;
    padding: 0 30px 30px;
    width: 900px; /* same calculation with .header's width above */
}
by
by
by
by
by
by