joomla: how is the CSS generated? - css

i made a website that looks like this www.yoursdproperty.com
i would like to know how the CSS is generated? where is it generated? how can i edit the settings that generate the CSS?

It's a while since I looked at Joomla, but (once you're logged into it) isn't there a "Template Manager" through which you edit the CSS?
EDIT: Just checked it out via http://www.opensourcecms.com/, it is indeed "Template Manager", under "Extensions" on the main menu. Select your template, then click the "Edit CSS" button on the top right.

I don't think Joomla generates (=compiles) style sheets out of the box.
Look into your source code:
<link href="/templates/system/css/system.css" rel="stylesheet" type="text/css" />
<link href="/templates/system/css/general.css" rel="stylesheet" type="text/css" />
<link href="/templates/pjo_joomlaforall/css/template_css.css" rel="stylesheet" type="text/css" />
you should be able to edit these without problems?

This may be applicable now to users on 1.7 or 2.5. You can edit the CSS in the browser by going to Extension/Template Manager, and then clicking the Templates option (instead of styles). Click on your particular template and all the css files will be listed down the right. Some have alot. As an example, the beez_20 default template has 16 css files. You could download them all and search them for the selectors you are looking for. For beez_20 it is personal.css which has most of them. Source: http://www.itlearning.net

Joomla doesn't make any "automatic generation" of css. The css are in the stylesheets at the url shown.

Related

Keep id on css link in production of ViteJs project

In a Vanilla Typescript Vite project, I need to make a Single page application. I need to use Two css File. So in the html entry page, i use 2 link stylesheet file. I need in the application to disable one and active another.
I saw that I could use the property
disabled
of HTMLLinkElement.
So i put an id to the links on the html page, like this :
<link rel="stylesheet" href="./styles/login.css" id="css_login">
<link rel="stylesheet" href="./styles/lobby.css" id="css_lobby">
But in production, ViteJs transform it without the id :
<link rel="stylesheet" href="/assets/lobby.d0dbc25d.css">
<link rel="stylesheet" href="/assets/login.32f19747.css">
I can't select the link in JS for disable or active a specific file.
Can anyone help me ? I spent last night trying to fix the problem but couldn't find anything. Link tag attributes disappear no matter what I do.
Thanks

How to disable all stylesheets in Prestashop?

How can I prevent all Prestashop's stylesheets from being included? By all I mean any stylesheet that is automatically added by CMS to website's <head> section.
I need this to use a single external stylesheet instead (my own, not the one generated by CCC).
It would be perfect to use non-JS method, but I'm not sure if it is possible in admin panel.
You can just open header.tpl file from your theme folder and remove the following code:
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}

joomla wrong base href results in wrong CSS template

I have installed Joomla 3.x and some modules.
One of my modules is to display articles from certain categories of my articles, but when I navigate to my article, the CSS stylesheets do not load.
When I view the source, I discovered that the URL for the CSS stylesheet in the page above becomes:
<base href="http://cambridge.mywebcommunity.org/index.php/10-%E7%88%B1%E7%AB%8B%E6%96%B9%E5%8A%A8%E5%90%91%E6%9B%B4%E6%96%B0/3-welcome-to-your-blog" />
... instead of the original I put in, here:
<base href="http://cambridge.mywebcommunity.org/" />
This also happens to another CSS stylesheet from the module. The CSS URL loads like this:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/10-爱立方动向更新/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
... instead of the original CSS URL that I put in:
<link rel="stylesheet" href="http://cambridge.mywebcommunity.org/modules/mod_news_pro_gk5/interface/css/style.css" type="text/css" />
So I have figured out that the issue is the URLs are not being added by Joomla correctly. How would I go about fixing this?
From what you've posted it looks like you (or extension developers) are trying to add css with absolute links. Looking at the source of your page will quickly show you that your links look different from the core links in that they are absolute not relative. You may need to look a the code in the modules doing this and fix or contact the developers and ask them to fix. Also ask them about the js.
In Joomla you add style sheets with code like this in your template index:
$doc->addStyleSheet('templates/'.$this->template.'/css/template.css');
The change in behavior is most likely due to a recent security fix concerning uris in the header. I'm not going to link to details of the exploit but easy enough to find out why this was changed, but it was for good reasons.

Linking to external stylesheets in Aptana

I'm new to Aptana Studio, and I'm afraid there's something I just don't understand about it. When I try to link to an external stylesheet located in the same folder as my .html file, it won't work.
Normally, you just place something like the following code in the head section, right?
<link rel="stylesheet" type="text/css" href="style.css" />
Can someone please explain to me why this doesn't work?
I really like Aptana so far, but this is driving me mad.
Your code is correct but I haven't heard good things about Aptana. If you only want to code in HTML CSS and JavaScript you surely want to use brackets
This is an awesome text editor with LIVE code preview in browser like firebug -
http://blog.brackets.io/2012/06/25/brackets-open-source-code-editor/
Download the latest sprint: https://github.com/adobe/brackets/downloads

CSS and images on Master Page

I have this quite popular problem, but have failed to find a solution that works.
Basicly, I am using a Master Page (/Masterpages/Default.master), that includes
<link href="../css/style.css" rel="stylesheet" type="text/css />
And it also includes some images with the same relative linking.
But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.
Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?
Thanks in advance
UPDATE:
There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.
I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />
best to use:
<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />
since this will cope with iis application roots unlike:
<link href="/css/style.css" rel="stylesheet" type="text/css />
You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.
<link runat="server" id="siteStyle"
href="~/css/style.css"
rel="stylesheet"
type="text/css" />
The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.
Fairly sure this will work
<link href="/css/style.css" rel="stylesheet" type="text/css />
/ takes you to the root of your site
You can use the tilde to get the link to work from anywhere. This will work in Images as well.
<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />
Images in CSS are relative to the file they are referenced from.
(An exception from this is the "filter" rule in Internet Explorer which is used for PNG fixes. The images in this case are relative to the HTML document.)
Yes, the problem is that the materpage is using a relative url to load the CSS:
"../css/style.css"
you need to change this to the site root (depending on the location of your css files) something like:
"/css/style.css"
than all the various folder levels can use the same url.
Actually, master pages will rebase css files for you automatically, without you having to add runat="server". Be sure that your css file is located one directory down in the folder you specified.
You can use an absolute path to the css file, but visual studio doesn't seem to render the styles in design view when you do this. Also, sometime you won't know if you're going to be running in a virtual directory, so it's not always ideal to use the absolute path.
Also, use relative links to your image assests from the css file itself - which will work irrespective of how you link to your stylesheet.
You might also be interested in looking into themes and skins.
ASP.NET Themes and Skins Overview

Resources