Joomla Beez template, mystery CSS - css

Im looking at the Joomla Beez templates index.php file, and I come across this.
<jdoc:include type="modules" name="left" style="beezDivision" headerLevel="3" />
What is beezDivision? Theres no mention in the related CSS, and Ive grep -in 'beezDivision' * -R with nothing resulting other than a few lines very similar to the above one showing up (all in the templates/beez/index.php file). I imagine its used somewhere internally, but havent had luck finding out what it does. Possibly something new to me for CSS?

I havn't looked into how the style attribute is being used in the Beez template but the attribute value refers to the chrome style used to wrap the output generated by the module:
http://docs.joomla.org/What_is_module_chrome%3F

Confirming jessedb's answer - /templates/beez/html/modules.php contains a function to generate a custom module style with the appropriate name.

Related

I added inline style to Wordpress child theme files. They're rendering on the page, but not in the theme files

I stupidly added some inline style to my theme files with the intention of moving them to the stylesheet using classes. That was before the holiday. The styles are rendering on the page, but I have scoured every file in my parent and child theme and these inline styles do not exist. It's almost like they're permanent. Please help.
http://cannabisediblesanddrinkreview.com/
<div class="site-branding" style="margin-bottom: 73px;">
http://cannabisediblesanddrinkreview.com/contact
<div class="custom-header" style="margin-bottom: 73px;">
There is a javascript file named global.js in "twentyseven-child/assets/js" which contains a function named "adjustHeaderHeight()". In there the margin-bottom of those two elements is set to navigationOuterHeight (a variable defined in the same file, further up). Most likely that function is adding those style attributes
Looking at the HTML I notice it's rendered with an error style="margin-bottom: 73px;", instead of style="margin-bottom: 73px". Unless you manually entered this with the error, try searching your entire project folder using an IDE or a code editor to find and replace the string 'style="margin-bottom: 73px;" '.
If you find nothing then you'll have to adjust your search to include what that PHP code might look like. ie ...style="<?php echo 'margin-bottom: 73px;' ?>">

CSS changes not updating on site

Today I started changing some CSS on a Symfony (2.6) project. I added some styling to my newly created css file and everything was working fine. My problem occured when I went to add another style and nothing happened. I checked the dev window and couldn't find my styles anywhere. I've deleted the cache multiple times. Im using Symfony with a vagrant box. If I open the css file in the url it is filled with diamond/question marks and my first style entry is still there. I checked and the encoding is set to UTF-8. Ive never had issues like this with css, does anyone know what the problem could be?
I am using Assetic to include the style sheet within the project like this:
`<link href="{{ asset('css/print_production_report.css') }}" rel="stylesheet" type="text/css" media="print" />`
So to show you whats happening I'll start from the beginning. I had this stylesheet (ignore the error):
And upon checking the browser I still have:
Now when I add some random text or css to my stylesheet as so:
You will see that all my changes are being converted into these diamonds:
I think this issue of caching files and replacing them with the unicode 'REPLACEMENT CHARACTER' (�) has to do with sendfile. Turn sendfile/EnableSendfile off in nginx/apache.
Related question is here: yeoman and angular utf8 issue and caching
Insert
#charset "utf-8"
at the top of your file and make sure you've saved the file in UTF-8.
Helpful link
Takie this lower text and comment it, i mean use
//comment blabla
In your css file.

Creating custom layouts for Images in page content TYPO3 6

Typo3 provides option to add multiple images to a page content, but all the images are wrapped under some default <div> tags. I want these images to be wrapped under <ul> and <li> tags instead and giving my own custom CSS ids and classes to it.
There are not many resources on TYPO3 for me to approach this issue. Can TYPO3 allow to use custom tags for the page content elements?
UPDATE
From Jost's answer was able to get my images displayed, but how do I split the image details?
My each image will have title, alt-text, image-path and image-link. Now, using TypoScript how do I retrieve this, because each details has to go in separate tags.
Check the TypoScript object browser. There you will find the object tt_content, which contains the rendering definitions for content elements. The rendering definition for images is found at tt_content.image.20, for example
tt_content.image.20.imageStdWrap.dataWrap = <div class="csc-textpic-imagewrap" style="width:{register:totalwidth}px;"> | </div>
The default definitions given there are usually provided by the static TypoScript of CSS-styled-content. You can overwrite them in your own TS, but when updating to a newer TYPO3-version, the default template may change, which could result in additional wrappers.
Update
Most content rendering in TYPO3 is defined in the TypoScript object tt_content. You can browse all TS-objects that will be used on a page by selecting the "Template" module and the page in question, and then choose "TypoScript Object Browser" in the selectbox at the top of the window. To understand what that stuff means, knowledge of TypoScript is necessary (Tutorial, Reference).
You can add your own TypoScript, which may override existing settings. You can do that in the Template-module too, but usually this is done by creating a file containing the script somewhere in the fileadmin folder and including it from the Template module.
The above enables you to edit the markup of the page. (Additional) CSS is usually defined in external files, that are included by a PAGE object (see the reference about that).
This post is a bit older but I want to add the following:
If you want to understand how the different content elements are wrapped, you may have a look into the css_styled_content extension. I assume that you have included the "Static Template (from extension)" in your main Typoscript template.
You can find the setup.txt here:
typo3/sysext/css_styled_content/static/setup.txt
There you´ll find the line Jost mentioned in line 860 (TYPO3 version 6.1), for example. And of course a lot of other definitions, too.
But check to read the documentation and tutorials on typo3.org.
HTH
merzilla

