Enhancing Application Views in ExtJS Classic 7.3.0 using .scss Style Sheets

Referencing the guidelines provided in this resource for theming:

In order to create CSS rules specific to an application view, you need to generate an .scss file within the same directory and with a matching base name as the view. For instance, if you want to style the view App.view.main.Main, you can add Main.scss to that folder:

As per this guidance, I have two files in the same folder: Form.js and Form.scss

If I define a custom class in Form.scss and apply it in Form.js, the styling works perfectly. Here is an example:

.toolbar-red {
    background:green;
}

However, any attempts to reference an internal Extjs class do not yield the expected results. For instance, the following code does not produce the desired outcome:

.bold-grid .x-column-header-text-inner {
    font-weight: bold;
}

Although I am aware that the mentioned style functions correctly when added to my /theme/sass/src/Application.scss, I prefer segregating my custom styles into individual files like Form.scss. Despite using Sencha Architect, adding these styles directly to the theme sass file proves effective. Nevertheless, my goal remains to keep them separate in Form.scss. Unfortunately, referencing an internal class seems to hinder this approach.

Answer №1

Have you considered using a unique prefix for your theme?

You could experiment with the following code snippet:

.bold-grid .#{$prefix}column-header-text-inner {
        font-weight: bold;
}

Answer №2

Are you familiar with Sencha Themer? If so, you're in luck because customizing themes is a breeze with it. Simply open your theme in Themer and design a unique UI for the toolbar. Actually, this can be done for any component, just so you know. The name you give your custom UI will be used later in SA. Once you've saved and applied it to your SA theme, return to SA and recompile the theme by clicking the button at the bottom of the project inspector pane. When that's finished, head over to the toolbar in the project inspector and set the ui config option to match the name of your custom UI.

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

GAE does not have access to background images

Having trouble loading background pictures in my GAE front-end app. "Failed to load resource: the server responded with a status of 404 (Not Found)". My app is a simple website, no GAE backend. Using Eclipse with Google AppEngine Plugin. Background pict ...

Increase and decrease thumbnail size using an onclick event

https://i.sstatic.net/oDkB9.png I've been experimenting for hours to try and create a functionality where the thumbnail image on my HTML page enlarges when clicked, and then shrinks back down when clicked again. However, I'm encountering an issu ...

I am interested in creating some CSS styles to modify the color of a toggle switch's plus sign icon

Can anyone help me customize my Wordpress theme? I'm trying to change the color of my toggle plus signs to white using CSS, but I can't figure it out. Your assistance would be greatly appreciated. Here is the URL: This is the CSS code I attempt ...

Simple method for displaying or hiding divs depending on the status of a selected radio button using CSS only

I am currently working on showing or hiding div elements based on the status of a radio button. These divs are located after the input buttons in a different section of the page, and I am facing challenges in referencing them accurately. This code is for ...

Tips for adding animation to the div instead of the content

I have implemented a hover animation to animate the div, but unfortunately, when I added the animation to #i :hover {}, it ended up animating the words only. Moreover, the cursor transforms into a pointer solely when hovering over the words instead of the ...

What is the best way to apply an error class to an input field and customize the style using SCSS?

This is the CSS code I am using: input[type="text"] { .has-error { color: red; border: 1px solid red; } } input[type="text"], textarea { width: 100%; padding: 10px; margin-botto ...

When adjusting to mobile dimensions, the responsive website design struggles to center the navbar properly

I am currently developing my senior year portfolio website and I am struggling to center the navbar (Work About Contact) when it is in mobile mode. My goal is for it to be positioned directly below the logo, perfectly centered, but so far nothing I have tr ...

How can I apply multiple backgrounds to a SVG object?

I am in the process of converting an HTML element into an SVG object. I have made progress, but there is one thing that I am stuck on: I'm having trouble figuring out how to define multiple backgrounds in SVG, specifically when it comes to converting ...

Highlight react-bootstrap NavItems with a underline on scroll in React

I am currently working on a website where I have implemented a react-bootstrap navbar with several Nav items. My goal is to enable smooth scrolling through the page, where each section corresponds to an underlined NavItem in the navbar or when clicked, aut ...

How to create an image overlay in Angular with the help of Bootstrap

As a beginner in web development, I am utilizing Angular in conjunction with Bootstrap for a practice project. My goal is to create a header component and integrate it into my app.component. Within the app.component, I aim to have a background image coveri ...

Update the parent element's class style within a targeted div media query

I am facing a challenge where I want the width of my .container element to be 100% when the screen size reaches 900px. The issue is that I have used .container on multiple pages and only wish to change its appearance within the #sub-top div. The terminolo ...

How can I generate a hyperlink for a specific directory on Github Pages?

If I have a repository with one file and one folder, as listed below: index.html folder The folder contains another file named: work.html My goal is to access the folder website using only the link: username.github.io/repositoryname/folder Instead ...

Tips for adjusting the size of icons in Ionic Framework v4 and Angular 7

The library ngx-skycons offers a variety of icons for use in projects. If you're interested, check out the demo here. I'm currently incorporating this icon library into an Ionic project that utilizes Angular. While the icons work perfectly, I&ap ...

Show only the portion of the image where the cursor is currently hovering

Information in advance: You can check out the current code or view the live demo (hover image functionality not included) at . The concept: I would like to have it so that when I hover my cursor (displayed as a black circle) over the image, only the s ...

Align the font-awesome icon in the middle of the input box vertically

Is there a way to vertically center the font-awesome icon inside an input box using Bootstrap without setting margins, padding values, or adjusting the height of the input? .inset-0 { top: 0; right: 0; bottom: 0; left: 0; } .inset-y-0 { top: ...

Conflict with choosing options identified when using Select Box on IOS iPad mini

I am currently attempting to display a select box with scrolling on an iOS iPad mini. Issue: The options are not appearing inside the select box, instead they are overflowing outside of it in the popover. CSS .indicators_geography { font-size: 12px; ...

Is there a way for me to manage the appearance of the printed document's layout?

I have successfully added 3 print buttons to my website, each one designed to print a specific portion (div) of the webpage. Here is the code snippet for this functionality: function printPage(id) { var html="<html>"; //html+="<link rel="st ...

When you utilize the overflow:hidden property in an inline-block list, you may notice some

Referring to this example: http://jsfiddle.net/CZk8L/4/ I'm puzzled by why the CSS style overflow:hidden is creating extra space at the bottom of the first li. Can anyone shed some light on this? This has been bothering me for hours, as I need the p ...

What is the best way to customize the MenuProps of Material UI Select component using createTheme?

I'm trying to update the dropdown menu style of my Material UI Select component using createTheme, but I'm having trouble getting it to work. https://i.sstatic.net/zpVjW.png Here is the code I have so far. Can you spot what might be causing the ...

Creating manageable CSS styles for a wide variety of themes

I need to add themes to a web application that allows users to switch between them seamlessly. The designers want a variety of font colors and background colors, around 20 in total. Is there a way to achieve this without creating multiple .css files, which ...