How to make layout with fixed sized column in Liferay?
I know how it is possible to style it with CSS, but where to put CSS files in Layout project?
May be there are matching styles in aui.css already and I can just use them somehow?
What is better: to embed style into .tpl file or use CSS files?
FINALLY
I just redefined styles for columns by id in my theme:
.columns-3 #column-1 {
width: auto;
}
.columns-3 #column-2 {
width: 840px;
}
.columns-3 #column-3 {
width: auto;
}
How to make layout with fixed sized column in Liferay?
You can use inline styles to fix the width of the columns within the .tpl file. Crude but works :-)
I know how it is possible to style it with CSS, but where to put CSS files in Layout project?
I don't think you can have CSS files in a Layout. CSS files can go in theme. You can modify the .tpl with your custom CSS classes which will be present in your theme's CSS.
May be there are matching styles in aui.css already and I can just use them somehow?
I don't think there are styles having fixed width which you can use and also this theme seems to be automatically generated when using AUI javascripts (as mentioned in this post).
What is better: to embed style into .tpl file or use CSS files?
CSS files are always better since it gives you a lot of flexibility in changing the styles through different themes. So your layout would be dynamic based on the theme applied. Since styling basically is the job of the theme.
As per your requirement you should create the layout with plugins sdk layouts, and that is more flexible.
If you feel to apply the CSS then you have to apply classes to the .tpl file and its respective CSS should be added to the theme custom.css file.
Just of curiosity, what type of fixed layouts are you creating.?
Related
Hello for some reason my custom CSS is being overwritten, I have correctly placed my custom CSS below the CDN bootstrap reference but that does not seem to solve the issue. For example if I am trying to change the font color for a header with an h1 inside. When using classes or id's the font color will not change. Though if I target the header by writing whats below in my CSS file it does work
header h1 {
color: white;
}
I do have an some understanding about specificy but I would assume declaring it with a class or id should be specific enough and go over the _reboot.scss file but it does not seem to. I am using BootStrap 5.
In your example cdn or node_modules css always on top. After that put your custom css files.
Order of prioritization when using multiple contradictory css files
I am using a template (A). This has some CSS files and I want to inlcude an other template (B) in this template and the other template has also some CSS files. By including the css of template B in A, some forms are looking different because of the new CSS of template B.
How can I inlcude all CSS files of both template without replacing some forms.... Can I set a priority to one CSS? Or is there a tool where I can put more CSS files which will compress all CSS files to one?
Or can I use one CSS file to only one DIV?
CSS means "Cascading Style Sheets". Here "Cascading" means that If something is found two times than the last has priority. So link the CSS file at last which you want to give priority. You can also use !important to give priority. For instance:
color: red !important;
Here red will be used overall.
I’m not completely sure what you are trying to do.
However assuming you want to link more than 1 css file to page. You could play with priorities of CSS selectors. An ID for example has more priority than a Class. You could also make them more specific.
For example:
body ul li span {
Color: red;
}
Span {
Color: blue;
}
Here the span should be red
You should try to include the CSS you want for your login page only (template (B)) into your login page HTML only, like for instance:
index.html file :
<link rel="stylesheet" href="templateA.css">
login.html file :
<link rel="stylesheet" href="templateB.css">
The objective if simply to avoid conflicts between both template, you cannot use both of them on the same page it will cause a lot of bugs and slowdown your website a lot.
Please feel free to ask me in the comment if I'm not clear about anything.
I have made a complete Bootstrap grid system. I am now uploading my code to a CMS system, and can see there is some CSS from the backend, there is messing up my grid.
If I untick the following code in the inspector window, everything is looking perfect. When the following code is ticked in the inspector window everything is messed up. Is it possible to overwrite this code somehow, so the class is not used?
.cms-area img {
width: 100%;
}
You can use !important in such cases but use it sparingly. Best is to remove the unwanted code and not use !important. !important might cause issues later that are difficult to debug. If possible include your css after other css is included in the code. In CSS, rules that appear later take precedence over earlier rules
Edit:
Set width to auto instead of 100% to fix your alignment issue
Below given is the ideal way to manage css since it allows you to attribute your style content and lets you override the style already applied elsewhere.
.cms-area .your-class img {
width: <your choice>;
}
I'm trying to edit some background on a page. I don't have access to the html file, only .css and .js. The page has a default theme that won't expand the background on the whole screen (bottom) because of the structure. I managed to swap the default background .png with an animated gradient through css but now I need to change the div. Tried with the #import url at the very top of the css file to call an external css but it won't work. Are there any ways to override the html structure? thank you
Forgot to say that I don't have access to the default template's css either. The service keeps everything on the server and once I installed the template in the local folder (the whole thing works with dropbox) I found an additional .css and .js in which I can add other code, though they come basically blank. What I need to do is to override the template's div structure from one of those 2 files. Using DevTools i found the name of the template div class and I guess I can download the relative .css. Still don't know how to override it... I'm not too familiar with coding in general...
Not clear with what you're trying to do. But you can always use Javascript DOM manipulation functions.
Check out this link for that: http://callmenick.com/post/basics-javascript-dom-manipulation.
You can also use jquery which provides better API.
If it is in some class definition or in a stylesheet file then use selector with high Specificity to get your definition on high priority
.oldclass{
width:328px;
height:328px;
background-image:url('http://via.placeholder.com/328x328');
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328');
}
<div class="oldclass">
</div>
If it is in inline style, then use !important tag
.oldclass{
width:328px;
height:328px
}
/*Your New definition*/
div.oldclass{
background-image:url('http://via.placeholder.com/328x328') !important;
}
<div class="oldclass" style="background-image:url('https://www.gravatar.com/avatar/fca24c2acab4d63343d4608ce256dcec?s=328&d=identicon&r=PG&f=1');">
</div>
I am sorry beforehand if question is stupid, but this is my first project.
I got html.css layouts from HTML/CSS-coder, and for each view they made separate html and separate CSS file.
But I am developing SPA, so there will be one page as an entry-point. Obviously, it should contain all CSS files for all views. The problem is that some of the CSS files contain classes with the same name, but different content. So if I just put list of CSS files in the entry html, some views become a mess, because they use wrong classes.
Thanks a lot.
As I see that my question is not being understood, I decided to give example:
File1.css, used in view1:
.class1 {
cursor: default;
}
File2.css, used in view2:
.class1 {
cursor: pointer;
}
Obviously, I need both as is and cannot use !important; as this will make a browser to use only one of them in both view1 and view2.
What is correct approach to solve this? Ask html coder to re-name classes, or do it myself? Or is there some tool that can somehow consolidate CSS files automatically?
Also, how usually html/css layouts should be coded for SPA to avoid this situation?
UPDATE 1
I appreciate efforts the SO community made to help me though question is indeed could seem vague. I've already learned a lot from all answers.
The situation is much clearer for me now.
The problem in many projects such as yours is that developers do Not do what they are supposed to be doing in standard manner. The correct approach to manage CSS Files in more than 500 lines of CSS Code is to follow Modular, Structured Patterns such as BEM. These Standards guid you through the right choice for the naming conventions and writing Css Components.
For example in Twitter Bootstrap they use components and utilities to manage large projects and avoid such collisions.
Your way to get out of it
You have always the chance to write your styles inline inside the html code. This would bring a high specificity and will override Clas Based CSS of the files included.
You could provide a .css file of your own and include it after all that developre's css and !important all the mess or with the help of high specificity like ids make your CSS win!
Forget about the whole CSS They provided you and start using a framework like Twitter Bootstrap or Zurb Foundation.
Yes you are going to have to go in by hand and re-code the classes. Additionally You can add id's or an extra class to whatever section you are currently styling.
For example: <div class="CSS-coder" id="myExtraStyles"> or <div class="CSS-coder myExtraStyles">
!important will override most styles. But it would be better to edit the current classes that wont be sharing style attributes.
Additionally remember that "Cascading" means from top to bottom. So any styles loaded after the default styles will override the styles loaded before it.
I agree with the other poster in that a "framework" is the way to go.
Good luck with your project.
If I understand correctly, it seems as though you need to use parent / child selectors depending on which view it is:
file1.css:
.view1 .class1 {
// Styles
}
file2.css:
.view2 .class1 {
// Styles
}
To achieve this, look at each view and see if there's a top-level element you can append a class to, such as the <body> tag:
<body class="view1">
<div class="class1">
AND
<body class="view2">
<div class="class1">
This removes any need for !important (stay away from that as much as you can!)
EDIT
Re-reading your question I think I have a better idea now as to what your actual problem is.
What you can do is to find or add a parent element that you can use to filter out the styles.
Let's say you link to those 2 CSS files and both of them define a style like so:
/* First CSS file */
.sub-div {
background-color: red;
}
/* Second CSS file */
.sub-div {
background-color: blue;
}
On your HTML, look for a parent element that you can use.
<div class='red-only'>
<div class="sub-div"><p>View 1</p></div>
</div>
<div class='blue-only'>
<div class="sub-div"><p>View 2</p></div>
</div>
Create a custom CSS (you should link to the file last).
.blue-only .sub-div {
background-color: blue;
}
.red-only .sub-div {
background-color: red;
}
When working with css, the order is important.
The file that is declared last will have the highest precedence.Now with that in mind if you have
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
Then the code specified in file2 will override the code in file1, only if they have the same specificity. Meaning that the more specific declaration will trump even if it is declared in file1. So if you want to override a rule in file1 you will need the exact same declaration in file2.
When working with files created by others like bootstrap or similar it is preferable to create a new file.
<link href="file1.css" rel="stylesheet" type="text/css">
<link href="file2.css" rel="stylesheet" type="text/css">
<link href="myStyle.css" rel="stylesheet" type="text/css">
This will help you avoid trouble that might arise from modifying the originals.
The code inspector in chrome and firefox will be helpful when you need to check wich classes are applied to a certain element.
It might be that your element is applying a class that overrides the one you are trying to apply to the element. For example:
<div class="class1 class2 class3" ></div>
Class3 might override parts of class1 and class2, because it is the class applied last. Like i said, in CSS order is very important.
Do not use !important if possible. You might want to override values later on, and with !important will become difficult to do so. Verify if there are !important declarations in file1, because these might be the ones causing you trouble.
Are you using a programming language? Or just CSS/HTML markup? If you use a programming language (what I suppose, as you got one entry point) you could simply make a big switch statement, check the current view and then inject accordingly the appropriate css file.