ASP.NET Core 2.1 struggling to implement Shared Layout view across all views

I am facing an issue where the layout view is not consistent across all pages on my website. While the home page and main pages share the same layout, other pages like the login page lack styling and images. Additionally, features like CRUD operations also remove styling from certain pages. I am looking for a solution to link everything together seamlessly.

Here is the actual view of the login page and Home Page Login.cshtml 
@page
@model LoginModel

@{
    ViewData["Title"] = "Log in";
}
<!-- Login page content goes here -->

Layout.cshtml

<!DOCTYPE html>
<html lang="en">

<head>
   <!-- Head section details go here -->

    <title>Clean Blog</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Theme CSS -->
    <link href="css/clean-blog.min.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

</head>

<body>
  <!-- Body content including navigation and header -->
cssasp.netasp.net-corebootstrap-4

Answer №1

If you're having trouble with your Layout.cshtml file because the paths to the CSS files are relative, don't worry - there's a simple fix! Simply change them to absolute by adding a leading "/" to the CSS paths and everything should work smoothly.

The issue arises because the main page is located at "/", so the CSS directory is "/css". However, other pages may be located at different URLs like "/Account/Login", resulting in incorrect paths such as "/Account/Login/css".

Assuming that the folders "/css" and "/vendor" are correct, make sure to update the links accordingly:

<!-- Bootstrap Core CSS -->
<link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Theme CSS -->
<link href="/css/clean-blog.min.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

The same applies to the JS scripts at the end:

<!-- Bootstrap Core JavaScript -->
<script src="/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- Contact Form JavaScript -->
<script src="/js/jqBootstrapValidation.js"></script>
<script src="/js/contact_me.js"></script>

<!-- Theme JavaScript -->
<script src="/js/clean-blog.min.js"></script>

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

Guide to setting a white background color specifically for a lightbox in Angular

I want to change the background-color to white for my gallery items. Currently, I am using the following code to open the full-screen view: this.lightbox.open(0, 'lightbox1', { panelClass: 'fullscreen'}) Can someone please guide me on ...

cssangulartypescript

Problem with Silverstripe: Replicating Site configuration or settings menu

I have duplicated the Settings menu (siteConfig) folder in order to create a new CMS menu for inputting company information. The functionality of the menu is working correctly, however, the CSS styling is not loading properly. Image: https://i.stack.imgur ...

csssilverstripe

Angular Material Rotate Ink Bar to Vertical Orientation

After wanting to change the orientation of Angular Material's Tab Component to vertical, I visited this page (Tabs) and experimented with the CSS. By making the necessary adjustments, I successfully displayed the tabs vertically using the following CS ...

cssangularangular-materialmaterial-design

Guide to developing a versatile function that can handle various types of parameters

Here is the code snippet to consider: var list = new SomeServiceType { Url = "htp://www.test.com/", Credentials = new NetworkCredential(UserName, Password) }; This code has been duplicated multiple times, around 10 instances. To streamline it, I ...

c#asp.netc#-4.0servicenow

Styling the <nav> element with CSS

Why is the CSS property not applying to the <nav> element? Are we unable to style these specific Bootstrap tags on our own? If it is possible, how can we achieve this? nav{ display: none; } <link rel="stylesheet" href="https://stackpath.boot ...

htmlcssbootstrap-4

If event validation is active, an exception will be triggered for an invalid postback or callback argument

On the same aspx page, I have a gridview column that works with a command field: <asp:CommandField ShowSelectButton="True" itemstyle-cssclass ="SesnGV_SelectButton" ButtonType="Button"> However, when I use the designer to conver ...

asp.net

What causes my words to link together, and what is the term for this phenomenon?

Is there a specific term for the way my font is changing automatically? How can I emulate this effect on other text? And how do I remove it if needed? https://i.sstatic.net/yIe2f.png ...

htmlcss

Two divs positioned to the right on top of each other

I want to align two divs on the right side of their parent div, one above the other. Here's a visual representation: div#top |-------------------------------------||------------| |div#parent ||div#menu | | ...

csshtmlpositioning

Robotic Arm in Motion

GOAL: The aim of the code below is to create a robotic arm that consists of three layers (upper, lower, and middle), all connected to the base. There are four sliders provided to independently move each part except for the base which moves the entire arm. ...

javascripthtmlcsshtml5-canvaswebgl

What is the process for incorporating external files or user controls dynamically?

I am currently working on developing a C# .NET website that involves incorporating files based on the input from a database. In PHP, achieving this is quite straightforward, as shown in the following example: <?php include('inc/'.$filename); ...

c#asp.netuser-controls

What are some techniques for ensuring a CSS div remains stable and intact when adjusting the browser size?

Is there a way to prevent the entire website from resizing when you minimize or maximize your browser? I want the website size to adjust in proportion to your resize without reorganizing everything. How can this be achieved while maintaining the site lengt ...

javascriptcss

What is the best way to have three divs displayed in a row - either all inline or all block, without having two displayed inline and one displayed

I am facing an issue with a set of three inline divs that need to be displayed either in a row or in a column if they do not fit within their container width. In cases where the container is too narrow for them to fit in one row, but not narrow enough to c ...

htmlcss

The vertical baseline alignment is not functioning as expected

In my setup, I have a straightforward configuration: <button> Lorem </button> <input type="text" value="Ipsum"> both positioned side by side with the help of display: inline-block: button, input{ height: 34px; line-height: ...

htmlcss

Maintaining the active style of Asp.NET 4.0 Menu control even after the mouse is released

Utilizing a standard asp.net menu in an asp.net 4.0 web application, this setup is for a standard web application and not any version of MVC applications currently available. The issue at hand is relatively straightforward. CSS styles are applied to the d ...

asp.netcssmenupseudo-class

Using TypeScript and HTML to toggle a switch and retrieve its value

I am currently trying to utilize a toggle switch to determine which methods need to be activated. My expectation is that I can obtain a Boolean value indicating whether the switch is turned on or off. However, I am unsure of how to retrieve this informatio ...

htmlcssangulartypescripttoggleswitch

Issue encountered on production environment: "Accessing a closed stream is not possible in OpenXml"

My production environment consists of Server 2008 R2 with the application pool running as a network service. I am encountering an issue in production on a specific line, and I'm struggling to comprehend why it is failing. Here is the log with stack t ...

c#asp.netopenxml

What is the best method for eliminating the border of an Angular mat-form-field when it is in a disabled state?

I've been attempting to eliminate borders from a mat-form-field when the field is disabled, but despite trying various solutions found online, I haven't been successful in removing the borders from the div. Below is the code snippet: <div ...

cssangularmat-form-field

Tips for manipulating HTML using JavaScript and detecting the updates in ASP.NET after a postback

This is a unique challenge, and despite my efforts to find a solution in various sources, I couldn't overcome this specific scenario. I want the user to input multiple values into a single text field, like this: <div style="margin-left: 5px; disp ...

c#javascriptasp.net

Is there a way for me to determine which specific button initiated the postback?

How can I determine which asp:button triggered the postback in asp.net (c#)? I am working with dynamic controls and need to perform different actions on pageload based on the button clicked. I have tried examining __EVENTARGUMENTS without success. My des ...

c#asp.netvisual-studio-2012webforms

ASP.NET selection box

Instead of using a query to populate a dropdown list based on a look-up table, is there a way to use all the records from the look-up table as the data source and directly navigate to the specific record that would have been retrieved by the query? Thank ...

asp.netvisual-studio-2010