HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


[RESOLVED] - Browser displays - ocPortal - CSS

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#65203 (In Topic #14014)
Avatar

Community saint

I considered entering this under 'Theming', but it may turn out to be something 'fixable' in CSS, so here it is.

Various custom-CSS edits were required for my 'dark' display, and I have gradually overcome most of them. Mostly it has been compromises as far as changes to 'text-on-background' to get things to display as one would expect of text on a dark background. HOWEVER, as most of us are aware, several of the CSS properties encapsulate various elements of the display, and changing the display for one element will often break it for another. The following is an example, and I have yet to figure out how to be selective about my choices. Perhaps somebody a bit more switched on can offer advice …

Display#1 - IE9


Display#2 - Opera


Display#3 - FireFox


Any suggestions?

 :(

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#65204
Avatar

Community saint

Greetings,

I am not sure if this will help, but I make the use of !important to force the style I want there to play through.

So doing something like

Code

color: #0b1216 !important;

Maybe that will work for you?

Legends of Nor'Ova: A site powered by ocPortal; home of the Legends of Nor'Ova tabletop RPG wiki and community.

Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!

"Those who want help should first be willing to give help."
Back to the top
 
Posted
Rating:
#65205
Avatar

Community saint

Thanks for the tip mythus!

You so very nearly got your points back with that one - but sorry to say it didn't work. The 'title_panel' link is tied to other links - change one and it changes all.

My 'title_panel' link is on a light background; the other links are on a dark background. Thereby hangs the tale!

I'll find a way to give you back those points, yet!!

 :lol:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#65206
Avatar

Community saint

*nods* I see I see…

Try this…

Code

.standardbox_title_panel a:link{
color #0b1216 !important;
}

.standardbox_title_panel a:visited{
color #0b1216 !important;
}

.standardbox_title_panel a:hover{
color #0b1216 !important;
}

Change the color for hover if ya want, but keeping link and visited should keep the color the same despite being clicked on.

You can do the same with the other links to change their color if need be for the light background. For example…

Code

.standardbox_title_panel a:link {
    color: #FFFFFF !important;
}
.standardbox_links_classic a:visited, .standardbox a:visited, .standardbox_main_classic a:visited {
    color: #363636 !important;
}
.standardbox_title_panel a:visited {
    color: #ECECEC !important;
}
.standardbox_links_classic a:hover, .standardbox_title_panel a:hover, .standardbox a:hover, .standardbox_main_classic a:hover {
    color: #FF0000 !important;
}


Legends of Nor'Ova: A site powered by ocPortal; home of the Legends of Nor'Ova tabletop RPG wiki and community.

Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!

"Those who want help should first be willing to give help."
Back to the top
 
Posted
Rating:
#65288
Avatar

Community saint

I've tried all your suggestions, mythus!

Can't seem to split the 'link' calls sufficiently for the link in the 'title_panel' to override the others. There must be a way, but the time to track it down isn't conducive to 'productive' site maintenance, so I'll give it a rest for now.

There'll probably be a 'Zebedee-moment' one of these days when I will see it clearly, but not just now!

 :(

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#65339
Avatar

Community saint

Yeah it would take using the !important tag at the end of your various font colors, so lots of work and testing to make sure you get everyone that you need lol…..

I do wish I knew of a diffeernt way to solve your problem, this is simply what I do. Maybe some themeing god (aka Jean) might beable to help?

Legends of Nor'Ova: A site powered by ocPortal; home of the Legends of Nor'Ova tabletop RPG wiki and community.

Like ocPortal? Want to thank Chris and gang somehow? Then help out in the chat room! It really needs your help! Just open it in a tab everytime you open your web browser, and when you hear a "ding", check it out!

"Those who want help should first be willing to give help."
Back to the top
 
Posted
Rating:
#65347
Avatar

Community saint

NP!

I will post here if I 'find' a solution.

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#65378
Avatar

Community saint

Hi Fletch!

I don't know if I got this right, but from the examples you've submitted, it looks like your problem exist only with Firefox. If it is the case, you could use this "hack/filter" to target Firefox only. I don't know if it will take care of the problem between dark and light backgrounds, but maybe this hack could allow you to find a color that's appropriate for both, or target the background color more specifically.

Here is an example with one element and how you could test this for Firefox (none of the other browsers should be affected):

Code

/*declaration for all browsers*/
.standardbox_title_panel {
color: #0b1216;
}

/*Any Firefox versions*/
@-moz-document url-prefix() {
.standardbox_title_panel {
color:red !important;
}
}
Edited: I forgot to include mythus recommendation "!important" to my first code, since without it, it can possibly be overruled by other cascading declarations. (thanks mythus!)
Back to the top
 
Posted
Rating:
#65381
Avatar

Community saint

Hi Jean,

Thanks for taking the trouble to have a look at this along with mythus. I have saved your tip for future reference, because I didn't need to use it this time.

I had the solution all along; I simply didn't proof-read my CSS edit. There was an extra comma where there shouldn't have been one, and when I corrected that the problem went away (but not before giving it the 'three-fingered-salute' of CTRL+ALT+SHFT+refresh)

Thanks for coming to the rescue, guys. If you two hadn't kept pushing, I would probably have left it for a while longer … and longer … and longer!

 :$


Ermmmm….. - (the cockup and the solution)
 .standardbox_title_panel a:link, .standardbox_title_panel a:visited, {
   color: #0b1216 !important;
}
.standardbox_title_panel a:link, .standardbox_title_panel a:visited {
   color: #0b1216 !important;
}

 :thumbs:

Take my advice. I'm not using it!

View my working ocPortal site (version 9.x.x) at Anglo-Indian Portal
Back to the top
 
Posted
Rating:
#65392
Avatar

Community saint

Glad you finally saw the smudge(,) in the code Fletch:lol:
Back to the top
 
There are too many online users to list.
Control functions:

Quick reply   Contract

Your name:
Your message: