Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


CSS Before Selector not working in Content Only

Explorer ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

I'm using Before Selectors in my CSS for Notes, Tips, and Warnings. This are not converted to inline styles for the Content Only output. I've tried adding a Post Build Script, but can't get it to work. Any suggestions?

Views

100

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

Does they work in a frameless or responsive output? 

 

Content Only can be set to a number of Targets in the preset. I'm wondering if they are valid in a Content Only output. Not something I can confirm either way.

 

If no one else pops in with an answer, try Support.

 

See https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp for your support contact options.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

@Peter Grainge Thanks for the quick response. Yes, the selectors work in both frameless and responsive HTML outputs.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

That rather confirms my theory about the output type not supporting that. Sorry but beyond my knowledge. As above, try Support.

________________________________________________________
See www.grainge.org for free Authoring and RoboHelp Information

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

As the name says, "Content Only" only outputs the pure content – without any layout/formatting.

:before and :after are pseudo-elements (not selectors) and part of layout/formatting information. They are generated in runtime by the rendering engine (usually a web browser) and added to an element as part of the rendering process. That is, they are neither part of the source document's HTML structure, nor the content. Therefore they are not included in "Content Only" output.

 

That said: A Post Build Script will likely not help you, as it runs "post build" – and at this point any information that might help you to identify a structural element  (e.g. through it's class) in the content and modify it is already gone.

 

Maybe an approach:

Create a JavaScript that runs through your topics, selects the elements with the corresponding class (e.g, "warning"), and inserts a "real" paragraph with the required text in it (e.g., "⚠ WARNING!").

 

Example

 

HTML5:

 

<h1>Convert CSS before to paragraphs</h1>
<section>
  <div class="warning">
    <p>Some warning text goes here.</p>
  </div>
</section>
<section>
  <button onclick="ConvertCssBeforeToP()">CSS:before → p</button>
  <button onclick="ConvertPToCSSbefore()">p → CSS:before</button>
</section>

 

 

 

CSS:

 

div.warning {
  padding: 10px;
  margin: 10px;
  background-color: #2C2C2C;
  color: #F5F5F5;
  font-weight: bold;
}

div.warning:before {
  content: '⚠ WARNING! ← generated with CSS before';
}

div.OutputWarning {
  padding: 10px;
  margin: 10px;
  background-color: #2C2C2C;
  color: #F5F5F5;
  font-weight: bold;
}

p.OutputWarning {
  color: #FA0F00;
  font-weight: bold;
}

 

 

 

Javascript&colon;

 

var $i;
var $para = document.createElement("p");
var $paratext = document.createTextNode("⚠ WARNING! ← a real paragraph");

$para.classList.add("OutputWarning");
$para.appendChild($paratext);

function ConvertCssBeforeToP() {
  var $x = document.querySelectorAll("div.warning");
  for ($i = 0; $i < $x.length; $i++) {
    $x[$i].insertBefore($para, $x[$i].firstChild);
    $x[$i].classList.add("OutputWarning");
    $x[$i].classList.remove("warning");
  }
}

function ConvertPToCSSbefore() {
  var $x = document.querySelectorAll("div.OutputWarning");
  var $y = document.querySelectorAll("p.OutputWarning");
  for ($i = 0; $i < $x.length; $i++) {
    $x[$i].classList.remove("OutputWarning");
    $x[$i].classList.add("warning");
  }
  for ($i = 0; $i < $y.length; $i++) {
    $y[$i].remove();
  }
}

 

 

 

Explanation:

There are two buttons in the HTML that call one of the two functions:

  1. Function ConvertCssBeforeToP changes the div's class from "warning" (which automatically generates "⚠ WARNING! ← generated with CSS before" in the "normal" web output) to "OutputWarning" (which does not genrate the text). Then it adds a real paragraph with the content "⚠ WARNING! ← a real paragraph".
  2. Function ConvertPToCSSbefore turns that around (so to say, an Undo function) and changes the div's class back to "warning" and removes the formerly generated warning paragraph again.

 

That is, initially your source document looks like this:

 

<h1>Convert CSS before to paragraphs</h1>
<section>
  <div class="warning">
    <p>Some warning text goes here.</p>
  </div>
</section>

 

 

Function ConvertCssBeforeToP changes it to this:

 

<h1>Convert CSS before to paragraphs</h1>
<section>
  <div class="OutputWarning">
    <p class="OutputWarning">⚠ WARNING! ← a real paragraph</p>
    <p>Some warning text goes here.</p>
  </div>
</section>

 

 

I have create a small code pen where you can test it live and play with it:

https://codepen.io/stefan-gentz/pen/PoGMKov

 

Feel free to use and change the code as you like.

 

Hope that helps.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jan 26, 2021 Jan 26, 2021

Copy link to clipboard

Copied

LATEST

@Stefan-Gentz Thanks, I'll give it a try. I guess I took the "Convert all styles into inline styles" setting on the preset a little too literal. I have a VBS post-build, but don't know enough JS to make it work.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation