Design and CSS styles
Version 5.x > Design and CSS styles > Overriding style sheet on lists View modes: 
User avatar
Member
Member
sentile-oldsecond - 9/13/2011 10:17:31 AM
   
Overriding style sheet on lists
I am not an administrator on my company's web design such that I could edit the style sheet, but I do have custody over content.

I am trying to put a list into the slideshow blurb content, but I am having trouble overriding the style sheet.

My code looks as follows:

<ul>
<div style="color: rgb(213, 213, 231);">
<ul>
<li>O2 Online Banking</li>
</ul>
</div>
<li>Mobile Banking</li>
<li>eStatements</li>
<li>BillPay</li>
</ul>

The red "ul" codes were added automatically by the system after I put in the div style code. But anyway, as it stands, only the words "O2 Online Banking" are the right color in my first bullet. That's it. I want all of the BULLETS and the WORDS to be rgb 213, 213, 213. What code can I put in there to override the style sheet?

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 9/15/2011 6:56:06 AM
   
RE:Overriding style sheet on lists
Hello,

Could you please let us know the way you are adding trying to insert that HTML code? Is it via Editable region, Static HTML web part, Static text web part or in transformation?

Basically, you could try to insert the following layout in order to have all items on the same level and in the same color:

<ul style="color: rgb(213, 213, 231);">  
<li>O2 Online Banking</li>
<li>Mobile Banking</li>
<li>eStatements</li>
<li>BillPay</li>
</ul>


Best regards
Ondrej Vasil

User avatar
Member
Member
sentile-oldsecond - 9/15/2011 8:56:47 AM
   
RE:Overriding style sheet on lists
Thanks, Ondrej, but that did not quite work. I am putting this code into what I believe is an editable region. See this screenshot:
http://kenticodev.oldsecond.com/OldSecond/media/graphics/Picture-5.png

The words are white. But the bullets still come out as green. See this screenshot:
http://kenticodev.oldsecond.com/OldSecond/media/graphics/Picture-6.png

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 9/16/2011 6:34:28 AM
   
RE:Overriding style sheet on lists
Hello,

It works for me in the Editable region (on the Page tab) just fine in version 5.5.R2 of Kentico CMS. What's your current version?

Could you please re-post that images? I can't see them on their location (server not found).

As for a solution for you, it is possible that the your list items are affected by the stylesheet styles. Could you please disable them to see whether this is the case?
Please also try to use the Firebug add-on for the Firefox browser which allows you to inspect HTML elements and check applied CSS styles.

Best regards
Ondrej Vasil

User avatar
Member
Member
sentile-oldsecond - 9/16/2011 1:44:28 PM
   
RE:Overriding style sheet on lists
What code do I use to disable stylesheets?

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 9/19/2011 1:58:49 AM
   
RE:Overriding style sheet on lists
Hello,

You can do that on the Site Manager -> Sites -> Edit your site -> General tab. Here is the Site CSS stylesheet option, so please try to set it to (none) just for testing purposes.

Please let us know whether you have any findings.

PS: What about the Firebug inspection? Have you tried that?

Best regards
Ondrej Vasil

User avatar
Member
Member
sentile-oldsecond - 9/19/2011 11:57:04 AM
   
RE:Overriding style sheet on lists
I did use Firebug and I see the CSS, but I do not know what code to put in to override the CSS for the bullets.

Selecting "none" on the site General tab would disable CSS for the entire website, correct? I only want to disable the CSS for one field on a specific page.

User avatar
Kentico Developer
Kentico Developer
kentico_ondrejv - 9/21/2011 12:36:35 AM
   
RE:Overriding style sheet on lists
Hello,

You can try to style it as described here: http://www.w3schools.com/css/css_list.asp.

As for disabling your CSS stylesheet, I meant to do it just for a little while, for testing purposes. In case you want to disable it just for particular document, you would need to work around it by creating an empty CSS stylesheet and assigning it on that document in CMS Desk -> Content -> document -> Properties -> General tab -> CSS Stylesheet.

By the way, isn't your site live? If so, could you please provide us with a link so that we could see that behavior?

Best regards
Ondrej Vasil

User avatar
Member
Member
sentile-oldsecond - 9/22/2011 11:36:06 AM
   
RE:Overriding style sheet on lists
Ondrej, thank you for your help. I was able to figure this out. There was a style assigning a graphic as the bullets and I just got rid of that style altogether on our site. Although it still would have been nice to have been able to ignore that style in just one instance.