MonophobiaStudio
MonophobiaStudio Recent Posts Threads Started
56 posts
  • Has been part of the Envato Community for over 2 years
  • Has referred 10+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 1+ items on Envato Market
+4 more
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

3859 posts
  • Has been part of the Envato Community for over 4 years
  • Has collected 500+ items on Envato Market
  • Nominated Community Superstar of the month
  • Sells items exclusively on Envato Market
+1 more
charlie4282 says

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

MonophobiaStudio
MonophobiaStudio Recent Posts Threads Started
56 posts
  • Has been part of the Envato Community for over 2 years
  • Has referred 10+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 1+ items on Envato Market
+4 more
MonophobiaStudio says

www.themakingitproject.com

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

407 posts
  • Has been part of the Envato Community for over 2 years
  • Has collected 1+ items on Envato Market
  • Located in Europe
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

205 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
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
  • Has been part of the Envato Community for over 2 years
  • Has referred 10+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 1+ items on Envato Market
+4 more
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
  • Has been part of the Envato Community for over 2 years
  • Has referred 10+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 1+ items on Envato Market
+4 more
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

205 posts
  • Has referred 100+ members
  • Has sold $40,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+3 more
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
  • Has been part of the Envato Community for over 2 years
  • Has referred 10+ members
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has collected 1+ items on Envato Market
+4 more
MonophobiaStudio says
19 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
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