Background colour

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/

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: https://www.samvriti.com/test-full-width-table/

Thanks again!

Samuel

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

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: https://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: https://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

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.

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: https://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:

https://www.samvriti.com/test-full-width-table/

Any idea what this could be…?

Thanks!

Samuel

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%;
}

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: https://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 commands).

I don’t see any change on my test page (https://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?

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%;
}

Hi Ben,

Thanks! We are almost there for the full width, see:

https://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!

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.

Ben ! Yes this one was tricky. But it’s mission accomplished once again ! Working perfectly !

Thanks a ton ! Super.

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

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: https://pics.competethemes.com/1o2N3G0N0T1B

Oh yes, sorry Ben, I moved the content to another, clean page:

https://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…