I can't figure out how to change the logo.
The code that the current logo sits in looks like this.
var brand = (
<div className={classes.logo}>
<p className={classes.logoLink}>
Material Dashboard
</p>
</div>
)
Here's what I'm not understanding though, the logo itself says something different than "Material Dashboard" so I'm not sure where that's coming from.
All I want to do is change the logo. Any help would be greatly appreciated.
classes.logo is probably a css class (inspect with chrome browser to see the value of the class attribute, for example xxx). Go to the css file and find the line with .xxx { ... and you should be able to change the logo
Related
I have a document that is styled like so:
<div class = 'page'>
<header class = 'site-header'>
<div class = 'main-navigation-container'>
...
</div>
</header>
</div>
where the header has a nice background-image. However, as soon as the header ends we reach the navigation bar, which has a stock blue option. I want to have the header background "spill over" into the
.main-navigation-container, so that it appears as if the .main-navigation-container is contained within the header.
Here's the idea:
Before
As you can see in the before, the navigation container (menu) does not share the background with the header. However, after the change it should look like this:
After
Notice that the menu is now changed to be located within the header. The issue lies in the fact that I am using Wordpress for the backend, so I had to add javscript to the body as opposed to redefining the html elements manually:
<script>
var nav = document.getElementsByClassName("main-navigation-container")[0];
document.getElementsByClassName("site-header")[0].appendChild(nav);
</script>
This approach worked when I used a test document on my local machine, but it does not work in Wordpress. Does anyone have any suggestions as to how I could solve my problem with either the approach I'm currently using, or an entirely different one?
Thanks.
EDIT:
SOLVED: It was an issue with the flow of the document. When you add custom javascript in wordpress they give you two options for script location: Body and Footer. I assumed I needed to put the script in the body, but when I tried moving the script to the footer it worked.
You can make the background of your nav transparent. You can add a custom class 'bg-custom' to the 'main-navigation-container', then in your CSS style sheet add:
.bg-custom: {
background-color: transparent;
}
or add it inline with a 'style' tag:
style="background-color: transparent;"
So i'm currently making a simple strategy game in html using css and javascript too. I'm very new to this so this might seem obvious and simple to you all but i'm very confused.
So i have my picture, it's a little pixel battleship i made. I want to have a number show next to that ship to tell how many i have. How do i do that? I assume you have to use css for that right? In the end there are going to be 6 ship types.
Thanks in advance,
Lucas
You can put the image in a container with position set to relative. Then put some text inside some tag and position it absoutely
for example
<div style="position:relative">
<img src="your image here">
<p style=""position:absolute; right: 0"></p>
</div>
Use float property of CSS to display text next to an image.
This link might help https://www.w3schools.com/css/css_float.asp
I am using Ionic 3 and I used the ionic-refresher to reload and load some new data from an API provider when the page is refresh that is working fine.
However when I scroll down below and decided to scroll up back again. The refresher pulling icon always shop up even at the bottom or center part of the content which I don't want to happen.
I only want to shop up the pullingIcon at the most top part of the content when it reaches the ion-navbar or the header component.
<ion-content>
<ion-refresher (ionRefresh)="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
</ion-refresher-content>
</ion-refresher>
</ion-content>
The code which I implemented is the same as the docs example with just different method when refreshed.
Is this an issue?
I also have the code inside of my content which is at the bottom of the ion-refresher ending tag. This is the code below:
<ion-slides #mySlider (ionSlideDidChange)="onSlideChanged($event)">
Is it a conflict because of the ion-slides or just an issue?
The only css that I had modified is this below:
.refresher-pulling-icon, .refresher-refreshing-icon{
color: red
}
.refresher-refreshing .spinner-crescent circle, .refresher-refreshing .spinner-ios line, .refresher-refreshing .spinner-ios-small line{
stroke : red;
}
But I don't think that this has involved or the cause of the issue.
Appreciate if someone could help.
Thanks in advance.
I am new to Material Angular, and just started using it around a month ago, so this might be a simple question. Anyway, I have a toolbar set to a white frame of 0. When I scroll down in my md-content I would like to have the white frame value change to 2 or 4 or just another number, hence giving it a shadow. I also would like to have it animate, not having the shadow just blink/appear. An example of that would be the Google Fonts website. If you look at the picture bellow you will see a line under the toolbar. Then the Picture under that shows that when you scroll it turns into a shadow. Outline above.
Shadow above.
I would try to invest time in inspecting their css, js, and html, but I am actually working on a project for school, which is due next Friday, and I have to type up a bunch of content, and gather information.
I was able to make a shadow appear at the bottom of the md-content, but that was by adding a css selector with a box-shadow when I scrolled down, I just can't figure out how to change the md-whiteframe value on scroll.
I have tried to use a variable. Like md-whiteframe="{{ctrl.elevation}}"
Then say something like
if(item.scrolltop > 0) {
this.elevation = 0;} else {
this.elevation = 4;}
I tried something like that in my js, but it just ended up as a mess. This isn't a really big deal I am just trying to give my project some nice touches. I would really appreciate any help though. Thank you in advance. Also I looked for questions similar to this, and didn't find any that were what I wanted, but if you find a question that answers this then please tell me.
Try to act on the class property of the md-whiteframe directive.
For instance:
<md-whiteframe class="{{ctrl.elevationClass}}">
<span>My content</span>
</md-whiteframe>
On your controller:
if(item.scrolltop > 0) {
this.elevationClass = 'md-whiteframe-1dp';
} else {
this.elevationClass = 'md-whiteframe-4dp';
}
https://material.angularjs.org/latest/demo/whiteframe
Situation
I have this glass shatter effect simulation that involves some basic javacsript code and right now it works fine; When you click on the logo, the glass shatters accordingly and then a new unshattered logo re-appears in its place.
Take a look at the jSFiddle here:
https://fiddle.jshell.net/9n9ft9ks/3/
Problem
Right now, there's only one logo on the page. I need there to be more than one logo, probably like five (of the same Floyd's autoglass logos) all on the same page, all with the same onClick glass shatter effect. But when I try to do this myself - put more than one (of the same logo) on the page, the code just breaks.
How I tried to fix it
The logo with the glass shatter effect is a div called "#container". So since I want more than one of these logo's on the page, I tried just duplacting "<div id="container"></div>" a bunch of times in the HTML code. That didn't work:
https://fiddle.jshell.net/9n9ft9ks/5/
So I tried changing the div id into a div class and I edited all the appropriate javascript & CSS lines that needed to be changed like:
document.getElementById('container');
to:
document.getElementsByClassName('container');
and
#container: {} to .container{}
But that didn't seem to work for me either. The logo doesn't even show up on the page anymore after making these changes, take a look here: https://fiddle.jshell.net/9n9ft9ks/4/
Summary
I have a logo with an onClick glass shatter effect. There is only one logo on the page. I need there to be more than one on the page, but can't seem to get it to work myself... If anyone could take a look at the code and try to get it to work so there is more than one logo on the page, i would appreciate it so much! Here is the original jSfiddle one more time: https://fiddle.jshell.net/9n9ft9ks/3/
You cannot use a single ID multiple times on the same page.
Use a class instead:
CSS:
.className {
/* attributes: values; */
}
HTML:
<div class="className"></div>
In your attempt, try changing the getElementByClassName for $('.container') and then replace the appendChild by append.
I made it work, but it was a bit messy, it would need more CSS to make the logos not overlap one over each others.
(You can add a style on the second div to see the multiple logos, ex: <div class="container" style="left: 50px;"></div>)
Here's the jsfiddle: https://fiddle.jshell.net/9n9ft9ks/7/