Why is it not showing the styling for the CSS

  • Hello totally new to this and building in my first bits of Perch. I am trying to get the blog element working I have managed to get the individual pages styled and they seem to be working well. the only thing I cant do is get the preview bits to work on the actual blog page. Is there something simple I am missing. not sure if I'm allowed to put links here but this is the template I am working from to style the output on the page and it is not pulling the css onto this. can anyone help as it been 2 days and I'm getting even more confused 8o


    <perch:before>

    <div class="news-elements"></perch:before>

    <div class="news-sections">

    <perch:if exists="image"><img src="<perch:blog id="image" type="image" width="380" height="150" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if>


    <div class="news-section-content">

    <h5><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h5>



    <div class="description entry-summary">

    <perch:blog id="excerpt" type="textarea" textile="true" />


    </div>

    <a href="<perch:blog id="postURL" />" rel="bookmark" class="button-hero"><span>Read more</span></a>

    <!--<a href="main_news/ELLIOT KINCH"><button class="button-hero"><span>Read more</span></button></a> -->

    </div>

    </div>



    how it currently looks on my testing page

    http://thinkserver.co.uk/blog/


    how i want it to look..

    https://www.sentinel-subsea.com/news


    thanks in advance for any advice..

    Cheers

    Ian

  • George G

    Approved the thread.
  • Hi Ian,


    I can see that you have slightly different markup for the two, eg:


    ThinkServer:

    <a href="<perch:blog id="postURL" />" rel="bookmark" class="button-hero"><span>Read more</span></a>


    Sentinel however, is a button wrapped in an anchor tag:

    <a href="main_news/Making_the_transition"><button class="button-hero"><span>Read more</span></button></a>


    and


    ThinkServer:

    <h5><a href="<perch:blog id="postURL" />" rel="bookmark" class="entry-title"><perch:blog id="postTitle" /></a></h5>


    Sentinel is a strong tag wrapped in H5:

    <h5><strong>Field Trial Success</strong></h5>



    Perhaps the CSS is targeting these differences.

  • thanks, Clive Walker and SimonClay that working if I used the base code from the original HTML. I suppose the next part is how I add the Perch fields within this code to feed it from each page. Sorry if this is a daft question but I am totally new to this and I seem to be going round in a circle in this blog element. any pointers on this would be apreciated.


    <perch:before>

    <div class="news-elements"></perch:before>

    <div class="news-sections">

    <perch:if exists="image"><img src="<perch:blog id="image" type="image" width="380" height="150" crop="true" />" alt="<perch:blog id="postTitle" />" /></perch:if>


    <div class="news-section-content">


    <h5><strong>Under the Surface with...</strong></h5>


    <p>It’s safe to say that Elliot Kinch didn’t hang around when it came to forging a career in the oil and gas industry...</p>


    <a href="main_news/ELLIOT KINCH"><button class="button-hero"><span>Read more</span></button></a>

    </div>

    </div>

  • You need to create a post listing template and use that on your page. This is in addition to the blog post template. Perch Blog has these already but your versions will of course be different and reflect the HTML that you want. Your versions should be in a different location to the templates that come with Perch Blog,


    This may help https://docs.grabaperch.com/video/v3/editing-blog-templates/


    Look at the default template that comes with Perch Blog to get an idea how the post listing template is coded.


    I would take the HTML for a single post on the listing page and use that to create my post listing template. Taking your single post HTML, you can replace sections of the HTML and content with different Perch fields. For example, an excerpt field:

    Code
    1. <perch:blog id="excerpt" type="textarea" label="Excerpt" markdown order="3" size="s">

    could be used in place of

    Code
    1. <p>It’s safe to say that Elliot Kinch didn’t hang around when it came to forging a career in the oil and gas industry...</p>

    in the post listing template.

  • thanks, Clive Walker I did follow the video on blog templates to get to where I was I am just getting confused about the perch blog HTML code I need to now use to get the output required. I will go back in and see what I can work out from what the base one has and the newly created one I am using. I really appreciate the help and hopefully, I can get it to work.