Chapter 5 of railstutorial.org (http://ruby.railstutorial.org/chapters/filling-in-the-layout#top) talks about how to create a basic layout for a web site. I use it as a resource for putting a Rails web site together.
I'm having difficulty customizing the navbar/header. While changing the font color of the "sample app" logo is straightforward enough (just change the RGB setting of the color parameter under #logo), how do I change parameters in the rest of the header? How do I change that black bar to be some other color, such as dark blue/green/red/purple/brown/etc.? How do I change the color of the menu links (Home/Help/Sign Up) from the default gray to yellow? Or orange? Or some other color?
If you want to change color or customize style of twitter bootstrap (e.g header, link etc), you can use generator for twitter bootstrap..
Generator
twitter bootstrap generator
StyleBootstrap
bootstrapthemeroller
decioferreira
Or if you don't know class/id potition of style, you can use inspect element on your browser and see element using class/id of style
Example
Header using blue color
.navbar-inner {
min-height: 50px;
padding-right: 20px;
padding-left: 20px;
background-color: #45aeea;
background-image: -moz-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#54b4eb),to(#2fa4e7));
background-image: -webkit-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: -o-linear-gradient(top,#54b4eb,#2fa4e7);
background-image: linear-gradient(to bottom,#54b4eb,#2fa4e7);
background-repeat: repeat-x;
border: 1px solid #1990d5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff54b4eb',endColorstr='#ff2fa4e7',GradientType=0);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.065);
box-shadow: 0 1px 4px rgba(0,0,0,0.065);
}
Link header using white color
.navbar .nav>li>a {
float: none;
padding: 10px 15px 10px;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 0 #ce4213;
}
Bootstrap themes
You can see some amazing bootstrap themes here
.navbar {
.navbar-inner {
background-color: #2c2c2c;
background-image: none;
}
}
Source Change background color in navbar fixed menu bar Bootstrap
You can take a look at this too.
Related
Link:- https://stackblitz.com/angular/qmedkbvramy?file=app%2Fcdk-virtual-scroll-overview-example.ts
I am trying angular material scollbar look as in the attached picture. But I can't figure out, how to do this.
Material by default doesn't provide any styles to change the scrolling
You can use this css to change the scrollbar style
cdk-virtual-scroll-viewport::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar
{
width: 12px;
background-color: #F5F5F5;
}
cdk-virtual-scroll-viewport::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #555;
}
Stackblitz demo: https://stackblitz.com/edit/angular-jkw9ac
I upgraded to JQM 1.4, but I liked the theme of 1.3 much better. There is a classic theme in 1.4, which has the same colors. But the navigation buttons in the corners (header) look completely different.
Is it possible to reproduce the same look for those buttons in 1.4?
It is hard to get it exact as jQM 1.3 enhanced buttons using nested spans which are no longer there in 1.4. However, with a little CSS you can get pretty close. Given a header with buttons:
<div data-role="header" data-theme="b">
Home
<h1>Theme B</h1>
Contact Us
</div>
Assign a new class to the buttons (btn_round in my example) and then create the following CSS:
.btn_round
{
-moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
-webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
-moz-border-radius: 1.5em !important;
-webkit-border-radius: 1.5em !important;
border-radius: 1.5em !important;
background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
background-origin: padding-box;
background-size: auto;
border-color: rgb(17, 17, 17);
box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
text-shadow: rgb(17, 17, 17) 0px 1px 1px;
}
.btn_round:after{
-webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}
This adds the gradient background, rounded corners and shadows that were present in 1.3.
Here is a working DEMO
NOTE: the demo includes CSS for both the dark theme and the light theme. Tweak the CSS to get your desired look.
I am using zurb foundation framework, I would like to change the triangle image of the drop down on the top-bar nav menu to a cog. How can this be done?
Are you using the vanilla CSS and JS, or the foundation gem? Assuming it's the gem go into foundation_and_overrides.scss and Remove the triangle using:
$topbar-arrows: false; //Set false to remove the triangle icon from the menu item
Then you can add custom css to put a cog there instead. Below is the original css for the triangle, which was creating using a very small inset border, if you want to make sure you're matching the proper margins etc,
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 0;
height: 0;
border: inset 5px;
border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
border-top-style: solid;
margin-top: -2.5px;
top: 22.5px; }
Edit Here is some CSS which gets nearly there, except margin-right being overridden by some of foundation's css... Should help though
.top-bar-section .has-dropdown > a:after {
content: "";
display: block;
width: 15px;
height: 15px;
margin-right: 0px;
background-image:url('https://cdn1.iconfinder.com/data/icons/imod/512/Hardware/pignon.png');
background-size:15px 15px;
background-repeat:no-repeat;
background-position:center;
}
I'm trying to place a shadow under a popup panel that defined as follows:
<popupset id="mainPopupSet">
<panel id="autoTagBookmarksPopup" noautohide="true" fade="none" backdrag="true" level="float">
<hbox id="titleBox">
<spacer flex="1"/>
<image id="closeImage" align="end"/>
</hbox>
...
I wasn't succesful with the: box-shadow
any one has sugestions?
Can you paste the css that you were using for box-shadow?
Try this...
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
This is an old question but I had the same issue and want to share my solution so this might be of any help for others.
I have not found a way to place the box-shadow on a panel directly. It seems, that everything visually outside the panel element will be cutted (the shadow is placed outside).
However I then defined the shadow for the first child and added some margin so the shadow will be visible.
For the given example, this might look something like this (untested):
panel#autoTagBookmarksPopup {
background-color: transparent;
border-width: 0px;
}
panel > hbox#titleBox {
margin: 5px;
border: 1px solid #bbb;
background-color: #fff;
box-shadow: 2px 2px 3px #888;
}
I'm trying to create a pointy button like this:
So far, I was only able to achieve this:
I thought increasing the horizontal border-radius would make it sharp, but all it does it make the roundness longer.
HTML
<a class="button">Back</a>
CSS
.button {
display: inline-block;
height: 3em;
padding: 0 0.7em 0 1.4em;
border: 0.1em solid black;
border-radius: 3em 0.4em 0.4em 3em / 1.5em 0.4em 0.4em 1.5em;
background: -moz-linear-gradient(
top,
#fff,
#ccc
);
}
You don't want to be using border-radius as that assigns a quarter-circle shape to each specified corner. Instead you hack it with specific border-width properties, as illustrated in this site: http://www.howtocreate.co.uk/tutorials/css/slopes
However I feel you're solving the problem the wrong way; what you're doing is best done using a background image, which is how the iOS-style Back buttons are implemented in iPhone-for-web stylesheets. If you need something resolution-independent then you can use SVG without penalty now.
Having thought about it more, this is a more elegant solution that allows much more effective styling and the use of just one HTML element. Using this method, we can achieve the results in your concept completely.
HTML
Back
CSS
a.button {
text-decoration:none;
color:#111;
text-shadow:0 1px 0 #fff;
font-weight:bold;
padding:10px 10px;
font-size:14px;
border-radius:0 8px 8px 0;
-webkit-border-radius:0 8px 8px 0;
float:left;
margin-left:30px;
margin-top:20px;
position:relative;
font-family:verdana;
color:#3b3d3c;
border:1px solid #666;
border-left:0;
background: -moz-linear-gradient( top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( top , #eee 0%,#bbb 100%);
}
a.button:after {
content:"";
width:25px;
height:25px;
background: -moz-linear-gradient( left top , #eee 0%,#bbb 100%);
background: -webkit-linear-gradient( left top , #eee 0%,#bbb 100%);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
display:block;
position:absolute;
top:5px;
left:-14px;
z-index:-1;
border:1px solid #666;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
a.button:after{
border-left:0;
left:-13px;
}
The last rule is for Chrome, which otherwise renders the result slightly differently.
Hope this helps.
You can create such an effect using 2 elements side by side wrapped in the anchor tags.
<style type="text/css">
.arrow-left {
width:0;
height:0;
border-top:30px solid transparent;
border-bottom:30px solid transparent;
border-right:30px solid orange;
float:left;
}
.button {
float:left;
height:60px;
background:orange;
width:50px;
line-height:60px;
font-weight:bold;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
</style>
</div><div class="button">Back</div>
I'm not sure if it's the most refined solution, but it certainly looks the same as your concept art and functions as intended.