Polymer makes by default nice but airy layouts (due to paddings, margins, font sizes...).
What is the official (or clean) way to scale down all the user interface so that we can have more content on fewer surface?
I could find a quick hack with:
html {
transform: scale(0.8);
}
but this shifts all the content, leaving an empty space on each 4 borders.
I could do it with the CSS mixins. For instance to override every paper-button layout, I added the following css to the main html file :
:host {
--paper-button: {
padding: 3px;
font-size: 12px;
}
}
According to https://elements.polymer-project.org/elements/paper-button , this is injected to the end of each paper-button css.
Related
I have a file global.css in assets folder, file is imported in main.js. Styles from this file works only if i dont have same style applied in component style. For example, in component i have this
h1 {
font-size: 50px;
}
then in global.css
h1 {
font-size: 35px
}
this won't work. Is there a way to override component styles with this global.css?
Make sure your style tag within component has scoped attribute otherwise it'll override global styles.
Review: https://codesandbox.io/s/vue-basic-demo-j87nz0?file=/src/components/HelloWorld.vue
You need to look into CSS specificity to solve this issue.
Here, it's happening because the global style is applied at first, then component style comes in second, you could inspect that in your devtools and see various declarations applied to your h1 element.
There are of course advanced possibilities in CSS but writing something more specific
h1.my-cool-class { /* or just .my-cool-class */
font-size: 50px;
}
should be enough here.
You can use h1 { font-size: 35px !important; }
Or with classes
For example:
.headline-h1 {
font-size: 35px
}
Thank you everyone for answering. I had to deal with some messy css, every component had its own css style for every heading and paragraph(sizes, colors, fonts, etc.). I deleted all of these and put them in global.css file and then changed html elements to be compatible with sizes. That's it.
I currently am styling my social sharing buttons using groupings (all Facebook buttons have a set style, all Twitter buttons do, etc.). Currently, I achieve this using a massive grouping of YUI's for each button type - this makes creating new sharing buttons extremely tedious, as I have to inspect each button to find its ID. Below is the code that stylizes my Facebook share buttons. The format is identical for my other button types, just with different YUIs - woefully lengthy. However, my code is functional as is:
#block-yui_3_17_2_1_1486492076694_136568, #block-yui_3_17_2_1_1486492076694_229456, #block-yui_3_17_2_1_1486492076694_301518, #block-yui_3_17_2_1_1486492076694_346464, #block-yui_3_17_2_1_1486492076694_390386, #block-yui_3_17_2_1_1486497764071_38998, #block-yui_3_17_2_1_1486497764071_84939, #block-yui_3_17_2_1_1486497764071_127888, #block-yui_3_17_2_1_1486497764071_167750, #block-yui_3_17_2_1_1486497764071_210706, #block-yui_3_17_2_1_1486762828716_16671, #block-yui_3_17_2_1_1487613145787_165402, #block-yui_3_17_2_1_1488578082993_168899, #block-yui_3_17_2_1_1489175439402_256947, #block-yui_3_17_2_1_1489873739917_158023, #block-yui_3_17_2_1_1490053051323_201623, #block-yui_3_17_2_1_1490837162453_152647, #block-yui_3_17_2_1_1491429139219_249912, #block-yui_3_17_2_1_1491948942477_176351 {
display: inline-block;
padding-bottom: 0;
padding-top: 0;
}
Ideally, I'd like to target each button type using their respective classes to REALLY consolidate the amount of code I have written (and make future additions much more efficient). I've tried everything I could think of, but nothing seems to work.
I'm currently working on the Squarespace platform.
Your problem might be because of Squarespace's default styles. When targeting elements, CSS prefers the more precise selector:
.social-icon {
background-color: red;
/* Less preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* More preferred */
}
You can override this by using !important:
.social-icon {
background-color: red !important;
/* More preferred */
}
html body div.social-area img.social-icon {
background-color: blue;
/* Less preferred */
}
so when you style your social icons, use !important to override Squarespace's default styles.
.social-icon {
display: inline-block !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
Hope this helps!
I am trying to increase bootstrap 3.0 navbar height which is used with fixed top behavior.
How can I do it?
Without seeing your code it is hard to help but in Bootstrap 3 typically,
This is the less variable #navber-height and #navbar-padding-vertical will adjust the height of the navbar.
But in my current Bootstrap app I have it set up different using
header.navbar {
height: 54px;
}
The easiest thing to do would be to inspect element on the navigation bar then look at the css to see where the height value is. Adjust it to the desired height.
Then create a rule in your css with !important to override the existing Bootstrap css.
This is another example without less.
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
Create new css file and put your overrides in it.
<link rel='stylesheet' href='/stylesheets/bootstrap.css'/>
<link rel='stylesheet' href='/stylesheets/overrides.css'/>
inside overrides.css
If this css rule exists inside Bootstrap when you inspect element then override it in the overrides css file you have added now.
remember use !important
.navbar-fixed-top {
height: 70px !important; /* Whatever you want. */
}
If you are using the .less or .scss version, you can edit the following $navbar-height variable in code:
https://github.com/twbs/bootstrap/blob/master/less/variables.less#L360
If not, you need to override it with a rule by statiing:
.navbar {
height: {new height};
}
It seems impossible to override the CSS of the <body> tag of an EmberJS application.
It inherits the ember-application class, and this has many of the browsers default values, including a margin of 8px.
I want to get rid of this margin around <body>, but none of these two methods worked:
body {
margin: 0;
}
body.ember-application {
margin: 0;
}
!important does not help either.
Any idea of what I could do? Removing the body tag itself do not work, as Ember will add one.
The ember-application class has no css associated with it and just putting in
body {
margin: 0;
}
is enough to handle it. It's likely you have another CSS element winning the CSS war, or you have an inside element pushing the padding making it appear so.
Example of margin 0 working: http://emberjs.jsbin.com/vaquhuwo/1/edit
I'm currently developing a plugin in wordpress the problem is its layout with different themes the layout of plugin changes.
How to make the plugin css wont change whatever themes is applied?
#playbutton
{
z-index:99;
bottom:15%;
padding: 10px;
right:0px;
position:absolute;
font-size: 95%;
width:24%;
height:10%;
text-align:center;
color:white;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#9900000 0, endColorstr=#99000000);
-ms-filter: 'progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)';
border:1px solid #bfbcc5;
}
Here is css which changes when different themes is applied? I'm currently using % in width or height .
There are a lot of things to consider when you want an element's layout to look the same even when using different themes:
1.) Specificity
Research what specificity is all about and how you can use it to your advantage
If you want to make your StyleSheet more dominant, place the tag after the less
dominant sheets.
Make sure your class names are not used by others - trick: use class prefixes
If all else fails, the !important keyword is your friend.
2.) Parent Layouts
Say the playbutton's parent element is affected by the theme and that the #playbutton is using percentages, chances are the button will take on the parent's size as it is still dependent. It would be easier if the parent is not affected by the theme so you may need to go back to #1.
I don't know what the total markup of this project's page but I hope this helps.
You need to create wrapper for you plugin and use namespaces. I don't know what you are developing but for example if its video player plugin it could be something like this:
html:
<div class="my-video-player">
<div class="foo">
<div id="playbutton"></div>
</div>
<div class="bar">
</div>
</div>
now html code in place, you need to use namespaces also for your css:
.my-video-player {
/*wrapper styles go here (and also baseline styles: font-size for example), for example: required width and height*/
}
.my-video-player .foo {
/*now these styles are based on 'my-video-player' styles*/
/*so if you use width in percentage its based on the my-video-player width*/
}
.my-video-player .bar {}
.my-video-player #playbutton {}
This way your css will not collide with other styles. Also if you need javascript do it like this:
var myVideoPlayer = {
foo: function() {
},
bar: function() {
}
};
usage:
myVideoPlayer.foo();
Note: Javascript namespaces can be overriden by external code so the best way would be to follow modular javascript pattern, but thats out of scope of this question.