A few simple CSS questions

[knowledgenotebook]

Hi,

I’m struggling with CSS but this page’s feel and look is just too plain (http://codepen.io/knowledgenotebook/pen/QwBpzW). Sorry, my bad practice of embedding in-line CSS style remains with this guy as well.

Here’re the questions.
a) How to make the 3 functional buttons currently using skyblue color to stand out more, just blue does not look good. Also, it’s desirable to remove the border for each button. How?
b) What overall background color something could we use to spice up the page just a bit? And it’s the overall feel and look of the software,
http://69.195.124.99/~knowleo9/dev/overall_feelNlook.png

Also, I should add, the page in question has a blue window container similar to the above overall feel and look page.

Thank you.

[Paulie_D]

Sorry, my bad practice of embedding in-line CSS style remains with this guy as well.

If you won’t help make it easy for to us help you then you’re just asking to get less responses.

I think you should know better by now, take a few minutes to extract the inline styles to the CSS area set aside for them in a Codepen and you improve your chances of helpful replies.

[Shikkediel]

Edit – I sometimes have a low threshold for it, lol.
Of course I do concur with extracting the CSS.

a)

A minor bit of box-shadow and a different background color?
This’ll remove the border on the buttons :

input[type="button"], input[type="submit"] {
border: 0
}

b)

Don’t think I can filter the exact question there but maybe use a subtle background image or gradient?

[Shikkediel]

Is another type of sky blue color that can do the trick?

I’d go darker (azure #007fff for example), maybe a tiny bit of text-shadow and a lightgrey background.

input[type="button"], input[type="submit"] {
color: #007fff;
background: lightgrey;
text-shadow: 1px 1px grey;
border: 0
}

The current color just doesn’t work on white. Another thing to try could be using a different font – or a larger font size.

[Shikkediel]

Glad to help out. :-)

[lic24]

great solutions!

[knowledgenotebook]

@lic24, thanks for your kind note.

[JessicaTeller]

I am new to CSS also and just starting to learn from it as well. It’s okay to be confused and make mistakes because it is a part of learning and growing right? :) We just have to be more creative and think outside the box. Make a better perspective as to what you are going to have as your output. Well thanks @Shikkediel for your very helpful advice. I’ll take note of this as well. I love CSS!

[Shikkediel]

Thinking outside the box… that would always be outline and margin, lol. Certainly CSS is great – and I don’t think there is ever really a limit to getting better at it with practice (still need a lot of that myself as well).

[knowledgenotebook]

How nice if we would be able to highlight a portion of a comment or thought piece and mark it a +1 vote !
for instance, @Shikkediel’s “Thinking outside the box… that would always be outline and margin”.

[Shikkediel]

:-)

We do have a button similar to that but only for the person who started the topic – it won’t stick on page refresh anyway.

[knowledgenotebook]

Ok. Now, I have an OT question, on Windows desktop icon (a shortcut to a program), it usually goes like this:
“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe” http://127.0.0.1:8600/knb2/
And for Mac it’s an icon on Dock. And I really love the f11 key to bring up a full browser screen without tabs etc. So,
the question is, is there an option to launch a web browser into the “F11” key mode?

Thanks.

[Shikkediel]

Happened to have this bookmarked :

Moz blog

[knowledgenotebook]

Nice! Thank you, Shikkediel.

[Author]

Posts