The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Invision color coding - requires CSS help

View previous topic View next topic Go down

Invision color coding - requires CSS help

Post by Guest on December 26th 2010, 11:59 am


  1. I have some colors on my forum that have black text on dark grey buttons. I would like the text to be white.

    << Next to the search image, their is text that can't be seen. Same with the tiny red border box, their is text in there that cannot be seen.
  2. The background for the quick reply box is white. I would
    like it to be black with a white font.

  3. The code box, spoiler box, and quote box all have clashing colors.



    I want the spoiler and quote box to look like the code box (colors). However, I want the background color of the boxes to be #444444. which is a light grey color.
Forum Link: http://the-en.editboard.com
CSS Link: http://the-en.editboard.com/101-ltr.css?pop=1

Please help by providing answers with CSS codes. I am using invision so please do not attempt to "help" by telling me how to modify the templates or using the ACP color options (which i already went through). I need help with the CSS coding for these problems. Thanks in advance to those who would help me. Smile

Guest
Guest


Back to top Go down

Re: Invision color coding - requires CSS help

Post by kirk on December 27th 2010, 7:40 am

change you main test color to white,
then add this to your css.

Code:
input,textarea, select {
  color : #000000;
  font: normal 15px Verdana,Arial,Helvetica,sans-serif;
  border-color : #ededed;
  background-image: url();
}

 

oh and if the css dose not work that way the first time then just add another one of these above the code } but it should work the way it is now.

let me know how you make out. i am like snowed in at friends house with no power and his laptop is about to die Sad SO if that dose not work for some reason your going to have to give me a lil time to get back to you



Last edited by kirk on December 29th 2010, 7:44 pm; edited 1 time in total

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: Invision color coding - requires CSS help

Post by Guest on December 27th 2010, 8:50 am

Same here man, we're getting like 3 feet of snow out here. Unfortunately that code did not work, on anything. I saw no changes in anything while that code was active.

Guest
Guest


Back to top Go down

Re: Invision color coding - requires CSS help

Post by kirk on December 27th 2010, 6:32 pm

dang it, it works on every version but phpbb3?

but now that i am looking at it more i dont think that would have helped much anyway Sad

see if we changed the drop down menue field color to white that would help for the search section. but then it's going to mess up your jump to forums menue


do you have css in your css sheet?
if so post your css in code tags here so i can look at it.
then if not i will have to message ankillien or gangstar to see if they know?

do you happen to know what skin that is and what page it is on. i will need to install the skin on my test forum to help try to figure it out better.


Last edited by kirk on December 29th 2010, 7:43 pm; edited 1 time in total

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: Invision color coding - requires CSS help

Post by Guest on December 27th 2010, 8:15 pm



Last edited by Dion on February 22nd 2011, 10:24 pm; edited 1 time in total

Guest
Guest


Back to top Go down

Re: Invision color coding - requires CSS help

Post by Guest on December 27th 2010, 11:38 pm

@ Kirk, my current forum is in phpBB3 but I am working on a new version for my forum with Invision. The link to my test forum and CSS page is on the OP.

@ Dion, thanks for that code, it worked great, now I can use that to make adjustments Smile

I have made some modifications on my CSS and combined the codes Dion has given me. This is the new link to my CSS: http://the-en.editboard.com/47-ltr.css?pop=1

Now I just need to change the text color of the font in the text box. And the font color of the "preview & send" buttons. Here is a screen shot below:


Guest
Guest


Back to top Go down

Re: Invision color coding - requires CSS help

Post by Guest on December 28th 2010, 1:17 pm

*UPDATE* I had been working
on this layout for a while, i managed to fix everything, however I come
across more problems after solving the others.

  • There are some buttons that the text appears white and the button is grey, like the "send" button on the chatbox.
  • There are some fields that are white box like the area you type
    the topic title, description, all of the profile fields except the
    "comments" field box. I would like to make all those text boxes black
    with a red border and white font text. The text is white but
    unfortunately so is the background.
  • The text editor while in WYSIWYG mode has a black font and i'm not
    sure how to resolve that. Also the text editor is thinner(shorter), as
    in, less space while typing your message while I'm in WYSIWYG mode.

Guest
Guest


Back to top Go down

Re: Invision color coding - requires CSS help

Post by Guest on December 28th 2010, 8:47 pm

To solve your editor problems, stop using the (buggy-as-hell) WYSIWYG editor. Very Happy

You're having problems with buttons and text fields because several INPUT types (button/submit, text, file, etc) are used on a board, and you're trying to use the same CSS on all of them. Start using attribute selectors for the different INPUT types (input[type="text"], input[type="submit"], etc) to set the proper CSS.

Guest
Guest


Back to top Go down

Re: Invision color coding - requires CSS help

Post by Guest on December 28th 2010, 9:06 pm

Yup, I fixed everything after I made the post last night, I seperated the fields, with the aide of the Firebug add-on for firefox I highlighted the area I wanted to modified and received the CSS then I broke it down with this code:
Code:
textarea {
  color : #FFFFFF;
background-color:black;
  font: normal 15px Arial;
  border-color : #B50000;
}

input {
  color : #FFFFFF;
background-color:black;
  font: normal 15px Arial;
  border-color : #B50000;
}

select {
color:white;
background-color:black;
border:1px solid #C71010;
cursor:pointer;
font-family:Arial;
font-weight:normal;
padding:1px;
vertical-align:middle;
}

My only problem now is WYSIWYG mode. The text color doesnt seem to want to change away from black. Also the font is not even on ariel. I was forced to modify the WYSIWYG mode with a light grey background to be able to see the text. I like WYSIWYG mode on by default because its easier to manage post. It's also easier for members when they are copying images or a set of text from somewhere else or especially when adding tables, seeing all the codes can be annoying, but I think its out of my hands, I'm unsure how to edit the WYSIWYG mode. I even tried this code:

Code:
#textarea_content iframe#text_editor_iframe,#text_editor_textarea {
    background-color: #A8A8A8;
        color : #FFFFFF !important;
        font: normal 15px Arial;
        border-color : #B50000;
    }

and the only part that was accepted was the background of the text field. the font color or style never changed, even though I added "!important" to the code. -___-

Guest
Guest


Back to top Go down

Re: Invision color coding - requires CSS help

Post by kirk on December 29th 2010, 6:18 am

oh brother.

you have enough css you think... lol
I was not able to look at that the other day because it would not go to the page for me.


But i think it may have to be adjusted somewhere from the start of your INVISION BASIC COLOURS to the end of it.. not sure yet, this is much css... lol

kirk
Forumaster

Male Posts : 11037
Reputation : 651
Language : English,Vulcan,Klingon, Romulan,& Gorn

Back to top Go down

Re: Invision color coding - requires CSS help

Post by Guest on January 2nd 2011, 9:08 pm

Okay, so this is how my forum looks when WYSIWYG mode OFF:



And this is my forum with WYSIWYG mode ON:



As you can see, the background color, font color, font style, is different and the size of the text box is smaller.

I have used this code to try to adjust the text editor while WYSIWYG mode ON:
Code:

#textarea_content iframe#text_editor_iframe,#text_editor_textarea {
    background-color: #A8A8A8;
        color: #FFFFFF !important;
        font: normal 15px Arial;
        font-family: Arial;
        border-color: #B50000;
    }

As you can see, the font style, and color codes don't even work. The only part of that code that worked is the background color.

I want to make the background #444444 and the text white. I want the font to be Arial and the text editor box to be bigger (as it looks when WYSIWYG mode off.) I can't seem to figure this out at all @_@

Guest
Guest


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum