I'm using SaaS for building my own webshop. The problem is that i dont know any code. I wish to make my menu bar look more stylish. The SaaS platform offers CSS editing but i can't change the html.
The current menu bar has this css;
#menu {
padding: 5px 0 5px 0;
background: #005775;
margin: 0 0 8px 0;
}
How can I make this better looking. I tried changing the opacity, but every time i add the word opacity the code breaks and the memu disappears.
My current Design looks like this;
http://imgur.com/a/ptSuA
I would really like to make the Menu bar a bit less rough and make it look more friendly.
Sorry for my horrible grammar and lack of knowledge.
try using
background-color:rgba() instead of opacity
this adds transparency to the menu bar.
example
background-color:rgba(255,0,0,0.5);
the last value adds transparency.
When you added opacity to #menu, it affect on All his Childrens and menu disappears.you must use of background-color:rgba() or background-color:hsla()
#005775 = rgba(0, 87, 117, 1.0)
#005775 = hsla(195, 100%, 23%, 1.0)
So :
#menu {
width: 200px;
height: 200px;
padding: 5px 0 5px 0;
margin: 0 0 8px 0;
background:rgba(0, 87, 117, 0.3);/*/ I use 0.3 /*/
}
<div id="menu">I Am Menu</div>
Try this. As said by others, this will reduce the opacity of the text in the menu too.
#menu {
padding: 5px 0 5px 0;
background: #005775;
margin: 0 0 8px 0;
opacity: 0.5; // Change this value between 0(transparent) -> 1(100% visible);
}
Related
On this fiddle (https://jsfiddle.net/9v38rju6/3/), whenever I hover the cursor over an element in the second column, Firefox 87 on Windows starts switching back and forth between two renderings of the list, very rapidly.
Lower right panel must be ~850px wide to reproduce bug.
This does not happen under Chrome (or Edge).
The problem disappears when I comment the rule
li {
margin: 0.25em 0 0.5em;
}
Can someone explain what is going on?
Dude, this is because you change the height of the border AND the margin-bottom on :hover!
Some browsers change the layout on an specific point (what is in your hand, with CSS) and could get ugly like your problem here.
If you hover over one of there links, the height of the link grows 2px more (because of border-bottom-width 3px instead of 1px) and the entire list-element also grows 2px. Now the browser has to "re-render" the layout of your list and height of elements. Also,
you reset the margin-bottom from 0.5em to -2px.
This does not remove 2px from the margin-bottom, this set the margin-bottom to 2px! Could be kind of confusing.
ul.index {
columns: 15em;
}
li {
margin: 0.25em 0 0.5em;
}
a[href] {
text-decoration: underline;
border-bottom: 3px solid transparent;
}
a[href]:hover {
text-decoration: none;
border-bottom: 3px solid;
}
<div>
<ul class="index">
<li>#bottom-center
</li><li>#bottom-left
</li><li>#bottom-left-corner
</li><li>#bottom-right
</li><li>#bottom-right-corner
</li><li>#charset
</li><li>#color-profile
</li><li>#counter-style
</li><li>#custom-media
</li><li>#custom-selector
</li><li>#font-face
</li><li>#font-feature-values
</li><li>#font-palette-values
</li><li>##hasinstance
</li><li>#import
</li><li>##isconcatspreadable
</li><li>#keyframes
</li><li>#layer
</li><li>#left-bottom
</li><li>#left-middle
</li><li>#left-top
</li><li>#media
</li><li>media
</li><li>#nest
</li><li>#page
</li><li>#property
</li><li>#right-bottom
</li><li>#right-middle
</li><li>#right-top
</li><li>#scope
</li><li>#scroll-timeline
</li><li>#supports
</li><li>#top-center
</li><li>#top-left
</li><li>#top-left-corner
</li><li>#top-right
</li><li>#top-right-corner
</li><li>##toprimitive
</li><li>##tostringtag
</li><li>#viewport
</li><li>#-webkit-keyframes
</li></ul>
</div>
It happens as the margin changes the height of the element and the item does not suit into the first column anymore.
It does not happen if you remove the margin from either top or bottom for each li element like this:
li {
margin: 0.25em 0 0 0;
}
or
li {
margin: 0 0 0.25em 0;
}
Not sure why, but it happens with 2 and 3 columns.
I think I could work around it by using padding instead, like this:
li {
padding: 5px;
}
This way, the element height remains the same as the padding applies to the inner of the li element, not to the outside as the margin does.
Hey so my friend runs this web company. He told me he wanted to make some changes to his site. And if I showed him I could handle it, he'd hire me for some stuff.
Most of it I handled fine. But I can't figure out this for the life of me.
If you go to his site (linked below) and hover over the round plus icon under recent work. The shadow switches to blue. I want it to stay orange though.
Any ideas?
p.s. i changed the icon color, shadow color etc... just can't figure out how to change this one thing.
*link removed
Thanks!
relevant code below :
.posts-grid.works li .featured-thumbnail .zoom-icon::after {
background: #E35F33 none repeat scroll 0% 0%;
}
.posts-grid.works li .featured-thumbnail .zoom-icon {
box-shadow: 0px 0px 0px 6px rgba(227, 95, 51, 0.2);
}
Your issue is one of CSS specificity:
Here's the selector you're trying to overwrite:
.posts-grid.works li .featured-thumbnail .zoom-icon:hover { ... }
Here's your selector:
.posts-grid.works li .featured-thumbnail .zoom-icon { ... }
If you can't or don't want to remove the first selector, make your selector more specific.
Ref:
Specificity - CSS | MDN
You can remove the following code:
.posts-grid.works li .featured-thumbnail .zoom-icon:hover {
-webkit-box-shadow:0 0 0 6px rgba(90,206,205,0.4);
-moz-box-shadow:0 0 0 6px rgba(90,206,205,0.4);
box-shadow:0 0 0 6px rgba(90,206,205,0.4);
}
This seems to fix the issue.
Is there a way to influence only separate box-shadow properties?
For instance I have these classes to set button size and button color
.btn {
background: gray;
font-size: 15px;
box-shadow: 0 2px 0 0 dark-gray;
}
.btn--primary {
background: blue;
box-shadow: 0 2px 0 0 dark-blue;
}
.btn--secondary {
background: red;
box-shadow: 0 2px 0 0 dark-red;
}
.btn--large {
font-size: 20px;
}
But now, I also want a larger box shadow on .btn--large
Problem is, I have multiple colored buttons, so I would need some sort of "box-shadow-y-size property"
How do you work around this problem? The only way I can think of right now is to do something like this...
.btn--large.btn--primary {
box-shadow: 0 4px 0 0 dark-blue;
}
.btn--large.btn--secondary {
box-shadow: 0 4px 0 0 dark-red;
}
There is sadly only one way to define a box-shadow, but in your case there might be a work-around. If you don't specify a colour for your box-shadow it will default to the colour of the color attribute. Perhaps this is something you can make use of.
For example, if you want to be able to have a differently coloured box-shadow while still retaining the original text color, one way you can achieve this by applying the box-shadow to a :before pseudo element instead of the element itself.
JSFiddle with pseudo element solution
How to remove the border around the square?
How it looks:
My HTML:
<input id="black" type="image" src="html5-canvas-drawing-app/images/color-swatch-brown.png" onClick="changeColorBlack()">
My CSS:
#black{
border:none;
outline:none;
background:none;
padding:0;
}
To disappear with it, set it's thickness to 0 instead:
border: 0;
border: 0;
put in the My css file....
For whatever reasons, stylesheets text/css are not very universally-predictable. Still, this should clear you all around:
img#black {
border: 0px solid #00000;
padding: 0 0 0 0;
margin: 0 0 0 0;
}
Toss that in your style.css or whatever. Not all of it may be necessary at the moment, but it will protect you from weird inheritance problems that may arise down the road.
I am told that the good pattern is to put all styles in css files because blah and blah (you can search the reason in google since it's a very popular idea).
However, I am a person always asking why when people trying to sell. Based on my own experience with some project. I think putting all styles in files are harder to maintain, since there are some inheritable or page specific styles.
For example I have a control to display terms and conditions:
.TermsAndConditions
{
background-clip: padding-box;
border: 1px solid #CFC2A7;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
position:absolute;
top: 0px;
left:0px;
}
When I need to use it on two of my pages I have to create two specific classes for it:
.HomePageTermsAndConditions
{
position: static;
bottom: 20px;
right:30px;
}
.ImagePreviewPageTermsAndConditions
{
position:absolute;
top: 50px;
left:60px;
}
Home page:
<div class="TermsAndConditions HomePageTermsAndConditions">
</div>
Preview page:
<div class="TermsAndConditions ImagePreviewPageTermsAndConditions">
</div>
Absolutely no styles inline, but there are some problems:
Position information is not shared at all, so the performance gain is very limited based on the network speed nowadays. (e.g. clear: left)
Some styles are not even inheritable, so we have to create css classes for each level, which doesn't save effort.
Hard to maintain, since css classes in files may be inherited or overridden by on another page, when editing a class it’s hard to know what effect it may cause, so it takes times to do testing/debug/fixing round trip.
Hurt performance, some css class will remain there when the page using it is removed. It takes effort to clean them.
So what I proposed is to move page/tag specific styles (like position info) inline like this:
.TermsAndConditions
{
background-clip: padding-box;
border: 1px solid #CFC2A7;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
}
<div class="TermsAndConditions" style="position:absolute; bottom: 20px; right:30px;">
</div>
<div class="TermsAndConditions" style="position: static; top: 50px; left:60px;">
</div>
Benifits we can get:
No page specific information in classes. Doesn’t hurt performance since only several styles are in the page
Easier to maintain, since inline style has higher priority, editing an inline style will immediately bring the effect on UI. Also you don’t need to worry about breaking other pages.
When we need to remove a page, we usually don’t need to clean the css. Since page specific css are in the page, it goes with the page. Things in the css files are more likely to be shared.
More object-oriented. Since css classes in files have no page specific information, they are more like a control by itself. It’s easy to plug in to other pages.
For example:
When I need it on a new page, I just copy the html and change the style inline:
<div class="TermsAndConditions" style="position: absolute; top: 50px; left:60px;">
</div>
This is my idea against "putting all styles in css files". I am hoping to see your ideas about it, either good sides or bad sides.
Thanks
I think the best thing is to mix the things...
Usually I use classes, but when i need to specify position/dimensions, i use styles.
Sometimes I use existing classes but mixing it with style, when i need to override class settings.
I think the only case when i will not use style, is when i want to create totally dynamic layout and to have the ability to change it using CSS only.
The benefit of having your styles outside of your HTML is this.
Lets say I have a navbar on every page for example:
<ul class="main-navigation">
<li>my link</li>
<li>my link</li>
<li>my link</li>
<li>my link</li>
</ul>
My styles would then be something like this:
.main-navigation ul li {
color:#000;
}
Now lets say I have the same navbar, but with inline styles this time.
<ul>
<li style="color: #000;"></li>
<li style="color: #000;"></li>
<li style="color: #000;"></li>
<li style="color: #000;"></li>
</ul>
Or lets say I have my styles embeded into my HTML like so.
<style type="text/css">
.main-navigation ul li {
color:#000;
}
</style>
Depending on how your file management is set up. Most likely you would not want to go through every single HTML file to change something as simple as your navigation color. When you could just go into the style sheet and change one line of code.
Hopefully this make sense. But I guess to summarize I would say in some cases it is probably more practical. However I personally believe that separating HTML, CSS, Javascript, and PHP makes troubleshooting a lot easier.