I am making Dashing widget to show statistics from Jenkins CI server.
I want to set Jenkins logo icon as a widget background icon. For the moment Jenkins logo icon is not included into official Font Awesome(https://github.com/FortAwesome/Font-Awesome/issues/3714, https://github.com/FortAwesome/Font-Awesome/issues/1529).
Dashing framework is flexible and I assume there must be a solution to set a custom icon as a widget background. But for now I cannot solve the issue on my own.
Has anyone come across this?
The following code from the Bamboo widget will likely do the trick. This is only needed in the scss file, there shouldn't be anything else special needed (other than having the file in the correct location for the scss to find it!)
.widget-bamboo-build {
background: url("/assets/bamboo-logo.png") no-repeat center;
This line is right at the top of the widget section in the scss file. I've included the .widget-bamboo-build line to indicate that.
So this line looks in the Dashing applications home directory for a folder called 'assets' and then tries to find 'bamboo-logo.png' in that folder.
Hope this helps :)
Related
So, I have a problem and am not sure where to start. I am working static site project
built using nuxt, vue, and vuetify. Everything works great and looks good, until I run nuxt generate. After that when I go to view the final static site, I lose my styling on my font-awesome icons. The first image below is what I have when running on my localhost.
In the photo, you can see the size of the magnifying glass and star. This is perfect. However, the next photo is after I run nuxt generate
I am at a loss here as to what would be causing this, and any direction would be greatly appreciated.
EDIT
After looking at the devtools again from a comment, the icons have the same CSS styles, and I do not see a difference. However, further back in the elements I have a div that is getting rendered differently, which could be breaking things.
The CSS circled at the top is my local environment. You can see that .evidenceReview{} has the active background, which is overriding .theme--light.v-card{}.
In the bottom circled CSS is what I get from my deployment. Here you can see that the same classes exist, it's just that the presence is switched and .theme--light.v-card{} is overriding .evidenceReview{}.
As workaround, importing the font-awesome css at the top of my css file worked.
#import '#fortawesome/fontawesome-svg-core/styles.css';
Workaround taken from FontAwesome GitHub issue:
https://github.com/FortAwesome/Font-Awesome/issues/18666#issuecomment-1090686913
I want to locate the location of the css inline item so that I can edit the background color of a horizontal menu.
This is what the css looks like:
ul#megamenupro_1 li.menu-item-link a { background: none repeat scroll 0%
0% #5EA032 !important; )
The firefox inspector is telling me that it's an inline item.
I want to change the #5EA032 colored background to another color. The thing is, it's an inline css so I don't know where to find it in magento. I tried looking in page.xml, header.phtml, theme.css, and style.css but it doesn't seem to be in any of these.
Does anyone have any suggestions on how to locate inline css items in magento, or where it could possibly be located? I would like to change the background color.
Thank you!
Please go to
System >> Configurations >> Developer
then select the required store view from Current Configuration Scope from top left drop-down. Then under Debug tab, enable the Template Paht hints and save. Once done, refresh your frontend page, you will see paths to all files shown in red. Use firebug in Firefox browser to locate the inline css and get the file name and path.
I am trying to make a java applet using the javaFX library, but i have run into an unusual problem. I have CSS formatted toggle buttons that use png images, but when i put the images into an images folder the program is unable to locate them.
The problem line is:
-fx-border-image-source: url("left-btn.png");
// versus
-fx-border-image-source: url("images/left-btn.png");
// or
-fx-border-image-source: url("./images/left-btn.png");
As long as the images are in the same folder as the java class using them, it works fine, but as soon as they are moved into an images folder the classes cannot find them. The CSS file can be moved and still found but the images cannot. The second two lines above as well as any variations of them that I have been able to come up with fail to find the png files.
Any ideas?
in case since its not answered yet:
-fx-border-image-source: url("../images/left-btn.png");
when the imagefolder is on the same level as the folder for your classes
The correct syntax is (when image is 1 level up and inside folder "images"):
.image-background {
-fx-background-image: url("../images/background.jpg");
}
Cakephp is giving me some problems as I have set as below (I have tried any number of urls, through localhost, placing it in webroot and giving reference from that file, giving full route from localhost (this is a local test ubuntu machine, not a 3rd party server), etc, etc but it just doesn't show up.. I am using a custom layout that overrides the default layout and, as far as I can tell, it contains no reference to any sort of background image.. here is from my css file:
body {
background-image: url('http://localhost/site1/app/webroot/img/bg1.jpg');
font-family:'lucida grande',verdana,helvetica,arial,sans-serif;
font-size:90%;
}
I have tested that this works fine with a regular HTML file, I am hoping someone has an idea of what cake is up to that is giving me this problem.. thanks
EDIT: I have tested and I can display exactly the same image within a DIV (as its background) from the same css file.. something in Cakephp is overriding the body background-image setting, but I can't figure out what.
Place images in webroot/img
Place CSS in webroot/css
Write relative paths to references images in CSS styles:
background: url('../img/imagename.png');
You spelling for background is wrong:
ackground-image: url('/root/Desktop/bg1.jpg');
If that is not the case in your actual code, make sure that you are specifying the correct path, try adding a dot before /root/
background-image: url('./root/Desktop/bg1.jpg');
I've added a jpg file to the App_localResources folder and in the document properites specified the photo in the Background propery. In the designer it shows up as the background but when i run the page i still get the white page background.
There's no distinctly ASP.Net way of doing this.
The canonical HTML way is to include this CSS:
body { background-image: url('background.jpg'); }
If you defined the body tag with runat="server" you could add the style inline using the Attributes property, but this wouldn't be a good idea. Layout details like this should go in the Stylesheet.
Guessing that perhaps you have a stylesheet which might be overriding the background?
I would check if the built in web server was still running and stop it, then re-run your application.
* Right click on the tray icon and select "Stop".
The page is being cached, you should see your changes now.
I used fiddler to trace the calls on the image. App_LocalResources\*.jpg return an 403 error. The App_LocalResources folder is really for use for localization. If I move the image into an image folder it works fine.
Also rather than setting the Background property, use the Style property and the background property there.
Sometimes you need to clear the cache of the browser after making changes to backgrounds and colors in order for it to apply when you run the site the next time.
Take a look here:
http://www.wikihow.com/Clear-Your-Browser%27s-Cache