route template with a "/" in it breaks page css

[vtan31]

I just started getting into it, but I'm a fan of the raytha cms platform.

Seems like any content type that has the route template set with a forward slash "/" in it will break the css styling. For now, i'm just making sure my routes do not have a forward slash in them,

EX: https://mccandless-swim.club/Mission-Mahi-5/7-430pm

my assets are uploaded to wwwroot folder and pointed to something similar like /quadra/assets/css/theme.css my guess is that the forward slash is throwing off the relative location of where the assets are.

if i update it and replace the the "/" to an underscore "_", it works.
https://mccandless-swim.club/Mission-Mahi-5_7-430pm

[apexdodge]

@vtan31

Nice website. I'm able to have / in my route template for content types on sites I've built without css issue. I'm curious how you are including the css files to your template. Can you share some code please?

Thanks

[vtan31]

i guess the image background for the header could be used as an example.

i modified the original layout template to include a template from themeforest.

<!-- CSS Files -->
<link rel="stylesheet" href="quadra/assets/css/plugins.css?v=3.0"/>
<!-- Main Styles -->
<link rel="stylesheet" href="quadra/assets/css/theme.css?v=3"/>
    <!-- Blog Styles -->
<link rel="stylesheet" href="quadra/assets/css/components/quadra/blog.css?v=1.0"/>
<!-- Color Skins -->
<link id="changeable_color" rel="stylesheet" href="quadra/assets/css/skins/skin-venus.css" />
<!-- Index Styles -->
<link rel="stylesheet" href="quadra/assets/content/index/css/index.css?v3.0" />        

Here's the code for the bg image.

   <!-- Home section -->
    <section id="home" class="relative white height-40vh height-30vh-sm mnh-450 align-items-center d-flex" data-bg="url({{ PathBase }}/quadra/assets/images/backgrounds/mcs_pool.jpg)">            
        <!-- Container for titles -->
        <div class="container-md">
            <!-- Start titles -->
            <div class="t-center mt-40">
                <!-- Title -->
                <h5 class="fs-24 ls-6 bold white uppercase">
                    <span class="title-highlight-dark">
                        <span>
                        {% if Target.PublishedContent.title.Text %} {{ Target.PublishedContent.title.Text }} {% else %} McCandless Swim Club {% endif %}
                        </span>
                    </span>
                </h5>                    
            </div>
            <!-- End titles -->
        </div>
        <!-- End Container for titles -->
    </section>
    <!-- End #home section -->

        {% renderbody %}

<section>
    <div class="container t-center">
        <img src="quadra/assets/images/logos/msc_est.jpg" />
    </div>
</section>

The home page is just a blog that is using posts... i duplicated the Content item list view template and created a new template.

`

{% if Target.Items.size == 0 %}

There are no results, please reset to see all results.

{% else %} {% for item in Target.Items %} {% assign thumbnail = "quadra/assets/images/blog/swim.jpg" %} {% if item.PublishedContent.thumbnail_url.HasValue %} {% assign thumbnail = item.PublishedContent.thumbnail_url %} {% elsif item.PublishedContent.thumbnail.HasValue %} {% assign thumbnail = '_static-files/' | append: item.PublishedContent.thumbnail %} {% endif %} {% assign tagsString = item.PublishedContent.category %} {% assign tagsArray = tagsString | split: "," %}

{{ item.CreationTime | organization_time: "%b %e %Y" }}

{{ item.PrimaryField }}

{{ item.PublishedContent.content | strip_html | truncate: 280, "..." }}

{% for tag in tagsArray %} {% assign trimmedTag = tag | strip %} {% assign tagClass = "" %} {% if trimmedTag == "events" %} {% assign tagClass = "bg-pink" %} {% elsif trimmedTag == "food_trucks" %} {% assign tagClass = "bg-violet" %} {% elsif trimmedTag == "membership" %} {% assign tagClass = "bg-purple" %} {% elsif trimmedTag == "news" %} {% assign tagClass = "bg-green" %} {% elsif trimmedTag == "swim_team" %} {% assign tagClass = "bg-orange" %} {% elsif trimmedTag == "marlins_schedule" %} {% assign tagClass = "bg-gold" %} {% else %} {% assign tagClass = "bg-primary" %} {% endif %} {{ trimmedTag }} {% endfor %}

Read More

{% endfor %} {% endif %}

McCandless Swimming Club
8300 Thompson Run Rd
Pittsburgh, PA  15237

412-364-4600 (Available in the Summer)
Summer : 12 - 8:30pm Sunday - Saturday

 

Register Now

Categories

Events Food Trucks Membership News Swim Team Swim Team Schedule

{% for i in (Target.FirstVisiblePageNumber..Target.LastVisiblePageNumber) %}
• {{ i }}
{% endfor %} {% if Target.LastVisiblePageNumber < Target.TotalPages %}
• ...
{% endif %}

    <!-- END BLOG -->

    <script>
        document.getElementById('searchIcon').addEventListener('click', function() {
            const searchInput = document.getElementById('blog-search').value;                
                const currentUrl = window.location.href.split('?')[0]; // Get current URL without query string
                const newUrl = `${currentUrl}?search=${encodeURIComponent(searchInput)}`;
                window.location.href = newUrl; // Redirect to the new URL                
        });

        document.getElementById('blog-search').addEventListener('keypress', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                document.getElementById('searchIcon').click();
            }
        });
    </script>

`

so it's weird that i think maybe i need to make the urls absolute and not relative, but i'm not sure how i would do that. Is there a variable that would handle domain/localhost to get an absolute url for to replace the css stuff?

Hopefully I was able to provide enough information.

Thanks

[apexdodge]

@vtan31

Put a forward slash at the beginning of your relative URL to the resource like below.

/quadra/assets/css/plugins.css?v=3.0

Yours does not have that first forward slash. I was able to replicate it in my own demo system. I actually use {{ PathBase }} too just in case I want to change the path base in the future like so:

<link rel="shortcut icon" href="{{ PathBase }}/raytha_default_2023/assets/images/favicon.ico" type="image/x-icon" />

Let me know if that helps resolve your issue.

[vtan31]

Perfect! that worked. Thanks, I look forward to ongoing updates.