How to customise the Labels' header in Blogger? - html

As silly as this may sound but I can't seem to be able to customise the Labels' Header, in Blogger. I've tried various different methods and tags to achieve the look I want but it doesn't seem to work correctly. I've tried inserting CSS coding between the tags but to no avail. The following piece of coding hasn't worked either.
.post-labels {
letter-spacing: 0.09em !important;
font: arial 8px #666666 !important;
text-transform: uppercase !important;
margin: -1% 0% -1% 0% !important;
}
.post-labels a {
font-weight: normal!important;
text-decoration: none!important;
}
I have tried the following opening tags also but none of them seem to work:
#post-labels a {
#post-labels {
.post-labels a {
.post-labels {
And I've also tried adding "!important" at the end of each element however even that hasn't worked. What surprises me is that some elements seem to work whereas the others do not. For example the text-align, text-transform, font-weight and text-decoration elements work but the font (size, family & color), letter-spacing and margin elements do not. I've tried every possible variation I could possibly think of but I can't seem to achieve the look I want for the Labels' header.
The URL for my blog is as follows: http://www.blankesque.com
Any help would be appreciated. Thank you in advance.
Iram

You should use
font: arial 8px !important;
color: #666666 !important;
Instead of
font: arial 8px #666666 !important;
Because CSS Syntax for font property doesn't include the color. Also, margin-top and margin-bottom values don't work with <span> element(unless you give it a float).
Apart from these, I see everything is working fine.

Related

Inline text - background color with padding

I need to make a Headline with background color which is not a block(only the text-bg is colored).
Here is an image of what I have to archieve:
And here is what I've got so far:
http://jsbin.com/tiwuquze/1/edit
You can see the padding is not right and I couldn't figure how to set it.
When you play around with the padding, you will see that it will overlap and the second line is not going in like the first one.
I am happy about every hint!
Solution:
John Smith made a working example: http://jsbin.com/tiwuquze/21/edit
He used box-shadow to emulate the left padding.
UPDATE got the solution, use box shadow :D
h1 {
background-color: #FE8020;
color: #FFFFFF;
display:inline;
white-space:pre-wrap;
line-height : 24px;
font-size: 18px;
font-family:arial, sans-serif;
padding: 5px;
padding-left:0px;
box-shadow: -16px 0 0 #FE8020; /* box shadow is emulating padding liek a charme */
}
for me this looks good
http://jsbin.com/tiwuquze/21/edit
Nowadays (understanding years have passed since this question was posted), if you were willing to use experimental technology and concerned primarily with modern browsers (and could accept how it looked without it on unsupported browsers), you could use box-decoration-break.
The box-decoration-break CSS property specifies how an element's fragments should be rendered when broken across multiple lines, columns, or pages.
h1 {
background-color: #FE8020;
color: #FFFFFF;
display:inline;
white-space:pre-wrap;
line-height : 24px;
font-size: 18px;
font-family:arial, sans-serif;
padding: 5px;padding-left:0px;box-shadow: -16px 0 0 #FE8020;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
https://jsbin.com/hadedulici/1/edit
Also, for what it's worth, box-shadow-based solutions don't seem to work for me in Firefox 55.0.3 (Windows 7) nor Firefox Quantum 62.0.3 (Windows 10) at time of writing.
Try setting a bigger padding and use line-height
example :
line-height:24px;
padding:4px;
You can do as #ReKnawn suggested increase the padding and line-height just ensure that the line height is larger than the font-size + padding x 2 since in this case both the top and bottom are padded. eg if the font-size is 16 and padding is 4px line-height must be greater than 24 to ensure reasonable space and avoid overlapping
here check this solution:
http://jsbin.com/tiwuquze/17/edit
Add a span inside the h1 element.

Is there a painless way to make a "css sandbox"?

By CSS sandbox I mean a section in my layout that have a completely independent look. I need this because some classes of mine need to output some "windows" of content in the layout, but I don't want the app's css to mess with them. They're mostly debug related, like printing var contents, benchmark graphs or displaying some error/exception.
Until now I was doing some kind of local reset, but this gets really annoying to avoid collisions and could fail if I forget some rules. ex:
html body div.eh-box {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 100% !important;
vertical-align: baseline !important;
background-color: #fff !important;
font: 12px/12px 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
margin-bottom: 20px !important;
}
html body div.eh-box * {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
font-size: 100% !important;
font: inherit !important;
vertical-align: baseline !important;
color: #333 !important;
}
html body div.eh-box .title {
font-size: 50px !important;
line-height: 75px !important;
/*font-weight: bold !important;*/
}
html body div.eh-box .desc {
font-size: 24px !important;
line-height: 36px !important;
}
I don't know much about it, but I think thats more or less what Shadow DOM does
Another possible solution - depending on your application, is to load that layout section in an iframe - this way its a completely seperate document subject to a seperate set of styles. Not sure if I need to mention that there are certain drawbacks to using frames.
You can make a container element with an ID and then reset its rules (make sure this part is loaded last). The only problem you might encounter then are the !important rules, but you can use those in your reset part as well (not really recommended practice, but it will work).
Also, depending on the structure of your site, you might want to call your container element as specific as possible, like body #top_element #another_top_element #container in order to give it higher priority, but in most cases this won't be necessary...
There has been a technique called Scoped CSS
You can't use it [1] anymore but there is a polyfill [2] you can try.
[1] https://caniuse.com/#feat=style-scoped
[2] https://github.com/PM5544/scoped-polyfill

possible to mark an html element to only use browser's default css?

I am developing a chrome extension which works on many websites and adds a search text box to the page. Is there a way to mark this input element such that it only uses browser's default CSS styles (and not those that are specific to the website)?
The issue is different sites will have different styles applied for their input boxes. For the extension input box to look consistent across web sites, I'd have to explicitly specify values for all the relevant CSS properties. I am trying to avoid that and am wondering if I can instead mark this element somehow to not use the website styles but only use the browser defaults?
There is no way in CSS to make an element isolated from the effects of style sheets on the page, and there is no way to tell that only browser default style sheet be applied. You can just set properties to desired values, or modify the style sheets being used so that selectors don’t match your element.
You might consider putting the search box in a separate file and embedding it via iframe (or object) inserted into a page and perhaps positioned absolutely. Within the framed document, the style sheets of the framing document have no effect.
Just a follow-up to my question. Here's the CSS that I am using to have the text input element look and behave consistently across different websites. It is working well for all sites that I have tested on, so far. Any feedback/ comments on this would be great.
input.reset-text-input {
/********
dimensions and float property of the input element
*********/
box-sizing: border-box !important; /*using box-sizing for easier calculations. make sure to specify this because it varies across sites, and changes the effective dimensions of the textbox*/
margin: 0 !important;
padding: 2px !important;
width: 150px !important;
height: 20px !important;
float: none !important;
/********
border, outline and drop shadow
********/
border: 1px solid #999 !important;
/*some border radius*/
-webkit-border-radius: 2px !important;
-moz-border-radius: 2px !important;
border-radius: 2px !important;
/*no drop shadow*/
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
outline: none !important;
/**********
text properties
***********/
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
font-size: 13px !important;
color: black !important;
vertical-align: baseline !important;
word-spacing: 0px !important;
/*not sure if something like this can help. commented for now*/
/*-webkit-appearance: textfield !important;*/
/*appearance: textfield !important;*/
}
input.reset-text-input:focus {
/*show an outline around the element that is same as chrome's default. this needs to be set as it is turned off on some sites. */
outline: 5px auto -webkit-focus-ring-color !important;
}
`

Spacing different in Chrome and Firefox

Here is a link to the page that is giving me trouble:
http://youtube.thegoblin.net/layoutfix/
If you view the website in firefox and chrome you can see that the spacing is different. The way it looks in chrome is the way I meant it to look.
I have tried linking in the YUI 2: Reset CSS as it as suggested in another question, but I cannot seem to get it to work.
Here's the stylesheet link: http://youtube.thegoblin.net/layoutfix/styles/style.css
You should change line-height on some elements that contains text. These are line-heights for some (maybe all) elements you need to change:
#title: 56px
.yoText: 46px
#buttonTitle: 68px
#buttonText: 34px
Looks like browsers count differently line height for font you choose, so defiantly line-height could make it better.
Just short example, not full fix:
#dl-button #buttonTitle {
color: #37590B;
float: right;
font-family: "TallDark";
font-size: 600%;
line-height: 0.7;
margin-right: 60px;
margin-top: 20px;
text-shadow: 1px 1px #BDF277;
}
makes green button much better, so you may play around with others the same way.

How so I set an inline span to have the same height when containg text in both Chrome and Firefox?

I have the following style:
background-color: #C9C5BC;
color: #FFF;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
text-transform: uppercase;
cursor:pointer
the HTML element is
<span class="name-indicator">NameIndicator1</span>
IT looks like this is Firefox (desired)
and in Chrome it looks like this (wrong)
The problem is that in chrome there is no white space between the span elements and it is caused by the fact that in FF the height is 13px and in Chrome it's 15px, when setting the font size in chrome to 7px I achieved the right effect.
How can I fix this to be the same on both browsers? I want to keep the font-size to be 10px
EDIT:
I've created a fiddle please take a look at both FF and Chrome
I noticed that the codes in the stackoverflow answers look similar to your provided image (2nd one). If you put this CSS line-height: 21px on the container .wmd-preview p, then a separation appears between the codes. So your problem could be solved by adding line-height to the container of those span.
To have better chance of achieving same results across many browsers use css-reset at the beginning of your page. This little piece of css will make sure that all elements have same default values in all browsers. You can get one from here.