Forum

Thread tagged as: Question, Problem

Unable to keep style using perch template

Hello

I am trying to reproduce the style using perch on an existing page. The template I am using to create the page is:

 <div class="container-fluid">
<p class="paragraph paragraph-2"><span class="paragraph-text-2"><perch:content id="service_page_text" type="textarea" label="Service Page Text" editor="ckeditor" html="true"  />
     </p></span>
<p class="paragraph paralist"><span class="paragraph-text-2"><perch:content id="service_page_list" type="textarea" label="Service Page list of Services" editor="ckeditor" html="true"  />
                </p></span
</div>

the page content is as follows:

<div class="container-fluid">

            <p class="paragraph paragraph-2"><span class="paragraph-text-2">Green and Black Scaffolding proved a wide range of scaffolding to suit your requirements. This can be from bespoke scaffolding for an individual wishing to renovate their house, to large international building companies requiring uniquely designed scaffolding. Green and Black Scaffolding can design, plan and advise how the scaffolding erection should be done and meet the needs of our clients.<br><br>We ensure that all projects large or small are completed in accordance with the agreed time scales. Regardless of the size of the project, short or long term contract. Our scaffolding is maintained, serviced and kept up to current regulatory standards. We can offer a full site survey and consultation for scaffolding in regards, design and planning, with ongoing project management. This includes method and risk assessments.<br><br>Green and Blacks Scaffolding are specialists and provide 24/7 service making sure that your project runs to your schedule. The gallery page show projects that we have undertaken. Should you wish to discuss your project we are happy to do so on the contact details above. Below is a list of services that we can provide and links to our gallery page.</span>
            </p>

          <p class="paragraph paralist"><span class="paragraph-text-2">Abseil Towers<br>Advertising Structures<br>Birdcage Scaffolding<br>Cantilevered Scaffolds<br>Chimney Scaffolds<br>Demolition Screens<br>Edge Protection<br>Hung Scaffolding<br>Independent Access Scaffolding<br>Long and Short Term Scaffolding Contracts<br>Pedestrian access walkways<br>Perimeter Scaffolding<br>Rubbish Chutes<br>Scaffolding Gantries<br>Scaffolding to Listed Structures<br>Structural Scaffolding<br>Shoring Scaffolding<br>Support Scaffolding<br>System Scaffolds<br>Temporary Fencing for Security<br>Temporary Roof Systems<br>Tempory Weather Protection<br>Trussed Out Scaffolds</span>
          </p>
          </div>

The styling is not being carried through in the browser. See the webpage: https://www.greenandblackscaffolding.co.uk/servicescms.html

Any help would be greatly appreciated.

Thanks in advance,

Paul
Paul Quillin-Creamer

Paul Quillin-Creamer 0 points

  • 4 years ago
Duncan Revell

Duncan Revell 78 points
Registered Developer

4 years ago

Which one hasn't worked? Top chunk of text or repeated bottom chunk?

The top chunk has got <p> tags inside <p> tags that haven't been closed (I don't think).

You've got a malformed closing span after Trussed Out Scaffolds

</span
Paul Quillin-Creamer

Paul Quillin-Creamer 0 points

4 years ago

Hello Duncan

Thank you for getting back.the top section has not worked. I would like perch to reproduce what is at the bottom of the page. Blue text with indenteted list. I have amended the code but perch puts <p> tages around the text which appears to change the text to black with no format.

Best regards,

Paul
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

If you use a textarea, it will output paragraph tags. So if you wrap a textarea in paragraph tags, you'll get invalid HTML and unpredictable results.
Paul Quillin-Creamer

Paul Quillin-Creamer 0 points

4 years ago

Hi

I then have two questions. If I use a text input box can I make the physical box that appears in the adim area larger so that my client can see all the text that is on the page? the second issue is if I use a text input box instaed of text area will perch put the <p> tags in the source code?

Best regards,

Paul
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

You should use a textarea field, but don't add the extra paragraph tags around it in your template.
Paul Quillin-Creamer

Paul Quillin-Creamer 0 points

4 years ago

Hi Drew

How do I style the text that is output by perch so the it is blue and keeping the paragraph which is mobile responsive?

Paul
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

What HTML are you trying to output? Start with the HTML and CSS and work back.
Duncan Revell

Duncan Revell 78 points
Registered Developer

4 years ago

Looking at your page, you could probably get away with one region that contains one textarea - just use ckeditor to highlight the paragraphs as, um, paragraphs and the list as, well, a list.

If you want to keep two regions:

<div class="container-fluid"> 
<perch:content id="service_page_text" type="textarea" label="Service Page Text" editor="ckeditor" html="true" />
<perch:content id="service_page_list" type="textarea" label="Service Page list of Services" editor="ckeditor" html="true" /> 
</div>

And your CSS could be:

.container-fluid { all your div stuff }
.container-fluid p { paragraph styles, paragraph-2 styles, paragraph-text-2 styles }
.container-fluid ul { paralist styles with some added ul specific rules }

You know the the output from service_page_text will be wrapped in <p> tags and if you create a ckeditor list then the output from service_page_list will be wrapped in <ul> tags. Style accordingly with the CSS.
Paul Quillin-Creamer

Paul Quillin-Creamer 0 points

4 years ago

Hello Duncan

Thank you for that. I did a combination of both.

Paul