I have read clear is css layout property
But what about clearfix its css property or what else.
It may be use for float layout.
But I want explanation on css clearfix Is this property of css or this is user define class or what
I know the way i am asking question is confusing
But I want to know is clearfix iscss class or user defined
Thanks
After searching net I found this article
http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/
Related
I use Orchard 1.10.1. I have a CustomContentType that has a "Group" Taxonomy field . In Content-CustomContentType.Detail.cshtml alternate, I want to have a link to a certain taxonomy term. this is my code:
<a href='???'>#Model.ContentItem.CustomContentType.Group.Terms[0].Name</a>
How can I get the url to replace this '???' in above code.
Thanks in advance.
You have a few options available to you. I've just typed them all straight into the browser and Orchard is a tricky beast to navigate its model so if they blow up in your face let me know and I'll dig a bit deeper :)
Let orchard make the entire link
Looking at the TaxonomyItemLink.cshtml file you can see that you can display the link like this:
#using Orchard.Taxonomies.Models
#{
TermPart part = Model.ContentPart;
}
#Html.ItemDisplayLink(part)
So in your case you could use:
#Html.ItemDisplayLink((ContentPart)Model.ContentItem.CustomContentType.Group.Terms[0])
Just get the URL
You can use #Url.ItemDisplayUrl() to turn a routable content item into a url.
<a href="#Url.ItemDisplayUrl((ContentPart)Model.ContentItem.CustomContentType.Group.Terms[0])">
#Model.ContentItem.CustomContentType.Group.Terms[0].Name
</a>
Because it's an extension method you can't pass a dynamic so you will need to cast the type. This is why the (ContentPart) is there.
Just get the Slug
Actually, in this case the TermsPart class already has a .Slug property on it, so this might also work:
<a href="#Model.ContentItem.CustomContentType.Group.Terms[0].Slug">
#Model.ContentItem.CustomContentType.Group.Terms[0].Name
</a>
I'm not sure if the slug just contains the end bit or its full url though.
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 am using JDeveloper 11.1.2.3.0,
I have an inputFile component in my page that takes its text value from the name of some components. The problem is that that when the text is long it gets displayed all there and may even occupy the whole window. Is there any possibility to wrap this text value in this case?
I don't think <af:inputFile> has a labelStyle attribute:
You can try adding the CSS in the component's inlineStyle or contentStyle
<af:inputFile inlineStyle="word-wrap:break-word;" />
It depends if the very long text is in the content or the label of the field.
If this doesn't do the trick, you can try creating a custom skin and customizing the label or content style via the adf style selectors: af|inputFile::content , af|inputFile::label.
Btw, you need to check if word-wrap works on all browsers you're targeting.
You can try setting the labelStyle attribute of the <af:inputFile> component to wrap the contents of the label. I am not sure of the CSS style attribtue information for it, but searching on the net I found word-wrap:break-word;.
I too had this problem with af:inputFile.
Just give contentStyle="width:200px" it will solve the issue.
we can adjust the width accordingly.
I've got some issue with render flashmessenger in multiple layouts with ZfcTwitterBootstrap module.
In one module layout I render messege like this:
<div class="container">
<?php echo $this->ztbFlashMessenger()->render(); ?>
</div>
But if I render flashmessenger in another layout it doesn't get rendered. If I disable flashmessenger in first module I got rendered in another.
Is there a way to render it in all layouts ?
Thanks in advance for some answers and tips.
you have many other solutions found on web. Maybe you could find the reason of the problem.
https://gist.github.com/gpeltink/3693361
http://samminds.com/2012/08/flashmessenger-in-zend-framework-2/
Otherwise I have developed an useful module. Inside it exists an extended flash messenger, you can add to your layout.
https://github.com/remithomas/rt-extends
https://github.com/remithomas/rt-extends/wiki/Create-notifications-with-Flash-messenger-and-pnotify
I have images in my theme (in the Content/ directory) and I want to show them in different places.
My current approach is : <img src="#Url.Content("~/Themes/MyTheme/Content/Images/image.gif")" />
This works, but is not very maintainable (what if I want to switch themes, etc).
Is there an built in method, something like GetCurrentThemeDirectory() that would return the directory so I could do or something like that?
Edit: from mdm's comment, I realize that changing the theme isn't a valid concern. I really just want to avoid typing out the url for every reference
Where are you referencing the image from? Module? Another theme?
If it is from the theme that has the image, then you don't need to worry about switching themes. If it is from another theme, then the image should be a part of the theme. If it is from a module, then it would make sense to store the image as part of the module or override it in the theme (see below).
If you wanted to have the image as part of the theme, then you could have the module return a 'default' shape and then override that in the theme. There really shouldn't be any reason to reference the theme's images from a module or vice versa.
Edit after your edit
In the themes I've written, I've followed what the Orchard authors do. Rather than using <img> tags, images are placed in Styles/images. They can then be referenced using the CSS background-image attribute.
In Views/Branding.cshtml:
<div id="header"></div>
<h1 id="branding">#WorkContext.CurrentSite.SiteName</h1>
And then in site.css:
#header {
/* snip */
background-image: url(images/header.png);
/* snip */
}
Themes/TheAdmin/site.css contains plenty more examples of this method.