I have actually been pluggin away at this for sometime. I realize the concept is probably alot easier than what im getting but I just cannot for the life of me figure this out.
For a code example of what im trying to do. Using the below code
https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/Navbar.vue
https://github.com/PanJiaChen/custom-element-theme
There is a scoped style for the navbar
<style lang="scss" scoped>
.navbar {
height: 50px;
overflow: hidden;
position: relative;
background: #333;
box-shadow: 0 1px 4px rgba(0,21,41,.08);
I am trying to use the element-ui theme generation tool to override the background colors. I have been able to get all the colors to correctly switch with a toggle setting the color white like so.
$--color-white: #333333 !default;
This correctly changes the background of elements to a charcoal type color.
Now the navbar has a hard coded value of white, yet even tho I remove that I still cannot get it to change color? How do I target that navbar. Or am I just totally off the mark and doing it wrong. I am new to vue and element-ui just to be upfront.
Related
An annoying blue outline appears every time I do a click on a b-form-rating component. Any ideas of how to get rid of this? Nothing that I've tried so far has helped.
Looks like it's triggered by a :focus pseudo-class CSS rule.
You can should be able to disable them by setting them to inherit !important.
For example:
.form-control:focus {
border-color: inherit !important!;
box-shadow: inherit !important;
}
Try to use border-color with transparent value, unset the box-shadow and avoid to use !important
.form-control:focus {
border-color: transparent;
box-shadow: none;
}
This should do the trick
How about using the no-border prop ?
<b-form-rating ... no-border ...>
doc: https://bootstrap-vue.org/docs/components/form-rating#borderless
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
I have a typical link on a page. On hover, the link receives a border color and border-radius. In Safari 6, I am noticing that when the mouse leaves the link there is a very faint border color left behind. If you hover again over the link, the border gets darker and darker in some cases, even though the border-color is not set. If border-radius is not set, the issue does not occur.
I cannot repeat the issue in Firefox or Chrome (for Mac). The simplest fix I found was to specify a solid or transparent border color for the base anchor style. Could this just be a Safari rendering bug?
Link for the rendering issue: http://jsfiddle.net/zafer/msnak/4/
Try making the border-radius value equal to the padding on the anchor element and see if that doesn't help. I had the same problem in Safari 6 as well and that seemed to have fixed it.
So your CSS code would look something like this:
a {
display: inline-block;
padding: 15px;
border-radius: 15px;
}
a:hover {
background: #004184;
}
just ran into same issue and found that using even values (2,4,6,..) as radius fixed it for me, like so:
a{
color: white;
padding-right: 9px;
padding-left: 9px;
}
a:hover{
background-color: green;
border-radius: 4px;
}
regardless of different padding values.
The background-clip solution did fix the problem for me, check the details on https://stackoverflow.com/a/3447130/1200097 it is possible that your properties need to be reordered.
Can anyone help me fix some cross-browser issues? My website address is http://s423839726.onlinehome.us/index2.html. It looks fine in firefox 13, but in IE9 the "contact" button is all wonky.
Also, where does one learn how to fix cross-browser inconsistencies?
the inconsistency can also be seen in Opera. Your problem is the UL element. It hangs at that position on the right as it has display "inline" set and contains a stray A element. This combination moves your contact menu element a bit down. You should try to clean up the markup as it contains nested elements (mainly A elements) that are not strictly necessary. Another problem is, that you are mixing left and right floating. Additionally you are mixing left and right paddings and marging which may lead to different behaviour in browsers, makes calculating harder and can lead to collapsing margins problems. I'd advise you to try a more semantic markup for your menu like:
<ul id="topnav">
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
and with this simple markup you are able to style your menu. If you reach a point, where adjusting dimensions, paddings and margins of elements are not enough to style things the way you want, you may begin to introduce non-semantic elements (e.g. SPAN elements) within LI or A elements to have some more means to shift things around via CSS.
A simple approach to get your navigation styled is the following: Float each LI to the left and use only left margins/paddings to create visual space.
ul {
list-style-type: none;
height: 60px;
width: 300px;
margin: auto;
}
li {
float: left;
}
ul a {
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 50px;
text-decoration: none;
font-size: 40px;
color: #ccc;
}
ul a:hover {
color: #fff;
}
Something like that. Left border still missing. Your whole menu block (the UL) should be positioned to the right using left padding or right floating or whatever. Prefix the selectors with #topnav if you want to mitigate changing UL and LI styles elsewhere on your page. This is just a simple illustration that you do not need much markup or styles to have a horizontal menu like the one you want. Start simple and search for tutorials on horizontal menus using UL/LIs. There are plenty out there. Good luck.
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.