Is there an easy way to change font size for some none-header text with Semantic-UI, without make changes to the theme or use plain css?
I see for some elements, like button, one could use large, massive and so one. Perhaps something like this is possible for "normal text" also, but I cannot in the documentation see how, but I might be blind?
Semantic UI does not have that out of the box. You can write a CSS class that does it for you.
.large.text {
font-size: 2rem;
}
This would make <p class="large text">Hi there</p> have a size that is twice the size of the baseline text size.
You can also add your own CSS to component's .overrides file for the theme you are using and it will be available in your app.
For example, if you are using 'default' theme, you can add the following to button.overrides :
.large.text {
font-size: 12px;
}
site.variables contains the default font size of the page, it can be changed there as well if it's to be changed everywhere
It is possible to be done in Fomantic-UI from version 2.7.2.
Fomantic-UI is a fork of Semantic-UI with ongoing development.
<span class="ui large red text">example of large text</span>
docs: https://fomantic-ui.com/elements/text.html
Related
Sorry for being a newbie but i really need your help.
Heres the problem: i have my main wordpress theme with woocommerce, everything works fine. The thing is: i have a secondary theme with another woocommerce style and i need to get this woocommerce css to my main theme.
How could i do this? Because even if i copy paste the .css file, i will still need the html class's from the other theme.
I dont know what to do anymore, i really apprecite any help.
Thanks and sorry, english is not my native language.
#edit
i forgot to say: i dont need all the woocommerce css, i just this the product view. Like this: https://image.ibb.co/kkPtEc/Sem_t_tulo.png
You can use:
https://es.wordpress.org/plugins/custom-css-js/
Use appropiate selectors to target the elements that you want and reach them with more precision to take priority over other css.
For example:
.elementor-745 .elementor-element.elementor-element-lueowvi .elementor-image-box-content .elementor-image-box-title {
color: #0351d8;
font-size: 27px;
font-weight: 500;
}
this is a css selector with it's properties and values (copied from a wordpress that i did some time ago)
if i want this text for being red instead of this kinda blue and change the font size, for example, i'll have to:
div.elementor-image-box-wrapper > div.elementor-image-box-content > h3.elementor-image-box-title {
color: red;
font-size: 30px;
}
Why i did this selector?
i know that this element is inside a div with elementor-image-box-content class, which is inside a div with elementor-image-box-wrapper.
Note that i also specified the html tag in css selector.
Why should it work?
the selector i set is more specific compared to the main theme one. So it will take priority when the css is rendered.
If you deal with id-based classes you'll need javascript (i recommend you to use jQuery as it's loaded by the theme or by some plugin almost always and will let you work faster an cleaner.
when i say id-based classes i mean those like:
<div class="product-id-25">
<!-- other code -->
</div>
<div class="product-id-26">
<!-- other code -->
</div>
You'll need to select product-id-* and make a for each loop to add the css through jQuery (for example)
recently I was working on an app using Vuetify and had trouble to change the Vuetify default colors. So I finally ended with this:
https://github.com/vuetifyjs/vuetify/issues/299
Which as its says, I added the following code:
<style lang="stylus">
#require '../node_modules/vuetify/src/stylus/settings/_colors.styl'
$theme := {
primary: #009688
accent: #FFC107
secondary: #00796B
info: #B2DFDB
warning: $red.base
error: $red.base
success: $green.base
}
#require '../node_modules/vuetify/src/stylus/main.styl'
</style>
In App.vue
So when I tested changing colors in the app, it worked as expected, so far so good. Then I noticed that it changed the size of the icons, as pictured below:
Before
After
So, my question is:
Is there a way to solve this problem by not using CSS? If so, how? Or if there's no way, then, how should I solve it using CSS?
You can give icon size in px using size property in Vuetify icons.
<v-icon size="25">home</v-icon>
Or
you can use x-small, small, medium, large and x-large in v-icon tag
e.g.
<v-icon small>home</v-icon>
Unfortunately in the current version (0.17.6) you will need css to create a custom icon size.
If you wanted to set a custom default size of your icons across your app you will need to target it will css.
To target icons size you can use the following:
.icon {
font-size: 20px;
}
If you are using Vuetify v1.0.0-alpha.1 or later, <v-icon>
component has a size attribute which you can use to set an exact
size.
here is the sample inline css from v-icon
<v-icon style="font-size: 5px;">home</v-icon>
here is my sample pen
https://codepen.io/anon/pen/LdpgmY
I recommend just using an <i> tag and setting the icon classes yourself if you can. <v-icon> doesn't provide much advantage anyways and the v-icon class is the one that's setting a specific font-size when all you really want is font-size: inherit.
I'm not sure that the change of colors is giving you the issue with the change of icons size, but if you don't want to set the icon size each time, you can optionally pass in custom variables to overwrite the global defaults like this:
$icon-size: 20px;
You can find more information about this in the Vuetify Documentation
I'm a CSS noob and have not been able to find a solution to my problem.
I run a drupal 7 website.
I need to change a specific block's font size. Using the CSS injector module I've only been able to change the change the font of all blocks using:
.block {font-size: 80%}
Obviously that makes sense as it's got a global application.
The div id for the block is: block-views-new-deals-block-block
The div class for the block is: block block-views contextual-links-region
There's also another div class called: view view-new-deals-block view-id-new_deals_block view-display-id-block view-dom-id-6b4fc98a10e3af5ef7e512f56f8d8c4c
I've tried this with no luck:
.block-views-new-deals-block-block {font-size: 80%;}
I've been messing around with the developer option in Firefox but haven't had any success. I don't know what to try next.
It's difficult to say without the whole HTML, but if the block you want to change the font-size has an ID you can use it like:
#block-views-new-deals-block-block { font-size: 80% }
I'm trying to use font icons with the zurb foundation icon pack and while of course you can display them inline via of course something as simple as;
<i class="fi-alert"></i>
Except when I try to use it as css content (which is how they display them...) I don't get the same result when I do something like content: "\f101" inside of a css class. I just get those squares to display.
Is the only difference that I include them externally? via;
<link href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css?hash=132456789blahblahblah" rel="stylesheet">
Or what? Am I just missing a src ref in my sass or something inane like that? I'm doing it just how I would expect it to work and have done with others in the past but I get no icon using them from the css, only shown inline with the html? I know it's going to be some dumb oversight so could use another pair of eyes.
Sorry, kicking the dust off my web experience, it's been awhile.
You need to set the font-family to the icon font in the same class where you set the content.
.icon:after{
font-family: "foundation-icons";
content: "\f101";
}
To use them in a css selector like that you have to actually install the font-family for your page and declare that font-family in your css selector before using the code.
This is a decent tutorial https://www.elegantthemes.com/blog/resources/how-to-use-and-embed-an-icon-font-on-your-website
Please provide an example of code that works and doesn't work for you.
If you are trying to display icon by adding :content to an existing css element that is not part of icon pack, this will not work. For example this WILL NOT WORK:
HTML: <li class="icon">text </li>
CSS: .icon:before { content: "\f101"; }}
Use 'i' tag to add icons:
HTML: <li class="icon"><i class="fi-alert"></i>text </li>
Every time you see squares you need to check if font files are loaded. There are 4 fonts are used by icon set in case you want to load css on your server and link them manually:
/foundation-icons.eot
/foundation-icons.woff
/foundation-icons.ttf
/foundation-icons.svg
I am trying to set the minimum width of the angular UI bootstrap progressbar. I checked the docs and they do not mention how to do this. I know for the 'regular' bootstrap you can use something like style="min-width: 10em;". However this only works if you wrap it in the standard progress bootstrap divs like so:
<div class="progress">
<uib-progressbar class="progress-striped active progress-bar" value="value" style="min-width: 10em;">
<span> text </span></uib-progressbar>
</div>
But this displays a progressbar bar without the 'active' animation since regular bootstrap does not support this. When I try it like so it does not set the min-width property
<uib-progressbar class="progress-striped active progress-bar"value="value" style="min-width: 10em;">
<span> text </span>
</uib-progressbar>
edit: I overlooked the animation section in the 'regular' bootstrap docs. I would however like to use the UI bootstrap progressbar if possible.
Regular Bootstrap supports animated progress bars.
Are you sure that you correctly imported Boostrap files? I think you might have included only the CSS file but not the JS. Take a look at the basic template to see which files you should include.
Take also a look at the uib-progressbar documentation. The code snippet you wrote seems to be correct. As I said, I think the reason for this problem is that you didn't include the JS file for Bootstrap.
EDIT: Oh, ui-bootstrap apparently doesn't need Bootstrap's JS, you're right.
Regarding the min-width part of your question: I noticed that you added the progress-bar class to the <uib-progressbar> element. According to the documentation, the progress-bar class should not be used (it will be added by ui-bootstrap to the <div> element that will be rendered inside <uib-progressbar>, and you can easily verify this by inspecting the progress bar width devtools).
Thus, the min-width property is to be applied to the internal <div>. However, since the rendering is managed by angular, the only way to change it is to add a CSS rule like this:
.setminwidth .progress-bar {
min-width: 20em;
}
And then add the new setminwidth class to the external <uib-element> like this:
<uib-progressbar class="progress-striped setminwidth" value="22" type="warning">22%</uib-progressbar>
I tested this but it doesn't seem to work. I think it's because min-width: 0; is hardcoded in the template, and it gets reset everytime ui-bootstrap re-renders the element.
I tried adding !important to the CSS rule, to avoid being overridden, but it doesn't work either.
I guess at this point you should consider why you need to add this min-width property, since ui-bootstrap likes to override it. Could it be because you don't want the progress bar to be "too empty" when the % is low? If that's the case, I think you should look up the changes recently introduced by Bootstrap: it seems that now they add a special min-width for 0%, 1% and 2%.
UPD: The Bootstrap folks apparently changed their mind and reverted the special min-width value. At this point, I think that ui-bootstrap should follow along and remove the hardcoded min-width: 0; as it's not needed anymore. I just sent a pull-request to them. If they merge it, you will be able to use the CSS I posted above.