Title: Background colour
Last modified: August 31, 2016

---

# Background colour

 *  [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/)
 * Hi Ben !
 * Hope this finds you well 🙂
 * I have a new request.
 * I will soon publish a new series of texts, different in nature and emotion.
 * I would like for them to appear in the content off the dark-grey as background
   of the theme, i.e. outside of the normal white background content box. In other
   words, this whole page would only be off this dark grey. Along with, for all 
   the texts to have the light grey font as seen in the menu bar.
 * This can probably be done for each specific page through a css code. Even better
   would be whether it is possible to set it as a preset that could be quickly clicked
   in the edit page of each page/post? Please let me know which one can be done.
 * A more general query: is there a media css code out there to limit the responsive
   width extension of the theme? Let me explain: I carefully edit each of the cover
   images to appear optimally at 1000 px large (as it appears in my MacBook 13 inch,
   1280 px), but I recently realised that a larger screen would expand all the frames
   a bit larger. Is that correct? Is there a way to “block” the responsive expansion
   to 1280 px resolution screen max – i.e. any larger screen would still just see
   the frames as 1280 px large maximum, and not beyond. (Let me know if I should
   try to explain again 🙂
 * One third and last question, and after this I really have to switch to the Pro
   version, as a small token for my biggest appreciation for your invaluable help
   and availability 🙂
 * What would be a specific page css code to have literally _no_ automatic left 
   and right margin between the edges of the content html, and the border of the
   white content frame? I am planning to place images in tables there, and I would
   like them to cover the whole width of the content zone.
 * Thanks a ton ! 🙂
 * Best,
 * Samuel

Viewing 15 replies - 1 through 15 (of 28 total)

1 [2](https://wordpress.org/support/topic/background-colour-28/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/background-colour-28/page/2/?output_format=md)

 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330804)
 * Hey Samuel,
 * We’ll need to find some kind of pattern to setup a preset style. Are these texts
   going to be published as Posts or Pages? Posts will be easy since we can use 
   a category for each of them, but there are some more complex solutions we could
   use to establish a pattern for the pages.
 * For the responsiveness, this is easily done with the `max-width` property:
 *     ```
       .site-header .container,
       .blog .main, .archive .main, .search .main,
       .entry {
         max-width: 1138px;
       }
       ```
   
 * Tracks already has this implemented at a slightly wider width, but this CSS will
   update it to display the same at all screens larger than a 1280px Mac book screen.
 * And you’re in luck for the margins update! Making images fill the whole content
   area has been a popular request, so I built a method for this into Tracks. There’s
   a tutorial on making images full-width you can follow here: [https://www.competethemes.com/help/make-image-full-width-tracks/](https://www.competethemes.com/help/make-image-full-width-tracks/)
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330833)
 * Hi Ben,
 * Great! Thanks for all this.
 * 1. Yes, that would be for Posts and indeed they will have their own specific 
   tag.
 * You mention categories here – but so far I have been using categories as indicators
   for language exclusively – FR or EN – and I would ideally want to continue with
   that, not adding another nature of meta-info along with these two. But is this
   functionality requiring categories specifically, and incompatible with a narrowing
   down through a specific Tag?
 * I should be able to code the font and background colours in CSS, but what would
   be the basic CSS codes for the whole request? The web inspector tells me it seems
   to be applying to the element “loop-container”. But it has quite a few sub-sections,
   and besides I am not sure how to command a CSS code only for the Posts with a
   specific Tag.
 * 2. Works perfect! I added “.comments .main” as I saw that part remained larger
   in width on big screens.
 * 3. The single image full-width css functionality looks great, and will indeed
   lead to some very pretty outcomes on the website. But I am actually thinking 
   of something else, which would require of me to place _two_ images, side by side,
   with no left or right margin or central dividing space… I tried applying “full
   width” to the table in which I am to place those two images – and it does not
   seem to be working: [http://www.samvriti.com/test-full-width-table/](http://www.samvriti.com/test-full-width-table/)
 * Thanks again!
 * Samuel
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330882)
 * Hi Ben,
 * I tried the following css for a single post specific css:
 *     ```
       .post-id-2211 .entry {
         background: none !important;
       }
       .post-id-2211 .entry-title,
       .post-id-2211 .entry-container {
         display: none !important;
       }
       ```
   
 * No effect… Are the terms incorrect?
 * Thank you!
 * Samuel
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330889)
 * Hey Ben,
 * Sorry for the multiple posting ! 🙂
 * Some developments:
 * **1. On tag-specific CSS coding.**
 * I tried a few things, and managed to command only that specific tag. I could 
   then start adding customisations through CSS:
 *     ```
       .tag-writer-in-progress .entry-title {
         display: none !important;
       }
   
       .tag-writer-in-progress .entry-container,
       .tag-writer-in-progress .entry-header,
       .tag-writer-in-progress .entry-meta,
       .tag-writer-in-progress .comments {
         background: #222222 !important;
       }
       ```
   
 * See this post for an instance of that tag: [http://www.samvriti.com/2016/04/28/urge/](http://www.samvriti.com/2016/04/28/urge/)
 * The command on “entry-title” works but there seems to be an extra zone between“
   entry-title” and “entry-container” which I cannot pick on the web inspector. 
   Its background remains white.
 * There is also one block remaining unaffected under entry-content (maybe related
   to “entry-meta-bottom float”?) and finally the “comments” section.
 * I also saw your earlier support entry regarding removing the text “Comments are
   closed”, with mention of the child theme… I installed your standard child theme,
   and then the one you designed specifically to remove this mention… And it created
   some unwanted results, even after import/export of the Customize content. I was
   confused about this, and perhaps you can clarify a bit more: is one supposed 
   to add directly, and only once the child theme customised for the non-display
   of that comment text, or first the blank child theme, to which something must
   be added manually afterwards…?
 * **3. Full width for content elements**
 * See this page for an example: [http://www.samvriti.com/test-full-width-page-builder/](http://www.samvriti.com/test-full-width-page-builder/)
 * I used page builder to see if this could offer what I need, and also to show 
   you what I have in mind.
 * As of now, the column is set to “full width stretched”, which places the second
   image perfectly, but the image in the first cell remains aligned left by default.
 * On “full width”, a margin left and right remains within the content zone, around
   the two images.
 * Would there be a way to set this functionality without Page Builder ? Perhaps
   with a CSS code removing the automatic margin added around images and tables?
 * Thanks once again!
 * Samuel
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330890)
 * Nice! That’s how exactly how you want to target posts with a specific tag.
 * You can remove the remaining white space with this CSS:
 *     ```
       .entry {
         background: #222;
       }
       ```
   
 * For removing the comments, try adding this bit of CSS instead:
 *     ```
       .comments-closed {
         display: none;
       }
       ```
   
 * I think some things may have changed in the theme since that child theme is made,
   and it can be done without a new child theme now.
 * The page builder plugin is cool, but probably overkill for this situation. Instead,
   we can adapt the code used to make a single image full-width:
 *     ```
       .entry-content .full-width {
           position: relative;
           max-width: none;
           width: 113%;
           left: -6.5%;
       }
       @media all and (min-width: 43.75em) {
   
         .entry-content .full-width {
             width: 128.6%;
             left: -14.3%;
           }
       }
       @media all and (min-width: 56.25em) {
   
         .entry-content .full-width {
             width: 150%;
             left: -25%;
           }
       }
       @media all and (min-width: 68.75em) {
   
         .entry-content .full-width {
             width: 163.6%;
             left: -31.8%;
           }
       }
       @media all and (min-width: 75em) {
   
         .entry-content .full-width {
             width: 179.9%;
             left: -39.95%;
           }
       }
       ```
   
 * With the code above, you can now add the “full-width” class to any element in
   a post. This means you can place two images side-by-side in a div element with
   the full-width class. Then the div will be full-width allowing the images to 
   share the available space.
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330891)
 * Hi Ben,
 * Sweet! Some progress.
 * I added the CSS for the hiding of the closed-comments, and it is working.
 * However, there remains one block right after the end of the html, and one right
   before its beginning, which are not applying the #222 color command. I added
 *     ```
       .entry {
         background: #222;
       }
       ```
   
 * But it does not seem to affect those two zones. (You meant for me to add the 
   Tag specification before “.entry”, right? Otherwise, all of the pages and posts
   receive the full grey background.)
 * See how the Post looks like now: [http://www.samvriti.com/2016/04/28/urge/](http://www.samvriti.com/2016/04/28/urge/)
 * —
 * I applied your new CSS to affect “full-width” on any element, and it gives a 
   strange result… See for instance:
 * [http://www.samvriti.com/test-full-width-table/](http://www.samvriti.com/test-full-width-table/)
 * Any idea what this could be…?
 * Thanks!
 * Samuel
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330893)
 * Woops, yes the tag class needs to be added. Since those classes are both on the
   same element, you can remove the space between the classes to get it working:
 *     ```
       .tag-writer-in-progress.entry {
         background: #222;
       }
       ```
   
 * For the full-width CSS, this CSS is throwing off the values:
 *     ```
       .entry-container {
         padding: 0 5% !important;
       }
       ```
   
 * Since the content area is wider, it’s making the full-width div expand much wider
   than needed. You can use this CSS instead for the full-width element to adapt
   to the new padding of the entry-container:
 *     ```
       .entry-content .full-width {
           position: relative;
           max-width: none;
           width: 111%;
           left: -5.5%;
       }
       ```
   
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330894)
 * Hi Ben,
 * And thanks! Alright for the removal of the space before “.entry”. I will remember
   this.
 * It is removing the first white block, but the second one, around the level of“
   comments” on the Post, is still there… See: [http://www.samvriti.com/2016/04/28/urge/](http://www.samvriti.com/2016/04/28/urge/)
 * As for the full-width command, I placed the last CSS you sent me, instead of 
   the first part of the long one you sent earlier (the one with all the [@media](https://wordpress.org/support/users/media/)
   commands).
 * I don’t see any change on my test page ([http://www.samvriti.com/test-full-width-table/](http://www.samvriti.com/test-full-width-table/)),
   where I have nonetheless added the class=”full-width”… But perhaps I miscoded
   something somewhere?
 * As for the CSS
 *     ```
       .entry-container {
         padding: 0 5% !important;
       }
       ```
   
 * I am not able to ‘decode’ it right now and understand its exact effect, but a
   quick removal of it directly shrinks my texts, against the precise left-right
   margins I apply on my text blcoks… I guess I had added it back then after a support
   discussion with you, to make this very format effective. Are you suggesting here
   that I remove it, and then add the new first block in that aforementioned long
   CSS, or can the two still remain together?
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330906)
 * Got it, this will remove that last block of white at the bottom:
 *     ```
       .tag-writer-in-progress .comments {
         background: #222;
       }
       ```
   
 * For the full-width, you can entirely remove this CSS I shared previously:
 *     ```
       .entry-content .full-width {
           position: relative;
           max-width: none;
           width: 113%;
           left: -6.5%;
       }
       @media all and (min-width: 43.75em) {
   
         .entry-content .full-width {
             width: 128.6%;
             left: -14.3%;
           }
       }
       @media all and (min-width: 56.25em) {
   
         .entry-content .full-width {
             width: 150%;
             left: -25%;
           }
       }
       @media all and (min-width: 68.75em) {
   
         .entry-content .full-width {
             width: 163.6%;
             left: -31.8%;
           }
       }
       @media all and (min-width: 75em) {
   
         .entry-content .full-width {
             width: 179.9%;
             left: -39.95%;
           }
       }
       ```
   
 * Due to the updated padding values for entry-container, this CSS can be used in
   place of all that code:
 *     ```
       .entry-content .full-width {
           position: relative;
           max-width: none;
           width: 111%;
           left: -5.5%;
       }
       ```
   
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330909)
 * Hi Ben,
 * Thanks! We are almost there for the full width, see:
 * [http://www.samvriti.com/test-full-width-table/](http://www.samvriti.com/test-full-width-table/)
 * I would like to keep the ability to place this class in a table, since I am planning(
   at least for now) to still use a plugin for the kind of hover effect I am trying
   to achieve in this particular page. As you can see in the url, a margin at the
   left of the first cell, and one central spacing between the two cells, are remaining.
   Is this related to the full-width CSS, or to parameters set to tables?
 * However, that white block remains on the Post, even with the “comments” code…
   I had used it before already, but somehow something resists it. Any idea what
   this could be?
 * Thanks for your patience!
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330922)
 * Geeze it’s taking me a few tries this time isn’t it 😛
 * The comment section is not within the .tag-writer-in-progress element, it’s adjacent
   to it, so we can use this nifty adjacent element selector:
 *     ```
       .tag-writer-in-progress + .comments {
         background: #222;
       }
       ```
   
 * The full-width styling is working well. It looks like the only update needed 
   is to remove the padding from the table cells:
 *     ```
       .full-width td {
         padding: 0;
       }
       ```
   
 * I used `.full-width` as the parent selector, but feel free to change this if 
   you think you may not always want tables in full-width elements to have their
   padding removed.
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330923)
 * Ben ! Yes this one was tricky. But it’s mission accomplished once again ! Working
   perfectly !
 * Thanks a ton ! Super.
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330930)
 * Hi Ben,
 * One quick last thing –
 * The padding between the tds has been removed, but the spacing between trs is 
   still there.
 * I searched online and tried these
 *     ```
       .full-width tr {
         margin:0 !important;
       }
       ```
   
 *     ```
       .full-width table {
           border-collapse: collapse !important;
       }
       ```
   
 * but they don’t seem to affect that spacing…
 * I am not sure which is the correct tag here…
 * Thanks for your help,
 * Samuel
 *  Theme Author [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * (@bensibley)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330945)
 * Great! So close now 🙂
 * I’m seeing two different sets of markup with spacing. The first “full-width” 
   div has a table in it with top and bottom margins which can be removed like this:
 *     ```
       .full-width table {
         margin: 0;
       }
       ```
   
 * I’m not seeing any padding/margin on the table rows.
 * The second “full-width” div has images in it, but no table. The margins on those
   images can be removed like this:
 *     ```
       .full-width img {
         margin: 0 !important;
       }
       ```
   
 * For reference, here’s a screenshot with Chrome developer tools open showing the
   difference in the HTML between the two full-width divs: [http://pics.competethemes.com/1o2N3G0N0T1B](http://pics.competethemes.com/1o2N3G0N0T1B)
 *  Thread Starter [samtazbu](https://wordpress.org/support/users/samtazbu/)
 * (@samtazbu)
 * [10 years ago](https://wordpress.org/support/topic/background-colour-28/#post-7330951)
 * Oh yes, sorry Ben, I moved the content to another, clean page:
 * [http://www.samvriti.com/writer-in-progress/](http://www.samvriti.com/writer-in-progress/)
 * I think on this page the situation corresponds to the first one you mention here:
   a table within a div with class=”full-width”.
 * I applied the first CSS code you shared here, but there remains a spacing between
   the two tr-s…

Viewing 15 replies - 1 through 15 (of 28 total)

1 [2](https://wordpress.org/support/topic/background-colour-28/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/background-colour-28/page/2/?output_format=md)

The topic ‘Background colour’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/tracks/1.81/screenshot.png)
 * Tracks
 * [Support Threads](https://wordpress.org/support/theme/tracks/)
 * [Active Topics](https://wordpress.org/support/theme/tracks/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/tracks/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/tracks/reviews/)

 * 28 replies
 * 2 participants
 * Last reply from: [Ben Sibley](https://wordpress.org/support/users/bensibley/)
 * Last activity: [9 years, 11 months ago](https://wordpress.org/support/topic/background-colour-28/page/2/#post-7331087)
 * Status: not resolved