Incorporating a CSS stylesheet into the theme settings of the Stratus 2 Beta platform

I have been attempting to personalize my Stratus 2 Beta by implementing a custom theme. I created a separate CSS file named "stratus.css" and stored it in the CSS directory of my website - with the CSS code being identical to this example.

Below is my JavaScript code:

jQuery('body').stratus({ 
    links: 'http://soundcloud.com/foofighters/sets/wasting-light',
    theme: 'css/stratus.css'
}); 

While everything else is functioning correctly, the theme itself does not seem to be applying, instead inheriting the CSS properties from my website.

I attempted to add

<link href = "css/stratus.css" rel = "stylesheet">

to my HTML document, along with the necessary scripts

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://stratus.sc/stratus.js"></script>

However, none of these solutions seem to work.

If anyone has any suggestions on how to resolve this issue, please let me know!

Answer №1

Make sure to include the complete HTTP path for your CSS file if possible.

jQuery('body').stratus({ 
    links: 'http://soundcloud.com/foofighters/sets/wasting-light',
    theme: 'http://www.yourdomain.com/css/stratus.css'
    /* theme: http://www.stratus.sc/themes/dark.css */
}); 

The stratus script is set to use http://www.stratus.sc as its root url and will look for

http://www.stratus.sc/css/stratus.css
in your scenario unless you specify it as shown above.

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

HTML5 - Ajax - puzzling behavior that I am unable to comprehend

Need Help Clarifying My Issue: I currently have a Div with Page 1 content. Page 1 contains a button that transitions the div content to Page 2. Page 2 has a button that switches the div content back to Page 1. The Problem: If Page 1 is loaded first, t ...

Guide on aligning text beneath and to the side of an image, and positioning them in the same row using CSS Bootstrap 4

I am looking to organize two different texts alongside and under an image within a single article. I also want these two articles to be displayed in the same row when the window size is col-md or larger. https://i.sstatic.net/ZjigH.jpg The second article ...

What is the process for adjusting the color of a particular date in the <input type=Date> field?

Is there a way to modify the styling, such as color, of the input type date in HTML 5? In HTML 5, we can display a calendar using <input type=date>. For example, if March 23rd is a holiday and I want to highlight this specific date in red, how can I ...

Updating HTML content using jQuery by iterating through an array

When I write the following HTML code: <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <h1 id="message"> </h1> and include the corresponding JavaScript code: messages = ["Here", "are", ...

PHP working in certain directories, but not all

I currently have a few basic html websites that feature a contact form which successfully sends emails using PHP. Recently, I decided to create another website utilizing the same contact form PHP script. However, upon submitting the form on this new websit ...

Ensure that each number is entered only once in the input field

Is there a way to use javascript/jquery to prevent a user from entering the same number twice in an input box? Users can enter multiple numbers one at a time, but I need to notify them or take action if they try to input the same number again. I attempted ...

Switch out the name of multiple elements with mootools

Is there a Moo tool that can replace multiple element IDs? I currently have the following code: $$('myelement').each(function(el){ var get_all_labels = el.getElements('label'); var get_label_id = get_all_l ...

Positioning multiple images in CSS

I am facing an issue with my background images where one of them is invisible and cannot be displayed. Additionally, the padding-top for the li a element seems to not be working properly. HTML: <ul class="menu"> <li class="item-101 current a ...

How can Bootstrap be utilized for Image Overlay?

I'm currently using bootstrap and have a 3x3 grid of 200x200 images. I've searched everywhere for a solution to add an overlay, but haven't had any luck so far. I'm still new to coding and trying to figure things out. I saw on Serenbe. ...

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

The <img> tag is displaying with dimensions of 0 x 0 pixels even though its size was specified

Is there a way to control the image size within an <img> tag placed inside an html5 video element? Currently, it keeps defaulting back to 0 x 0 pixels. The reason behind using this img is to serve as a fallback for outdated browsers where the video ...

Debounce function fails to properly function when the state is modified within the same function

I've been working on implementing a search-as-you-type feature and I want to debounce the function search that handles API calls. Everything works well when I only call the debounced_search function within the event handler, but I also need to update ...

Revamping the Jquery Waypoint

Greetings, I am currently delving into the world of Jquery waypoints and facing a bit of challenge getting it to work. My goal is to have an "alert" pop up once an element becomes visible on the screen, but for some reason, the alert doesn't show up w ...

The arrows are hidden when using the input type number

On my page, I noticed that the input of type=number is missing its arrows and appears like a regular text input. After doing some investigating, I think it might be due to this: https://i.stack.imgur.com/G1BrV.png My browser of choice is Google Chrome. D ...

How come the mouseover effect on the div remains even after the mouse has been removed?

How can I keep the original CSS class when the mouse moves away? function highlight( x, y) { var sel=document.getElementById(y); sel.style.borderBottom= "2px solid "+x; sel.style.opacity="1"; sel.style.transition="all eas ...

I am attempting to incorporate a List View within a Scroll View, but they are simply not cooperating. My goal is to display a collection of items with additional text placed at the bottom

This is how it should appear: item item item item additional text here I am trying to create a layout where the list is in List View for benefits like virtual scrolling, but the entire layout needs to be within a Scroll View. I want to be able to con ...

`NodeJS and ExpressJS: A guide on accessing a remote phpMyAdmin server`

I am in the process of setting up a GraphQL server and facing an issue with connecting to a remote phpMyAdmin server provided by a friend. The error message I am encountering is: Error: getaddrinfo ENOTFOUND 54.193.13.37/phpmyadmin 54.193.13.37/phpmyadmi ...

Input ENTER triggered JSON path loading

Upon clicking "enter", I am looking to display the description corresponding to the title. To achieve this, I have defined a variable to store the path of the description: var descri = json.query.results.channel.item.map(function (item) { return item. ...

Utilizing JS setTimeout to iterate through AJAX requests in a loop, however the excessive frequency of setTimeout calls becomes an issue

I recently encountered an issue that was affecting my code functionality. After some investigation, I discovered that the function myEventMoveTrainManaul() was being called from multiple locations within the code, causing unexpected behavior. I want to exp ...

Expanding properties in a React component based on certain conditions using TypeScript

I am attempting to dynamically expand my component props based on whether a specific prop is included. The goal is to add attributes from an anchor if the href prop is provided, and include attributes from a button if it is not. Is this achievable? Chec ...