Insert Text Into Paragraph Stack Using CSS

I’ve added some text into a paragraph stack using CSS into this project. I created a class for the content that needs inserting, but after each div, a break is added.

Any ideas how to remove the break? I’m hoping we could have a quick and easy way to adjust our Terms of Use and Privacy Policy pages. Reading through all that text, looking for the content that needs changing is tiresome and prone to mistakes. I’d love to see if anyone else has another solution for this.

Why did you do that…to what end?

We’re doing this so we don’t have to read through all the text to make the changes on the page. Over the years, I have missed some changes. Seeing it in the side panel is a quick and easy way to make sure all the changes take place.

We were talking about a better way of handling this on our sites and this is what I came up with.

So the css updates the info?
Where does the data come from?

I have this working pretty good with CSS, but @Flash you have me thinking about Global Import. I’m wondering if there is a way to put a @joeworkman Foundation paragraph stack onto a page, name the global content, then have that text imported into another paragraph stack on a different page? When I used Joe’s Global Import stack years ago, it was to add the entire stack (similar to Partials) and not add content within another stack. I’m wondering if this is possible with RapidWeaver.

For instance, on our Privacy page, we have a paragraph stack with the following text. Our global text needs to import correctly without breaking the paragraph and putting content onto multiple lines. When we used the div tag, “and use our services” would drop to another line. Changing to a span tag fixed that.

When you visit our website ______________, and use our services, you trust us with your personal information.

I used the following code in my project:
When you visit our website <span class="site"></span>, and use our services, you trust us with your personal information.

1 Like

Yes @joemart1951 , the CSS updates the information. We add the CSS into the side panel of the page and it’s pulled into the paragraph stack.

but where does the actual text come from?

Using the css content rule.

.span.some-container :before {
    content: 'Text inserted after via CSS';
}

.span.some-container :after {
    content: 'Text inserted after via CSS';
}

.span.some-container  {
    content: 'Text inserted after via CSS';
}
1 Like

Pretty much a full write up on the topic. https://css-tricks.com/css-content/

3 Likes

I don’t know if search engines will index content inserted with the CSS content property. If the text you’re adding is not important for SEO purposes, then it’s not a problem. If the text is important for SEO, then you may want to see if you can find out if it gets indexed or not.

Just text for the privacy policies and terms of use pages. Not a total loss if they don’t get any seo juice.

Those two pages are required by Google for good rankings. It is one of the key factors that a non-spammy website often does not take the time build.

I understand your reasoning for doing it this way. Perhaps looking at partials or some other global update method that uses real HTML/PHP would be better and help your sites rank higher.

That said, it is not likely massively hurting you. UNLESS it gets misinterpreted as injection spam. If that happens this will really negatively impact your rankings.

It is best practice to add to the thread so people can see your modified question. Also you might consider starting another discussion as this one was about CSS. Now you are asking about a stack.