Exploring the Advancement of Themes in Liferay

Struggling to create a Liferay 6.2 theme and feeling a bit confused.

I started a new project, selected theme, clicked on next, chose velocity and _styled responsively. However, I actually want a standard theme that can be deployed without any changes compared to the default theme. My understanding was that I needed to copy overridden .css files into the _diffs folder to achieve this. Yet, my outcome doesn't match what I expected. The screenshot I have attached shows my result, and I can't figure out why the default theme is not appearing. It may sound like a silly question, but I am hoping someone can provide a brief explanation. Thank you in advance.https://i.sstatic.net/DtDhw.png

Answer №1

For your project, it is recommended to set the classic theme as the foundation.

Consider this example:

property name="theme.parent" value="classic"

By including the above code in your build.xml file, you will ensure that your project is built using the default classic theme provided by LR.

Answer №2

Max provided the accurate response. For those curious about the context: _styled serves as a foundation for creating your own theme without dictating its visual design. If you aspire to craft a unique theme, this is the recommended starting point. On the other hand, if you simply wish to make minor adjustments to the existing classic theme, following Max's advice and beginning with classic is the way to go.

It's worth noting that even though the documentation suggests otherwise, the css/custom.css file in the classic theme is not devoid of content as it isn't intended for extension (despite being functional). Therefore, it's essential to adhere to the guidelines for developing a theme and commence by modifying classic's own custom.css file.

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

What is the best way to use absolute positioning in React Native to align an element with its grandparent?

I am trying to position a Font Awesome icon in a React Native project using absolute positioning relative to the grandparent element, rather than its direct parent. After some research, I came across the following information on this page: https://reactna ...

css react-native css-position absolute

Tips for making a rounded text box

How can I design a circular textarea where the text conforms to the shape? Here is my attempt, but I'm unsure how to keep the text inside the circle without relying on javascript. ...

html css textarea

Modifying the color of specific sections of SVG elements

Interested in utilizing the d3.js timeknots component, a svg visualization that includes line and circle elements. My goal is to implement a stopwatch animation that dynamically changes the color of the svg visualization over time. I am contemplating crea ...

javascript html css d3.js svg

Is there a callback or event that can be used to ensure that getComputedStyle() returns the actual width and height values?

Currently, I find myself in a situation where I need to wait for an image to load before obtaining its computed height. This information is crucial as it allows me to adjust the yellow color selector accordingly. Question: The process of setting the yello ...

javascript html css

How to align text with an image as the size of the image adjusts

I'm brainstorming creative ways to handle a webpage section where the image will be swapped out with various images (with widths up to 620px) and a text caption is positioned over it. I aim for the text to adjust its absolute position based on the wid ...

html css image position

Transforming table headers in Rmarkdown ioslides

I am experimenting with creating a custom table format for tables generated using the ioslides_presentation output type in Rmarkdown with Rstudio Version 0.98.1028. However, I'm facing difficulty in modifying the styling of the table headers. Below i ...

css formatting markdown rstudio

Changing the direction of SVG text-path on a semi-circular element

I'm struggling to make a text-path inside an SVG follow the curve of a half circle. Unfortunately, I can't seem to get it to start at the correct point. This is how it's currently implemented in my project: <svg viewBox="0 0 500 ...

css reactjs svg text path

Any particular reason for Bootstrap v5 switching class names from .ml .mr to .ms .me?

I'm curious if anyone can explain the reasoning behind Bootstrap v5 changing the names of classes that are widely used? ...

css bootstrap-4 bootstrap-5

Is there a way to modify the color of multiple disabled select fields in Internet Explorer?

After experimenting with various methods to change the color of disabled select items, I found success in Chrome but hit a roadblock in IE. Despite trying ::ms-value, the red color was applied to all disabled select fields, which was not the desired outcom ...

html jquery css

Having trouble understanding why the border-radius attribute is not being applied to tables?

I've been trying to give the outer corners of tables a rounded appearance in HTML/CSS, but I can't seem to get the border-radius property to work properly. After inspecting the elements in Chrome's computed section, I noticed that the eleme ...

html css

Tips on boosting CSS specificity in Material-UI's makeStyle for styled components in order to successfully override the root style

As a newcomer in the world of React, I am attempting to utilize MUI makeStyles to customize the existing styles. However, I have encountered an issue where setting fontWeight to 'bold' does not seem to work, even when using !important. Any sugges ...

css reactjs next.js material-ui

A guide to displaying dropdown values above a modal

I have encountered an issue while using a dropdown inside a modal window. The problem is that not all the dropdown values are visible, as the overflow part gets hidden. I am looking for a solution to keep the dropdown value at the top and prevent it from b ...

javascript html css reactjs web

Inline display malfunctioning

I am facing an issue while integrating ngTimepicker into my Angular project. It is functioning properly, but I am unable to inline the ngTimepicker inputs with the form input. Check out the plunker here I would like this section of HTML to be displayed in ...

javascript html css angularjs

Ways to automatically adjust the margins of my HTML body page

I'm currently working on a school project to develop a website. The challenge I'm facing is customizing the navbar and header background colors in such a way that they extend seamlessly to the end of the page. Despite my efforts, there seems to b ...

html css border

Profile picture placeholder with conditional logic

After extensively searching online, I was unable to find a solution on how to add a default profile picture. Here is the code snippet I used for uploading an image chosen by the user: <td><img class="image" src="image/<?php echo $contact[&apos ...

php html css sql

Is it possible to modify the size of a bullet image in Javascript?

Can an image bullet style loaded via a URL be resized using JavaScript code like this: var listItem = document.createElement('li'); listItem.style.listStyleImage = "url(some url)"; listItem.style.listStylePosition = "inside"; I aim to increase ...

javascript css

Creating a text container in PHP for displaying information

As someone who is new to PHP and HTML, I'm curious about the CSS statements needed to create a text box that will display a value from one of my PHP functions. Right now, the function retrieves data from an SQL server and returns it, but I would like ...

php html css textbox

Content overflowing the container - Designed to adapt to different screen sizes

I'm currently working on a project within the Bootstrap 3 framework and struggling with an issue regarding text overflow in extra small view. The text is not behaving as expected, as it should stick to its container and break accordingly. I've ex ...

css twitter-bootstrap text

Showing a lengthy numerical value in a disabled input field

When I enter a lengthy input into an input field with type="text", the value is stored correctly in the database. However, after clicking the submit button, the input field is disabled, displaying only the length of the text input. Is there a way to disp ...

html css input text

Positioning elements absolutely within a Material-UI Grid component

Is there a way to align a Material-UI icon with text so that the lowest point of the icon starts exactly at the baseline? We are using Material-UI Grid layout. The issue we are facing is that if we align the icon using 'baseline', it appears too ...

css reactjs material-ui

CSSer Q&A