jonathanbrickman0000's picture

Posted by jonathanbrickman0000 on Mon, Dec 09, 2019 - 4:48am --- Updated: Dec 10 '19 - 3:57pm

I'm using Afterlight Tribute with a background image (test site: https://ef.ponderworthy.com ) which is perfect for the home page.  But the rest of the site will be Pages, which need to have large multiline text and image articles, black text on on white background in a large box, instead of the central white large text and subtitle.  How can this best be done?  I have spent a good bit of time flipping through everything and testing, and it looks like I have to edit CSS somewhere, but where?  Is there a simple way to assign CSS to a custom field type?

Comments

Mon, Dec 09, 2019 - 5:24am by BWPanda (not verified)

Hi Jonathan,

It sounds like you just want to add some CSS to override the styling of all-but-the-front pages. According to the Afterlight documentation, you can add custom CSS to css/your-custom.css:

novices can edit just the css/your-custom.css file to alter the appearence of your website.

In order to affect all-but-the-front pages, use something like this:

body:not(.front) {
  background: white;
}

There'll likely be more you need to do, but hopefully that gets you started.

Mon, Dec 09, 2019 - 5:38am by jonathanbrickman0000

Tried it in a few ways.  When applied precisely as recommended, you can see the white background flash, then the image comes up.  I also tried it this way:

body:not(.front) {            
 background: white;
 background-image: none;
}

but no change occurred, the background image was superimposed.

I really don't want to get rid of the background image at the page (body tag) level though, I'd like to set this at the level of a multiline+image text field.  I'll be happy to read lots of docs and try things, but I have not found the docs needed.

Mon, Dec 09, 2019 - 6:03am by BWPanda (not verified)

I really don't want to get rid of the background image at the page (body tag) level though, I'd like to set this at the level of a multiline+image text field.

In that case, try this:

body:not(.front) .field-name-body {
  background: rgba(255,255,255,0.5);
  color: black;
}

That produces the following for me:

Olafski's picture

Mon, Dec 09, 2019 - 6:25am by Olafski

Tried it in a few ways.  When applied precisely as recommended, you can see the white background flash, then the image comes up.

I guess, instead of body:not(.front) you need html body:not(.front). The theme's CSS according to my browser's inspector is:

html body {
  background: url(https://ef.ponderworthy.com/files/Twelve-In-Place-Engine-Compartment-Refined.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  left: 0px;
}

Tue, Dec 10, 2019 - 4:05am by jonathanbrickman0000

Got it and working so far, with the "html body" approach.  Thanks!

Tue, Dec 10, 2019 - 4:04pm by jonathanbrickman0000

Thank you very much, Olafski, and BWP.  One more item, if I may presume further; I'd like to change the default CSS applied to the <P> elements which CKEditor is creating.  The current view is here:

http://ef.ponderworthy.com/short-version

The overall generated code of the area is

<div class="content clearfix">
<div class="field field-name-body field-type-text-with-summary field-label-hidden">
<div class="field-items">
<div class="field-item even">
<p>A thought came: What might happen if we negatively ionized some of the air going into an auto or truck engine? </p>
<p><img alt="" data-file-id="2" height="98" src="/files/inline-images/Twelve-In-Place-Engine-Compartment-Refined.jpg" width="129" class="align-right" />About a year ago I started doing it, on my 1998 Chevy Tahoe.  The results are very interesting.  I have quite a bit more power at the pedal, and some improved gas mileage too.  Right now my rig uses twelve 12VDC devices intended to be built into home or auto air ionizers, a friend has two.  The most surprising aspect so far: <b>the engines are running cooler!</b> We are seeking solid theory as to how and why. Also shockingly enough, shutting the widgets off does not immediately terminate the results!</p>
<p>Some might wonder how this is possible. Well, there is inspiration; and then my sweet wife Lori made a deal with me a long time ago, in not very different circumstance, "Just don't blow up the car." Many things can result!</p>
</div></div></div></div>

So we now have the the "field-name-body" nicely under control, but I'd like to change the margins for all of those <P>'s, to make it all very neat.  How best?