from the question above, I thought it would be relatively easy but i can not find any documentation on on how to add styles to the 'styles' drop down menu. can anyone push me in the right direction?
The styles dropdown is automatically populated based on classes found in your theme's typography.css file. To add classes, just ensure that they are defined there. Alternatively, if you want to give the classes friendlier names or to remove some classes from the list, you can explicitly define the styles that you want listed by putting this in your _config.php file.
HtmlEditorConfig::get('cms')->setOption('theme_advanced_styles',
'Name 1=class1;Name 2=class2');
It's a feature provided by TinyMCE, the WYSIWYG editor component, and this line is just setting the theme_advanced_styles setting of TinyMCE when used by the CMS. This thread on the TinyMCE site also discusses it.
Also note Markus' answer below: editor.css needs to be in the theme css folder and include the typography.css.
The answer of #Sam Minnée only works, if the editor.css is also in the theme css folder and includes the typography.css.
Here is a more detailed description of how these two play together.
If you have troubles getting the new styles appear in the editor, try the following:
yoursite.com/admin/?flush=1
Check the file permissions on your mythemes/css/editor.css file. It should be readable by the webserver user.
Related
I am trying to customize the Liferay UI by using custom theme using base as as "_Styled" theme.
I have my own css files which I coped to _diff/css folder of theme and imported them "custom.css" file .However its breaking the presentation of liferay.In my custom CSS I have styles defined for all the standard tags like body,div etc which is impacting the liferay UI too.
How can I resolve this conflict? Thanks in advance!
Quick (and not the best) solution is to remove contents of liferays css file (for example "base.css") and save this empty file in /diff/css/ folder of your theme. This way the base.css will get overriden with your new empty file and thus no styles will get loaded. And your custom.css will be the only stylesheet that is taken into account.
Well, of course it all has an effect on the rest of Liferay as well. Liferay provides quite a bit of the HTML DOM of your page, and if you change the presentation of all of those elements, you'll have to take care to style Liferay's elements too.
Is this a conflict? No. Let's go for the simplest case: You declare div {color:green;}. Of course, now everything, your components as well as Liferay's components, use green text. If you only want to style your own portlets, you might want to specify some portlets: div.portlet-my-own-application {color:green;}
I know that color is a too simple usecase, but I hope it illustrates the solution strategy.
Rather than following Artem Khojoyan's suggestion to override Liferay's base.css, I'd recommend to take a look at the resulting css, what's effective etc., and simplify your own css - adapt it to be used within Liferay - by inspecting the effective CSS for every elements that looks off. Firebug or any of it's relatives are your friend.
I'm afraid, with the details "I'm doing something which has an effect on Liferay UI" there's nothing much more to help you. In fact, I'd hope that what you do has an effect on Liferay's UI... You'll just need to find the proper CSS code
Ideally if your styles are loaded from custom.css, then will overwrite liferay default styles.
In some cases, to overwrite a style in css, you can use !important
for example, liferay default style
body {
background-color: #fff
}
You can specify your style to consider irrespective of order of loading
body {
background-color: red !important;
}
I have seen that we can place our layout xml files in
app/design/frontend/default/default/layout
or we can place our customization inside
app/design/frontend/base/default/layout/local.xml
file, but I have read at magebase and at magentocommerce that we can place our layout files under
app/design/frontend/your_interface/your_theme/layout/
or
app/design/frontend/[package]/[theme]/layout
So if we I have package like 'Kaushikamdotcom' in 'app/code/local', should I have to create that same package under 'app/design/frontend/' ? I tried many patterns, but nothing worked out for me.
I am quite sorry that I have made such a blunder asking this question, but I am answering this as lots of people will be making the same mistake. Package means; in the admin side of magento open
System->Configuration->Design
Then change the configuration scope to Main website. Then select Package section, uncheck the default check box and use your package name such as "Test". Then create the following folder structure.
app/design/frontend/Test/default/layout
Place your layout xml files here. If you are using your own themes use that name instead of default.
It depends what layout-xml file you have.
If you want to build up your theme, use the local.xml file in your theme dir.
If you write an extension and want to add a block to use inside this new extension, add a layout-xml file via config.xml and add it under base/default/layout/yourname.xml
When you do it this way, your theme-related changes only appear in the theme and your extension-related changes are theme-independent
I know you can use layout filters for normal pages with urls, but upon errors the view changes while keeping the url the same, so I can't utilize a new layout based on the path. Any help would be appreciated. Thank you!
Off the top of my head:
If you look in Core > Shapes > Views, you will see two files - one called ErrorPage.cshtml and one called NotFound.cshtml. Simply copy these files and paste them into your theme's view folder.
I have not tested this method with these particular pages, but I did do something similar with the LogOn widget.
Something to bear in mind is that the contents of these files will be rendered in the Content zone of your current theme.
I'm trying to create a Custom Part that just drops text into the page. I've created a part using the GUI that I called "Side Feature" and I added a text field called "Featured". I am trying put it on the side bar which I created on my layout, but I don't know how to move it to the sidebar. It shows up on my main content.
How do I move it to the sidebar? I tried using "#Display(Model.Featured)", but that doesn't seem to work. I also read about the placement.info file, but I'm not too sure how that would work in this sense.
I couldn't find a tutorial/blog post online similar to this. Most of them were too advanced. I am very new to Orchard.
You can't without code or additional module: sidebar is a zone for widgets, not for content parts. Placement info only works for local zones within the global Content zone.
If you want to do it through code, follow this: http://weblogs.asp.net/bleroy/archive/2011/03/26/dispatching-orchard-shapes-to-arbitrary-zones.aspx
If you want to use a module, look for Origami on the gallery.
The default pagination in drupal is great, but the text links are used
<<first <previous 6 7 next> last>>
But I need to use forward and backward image buttons instead of text links. Can anyone point me in the right direction?
Depending on what portions of the pager you're interested in replacing with images, you may be able to use CSS background images, without having to override the theme function. However, in the default pager output, not all the links may have unique classes.
That said, if you're using Drupal's default pager, you can override the theme_pager function to add your image links.
If you're using the Views module, you may be using a different theming function. When in doubt, you should be able to use the Theme Developer module to find which function or template file is outputting the part of the page you're interested in theming. Theme Developer will also tell you what suggestions you can use to override the output.