I'm creating a template override for k2 (although I guess in some ways this question could apply to any Joomla extension).
Now I've created my override in template/html/com_k2 absolutely fine. Then I went to go and update the stylesheet. Now as far as I'm aware I can do one of two things:
Change the K2 CSS style sheet. BUT this means that every time I update k2 the style sheet gets overridden - far from ideal!
Add a new K2 specific style sheet in my template. BUT this means I'm effectively loading the K2 style sheet twice - once for the component and then once again for the templates k2 style sheet. Now normally this wouldn't be a major issue - but as the K2 style sheet is over 1000 lines long - this is going to start to have a performance impact - especially as k2 isn't the only style sheet I'm going to need to override!
Are there any alternative ways of overriding the style sheets? Because both of these ideas are far from perfect as I've stated!
It really doesn't matter where you put your custom css rules. You might be better off putting them in the Joomla! template's custom.css file.
But if your concern is about one extra css file, look at your page: you might have more than 10, depending on template and extensions: so dealing with the extra one won't make a difference; but the "right way" would require:
a) compacting all css into one (taking care of different relative paths)
b) minifying the result
This of course means editing all components and modules views that add css rules and links, a massive work.
Related
I'm using Full HTML filter, with CKEditor. The following filters are enabled:
Align images
Caption images
Track images uploaded via a Text Editor
Collapsible text blocks
Note that Limit allowed HTML tags and correct faulty HTML is NOT enabled.
when I add a style attribute to a table element in Ckeditor using the Source view, specifically "width=75%", it is stripped when the page is rendered. When I edit the page again and go to Source view, the style tag is there.
What is stripping it on render?
I believe inline styles are removed by default for security reasons. But, there has been a lot of discussion about this issue on Drupal.org over the past few years. If you're looking for a workaround and accept the risk, here are two approaches I have found:
How to fix: CKEditor is removing style attributes. Drupal 8.
Refactor Xss::attributes() to allow filtering of style attribute values
Fair warning: I have not personally implemented either of these.
Inline style is stripped by default with Basic HTML formatter. Unless you have a specific reason why you don't want to turn on Limit allowed HTML tags I highly recommend that you do because it gives you a lot of control over what tags you and others can use in the wysiwyg. In addition, it allows you to add a "Styles" button with pre-configured styles so you don't have to insert inline CSS code repetitively.
Thymeleaf puts a large emphasis on "natural templating", which means that all templates are already valid XHTML files. I always thought that is a great step forward that I can generate fragments in my templates e.g. in JSP I'd write
<tagfile:layout title="MyPageTitle">
<jsp:body>
Main content goes here
</jsp:body>
</tagfile:layout>
My "Layout"-Tagfile contains all the header-tags (title, link to stylesheets,...), the menu and justs inserts title text and body at the right point. I don't need to know anything about stylesheets menus or the like when designing my html fragement.
This is in contrast to the idea of Thymeleaf which encourages me to create full html pages (including a sample menu and all the headers). While the manual of Thymeleaf continues to emphasise how great this is, it never deals with duplication of code concerns:
I have one template that generates a menu and all my other templates (could be many) include a copy&pasted dummy menu just so that I can view the template in a browser without the server side generation mechanism. If I have 100 templates that means that prossibly the exact same dummy menu exists 100x (in each and every template). If I change the look of the menu it's not done with creating a new dummy menu, but I need to copy&paste the new dummy menu into 100 templates.
Even if I decide to do something as simple as renaming my CSS file I need to touch all my templates as well.
There is always the danger that my template looks just fine in my browser, but the generated output is broken because... well... I broke it (could be as simple as a misspelled variable name). Thus I will need to test the output with the actual generation anyway.
Did I misunderstand something there? Or is this indeed a trade-off? How do you minimize the impact of code duplication?
Natural Templates are just an option in Thymeleaf. As you can read here http://www.thymeleaf.org/layouts.html there are many options, including a hierarchical layout approach like the one you seem to prefer (I recommend you to have a look at the Layout Dialect).
However, Natural Templates are the preferred and most explained layout option because Thymeleaf was thought from the ground up to allow you to do static prototyping (in contrast to most other template engines). But it doesn't force you to.
So.. how are Natural Templates applied in the real world to avoid code duplication becoming an issue? That depends on the scenario, but one pattern we see repeated a lot is people creating full document, natural templates for 3-4 or maybe even a dozen of their application's templates, only those that are more likely to take a part in the design process --exchanged with designers, with customers...--, and simply not apply that header and footer duplication in the rest of the application's templates, making their creation and maintenance much simpler.
That way you can have the best of both worlds: a means to exchange fully displayable pages between programmers, designers and customers for the pages that this is really relevant; and also a reduced amount of duplicated code.
What's more, thanks to libraries like Thymol (referenced in the article linked above) you can even avoid code duplication completely, allowing your fragments to be dynamically inserted via JavaScript when you open your templates directly in your browser without running the application.
Hope this helps.
Disclaimer, per StackOverflow rules: I'm thymeleaf's author.
I have to convert a static site for a client and it has to retain the exisiting layout.
Fortunately, most of the pages don't have to be editable, so for those I was going to use more or less the existing html.
The challenge I am having is that for many of the pages that do need to be editable, the content is laid out in columns (2, 3 and sometimes mixed)
This ( http://globalstrategies.org/index.php/give/hope-partners ) is an example of a page like that, and you can see others on the site where the layout is relatively complex.
I had thought of creating a jce stylesheet that would at least layout the page in the editor in a reasonable way (a bit like a responsive site, by having the columns stacked one after the other) , but I am concerned that my client may accidentally delete the surrounding classes/divs that create the more detailed structure.
I'm pretty familiar with Joomla and have built quite a few sites, but I've not used an cck tools and was hoping not to have to do that in this case, though maybe now is the time to learn.
Any advice / recommendations would be welcome !
Richard
Maybe ContentBuilder could do in your case, it's fairly easy and creates super-simple code, I've accomplished similar tasks with it. You provide the user with 3 fields (one per column) and create a layout for its display.
Another alternative is possibly even easier: you could override the use of the page functions in a template override of com_content/article, instruct the user to insert at most 2 page breaks, and use the page breaks to build the layout as you require.
If your sites is upgraded to the Joomla 3 you can use the build-in Bootsrap to do the layout.
You can find some more information how you can achieve this in the following page:
http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
I have a menu item that loads a List of Categories.
The problem is that I don´t know if there is a visually enhaced component other than the default one.
Could you please point me to the right direction
I am using Joomla 2.5
Printscreen: http://snag.gy/pEQsb.jpg
Just to add a link to the suggestion from Marko D about template overrides (which would be the correct answer):
http://docs.joomla.org/How_to_override_the_output_from_the_Joomla!_core and http://docs.joomla.org/Understanding_Output_Overrides explains how the template overrides work
This is indeed the simplest way to adjust how the list is created. And of course using CSS within your template.
I have been working on a MVC3 new project where I wanted to introduce the concepts of dynamic themes.
Instead of creating a bunch of .css files and dynamically linking to the
right one, I wanted to use a <style> section in master <head> section
that specifies the values to use for the selectors and their properties.
The values would be pulled from a database and written to header section in style,
look like this:
<head>
<style type="text/css">
.testClass { color:Purple;background-color:LightGreen; }
</style>
</head>
Not an answer on how to achieve this end, per se, as much as a suggestion that you reconsider. I have seen this approach taken firsthand several times over the years, and it invariably ends up first with writing a proprietary tool to edit the database themes and subsequently with an expensive rewrite to extract all the themes out of the database and into proper css files.
One typical reason to go down the path of putting styles in the database tends to be a desire to allow a given style to be "overridden" on a case-by-case basis - for instance, in an application service provider model, where one customer wants to change only one or two of the default styles. However, the "cascading" in "cascading style sheets" allows this exact behavior, without abandoning all the goodness of proper css and the associated tools - as long as you sequence the stylesheets in the correct order in the page head (e.g. "maintheme.css" first, then "customerX.css"), you only need to redefine the styles of interest in the customer's stylesheet and they will automatically override those in the main theme's stylesheet (assuming the css selectors otherwise have the same precedence).
A related, but slightly different reason given for going with database-driven stylesheets is to allow end users or business owners to edit the styles themselves. With a few exceptions, that sort of feature turns out to be less used and more difficult to maintain in practice than it seems when drawing it up. In this case, the number of styles being customized is theoretically quite small - presumably entirely constrained - and you'd be writing a proprietary tool to allow them to be edited, regardless, so again I would suggest simply writing out the customized styles to a css file on a filesystem, rather than a database (or as a blob to a CDN, etc.).