How can I make Diazo to use theme's css file?
Whenever I replace something using (for example):
<replace css:theme="#footer" css:content="#portal-footer" />
It doesn't use the #footer style I defined in the theme's css file. Since I didn't enable Plone's css files either, it behaves as if there was no style at all. I found a workaround by renaming the style on my css file to match the one in Plone (i.e: renamed #footer to #portal-footer) but then what is the purpose of the theme's css file?
Thanks in advance.
The replace statement replaces the entire tag found by the theme selector with the tag found by the content selector, attributes too. So if you want to maintain the original class you will have to append/prepend/replace only the children of that tag:
<replace css:theme-children="#footer" css:content-children="#portal-footer" />
More info:
http://diazo.org/advanced.html
Related
I have an html file containing just the menu and include it on my html page using embed tag:
<embed type="text/html" src="menu.html">
How can I apply css class to the code being included? I tried adding it to the menu.html file but that did not work
The embed tag isolates the source file, so CSS in the parent page will not cascade into the embed element.
You will have to load the CSS file inside the menu.html file for it to apply to the content in that file.
Try Inline CSS classes in menu.html file.
Figured out the issue - I needed to set the width of embed tag to see the whole thing as by default the width did not allow me to see the entire file
I've created child themes before using the same method, but for some reason with Bootstrap3 themes (I've tried multiple) I can't override the CSS. I'm currently using this Flatty theme.
I'm thinking maybe the trouble comes from the fact that there is a style.css in the parent but the styles I'm attempting to change are in a css folder in a file called main.css. I've tried duplicating this folder and file as well, but no luck. I've also tried just putting the classes I want to change in my child style.css.
Any help would be greatly appreciated!
Your CSS file needs to load after Bootstrap's CSS file. That way, your styles with the same name as Bootstrap's styles will take precedence.
I'm currently trying to make some CSS changes to a WordPress child theme.
When I use the chrome developer tool, it tells me which line in the style.css file the elements refer to. For example, style.css:17.
However, on certain CSS elements, instead of referring to style.css it refers to (index). For example, (index):54. What does (index) refer to and where would I normally find it to make the changes?
Thanks
Wordpress theme options usually appends a stylesheet to the head of the html document.
<head>
<!-- added by Wordpress, usually found in functions.php -->
<style>
...theme specific styles...
</style>
</head>
Is there a way that I can define css so that, for example all paragraphs (<p>) on this specific page are formated according to that css, but not other pages on the plone site?
Inline-css does work, but that's pretty annoying for larger tables I'd like to style.
You should use
ploneCustom.css or related custom CSS file which is merged with other CSS files in portal_css registry
Use <body> CSS classes to target a single page only
More <body> CSS can be added for custom needs. What kind of page you need to target with CSS.
http://collective-docs.readthedocs.org/en/latest/templates_css_and_javascripts/css.html#adding-new-css-body-classes
Also you can include CSS as <head> viewlet if needed but this approach is not recommended.
http://collective-docs.readthedocs.org/en/latest/views/viewlets.html#viewlets-for-one-page-only
I'd like to use Bootstrap from Twitter in my ASP.Net MVC 3 application. I downloaded bootstrap.css and added it to my project in the Content folder. I opened _Layout.cshtml and added a link to the file:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
When I run the application no stylesheet is applied. How do I reference both Site.css and bootstrap.css from my _Layout.cshtml file?
I think the issue here is the inheritance, cascade and specificity CSS. Bear in mind that Twitter's Bootstrap resets all styles.
'If Site.css is before bootstrap.css only bootstrap is applied (which I didn't realize at first). Reverse the order and both work. Strange'
Actually, this makes complete sense. Site.css is loaded with all it's style declarations and immediately afterwards Bootstrap.css is loaded which resets most(if not all styles) thus declarations within Bootstrap.css will be applied. It only appears that both work probably because Bootstrap.css might not have a defined style or Site.css has very specific style defined using html ids or classes.
Reverse the order (with Bootstrap.css first), you are now resetting all styles first and then other styles are being applied. Since Site.css is loaded second, the styles defined therein will be applied to your site.
For your own interest, try to define an inline style within your html doc that has been defined within both 'Site.css' and 'Bootstrap.css', and see how the style gets applied by adding/removing the style definition.
I tried finding a good supporting explanation for CSS cascading, and the best graphic and simple explanation I found was this which notes
If selectors within external and embedded style sheets conflict but
have the same specificity, the final tie-breaker is based on the order
of apperance of the rules: the rule declared later wins. This applies
not only to the order of rules within a single sheet, but also to the
order that the sheets are linked, imported or embedded in the head of
the (X)HTML page.
You can copy and paste the CSS from the bootstrap file into your single .css file in order to cut down on the HTTP requests.
Just place all the bootstrap code at the very beginning and then your personal CSS following it, for organizational purposes.
However what you've done should work. Can you post an example on JSFiddle of what your markup looks like?
For more information see:
http://www.w3.org/TR/html4/present/styles.html#h-14.3