I am building a website using vue.js have many users, and i need to add option for each user to change his store page style like background and button colors ,and so on..
so what are the steps i need to follow to build it using vue.js?
.column {
display: table-cell;
float: left;
width: 10%;
padding: 11px;
border-bottom: 0.5px dashed #ccc;
border-right: 0.5px dashed #ccc;
page-break-inside: avoid;
}
hint: style changes no need to be huge or applied directly , i am thinking of make separated page for style sitting , and when save data it will apply to the target page .
and thank you all..
Related
I'm new at Vuejs and Nuxt. I'm using a library facebook-login-vuejs,
it works but I need little bit modifying like the button width adjustment.
I tried to give a "fbutton" class in this component :
<facebook-login
class="button fbbutton"
appId="102023513468xxx"
loginLabel="Facebook"
#login="fbOnLogin"
#logout="fbOnLogout"
></facebook-login>
and here my CSS :
.fbbutton button{
width: 100px;}
But nothing gonna change
here in this picture, the width doesn't change. Seems like set by facebook
this one also, the button still out of the container
Please any body can help me how to solve this, thanks
Checking the facebook-login-vuejs source code you clearly see "the html structure".
You need to override the "default" css rule.
.facebook-login button {
border: none;
color: #fff;
position: relative;
line-height: 34px;
min-width: 225px;
padding: 0 15px 0px 46px;
background-image: linear-gradient(#4c69ba, #3b55a0);
}
I am trying to create a grid system where content will be populated dynamically, so I will not know the exact amount of elements when created. What I have so far is each element is added to a flexbox container that holds 3 elements in each row. If there are more than 3 elements then the next element would go to the next row and so on. With that said what I am trying to do is add borders around each element minus the outside ones. So it would look something like this.
__|__|__
__|__|__
| |
The issue I have been having is I have been adding a bottom border and a right border to every element and then would add a border of 0 to every 3rd child using nth-child(3n). But that doesn't fix the issue with the bottom border on the bottom row and it comes out looking like this for me:
__|__|__
__|__|__
__|__|__
I am not sure the best way to target that bottom border and remove it because since the content is being populated dynamically I won't know the exact amount of elements that will be on that bottom row because it could be 1, 2, or 3 elements. So what would be the best way to get the results I am looking for? Is it possible to do this with CSS alone or will I need javascript to do this? Here is the code I am currently using:
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexElement {
width: 33.33%;
border-right: solid 2px #e1e1e1;
border-bottom: solid 2px #e1e1e1;
&:nth-child(3n), &:last-child {
border-right: none;
}
}
I recommend adding the border to the top and excluding the first three elements.
Solution
.flexContainer {
display: flex;
flex-wrap: wrap;
}
.flexElement {
width: 33.33%;
border-right: solid 2px #e1e1e1;
// Styles start on the 4th child
&:nth-child(n+4) {
border-top: solid 2px #e1e1e1;
}
&:nth-child(3n), &:last-child {
border-right: none;
}
}
See JSFiddle
I am using materializecss framework for my website. I am using a scrollspy function for the navigation bar. But I want to change the default color of red to white and change from vertical line to a horizontal line underneath nav links.
Now I have this
What I want is
JS code for scrollspy function.
$(document).ready(function(){
$('.scrollspy').scrollSpy();
});
I don't know which specific classes to change.
If you don't want to use a side table of contents on your website, you can change the css for the table-of-contents class.
Go to the materialize.css file, and find the following code:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-left: 2px solid #ea4a4f;
}
Then you can replace it with this:
.table-of-contents a.active {
font-weight: 500;
padding-left: 18px;
border-bottom: 2px solid white;
}
To see the results, you have to link the materialize.css file instead of materialize.min.css in your html. In a production environment, you will need to minimize the modified materialize.css file.
Maybe it's a little late, but I hope it will help.
of-content class, you can add css like this
nav ul li a.active {
border-bottom: 1px solid #333;
}
means, when element a is active, it will give border-bottom
I am trying to change the border color of a textarea. I have used jQuery for doing so. Previously, I was using .css("border-color","rgb(250,0,0)"), and it was working fine. Now I am told not to use CSS in Javascript and use Class.
So I created one class named:
.redBorderColor{
border-color:rgb(255,0,0);
}
and in jQuery I used:
.addClass("redBorderColor")
When I checked it in browser, then I find class name is there in textarea's class attribute, but border color does not change. I have seen in firebug following class, from Pure CSS which was already implemented in project:
.pure-form select, .pure-form textarea {
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
}
Question is that, I want my new style class to be implemented and previous one should be not considered or ignored. As of now, my style is cut off by firebug
Firstly note the typo; redBorderClass in your JS code should be redBorderColor.
That said, you also need to make the redBorderColor CSS class more specific so that it over-rules the other CSS styling. You can use either !important:
.redBorderColor {
border-color: rgb(255, 0, 0) !important;
}
Or you can make the selector more specific:
.pure-form textarea.redBorderColor {
border-color: rgb(255, 0, 0);
}
Note that the latter is better practice.
You have
.redBorderColor
while you are adding:
redBorderClass
Issue seems to me is a simple typo. You have defined your css selector as .redBorderColor, here you can see Color.
On the otherside when you are adding the class with js/jquery you have used redBorderClass not redBorderColor.
If you wanna ignore or not considered the previous class, then remove the current class and add your class.
.removeClass('pure-form').addClass("redBorderColor");
Then, put this into your class to keep the other configuration.
border-radius: 4px;
box-shadow: 0 1px 3px #ddd inset;
box-sizing: border-box;
display: inline-block;
padding: 0.5em 0.6em;
I am using jQuery UI Autocomplate plugin as it is on the first example. I also have jQuery UI Theme style sheet referenced for other plugins.
This is the input I am using with that:
CSS:
div.formvalue {
background-color: #eee;
border: 1px solid red;
padding: 10px;
margin: 0px;
}
div.paddedInput {
padding: 5px;
border: 1px solid black;
background-color: white;
}
div.paddedInput input {
border: 0px;
width: 100%;
outline:none;
}
HTML:
<div class="formvalue">
<div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>
Here is my situation:
As the above div element serves as an input element (on the style perspective), the autocomplete list looks a little awkward because it sets itself for the input element.
I dug the source code which jQuery UI is creating for the autocomplete function and there is ui-autocomplete style class but as I said but I couldn't figure auto what should I override.
Any thoughts?
UPDATE:
Here is the jsfiddle sample:
http://jsfiddle.net/tugberk/YxRYe/4/
If you want to overwrite your style, you can use !important keyword as this code
div.paddedInput input {
border: 0px!important;
width: 100%;
outline:none;
}
I guess the main question here is why you would have the outer div element serve as an input element from a style perspective in the first place.
If this is not a requirement, just do this. Otherwise we'll have to use JS to set the width of the dropdown to the width of the div and adjust the position of the dropdown. A rather hacky solution i.m.o. I am not aware of a way to specify what element the dropdown should attach to since this is rarely what you want.