I have added fonts in my theme but still getting 404.
import "utils/reset.less";
#apos-ui-font-path: '/modules/theme/public/css/font-awesome/fonts/';
.apos-add-font('roboto', #apos-ui-font-path + 'roboto-regular-webfont');
// Delete the boilerplate CSS below when you are ready to dive in and customize your sites
body { background-color: #apos-white;
}
.main-content {
margin: 200px auto;
padding: 20px;
max-width: 500px;
color: #apos-white;
background-color: #apos-primary;
.apos-drop-shadow;
.login-link {
float: right;
color: #apos-white;
}
// Basic rich-text editor styles:
h3 {
font-size: 24px;
margin-bottom: 12px;
}
h4 {
font-size: 20px;
margin-bottom: 10px;
}
strong { font-weight: bold; }
em { font-style: italic; }
}
Also I have attached my index.js
module.exports = {
construct: function(self, options) {
// loads from public/js/site.js of this module
self.pushAsset('script', 'popper');
self.pushAsset('script', 'bootstrap.min');
self.pushAsset('script', 'particles');
self.pushAsset('script', 'custom');
// loads from public/css/site.less of this module
self.pushAsset('stylesheet', 'jquery-3.2.1.min');
self.pushAsset('stylesheet', 'bootstrap.min');
self.pushAsset('stylesheet', 'font-awesome/font-awesome.min');
self.pushAsset('stylesheet', 'style');
self.pushAsset('stylesheet', 'site');
}
};
Did i miss something because my fonts are not working with apostrophe cms? or path is incorrect? How can i provide the relative path in theme for fonts
Thanks in Advance
Have you tried removing '/public' from the URL to your fonts. See the tutorial page for an example.
This code resolved my Question.
#font-face {
font-family: 'Roboto-Regular';;
src: url('/modules/mytheme/fonts/Roboto-Regular.woff') format('woff');
}
#font-face {
font-family: 'Roboto-Light';;
src: url('/modules/mytheme/fonts/Roboto-Light.woff') format('woff');
}
Related
I've set up my font faces like stated in the answer to this question: font-face not working on mobile
Here is how I have it set up:
#font-face {
font-family: 'SF Distant Galaxy';
src: url('./files/SFDistantGalaxy.eot');
src: url('./files/SFDistantGalaxy.eot?#iefix') format('embedded-opentype'),
url('./files/SFDistantGalaxy.woff2') format('woff2'),
url('./files/SFDistantGalaxy.woff') format('woff'),
url('./files/SFDistantGalaxy.ttf') format('truetype'),
url('./files/SFDistantGalaxy.svg#SFDistantGalaxy') format('svg');
font-weight: normal;
font-style: normal;
}
and here is it being used:
#title {
font-family: 'SFDistantGalaxy';
letter-spacing: 3.3px;
text-align: center;
color: #f8e71c;
font-size: 95px;
}
When I open it on my browser, it loads just fine. But when I open it on my phone, it is showing Times New Roman.
Here is the site:
http://starwarsplanets.com/
I would love any feedback for this! Thanks!
You need to change the css font title to match the font face:
#title {
font-family: 'SF Distant Galaxy';
color: #f8e71c;
font-size: 95px;
margin: 10px 0 10px 0;
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
i know this question has been several times,but none of the solutions worked for me
I have a JumboElevator.css.scc file
#import "bootstrap-sprockets";
#import "bootstrap";
Then i have just one page
new.html.erb
It has internal stylesheet
.jumbotron {
background: #358CCE;
color: #FFF;
border-radius: 0px;
}
.jumbotron-sm { padding-top: 24px;
padding-bottom: 24px; }
.jumbotron small {
color: #FFF;
}
.h1 small {
font-size: 24px;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
#extend .has-error;
.form-control {
color: #b94a48;
}
}
.navbar-brand
{
padding:2px 5px;
}
.icon
{
padding:5px;
}
.check_box_type
{
padding-left:5px;
}
.field_with_errors .form-control {
border-color: #a94442;
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
}
.field_with_errors .form-control {
color: #b94a48;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
After i included active admin,my this internal styling are getting overridden ny active admin stylesheet.
Please can anyone help me
Moving active_admin.css.scss to vendor folder didnt work
All this is happening when deploying to heroku
I'm trying to use just a single color in jQuery progressbar, but it fill the whole div.
Here's the problem, i just use these functions.
$(document).ready(function(){
$("#progressbar").css({ "background": '#FF0000' });
$("#progressbar").progressbar({ value: 10 });
});
http://jsfiddle.net/jtf7M/1/
How do i make this fill properly, step by step?
CSS file is missing. Add http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css to your resources and it will be ok.
Edit:
If you don't want to load whole CSS file, just add this code in your page http://jsfiddle.net/jtf7M/21/:
<style>
.ui-progressbar { height:2em; text-align: left; overflow: hidden; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
.ui-widget-content {
border: 1px solid #AAA;
background: white;
}
.ui-corner-all {
-moz-border-radius: 4px/*{cornerRadius}*/;
-webkit-border-radius: 4px/*{cornerRadius}*/;
-khtml-border-radius: 4px/*{cornerRadius}*/;
border-radius: 4px/*{cornerRadius}*/;
}
.ui-widget-header {
border: 1px solid #AAA/*{borderColorHeader}*/;
background: #CCC;
}
</style>
I think there is no jQuery ui lib load on that jsfiddle.
But you are doing right.
http://jqueryui.com/progressbar/#animated
I want to loop through an array of things and create a tab for each one. When I pull up the page, however, each one appears on a new line. I'm using Slim, though I think this would translate to any other tempting language.
I also have a reset.css loaded before anything else, but the breaks remain.
Slim:
p Your dashboard!
.tabs
.tab-bar
- TYPES.each do |type|
.tab-item
p
= type.to_s
Scss:
.tabs {
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
}
}
}
}
You need to add a float:left; element onto the css element
tabs {
float:left;
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
}
}
}
}
It's probably because you're using a p element which is normally a block element. You can override this using something like display: inline; (not that you will need to do this on your .tab-item div too). You could also float the .tab-item elements instead.
.tabs {
width: 80%;
border-color: $slushie;
.tab-bar {
.tab-item{
display: inline;
p {
color: $white;
font-weight: bold;
font-family: Helvetica;
display: inline;
}
}
}
}
I've implemented the jQuery datepicker. It seems to be working fine but the calendar is too large.
jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png
The site I'm working on has many layers of stylesheets and parent pages and controls. And I don't seem to be able to isolate what is making it large. (Sorry, the site isn't public.)
It appears the calendar is based on a font size. I tried wrapping my textbox in a div with a smaller font but it seems to ignore that. Is there any way to specify a fixed font size?
While changing the font size for .ui-widget works, I got the best results with the following.
#ui-datepicker-div { font-size:11px; }
Not only does this seem to do exactly what I need, it is also unlikely to impact any other jquery-ui widgets.
try setting font-size for class .ui-datepicker
.ui-datepicker {font-size:11px;}
http://jsfiddle.net/pxfunc/ps5cA/
It takes some digging in firebug but I have included one of the versions I use to reduce it. The key is to copy the exact styles from the jQuery-ui CSS file and put them in the head of the page you need them or in a CSS style sheet after the jQuery-ui style sheet.
.ui-datepicker {
padding: 0.1em 0.1em 0;
width: 11em;
}
.ui-widget {
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
}
.ui-datepicker th {
border: 0 none;
font-weight: normal;
padding: 0.2em 0.1em;
text-align: center;
}
.ui-datepicker th span {
font-size: 11px;
}
.ui-datepicker td span, .ui-datepicker td a {
padding: 0.1em;
}
.ui-datepicker td {
padding: 0.9px;
}
.ui-datepicker .ui-state-highlight {
height: 12px;
margin-bottom: 0;
}
.ui-state-default, .ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
font-size: 10px;
font-weight: normal;
text-align: center;
}
.ui-datepicker .ui-datepicker-title {
line-height: 13px;
}
.ui-datepicker .ui-datepicker-title span {
font-size: 11px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
margin-left: -8px;
margin-top: -8px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
height: 15px;
top: 1px;
width: 15px;
}
.ui-datepicker-next-hover .ui-icon {
height: 16px;
width: 16px;
}
Adding this to the site.css worked for me
.ui-widget {
font-size: .7em !important;
}
you can change "jquery-ui-1.10.4.custom.css" as follows
.ui-widget
{
font-family: Lucida Grande,Lucida Sans,Arial,sans-serif;
font-size: 0.6em;
}
Our calendar was big and ugly looking with hard to click month arrows. It was caused by mismatching versions of the jquery-ui css and jquery-ui js includes.
version numbers must match e.g.
jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js
but also needed the css recommended above
#ui-datepicker-div { font-size:11px; }
I agree with mdmullinax. You have to change the font size for the whole class
.ui-datepicker-div { font-size:11px; }
because datepicker is not controlled by id so below change has no impact on size
ui-datepicker-div { font-size:11px; }
h