I want to customize the view-title of an ion-view so that the title appears 4 letters in red and 4 letters in white. How do I do this?
For example I use a template like this:
<ion-view view-title="HelloWorld">
Now I want that Hello appears in red color and world in white color.
My main problem is that I can't get an access via css to the view-title.
Try this,
<ion-view>
<ion-nav-title>
<span style="color:red">Hello</span>World
</ion-nav-title>
</ion-view>
This solves the problem of modifying the view-title:
<ion-nav-title>
<span class="red">Hello</span>World
</ion-nav-title>
In addition to iDeekshith's answer and for future people, you can also add an image to the header (your app's logo perhaps).
<ion-nav-title>
<div>
<span class="header-logo"><img src="img/logo.png" width="30" alt="App logo"/></span>
Your App Title
</div>
</ion-nav-title>
Related
So, I am using Angular and started using FontAwsome. I want to put the text inline, not in 3 lines like in the image above.
The above text is "4 BANJA LUKA".
The other solution would be to make the margins between the lines smaller, so it can fit the icon without making the icon too large (for example 4x or 5x).
Does anybody know the solution?
<span class="fa-stack"> <i class="fas fa-comment-alt fa-3x" style="color:yellow;"></i> <i class="fa-stack-1x" style="font-size:10px;">4 BANJA LUKA</i> </span>
One Way
you are want below manner to add font awesome.
https://www.npmjs.com/package/#fortawesome/angular-fontawesome
How to use Image overlay in ReactJS? I am making a movie site.
Here is the link : Project
I want to use overlay effect when the user hovers over the image.
When the user hovers over the image I want to show tagline with the overlay effect on the image.
Here is the link I tried : reference
But, it's not working in React.
Here is the code :
In image tag i want to add overlay effect.
<div className="main-description" >
<img src={"https://image.tmdb.org/t/p/w500"+res.poster_path}
className="result- image"/>
<b className="result-titles" >{res.original_title}</b>
<div className="extra-description">
<div className="rating_time_score_container">
<div className="sub-title Rating-data"><b>
Imdb
<span className="details" > {res.vote_average}/10 </span></b></div>
<div className="time-data">
<b><span className="time">
<i className="fa fa-clock-o"></i> </span> <span className="details">
{res.time_str}</span>
</b>
</div>
</div>
</div>
I don't think this has to do with CSS, It would of been nice to have a link to your github but i\I tracked down your code (since its open source) and I took and look. I suggest using a package like this one: https://github.com/ethanselzer/react-hover-observer
or even bootstraps classic react package like this one:
https://react-bootstrap.github.io/components/overlays/
Then what you can do is update the state of your application and add the overlay that way. Hope that helped and good luck with your project
I can't find any tile component in MDL on getmdl.io. The card component is well documented, but not the tile component.
I assume you mean Grid Lists instead of tiles. As far as I can tell there is no tile specification.
If this is the case, then you would need to combine the grid component and cards. This would get you most of the way there with a little extra custom code for card sizing and maybe shifting a few other bits around if needed.
I found something great when going through codepen the other day: http://codepen.io/zavoloklom/pen/wtApI.
<a class="tile tile-lg tile-sqr tile-red ripple-effect" href="#">
<span class="content-wrapper">
<span class="tile-content">
<span class="tile-img" style="background-image: url(http://www.google.com/design/images/design-minutes.png);"></span>
<span class="tile-holder tile-holder-sm">
<span class="title">Design Minutes</span>
</span>
</span>
</span>
</a>
If you want to take your own approach.I suggest learning about the cell item and moving on from there: http://mdlhut.com/2015/07/understanding-the-mdl-grid/
I want to edit this picture.
http://2.bp.blogspot.com/-42H3onuga5o/UYs7FXqbSlI/AAAAAAAABHU/Pv2iKLwVl4s/s1600/aboutus.png
I see in the edit blogtemplate html editor:
<li>
<div class='menu-abs-bg background-color'/>
<div class='menu-specs'>
<div class='home-icon'/>
<a href='http://rivadotaku.blogspot.com/' title='Home'>Home</a>
<span>Rivadotaku's Blog</span>
</div><ul/></li>
<li>
How to change the picture? You can see in the www.rivadotaku.blogspot.com, in the right bar.
I just a newbie, i only can edit a picture in this html
<img alt='' src='http://2.bp.blogspot.com/-S0aK8YBRU20/UYzIzLBILSI/AAAAAAAABIY/np2T4NYR9ng/s320/article1.png'/>
<a href='http://www.templateism.com' style='background-color: rgba(108,203,103,.9);'>templateism.com
Please help me, sorry for bad English.
Thank you
I'm not sure about what you are tryng to do. If you just want to show another picture instead of the picture you are showing right now, you have to change the src attribute.
<img alt='' src='http://newlink.com/newimg.png' />
I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…
Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.
Here’s the link for the page: http://www.dinneronthespot.com/index2.html
The solution is, use span
<span id="dotPerfect">
<span id="color1">Dinner </span>
<span id="color2">On The </span>
<span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>
try this:
#topText > h1 > div {
display: inline;
}
add this code in the stylesheet
Use span instead of div for this kind of actions.
<h1>
<span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>
I’ve put each word in a different div id to change the text color.
I’m not sure if there is a better way than this…
It's better to use <span>-Tags
DIV-Tags do also have a default property "display:block" from user agent style, that's the reason why you have to set "float:left" (which is really ugly in this case).
Try this
<div id="dotPerfect">
<div id="color1">Dinner </div>
<div id="color2">On The </div>
<div id="color3">Spot </div>
<div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>
Move the div with id dotPersonal to div with id dotPerfect.