I'm playing around with the VMware Clarity Design System UI (https://vmware.github.io/clarity/) and am running their seed application. I'm trying to replace their brand icon with my own, but it's a different size. I'm noticing that the icon appears to be hard-coded to 36px x 36px. If I try setting a new size in CSS, it still renders as 36px x 36px. Is this hard-coded?
LogoSize
That was it. I was thinking I needed to add the size to the image, not to the .clr-icon class. This works:
.header .branding .clr-icon {
height: 13px;
width: 73.9px;
&.clr-dell-logo {
background-image: url(../images/DellLogoWht.png);
}
}
Your answer is correct for when you want to set size with css (I up-voted yours to reflect that). You can also set an icon size with the size attribute on the clr-icon element:
<clr-icon shape="info" size="48"></clr-icon>
We do have an example using the size attribute here, Clarity Icons Documentation
It's about 1/2 way down the page or search for Setting the icon size. FYI - we are in the process of updating the docs for Clarity Icons.
Related
My horizontal nav bar and footer look perfect on PC, but when testing on Mac, the font is lifted about 30px above its position in the horizontal nav bar.
After trying every CSS reset and line-height adjustment, what finally worked on Mac made the font drop about 30px below its position in the horizontal nav bar on PC this time.
One Stackoverflow answer mentioned editing the glyph/baseline of a font.
I downloaded a free font editing program and noticed the characters inside of each respective square were lifted as if to have a 40px margin underneath, but I can't adjust the height of the baseline in the program.
Is there a free font manipulation program that will allow me to adjust the glyph/baseline of the font?
I appreciate your time in advance.
Try to generate your font via http://www.fontsquirrel.com/, and use the CSS for font-faces it gave you.
If the above does not work for you, try this:
Try to find out with JavaScript if the app is running on Mac. If so, load a new font-fix-mac.css file, where you will put margin-top:30px on all elements where the font is lifted above.
Just wondered if anyone using the Flexslider has found that when switching back and forth from different size browser windows the slide images do not automatically adjust to new height and widths.
Let me clarify - they do shrink correctly but when scaling back up the first image in the slideshow gets stuck at the previous aspect ratio until the next slide comes in, at which point the whole thing adjusts.
To stop my content from being affected I have created a fixed height container for the flexslider and have used media queries to change its height as it is scaled down. This works perfectly scaling down.
It seems to be on the way back up that it has trouble sorting the image heights out.
I would provide links but it is a new client project in confidence.
All coding is exactly as is from the demo files, with exception to the fixed height and media queries on the container div.
I had the SAME problem - I found that not all my widths were of the same value.
e.g.
.clone { display: block; float: left; width: 994px!important; }
<img src="http://www.website.com/images/panel1.jpg" alt="" width="980px">
There were about 4 instances in my css that had different widths [shame shame] so I went in there and raked the css file.
I hope this helps
Good Luck
I often embed webfont (#font-face) in sites that I develop and I have never encountered a major problem until today.
In fact, I feel there is a big issue with the line-height, I'm not extremely good at English so I'll try to illustrate it with pictures. I already contact the support from fontshop.com (where the font was bought) but they do not seem to understand / solve the problem.
What we had before with standard desktop font (= rendering is good for us):
What we had with the font-face (no change in CSS stylesheet):
Here is the CSS:
#content h1 {
background:#000000;
color:#FFFFFF;
font-family:"DINPro-Bold","Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
font-size:35px;
line-height:30px;
padding:10px;
text-transform:uppercase;
}
Usually font websites will have ways to configure the webfont package when you download it. I buy all my fonts from myfonts.com and under the advanced settings there are options for line-height adjustments. Try downloading the font using native line-height adjustments if this option is available. If not, try uploading the font to fontsquirrel's online font generator and upload the new version.
That's not the same font. The shape of the O and the curvature of the arm on the R give it away, which means the fallback fonts are being used, likely due to #font-face not loading properly. Different fonts will have different default spacing, as stated already, which would also lead you to believe it's a line-height issue.
Try making your fallback fonts something totally obvious, like:
font-family:"DINPro-Bold",serif;
This worked for me:
Generate the webfont at Font Squirrel. After uploading the fonts select 'Expert', scroll down and check the checkbox 'X-height Matching'. This resizes the height to match the x-height.
If you have problem with line-height of your webfont (especially if font suppose to be big in your project) try this: close your font in div or other block element and set "overflow" to "hidden". Div will have exact height of your font so any additional space will be cut off.
Try adding "position: relative; top: 5px;" to the "h1" tag
Try position: relative; paddint-top: 5px; padding-bottom: 0px;
Line height according to wikipedia
In typography, leading (rhymes with heading) refers to the amount of
added vertical spacing between lines of type.
This can be achieved like this...
.class{
line-height: 1em;
}
But if you are referring to the height of the letters then this is not something that can be adjusted. It is part of the font you have chosen to use.
I've got a really simple page which uses a photo as a full-screen background. I'm using the following to define it:
body {
background-image: url('../Images/Backgrounds/Hillside.jpg') ;
background-size: cover;
margin: 0px;
}
The image, obviously, takes a little while to load after changing page so I've implemented a noddy jQuery $.load() to update the content without the overhead of a full page reload.
Unfortunately, firefox seems to have an issue when the new content causes the length of the page to change. Firefox correctly realises that the scale of the background image has to change and repaints the page behind the content div appropriately - but doesn't repaint the rest of the page - hence it looks like 2 differently scaled images are overlaid.
Resizing the window or causing a repaint fixes it. Unfortunately, I can't take a screenshot as it never shows the problem - presumably it does a repaint behind the scenes.
To demonstrate the problem, visit the site, shrink your browser window so that content forces a scrollbar. Change URL using the menu. Look at the image behind the main content in comparison to the rest of the page (About us and Sample Ads are long pages, contact us/prices are short).
How can I force firefox to do a full repaint? I suppose I'm looking for the equivalent of WinForm's Me.Invalidate(). Is there a better way to do the background image?
NB: I've shrunk/degraded the photo to reduce file size but haven't spent a lot of time on it yet - I know it can be much better.
Edit:
Environment: FF9.0.1 Win7 Ultimate x64.
Steps to reproduce:
Browse here
Resize the window so that the white content area is just above the bottom of the browser window (Also, it's handy to make sure you can see some land in the background to make the effect more obvious)
Click on the "Sample Ads" link
Click back and forth between Sizes & Prices/Sample Ads
As you do so, you'll notice that anything to the right of the menu doesn't scale but the image under the menu/content does.
There are two solutions I got.
The first is simply on loading new content do the following:
document.body.backgroundSize = 'auto';
document.body.backgroundSize = 'cover';
Just tells it to recalculate the cover area.
The second is very hacky and literally just tells FF to reapply all the styles.
for(var ss = 0, len = document.styleSheets.length; ss < len; ss++) {
document.styleSheets[ss].disabled = true;
document.styleSheets[ss].disabled = false;
}
That said, I would also report this as a bug to FF (if you haven't already or if it does not exist in the system).
I see a problem which probably attributes to your issue. Add this to your stylehseet:
html, body {min-height:100%;}
You see, background-size:cover; is only covering the body's physical dimensions. Let's say your body is actually only 400px with its content, but your window has 1000px of height. The browser first applies background-size:cover; which it does so for the 400px tall body, then it sees there's 600px more of space in the window, and kindly applies the background further; in this case, tiling/repeating it. By giving the html/body a min-height of 100%, as above, your body will always fill the available height.
MediaWiki pictures can be set to a certain size with simple formatting.
However, tables will resize on the fly depending on the browser / screen size.
Can images be made to resize like tables?
(Images inside tables does not work!)
I had the same question and saw from the answers above (now they are below) that you cannot have several pics with different relative sizes. So I wrote a mediawiki extension allowing this: http://mediawiki.org/wiki/Extension:AdaptiveThumb
Dynamic resizing as the browser is resized:
Put the next line at the begining of the css file: .\skins\common\shared.css
img { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }
Each resizable image will be placed inside a <div></div>
<div>[[Image:MyImage.png]]</div>
Read more here: http://www.mediawiki.org/wiki/Help_talk:Images
You could set up a CSS hack.
Mediawiki allows you to include some variables like alt-text, including in that variable a special string such as w100 or resizeable will allow you to target the element with CSS:
img[alt=~w100] { width: 100% !important; height: auto !important; }
Do note that since you are using alt for things it's not meant to be used and !important in the CSS (because MW sets the size as an element style), this is to be avoided as much as possible and meant to be used as last resort.
In short, no, there is no easy way to do this. It could conceivably be done with a bunch of fiddly Javascript, but I'm not aware of anybody having tried this and the implementation would not be trivial.
The short answer is no. The long answer is that you would have to write JavaScript that can determine the user's screen resolution and store it in a cookie.. This would have to be done most likely in common.js so that with the exception of the one in a billion user that has never been to the site and manages to navigate directly to the page with the dynamically sized image (I hope you're not going to put something like that on your main page), that information will already be there when they get to the page. The page could then use those variables to set the size to be {{#expr:(File height * % of screen you want it to take)*(screen height)}}x{{#expr:(File width * % of screen you want it to take)*(screen width)}}px. The host of my wiki says he is in the process of writing a new extension that may be able to do that as part of a request for a <div style="overflow-x: scroll; width: {{#expr:(File width * % of screen you want it to take)*(screen width)}}px;"> section I want to make. If you find something else before me, please update this post so I can see it. Thanks. :D