.htacces Disables Styling on Page

I've been trying to understand the functionality of .htaccess RewriteRule.

Here is a URL example where I have experimented with .htaccess:

http://example.com/test/home

This used to be:

http://example.com/test/index.php?p=1

My goal is to redirect any path in the "test" subdirectory to the "test/index.php" page.

I have successfully achieved this.

Next, I want to make sure it works when moved to the root directory of the site.

I attempted the following:

RewriteRule ^(.*)/index test/index.php [NC,L]

However, this seems to strip away all the styling from my page, as seen below.

Here is the URL:

http://example.com/asdf/index

https://i.sstatic.net/Av3T8.png

Why does this occur and how can I resolve it?

Edit: CSS links


    <!-- BEGIN THEME STYLES -->
    <link href="assets/base/css/plugins.css" rel="stylesheet" type="text/css" />
    <link href="assets/base/css/components.css" id="style_components" rel="stylesheet" type="text/css" />
    <link href="assets/base/css/themes/custom_theme.css" rel="stylesheet" id="style_theme" type="text/css" />
    <link href="assets/base/css/custom.css" rel="stylesheet" type="text/css" />
    <!-- END THEME STYLES -->

Edit 2: My directory structure: https://i.sstatic.net/2engB.png

Answer №1

To implement this functionality, you can add the following lines to your .htaccess file:

RewriteCond %{REQUEST_URI} !\.(?:css|js)$ [NC]
RewriteRule ^(.*)/index gve/index.php [NC,L]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The HTML header is not displaying at the proper width as intended

Let me lay out the blueprint I had in mind for my webpage: The body will have a width and height of 600 x 800 pixels with no padding, allowing elements to snugly align without any margin. Inside the body, there will be 3 key elements - a header, main c ...

After loading ajax content onto the page, the scroll bars fail to appear

I am currently constructing a website that loads page content through ajax. Everything seems to be functioning perfectly, except for a peculiar issue I have encountered in Chrome and Safari. Surprisingly, it is working flawlessly in IE! The problem lies i ...

Link functioning properly for one item but failing for another

I am facing an issue with my index.html file that contains the following code: <li> <a href="imprint.html#imprint-link"> <div class="main-menu-title">IMPRINT</div> </a> </li> Clicking on the "IMPRINT" link loa ...

Tips for utilizing CSS container queries in conjunction with the Material-UI framework

I'm looking to implement CSS container queries with MUI. In my code, I want to change the background color to red if the parent width is less than 300px. Check out the sandbox const StyledItem = styled("div")(({ theme }) => ({ border: ...

Expansive visuals with the Masonry plugin

Looking to create a Masonry layout with images but running into the issue of large image sizes. Wanting to limit each image to 30% of the screen width while maintaining proportionate height. How do websites like Flickr and Pinterest handle this when uplo ...

Guide to setting up a horizontal button menu and dropdown submenu beneath the navigation bar using Bootstrap 4

How can I design a horizontal button menu with submenus below the navigation bar in Bootstrap 4? Take a look at the image below to see what I'm aiming for: https://i.sstatic.net/j6b8a.png https://i.sstatic.net/rmtrM.png If you have any ideas or su ...

Preview of Hoverbox Caption

I'm working on a website using the Hoverbox image gallery (http://host.sonspring.com/hoverbox/) and I'm trying to include captions for each image preview that appears when hovering over the enlarged image. However, I am facing difficulty as I hav ...

Implementing dynamic background images in Angular 4 using div placeholders

Is there a way to include a placeholder or default image while waiting for item.imgSrc to load on the screen? <div class="style" *ngFor="let item of array; <div [style.backgroundImage]="url('+ item.imgSrc +')" class="image">< ...

Enhance your inline content by adding adjacent inline blocks

My objective is to include a "Read More" link alongside a text block, which should appear next to the text without forming a new line or block. The challenge lies in the fact that the content of the text block is created using TinyMCE, resulting in various ...

Instructions on changing row color with button click and reverting back to original color upon subsequent click

When the button is pressed, I'd like to change the color. When the same button is pressed again, I want it to revert back to its original color. Currently, when the button is clicked, all rows change color. Sample Code Snippet: <table> & ...

Don't forget the last click you made

Looking for a way to style a link differently after it has been clicked and the user navigates away from the page? Check out this code snippet I've been using: $(document).ready(function(){ var url = document.URL; function contains(search, find) { ...

Improper Placement of CSS in Google Chrome

I'm facing an issue with my login form that displays perfectly fine in all browsers except Google Chrome. In Chrome, it tends to get distorted more often than not. CSS * { margin: 0; padding: 0; width: auto; } body { background: #E8 ...

AngularJS - displaying a notification when the array length is empty and customizing the visibility to conceal the default action

I've been working on an Angular project where I display a loading circle that disappears once the content is loaded. This circle is simply a CSS class that I call from my HTML only when the page first loads, like this: Actually, the circle consists o ...

"Bootstrap is functioning properly on my local environment, but it seems to

Utilizing the MVC framework and bootstrap has been successful for optimizing my website locally. However, when I upload it to the server, none of the CSS is being rendered. Additionally, the front page, meant to be a carousel slider, appears as a vertical ...

What is the best way to align a button with a title on the right side of a page?

Is it possible to align my button to the top right, at the same height as the title in my design? Here is an example: view image here This is what I have achieved so far: view image here I suspect there may be an issue with my divs. The button doesn&a ...

Issues with WordPress's multiple menu functionality not functioning as expected

I've been working on setting up multiple menus in WordPress, and I've run into a little issue. I managed to create the menus, assign them to their respective locations, and save them successfully. However, when I try to call the footer menu, it e ...

"Interact with jQuery by sliding side to side or in a circular motion

I am in need of assistance with sliding images using jQuery back and forth, or making them go round in a loop. Currently, the images slide up to the last element and then swiftly return to the first div, which is not visually appealing at all. I understa ...

Implement custom styles to enhance the appearance of users' Magento websites

Is it possible to add additional CSS only to users/customers who are logged into our webshop? If so, how should I go about it - through XML or PHTML? Stian ...

How can I adjust the height of an iframe dynamically using AngularJS?

I wrote a function that resizes the height of an iframe element to always be 100% after it loads: app.directive('iframeAutoSize', [function() { return { restrict: 'A', link: function(scope, element, attrs) { ...

Enhancing the appearance of your website by incorporating external stylesheets and utilizing multiple class names through

Is it possible to use external CSS frameworks like Bootstrap, Semantic UI, or Foundation and still generate base64 class names? This could be achieved if there was a way to apply multiple class names. Currently, you can only assign one class name like thi ...