How to use a common header alternative pages using diazo

I have two static html files, one is a design for a homepage, the other is a design for a regular page.
I have a rules to determine which one to use, like this:
<rules css:if-content="body.section-front-page">
<theme href="home.html" />
</rules>
<rules css:if-not-content="body.section-front-page"
css:if-content=".portaltype-document">
<theme href="index.html" />
</rules>
Though I am realizing now that these two pages have common elements, such as the header.
Is there a way to use the header from one page or something, that means if I make changes to the htmlt, it only needs to be done in one place? Another way of asking, can you mix together design files?
You would need to have just the one theme file to do that.
If you design the theme file properly and you do have common elements between the home page and the other site page templates this should be quite possible.
I guess the design is key here... the following site uses one theme file but has a very different home page using rules similar to your css:if-content="body.section-front-page" to determine not to show the left and right columns for example.
http://www.lotterywest.wa.gov.au/
This is not possible.
Diazo (version 1.0.4-py2.7) simply loads the theme file (see diazo.rules.expand_theme(element, theme_doc, absolute_prefix)). The loaded file must have a etree.parse()able format and AFIK there are no "rules" to embed or include further files or code.
I've been trying to find a workaround with no success until now. My alternative idea was to include the common code as a replace rule and then apply the other rules. E.g. have a given id in your theme-file and expanding it with a diazo rule. This works only if you do not need to expand your code (see my question https://stackoverflow.com/q/21703070/1659599).
If you only nedd to add html text without further replacements then you could add this by a rule.

How do I apply styling to my custom intro page?

I made my own welcome intro page using org.eclipse.ui.intro and I'm able to show my welcome extended with other contributors.
Now I'd like to decore my welcome with some css, and I have two question:
1) How can I apply predefined eclipse css (i.e Slate) to my page? I've already tried putting org.eclipse.ui.intro/INTRO_THEME = org.eclipse.ui.intro.universal.slate in plugin_customizazion.ini without success
2) there's a way to extend css to contributors without giving them the css file??? I mean there a way for contributors to use my own css if it is only inside my plugin (or eclipse plugin if i will be able to use "slate" style?)
Eclipse SDK Help
The only way to select a theme is via the preference org.eclipse.ui.intro/INTRO_THEME in plugin_customization.ini.
Theme-enabled intro implementation must make all the references to style and presentation resources using the $theme$ substitution variable. Absolute paths for images, pages, styles, etc. will be computed by resolving the substitution variable using the path of the currently active theme.
See Intro Content XML Format as well.
To answer the second question, if you define an intro theme which include your css file, other plugins will be able to use it for sure.
Cheers,
Max
Ok, now I've learned more about themes, but I think I have some problem with path.
I've defined my own theme, css and graphics, so I extend theme by configExtension. But when I load my application the welcome page doesn't load css neither images. I've also defined org.eclipse.ui.intro/INTRO_THEME in plugin_customization.ini.
I have a structure similar to slate template like this
my.plugin.name
|_resources
|_intro
|_graphics
|_html
in graphics there are all images definitions whlile in html there are css
then in intro I have my root.xhtml (referenced by intro.xml)
with this css reference
<link rel="stylesheet" href="$themes$/html/root-ie.css" type="text/css" charset="utf-8" />
finally I've defined configExtension with theme
<extension
point="org.eclipse.ui.intro.configExtension">
<theme
default="true"
id="my.plugin.name.themes.themename"
name="%theme.name.themenam"
path="/resources/intro"
scalable="true">
I think maybe the problem is with the path, I've also tried with path="resources/intro"
path="/resources/intro/" and path="resources/intro/" withous success
could someone post a simple but complete working sample please?

Resources