Widen the background of the content but not content itself

  • Hi folks,

    I managed to move the date outside the content on my site
    , on the left of the title.

    What I now want to achieve is that the title and content stays the same width, but the white background colour gets a little wider,
    so that the date also gets absorbed in the white.

    I’m seeking for the white background to become a little wider both left and right. The see-through between posts needs to stay so whitening the page is not an option.

    I can do this somewhere in the css but don’t really know how.

    Here’s the site
    https://www.fortherestless.com/news/

    And here’s the css I’m using
    https://www.fortherestless.com/wp-content/themes/twentyeleven/style.css

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Where is this white background? Are you referring to the white transparent background?

    You ought to be using a Child Theme to modify any theme you’ve not built from scratch, or at least a Custom CSS plugin. Otherwise any changes made will erase once you update the theme.

    Thread Starter nessler

    (@nessler)

    yes it’s the white transparent,
    in css like this

    .entry-title{
    background-color:rgba(255, 255, 255, 0.4);
    }
    .entry-content{
    background-color:rgba(255, 255, 255, 0.4);
    }

    I won’t be updating anytime soon, if I will I’ll make sure all the changes are preserved so I don’t loose the whole thing. Via a child theme, still a lot to do but I already came a long way on this one ??

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    How much wider?

    Thread Starter nessler

    (@nessler)

    well, left to absorb the date, my guess is 70px both left and right, since the “Date box” is width:60px;.
    So obviously right the same 70px to keep it tidy.

    .postdate {
  position: relative;
  font-family: Georgia, serif;
  color: #000;
  background-color:rgba(255, 255, 255, 0.4);
margin-left:-4em;
float: left;
width:60px;
}

.day, .month, .year {
  position: absolute;
  }

.day {
  font-size: 30px;
  top: 15px;
  }

.month {
  top: 0;
  left: 0;
  font-size: 18px;
  }

.year {
  top: 10px;
  right: 0;
  font-size: 20px;
  rotation: -90deg !important;
  /* ** Hacks ** */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  }
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This can’t solely be done through CSS, you will need to restructure your HTML not to use position relative/ absolute on your dates.

    Thread Starter nessler

    (@nessler)

    ok, I’m up for that.

    Any thoughts on how it might be done, I mean suggestions are welcome, how would you do this ?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Widen the background of the content but not content itself’ is closed to new replies.