My objective is simple enough i just want to modify Title="New" to bigger size and color, i did apply with CSS but it doesnt works :(
<style type="text/css">
#g_523a7cea_3249_4ac1_b2bc_48efea016ad1
{
color: Blue;
}
</style>
<WebPartPages:DataFormWebPart runat="server"
Description="" ListDisplayName="" PartOrder="2"
Default="FALSE" HelpLink="" AllowRemove="True" IsVisible="True"
AllowHide="True" UseSQLDataSourcePaging="True" ExportControlledProperties="True"
DataSourceID="" Title="News" ViewFlag="8" NoDefaultStyle="TRUE" AllowConnect="True"
DisplayName="Employee News" PageType="PAGE_DISPLAYFORM" FrameState="Normal"
PageSize="-1" PartImageLarge="" AsyncRefresh="False" ExportMode="All" Dir="Default"
DetailLink="" ShowWithSampleData="False" ListId="645a16cc-7fe6-4247-9800-2170e1479074"
ListName="{645A16CC-7FE6-4247-9800-2170E1479074}" FrameType="Default" PartImageSmall=""
IsIncluded="True" SuppressWebPartChrome="False" AllowEdit="True" ManualRefresh="False"
AutoRefresh="False" AutoRefreshInterval="60" AllowMinimize="True" ViewContentTypeId=""
InitialAsyncDataFetch="False" CssStyleSheet="" MissingAssembly="Cannot import this Web Part."
HelpMode="Modeless" ListUrl="" ID="g_523a7cea_3249_4ac1_b2bc_48efea016ad1"
ConnectionID="00000000-0000-0000-0000-000000000000" AllowZoneChange="True"
IsIncludedFilter="" __MarkupType="vsattributemarkup" __WebPartId="{A7755E5E-BE3F-4415-A163-BAA925625A0E}"
__AllowXSLTEditing="true" WebPart="true" Height="" Width="">
The ID is for the DVWP. There is no style that you can apply to a whole DVWP in one fell swoop. Inside the DVWP there will be lots of other CSS classes for the different elements and they will be applied, overriding anything, even if you could use the web part ID for a CSS format.
A DVWP typically displays in a table. There are different classes and styles for TH, TR, TD and so on. If you want to change the appearance, then you need to tackle these classes for the table elements.
replace script with style. script is for javascript. style is for css
<style type='text/css'> ... </style>
Render the page and see what ID you have in your HTML code, then apply the CSS. I'm almost sure that the ID is different, and that's why it doesn't work (happens almost everywhere, where web controls are being used, especially in ASP).
Related
I've used gridsetapp.com in the past to create responsive grids, but on the one I've recently tried creating just isn't working and I can't figure out why.
The link to the css is here; https://get.gridsetapp.com/37722/
Just trying to get something basic:
<html><head>
<link href="https://get.gridsetapp.com/37722/" rel="stylesheet" />
</head>
<body>
<div class="d1-d5" style="background:#aaa">ffggg</div>
</body>
</html>
Any thoughts?
Despite an unusual CSS link, the browser should recognize the CSS file your referenced.
However, looking at your reference, you are just trying to apply CSS to the class d1-d5. However, as best I can tell, there is no exact match in the CSS file to Just d1-d5. Use the Development tools (F12 on most browsers); they are your friend. It will show you what CSS is applied at that moment including, any applied through JavaScript or Linked files.
With CSS, you need to make sure that you call out exactly what the browser can identify, but not more (unless going for a higher order of precedence). For example, the most you could call out to select your d1-d5 is:
html body div.d1-d5{...}
Whereas in you linked CSS file, I see a lot of parents or children when searching d1-d5, such as .d1-d5 .d1,.d1-d5 .d2,.d1-d5 .d3,.d1-d5 .d4,.d1-d5 .d5.
If you wanted the last one in this chain (.d1-d5 .d5), you would need an HTML such as:
<html>
<body>
<div class='d1-d5'>
<div class='d5'>
This text will have the CSS applied.
</div>
</div>
</body>
</html>
The CSS written as .d1-d5 .d5 literally means "select the element with class d5 as a descendent of an element with class .d1-d5". Your HTML doesn't match any of the classes in the CSS file, including the parent and child selectors. If you were to try the above HTML, you would see width:18.05273834%; applied (which isn't a very obvious thing to see... why not try background:yellow; or something like that for an easy verification).
Finally, why are you inline styling when you have the CSS? This is bad form, and only appropriate if you can't control the CSS file.
I am including styles in normal way like this:
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
this styles has a lot of styles which destroy my main view, it applies to body element, is it possible to applay the style only to one particular div?
Put that <div> into a separate page and include bootstrap CSS only in that page.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/boostrap.css" type="text/css" />
</head>
<body>
<div>This is your DIV</div>
</body>
</html>
Your main page won't be touched by that and you'll be able to display that div inside your main page simply using an iframe, change (for example) this:
<div>This is your DIV</div>
To this:
<iframe src="url of the other page"></iframe>
Of course you may need to change little bit the logic of your page to accommodate this (primary I guess because of server side C# code, for client side JavaScript code it should be easier because the come from the same domain).
Yes, you can do that by ID:
<div id="myDiv"></div>
and then the CSS would be:
#myDiv { ... }
and that will apply that style to anything named myDiv. You could also use classes:
<div class="someClass"></div>
and then the CSS would be:
.someClass { ... }
and that will apply that style to anything with that class attached.
Based on what you're describing, surrounding the generality of the CSS that's breaking the already defined CSS, you're going to want to get rid of those general element styles and use ID's because it sounds like you're trying to merge some CSS.
You try to remove all styles of body with javascript code, and after that, after you add a name/id to the body style in your correct css, set this as class attribute of your body. (js code too after the document is completely loaded)
Another (stupid) solution depends on what do you have in the css file. Do you can edit the /css/boostrap.css, simply replace all body word with ".body1" (fe => make a class from it)?
I want to apply CSS specific to <f:selectItem> in <h:selectOneMenu> to be displayed in a different style.
e.g. I want every option of coffee in the list below to be displayed in a different color.
<h:selectOneMenu value="#{user.favCoffee1}">
<f:selectItem itemValue="Cream Latte" itemLabel="Coffee3 - Cream Latte" />
<f:selectItem itemValue="Extreme Mocha" itemLabel="Coffee3 - Extreme Mocha" />
<f:selectItem itemValue="Buena Vista" itemLabel="Coffee3 - Buena Vista" />
</h:selectOneMenu>`
Can anyone help me out here?
The <f:selectItem> renders a HTML <option> element. It has very limited CSS styling support. The color property is not among them. Even more, it works in MSIE only, not in other webbrowsers. There is however no way to give each <option> element its own style attribute by JSF, so closest what you can get is applying a CSS rule on all options and accepting that it works in MSIE only.
<h:selectOneMenu styleClass="mymenu">
with
.mymenu option {
color: red;
}
Your best bet is to replace the dropdown by a <ul><li> with a good shot of CSS/JavaScript which mimics it to look like a dropdown. Some JSF component libraries has such a component, such as PrimeFaces' <p:selectOneMenu>. Check the Custom content example in its 3.0 showcase.
I’m not familar with JSF, but I assume the <f:selectItem> is not what gets sent to the browser.
You’ll need to figure out what HTML is sent to the browser for that JSF tag, and apply your CSS to that.
i have a submit button with the code inside a form
<li>
<input id="zip" name="zipcode" type="submit"
class="zip-button" value="Find" tabindex="{counter name=tabindex}"/>
</li>
.zip-button{
height:30px;
------}
.zip-button:focus,.zip-button:hover{------}
for some reason the zip is not getting any style.but if manually add it in jquery like
$("#zip").css({"height":"30px",...});
its working.As am very new to styling i couldn't figure it.
Sometimes the cascade in CSS is a possible reason for the that case. Another rule with higher precedence is able to overwrite the definition. Firebug is a great tool for "debugging" css code.
It shows, how the browser interprets the style sheets.
Is your css directly in the page like that? if so, that is the reason. You need to use inline styles, a style tag or an external css file.
inline:
<input style='height:30px;' ...
style tag:
<html>
<head>
<style type='text/css'>
.zip-button{ height:30px; }
</style>
...
external file
sometimes we might be referring to minified css(abc.css.min) file in which some classes might be missing (my case)instead of the original source css.this might result in styles missing for few class which are absent in css.min ....we can find out this using FireBug...in this case we need to go back and set reference right...[am a beginner so bare with my technical terms usage]
I have an ASP:Label control on my page, and I would like to give it some CSS formatting. I know I could give it a CssClass name, however, it seems wrong because I want to give it a specific positioning therefore I'm looking for something more similar to the regular "id" attribute of html elements.
The ID of the label is the one used by the ASP, but in the actual html produced, I get a different ID.
Any suggestions?
Thanks.
The next version of ASP.Net will make it easier to specify an exact clientID for the control. At the moment, you have several options to work around this issue:
Inline Styles
<asp:Label runat="server" ID="MyLabel" style="..." />
CssClass
Just use a css class, as you mentioned in your quesiton. Nothing stops you from making those unique if you have to.
Write a handler to serve your style sheet
When you write your style sheet, leave placeholder in the file for client IDs. Then use an http handler to substitute in the actual rendered IDs on each request. This isn't exactly simple because the style sheet request is separate from the html page request, but it is certainly possible and so worth mentioning.
Use a container
Since a label renders as a span tag, if that span is unique within a specific naming container you can select it that way:
<div id="MyContainer"><asp:Label ID="MyLable" runat="server" /></div>
And in your style sheet:
#MyContainer span { /*...*/ }
Use a container + a class
If the container is not specific enough, you can use the class just to narrow it down within that container:
<div id="MyContainer"><asp:Label ID="MyLable" runat="server" CssClass="MyClass"/></div>
and in your style sheet:
#MyContainer span.MyClass { /*...*/ }
ASP.net essentially breaks the CSS ID selector. To get around this sometimes I will place this id in the CssClass attribute.
<style type="text/css">
input.first-name { /* style me */ }
</style>
<asp:TextBox runat="server" ID="firstName" CssClass="first-name" />
You can also add multiple class names in the CssClass attribute
<style type="text/css">
input.first-name { /* style me */ }
input.text-input { /* because ie 6 won't do input[type=text] */ }
</style>
<asp:TextBox runat="server" ID="firstName" CssClass="first-name text-input" />
I try as much as possible to not use inline style or to use the additional styling attributes provided by the controls.
Your only options are to use CssClass or inline styles. As ASP.NET auto-generates the ID's of server side controls you should never try to second guess what these will be. It can be a major pain getting Webforms to work with elegant CSS layouts.
ASP.NET 4.0 will introduce the ClientID property that should make it easier to work with ID attributes in the future.
I think you can do something like:
<asp:Label ID+"lblID" style=" [whatever style you want goes in here "] runat="server />
Remember when the control gets rendered, it gets rendered as with the ctrl.etc....
Or if you are doing positioning, can't you wrap the label in a <div>
Yeah - a major headache with web forms - the id is made up of all the contentsections, panels etc that the label (or other control) sits within.
your best bet really is to add a CssClass to the control.