MonophobiaStudio
MonophobiaStudio Recent Posts Threads Started
59 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Made it to the Authors' Hall of Fame
  • Has been part of the Envato Community for over 2 years
+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

3953 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
59 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Made it to the Authors' Hall of Fame
  • Has been part of the Envato Community for over 2 years
+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

206 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
59 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Made it to the Authors' Hall of Fame
  • Has been part of the Envato Community for over 2 years
+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
59 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Made it to the Authors' Hall of Fame
  • Has been part of the Envato Community for over 2 years
+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

206 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
59 posts
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Made it to the Authors' Hall of Fame
  • Has been part of the Envato Community for over 2 years
+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 */
}

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by