Use CSS elements selectively on specific pages within Mkdocs

Currently, I am utilizing mkdocs in conjunction with the material theme to produce documentation.

I am interested in incorporating section numbers on specific pages. To achieve this, I have implemented the following method for generating section numbers.

Is there a way to add numbering to headings, sections, and subsections in markdown language?

While this approach works effectively overall, it applies universally to all pages when I insert the designated CSS into extras.css. My dilemma lies in the fact that there are certain pages where I prefer not to include section numbering for headings.

Is there a means of specifying which pages should have particular elements from extras.css applied?

Answer №1

If you're looking to incorporate "section numbers" into your website, consider creating a new class in your CSS style sheet named extra.css. Apply this class to the pages where you want the "section numbers" to appear.

In addition, check out this resource which discusses how to customize themes in Mkdocs:

Customizing Your Theme - in Mkdocs

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

How can I prevent Bootstrap from conflicting with my custom styles?

My HTML menu was functioning perfectly with specific CSS styles, until I decided to add a Bootstrap reference in the header: New Link Added <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> Afte ...

jquery html css twitter-bootstrap

Managing and Streaming Music in a Rails Application

Currently, I am storing mp3s using paperclip and they only play back if I utilize Amazon S3. However, I am hesitant to use Amazon S3 because I am unsure how to secure the files. Now, I am reconsidering my approach as I need to secure the mp3s and provide ...

javascript ruby-on-rails-3 html mp3

Delivering JSON and HTML safely to JavaScript applications

As I brainstorm secure methods for delivering HTML and JSON to JavaScript, my current approach involves outputting JSON in this manner: ajax.php?type=article&id=15 { "name": "something", "content": "some content" } However, I am aware of the ...

php javascript html ajax security

Limit certain website functions exclusively for members

I am currently working on a website that offers a set of basic features for all users, along with some exclusive features reserved for members. For example, all visitors can read posts, but only members have the ability to add tags, share posts, and more. ...

javascript php html session cookies

To ensure that any changes made to data are reflected automatically when viewing data in Angular 2

In the process of developing an Angular 2 application, I encountered a scenario that requires special attention. The data displayed on the view is fetched from an API, with certain fields being editable by the user. These modifications can be saved using ...

html angular view

Issue arises when attempting to compile .less file with variables sourced from a separate file

I encountered an issue with my .less file where it contains definitions that rely on variables from another file. For example: body { font-family: @baseFontFamily; font-size: @baseFontSize; color: @textColor; } At first, IntelliJ displayed t ...

css variables compilation less npm

A lone slant positioned at the lower border of an object

Currently, I am working with two images stacked vertically. The dimensions of the top image are set at 100% width and 350px height, while the bottom image size is not a major concern. I am specifically interested in skewing the top image and maintaining a ...

html css

What is the reason it is only functioning one time?

This div should always toggle without utilizing the 'toggle' method. $(document).ready(function(){ function brFun() { $('div').addClass('br'); setTimeout('$(\'div\').removeClass( ...

javascript jquery html css

Chrome autocomplete behaves as if the input fields are disabled and cannot be clicked on

I am experiencing an unusual issue with autofill in Chrome. After logging in and then logging out of the app, the input fields (email, password) are auto-filled but appear to be frozen and unclickable. This problem does not occur every time; it only happe ...

javascript html angular google-chrome frontend

Changing Meteor Template to a Node.js/AngularJS Conversion

My current website is built with Meteor using templates structured like this: <body> {{>section1}} {{>section2}} {{>section3}} </body> <template name="section1"> <h1>This is Section 1</h1> </template> ...

html angularjs node.js templates meteor

Passing image source from parent component to child component in Vue.js

I encountered an issue where I stored the image file name in a variable within the parent component and passed it to the child component using props. However, despite this setup, the child element is not displaying the image as expected. Here is the data ...

javascript html vue.js

Ways to integrate an HTML document into a Python tkinter GUI window

I'm looking to integrate my HTML webpage project into a Python Tkinter window using Tkinter HTML view. However, when attempting to do so, the end result in the Python Tkinter window looks like this: what I'm getting. Contrary to that, here is wha ...

javascript python html tkinter

Guide on adding a personalized table or Div section in a datatable

I am looking to add a custom table above a datatable, specifically I want the custom table to be displayed above the header columns. Here is the code I have tried: columns: [ { "data": "WorkFlowType" }, { "data": "WorkflowInstanceId" } ...

javascript jquery html datatable

JavaScript - Fetch POST request is being terminated - Windows Error 10053

Seeking help for my JavaScript project course. The function is aborting during the fetch process. Chrome is the browser being used to test the project. It was intermittently "sending" before, but now it's not working at all. Had to run the app in Chro ...

javascript python html django fetch

Using jQuery, you can activate an onclick function based on specific keywords entered by the user

Within this element, there is a text input field that allows users to search for specific items. Next to the input field is an icon image that can be clicked on to trigger a jQuery onclick event. This event sends an AJAX request to a PHP file, retrieves da ...

javascript jquery html

Encountering issues with CSS Modules in Next.JS app while using app/about/layout.tsx

Currently, I am delving into the world of Next.js and encountering some challenges with locally scoped CSS modules. In my project, I have an about directory which contains a layout component. Strangely, the styles applied to the layout component are not b ...

javascript html css web next.js

A layout featuring two columns: the right column has a fixed width, while the left column is fluid

I am in need of a simple solution: 2 columns with the right column having a fixed size. Despite searching on stackoverflow and Google, I have not been able to find a working answer that fits my specific context. The current approach is as follows: div.con ...

css html

CSSer Q&A