I'm looking for a website, key-combination, or package which does this:
Is there an easy way to tidy up my css code, and put all the class properties together. I mean if I have code css like this:
body {
padding-top: 50px;
background-color: #499eb9;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
Is there a quick way to make it look like this:
body {
padding-top: 50px;
background-color: #499eb9;
margin-bottom: 60px;
}
This of course is in much longer css code. I have searched on google, but couldn't work out how to word this.
Related
I am not able to change the arrow size in vue-tour. While I am able to change it by inspecting in Chrome, in CSS I am unable to do it as it has some runtime generated ID associated with it.
.v-step__arrow[data-v-e97491e4], .v-step__arrow[data-v-e97491e4]:before {
position: absolute;
width: 10px;
height: 10px;
background: inherit;
}
The v-step GitHub is available here: https://github.com/pulsardev/vue-tour/blob/master/src/components/VStep.vue
You can make use of v-deep. It helps in applying the styles to the child-components directly.
If you are making use of sass then you can apply styling as:
::v-deep .v-step {
background-color: black;
}
If you are simply using css then you can use v-deep as:
>>> .v-step {
background-color: black;
}
I cannot figure out how to get some basic CSS styles to apply to my blog. I'm trying to customize my blog summary page. I want the "read more" button centered and for the picture to show correctly. For some reason the picture keeps moving and it cuts it half off. I've tried multiple things to different classes and nothing works. It was originally on the left with the text to the right of the thumbnail and I'm moving the picture above the text if that means anything.
I've tried text align center for the button in multiple divs and it doesn't budge. Can anyone help? I can only adjust CSS not HTML on my Squarespace site, and the limited styles they give you doesn't allow me to adjust any of this. I'm not a coder, I just kinda understand it enough, so any help is appreciated.
Here is the page: https://www.themodernrenovator.com/blog
Here is custom CSS I added to make the button a circle, but can't get it to center:
text-align: center;
display: table;
width: 100px;
border-radius: 30px;
padding: 12px !important;
background-color: #f0ede9;
margin: auto;
}
.view-list article .excerpt-thumb {
width: 100%;
position: inherit;
}
.view-list article .excerpt-thumb .intrinsic .content {
position: inherit;
padding-bottom: 0px;
}
.intrinsic {
padding: 0px !important;
}
.entry-title {
text-align: center;
}
.article-dateline {
text-align: center;
}
article .post span.inline-action {
display: inline-block;
text-align: center;
}
.article-meta {
display: none;
}
I'd recommend centering the "READ MORE" button using the following CSS, inserted via the CSS Editor:
article .post span.inline-action {
display: inline-block;
text-align: center;
}
The "cut off" image problem, on the other hand, should not be corrected with CSS because it is an issue with Squarespace's ImageLoader function. To correct it, add the following via global Footer code injection. If code injection is not available to you, insert the code via a Markdown block in the footer of your website.
<script>
// Fix Squarespace ImageLoader Bug.
function fixImages() {
var images = document.querySelectorAll('img[data-src]');
var i = images.length;
while (i--) {
ImageLoader.load(images[i], {load: true});
}
}
fixImages();
window.Squarespace.onInitialize(Y, function() {
fixImages();
});
</script>
Your images are cut off because you have a top: value that's currently set to -300px. I can't tell where it's being affected just by looking at this, but somewhere in your styling you have the child img of your excerpt-image getting a top value being set.
To center your 'read more' link: .inline-read-more { margin: auto; }
I'm trying to create a word cloud type output with only CSS. Basically, I have a div box and a X number of text elements which need to go inside the box. However, they need to be of different font size. For example, let's say I have this:
.box { display: flex; width: 40vw; height: 30vw; overflow: hidden; }
.text1 { font-size: 5vw; }
.text2 { font-size: 4vw; }
.text3 { font-size: 3.5vw; }
.text4 { font-size: 3vw; }
I can position the text elements inside the box but I have a few questions regarding the layout. My lack of thorough CSS knowledge prevents me from telling if this is possible at all with just CSS or not:
How can I avoid collision of the text elements?
How can I ensure they stay within the boundaries of the box?
I believe it's not possible to make Word Cloud using CSS only, you need to have Javascript function or lib like WordCloud2.js that handle element positioning.
Demo:
https://timdream.org/wordcloud/#wikipedia:Cloud
References:
https://github.com/timdream/wordcloud2.js
https://github.com/timdream/wordcloud
I have the following Jade template:
extends layout
block content
h2 Characters and Portraits
div(id="portraitsBox")
- var portraits = ["Clown-Fox", "Dragon-Bear", "Fish-Bear", "Deer-Wolf", "Salamander-Ant", "Side-Duck"];
for filename in portraits
- var url = "/images/portraits/" + filename.toLowerCase() + ".png"
div(class="characterBox" id=filename)
h3(class="characterName")= filename
img(class="portrait" src= url)
link(rel='stylesheet', href='/stylesheets/characters.css')
Which pulls from the following CSS:
#portraitsBox {
border: 1px solid black;
padding: 10px;
}
.characterBox {
position: relative;
padding: 5px;
border: 1px solid black;
width: 350px;
display: inline;
}
.characterName {
padding-top: 0px;
width: 150px;
font: Arial;
text-align: center;
}
This works fine if I take out display: inline, but every time I try put it back in I get this garbage:
http://www.orderofthemouse.co.uk/characters
And the container div resizes itself to 169.9px wide!!?
What's going on here? I checked with Firebug and it doesn't look like any of the Bootstrap default stylings are over-riding my own CSS (they're called in the extended layout file) or anything like that, and there's nothing in the cascade that should be causing it, to my reckoning. When I look at the generated HTML all the elements are nested as expected, which was my next consideration so it doesn't seem to be anything silly I overlooked...?
Do you want to get this result: http://screencast.com/t/c06yM3cr
I am confused because you said that it works fine if you disable display inline, and when I tried that they were still displaying as block.
If your desired result is what I have in the sceenshot, all you have to do is set the wrapper #portraitsBox to display: flex.
i'm building a custom theme for wordpress and saw this in the default 2010 style.css file:
#wrapper {
margin: 0 auto;
width: 940px;
}
#wrapper {
background: pink;
margin-top: 20px;
padding: 0 20px;
}
now this is the default code (except the pink). when i try and collapse it, which seems logical, it makes quite a difference.
what i can't figure out is WHY you'd declare the same element twice like that? i've never seen that before...
WR!
It proves useful when you want to apply shared properties at multiple elements. Another useful application is adding stylesheets from multiple sources Example:
#head, #foot {
height: 100px;
}
#foot { /*Another foot*/
color: red;
}
Second example: CSS from multiple sources:
/* External stylesheet: common.css */
body {
background: yellow;
}
/* Inline stylesheet, overrides external stylehseet */
body {
background: pink;
}
When two properties have the same specificity, the lastly declared property will be applied.
It just overrides previously declared properties.
wrapper will now have margin:20px auto 0 auto (Top Right Bottom Left).