I'm using Bootstrap CDN. From the 3 rules, the last 2 ones don't work. Neither the image is resized nor the heading change its font color.
HTML
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Custom styles -->
<link rel="stylesheet" type="text/css" href="./stylesheets/portada.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="section1">
<h2 class="text-center">Heading</h2>
<img class="img-responsive" src="./images/8.jpg">
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
CSS
.section1 { // Working
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ // Not working
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ //Not working
width:20px;
}
Try this, although what you have should work also
.section1 h2{
color: #985475;
margin-top: 20px;
background-color: red;
}
I noticed 2 issues in your code.
First the CDN should not be loaded over http, but https. For
cross domain issues when loading it it's better to use just the //
without the http or https. That way it will load without giving crossdomain issues.
For instance: <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
Second is that you are using comments which should be /* */
instead of // single slashes because they are on the same line with
some CSS code.
Look after fixing these how it looks:
.section1 { /* Working*/
background-color: #363b48;
color: blue;
height: 100px;
}
.section1 .text-center{ /* Working*/
color: #985475;
margin-top: 20px;
background-color: red;
}
.section1 img{ /* Working*/
width:20px;
}
DEMO
http://jsfiddle.net/a_incarnati/undmcszz/9/
I can't tell for sure, but I would bet the problem lies in portada.css as it is (presumably) available on your local env, but not on the online code editors.
Css rules have weight depending on specificity. Even when you supply new rules on top of older ones, the weightiest rule will be applied. See this site to help calculate specificity: http://specificity.keegan.st/
Your HTML should has the next code at the first lines:
<!DOCTYPE html>
<html>
<head>
Related
I'm trying to style body, header and form tags in my ASP.NET Web App using Razor Pages, CSS Isolation. Styles created in scoped CSS file (_Layout.cshtml.css) for some HTML tags are not working. The same for other components files. Adding a class for those tags and style class selectors in scoped CSS file also doesn't work.
Code - a part of _Layout.cshtml:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - RazorTest</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/_Layout.cshtml.css" asp-append-version="true" />
<link rel="stylesheet" href="~/RazorTest.styles.css" asp-append-version="true" />
</head>
<body>
<header>
<nav>
<div>
<img src="" alt="">
</div>
</nav>
</header>
<div class="container">
<form action="">
<input type="text">
</form>
<main role="main" class="pb-3">
#RenderBody()
</main>
</div>
<footer class="border-top footer text-muted">
<div class="container">
© 2022 - RazorTest - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div>
</footer>
_Layout.chstml.css:
body {
background-color: #444;
}
header {
border: 10px solid red;
}
form {
border: 10px solid cyan;
}
input {
border: 10px solid greenyellow;
}
nav {
border: 10px solid blue;
}
div {
border: 10px solid black;
}
main {
border: 10px solid green;
}
img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
Let me show that on SS's:
_Layout.cshtml and _Layout.cshtml.css files
Browser output
Everything works well when I move my CSS file to wwwroot/css directory and link it in _Layout.cshtml file. Styles for those tags also works when added to site.css file. Screenshots:
_Layout.cshtml and _Layout.cshtml.css files
Browser output
Why styles for some tags are not working when added in scoped CSS file?
If you use .AddRazorRuntimeCompilation() for hot reload, try build without it.
Beside the tag-helper issue mentioned above, it is a build step.
Just one thing to note, CSS isolation is a build step, so it doesn't work with Razor Runtime Compliation
Beside tag-helper issue mentioned above, scoped css is build time
Faced the same issue and found this article.
I encountered similar behavior a few times when testing CSS isolation in ASP.NET 6 with Razor pages.
I noticed that not all HTML element receive a scope identifier and therefore are not affected by the scoped CSS file.
Here's a part of my final [PROJECT_NAME].styles.css file (included as link element in the page layout):
form[b-l6oslukat8] {
background-color: orange;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
And here is related part of the final HTML file where the identifier (b-l6oslukat8) should be but isn't:
<section b-l6oslukat8="" class="full page">
<form data-form-type="login">
<input b-l6oslukat8 type="text" id="Username" name="Username">
<input b-l6oslukat8 type="password" id="Password" name="Password">
</form>
</section>
Looks like this is a case with your final HTML/CSS as well. It seems to me it's a bug in the implementation of CSS isolation in .NET 6.
Why styles for some tags are not working when added in scoped CSS file?
Maybe iy is not enough tou take precedence.
You can try to use either specificity or the natural cascade to override the styling,so that it may be enough to take precedence.For example,you can change:
img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
to
body > div > img {
width: 100px;
height: 100px;
border: 10px solid orange;
}
And if you want to change the style which cannot use either specificity or the natural cascade,you can try to add the style into the view,for example:
<style>
body {
background-color: #444;
}
</style>
WordPress theme I am using has some inline css in the header and one of the things I am trying to change is the header top/bottom padding. In the inline css its listed as:
<head>
...
<style type="text/css" data-type="vc_custom-css">
#site-header:not(.shrink) .site-title { padding: 60px 0 !important; }
</style>
</head>
<body class="home page page-id-24236 page-child parent-pageid-5 page-template-default logged-in admin-bar wpb-js-composer js-comp-ver-4.12.1 vc_responsive customize-support">
<div id="page" class="layout-fullwidth">
<div id="site-header-wrapper">
<header id="site-header" class="site-header" role="banner">
<div class="container container-fullwidth">
<div class="header-main logo-position-left header-layout-fullwidth header-style-3">
<div class="site-title">
<h1><a href="#" rel="home"></h1>
</div>
</div>
</div>
</header>
</div>
</div>
</body>
Obliviously, #site-header:not(.shrink) .site-title {... !important} is not going to work in my styles.css.
I have tried the following and it still doesn't work:
[style]#site-header:not(.shrink).site-title { padding: 1px 0 !important; }
How do I get it to override?
Style blocks that aren't from the stylesheet stink. I truly despise it when theme developers put them in their theme. The only thing worse is inline styles (ie <div style="padding: 5px !important;">). Those are virtually impossible to overcome.
In your case, there's a couple of hack-tastic way to overcome this hacky issue.
In your child theme's functions.php file, you can use the following (Admittedly hacky) solution:
// We're adding a HIGH priority of 9999 which should cause this to be output AFTER the theme's bad styles.
add_action('wp_head', 'fix_bad_theme_styles', 9999);
function fix_bad_theme_styles() { ?>
<style type="text/css" data-type="vc_custom-css">
#site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
</style>
<?php }
If that doesn't work, an even hackier way would be to put the style in the footer. It'll work, but it's not best-practice (as if any of this solution is!):
add_action('wp_footer', 'fix_bad_theme_styles');
If you are already using a child theme you can override a specific file e.g. footer.php
So you would create a file of the same name in the same directory and copy over the code you need
Try adding more specificity to your rule, like:
body .anotherParentClass #site-header:not(.shrink).site-title { padding: 1px 0 !important; }
Example: https://jsfiddle.net/robsilva/wx113Lxo/
You forgot a space between .site-title and :not part. Try this instead :
#site-header:not(.shrink) .site-title { padding: 1px 0 !important; }
I've started out trying to build a HTML 5 website but have ran into a problem with CSS. Below is a MCVE of the issue:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
div.content {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 75%;
}
div.topbar {
background-color: #777777;
border-bottom: 1px #000000 solid;
color: #FFFFFF;
padding: 5px;
}
</style>
<div class="topBar">
<p>MCVE</p>
</div>
<div class="content">
<p>Here is some content.</p>
</div>
</body>
</html>
If you take out the <!DOCTYPE html> tag, the top bar across the top of the page works but if you put it in, it doesn't render correctly as the background colour of the div element is not rendered and neither is the border.
What am I doing wrong here so that the div.topBar style definition isn't being fully respected?
The problem is that
div.topbar
Should be
div.topBar
Because <div class="topBar"> is not <div class="topbar">
It is still being rendered in quirks mode for some reason but html5 mode wont render it.
(Demo)
HTML and CSS are case sensitive.
'topbar' and 'topBar' are different. Either capitalize the name of the class or correct the div.topbar.
I'm trying to apply a theme to my dart-polymer material-design application, everywhere I look at videos and tutorials, it is suggested that with a few lines of CSS you can change the look of the whole application.
I've even generated a theme just now using: http://www.materialpalette.com/grey/red and it gave me the following CSS:
/* Palette generated by Material Palette - materialpalette.com/grey/red */
.dark-primary-color { background: #616161; }
.default-primary-color { background: #9E9E9E; }
.light-primary-color { background: #F5F5F5; }
.text-primary-color { color: #212121; }
.accent-color { background: #FF5252; }
.primary-text-color { color: #212121; }
.secondary-text-color { color: #727272; }
.divider-color { border-color: #B6B6B6; }
... which I've included in my default stylesheet, but with no colour changes.
So if this is my custom polymer element:
<polymer-element name="main-app" class="default">
<template>
<style type="text/css">
:host {
display: block;
}
</style>
<core-toolbar class="default">
<paper-icon-button icon="menu"></paper-icon-button>
<span flex class="default">
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
</span>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="more-vert"></paper-icon-button>
</core-toolbar>
</template>
<script type="application/dart" src="main-app.dart"></script>
</polymer-element>
And this is my index.html using that custom main-app component:
<!DOCTYPE html>
<head>
...
<link rel="import" href="packages/falm/main-app.html">
<link rel="stylesheet" href="styles.css">
</head>
<body unresolved>
<main-app class="default"></main-app>
<script type="application/dart">export 'package:polymer/init.dart';</script>
</body>
</html>
... what is the proper way to use the generated theme?
Am I suppose to add those css classes in manually everywhere?
Yes, you need to add the classes somewhere.
You can use the core-style element to reuse styles or you can add the styles to the main page (index.html) and prefix them with * /deep/ (like `* /deep/ .dark-primary-color) but still need to apply the classes to the elements.
Some resources about styling polymer elements
https://www.polymer-project.org/articles/styling-elements.html
https://www.polymer-project.org/docs/polymer/styling.html
https://www.polymer-project.org/docs/polymer/layout-attrs.html
I have created a page action extension that uses a popup.html file. It used to work perfectly. When I click the icon it displays a small box with only the corner of the popup.html page visible. I set the body and html css height and width but had no luck of making the box bigger. I also moved the css onto another page called popup.css and added to the popup.html head.
Has anyone run into this issue?
Please help.
HTML:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup_script.js"></script>
<link href="popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<li id="all">All</li>
<li id="title">Name</li>
<li id="artist">Artist</li>
<li id="album">Album</li>
<li id="art">Artwork</li>
</ul>
<textarea id="info" type="text"></textarea>
</body>
</html>
CSS:
body {
font-family: arial;
font-size: 13pt;
margin: 0;
padding: 0;
color: #06477D;
}
ul {
list-style-type: none;
cursor: pointer;
padding: 0;
margin: 0;
}
li {
text-align: center;
padding: 5px 20px;
}
li:hover {
background: #06477D;
color: white;
}
textarea#info {
position: absolute;
}
If you're running the latest Chrome Canary build, that could be the problem. All of my extension's popups are showing up like this.
Try on a different build of Chrome?
EDIT: Yeah, I just found some bug reports for Chrome/Chromium:
https://code.google.com/p/chromium/issues/detail?id=180724
https://groups.google.com/a/chromium.org/forum/?fromgroups=#!topic/chromium-bugs/09xiPfAfrIc
Set the height and width properties in your html body tag. Means, simply add style to your existing body tag with height and width properties.