I am using Jquery Mobile´s grid and I want to remove the default border and change the default background-color. Here is my code:
<div class="ui-grid-b">
<div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>
</div><!-- /grid-b -->
Thank you
The answer is
.ui-bar-a {
background-color: #FFFFFF;
border-style: none;
}
Try this:
.ui-bar-a {
background-color: #fff !important;
border-style: none !important;
}
!important helps to override the jquery mobile css.
Related
I have the following unique attribute assigned to a class:
.subcategory1:hover span { background: url(entertainment-hover.png); }
I have many such subcategory classes and I want to assign them additionally general attributes for :hover span and I came up with the following:
[class*="subcategory"]:hover span {
background-size: 20px;
background-repeat: no-repeat;
background-position: 0px 2px;
But it doesn't work and I cant find the problem!
Does anyone know what I have to amend to make this work assigning these attributes to all subcategory classes on :hover for span?
Please note that I dont have access to the HTML Code!
EDIT
[class*=subcategory]:hover span{
background-repeat: no-repeat !important;
background-size: 20px !important;
}
.subcategory1:hover span{
background: url(https://designmodo.com/wp-content/uploads/2015/03/designmodo-icon.png) !important;
}
<div class="subcategory1">
<span style="font-size: 100px;">I am in a mess</span>
</div>
You can add another class to the current classes that you want to add an effect on hovering it
for example
.hover-effect:hover span {
/*
your CSS code
*/
}
<div class="subcategory1 hover-effect">
<span>text</span>
</div>
<div class="subcategory2 hover-effect">
<span>text</span>
</div>
<div class="subcategory3 hover-effect">
<span>text</span>
</div>
<div class="subcategory4 hover-effect">
<span>text</span>
</div>
remove quotation from the class name in css file
[class*=subcategory]:hover span {
background-size: 20px;
background-repeat: no-repeat;
background-position: 0px 2px;
}
I made a jsfiddle for you too.
still very new to this so apologies in advance.
In my footer, the desktop view works fine. As does the landscape mobile view. Heres how it looks on those two views
Landscape views
But in mobile portrait, the social media icons are missing, where have i gone wrong?
Portrait View
HTML code for my footer
<footer class="nav navbar-fixed-bottom navbar-default">
<div class="container-fluid">
<p>© 2017 Example Example</p>
<ul>
<li><span class="fa fa-twitter"></span></li>
<li><span class="fa fa-facebook"></span></li>
<li><span class="fa fa-instagram"></span></li>
<li><span class="fa fa-snapchat"></span></li>
<li><span class="fa fa-youtube"></span></li>
</ul>
</div>
</footer>
CSS for footer styling
footer {
background-color: #000000;
position: absolute;
bottom: 0;
width: 100%;
height: 50px;
}
footer p {
float: left;
text-align: center;
margin-top: 15px;
}
footer ul {
list-style: none;
display: flex;
flex: 1;
flex-direction: row;
float: right;
font-size:35px;
margin-top: 2px;
}
.fa-twitter {
margin-right:10px;
color: #fff;
}
.fa-twitter:hover{
color: #00aced;
}
.fa-facebook {
margin-right:10px;
color: #fff;
}
.fa-facebook:hover{
color: #3b5998;
}
.fa-instagram {
margin-right:10px;
color: #fff;
}
.fa-instagram:hover{
background-image: linear-gradient(45deg, #fccc63, #fbad50, #e95950, #cd486b, #8a3ab9, #4c68d7);
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}
.fa-snapchat {
margin-right:10px;
color: #fff;
}
.fa-snapchat:hover{
color: #fffc00;
}
.fa-youtube {
margin-right:5px;
color: #fff;
}
.fa-youtube:hover{
color: #cb2027;
}
Any help would be appreciated!
Most likely the ulwith the social icons simply doesn't fit into the width of the footer next to the text of the p tag and is pushed below into a new line (both are floated). But since the height is fixed (50px), it's hidden. Try to change the height of footer to sonething like 100px for testing, then you'll see if this is what's happening. If yes, you have to make everything a little bit smaller (within a media query) so that it can fit into one line.
Your issue is that your social icons are too big, so the entire <ul> is wrapping to the next line, but since you have a defined height on the <footer> it falls outside of the viewport. Try making your icons smaller, or maybe do something to your <p> to have its text wrap two lines in a narrower width.
You might want to try putting body tags around everything like
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body class="works_on_smartphone">
.
.
.
<footer>
.
.
.
</footer>
</body>
</html>
This might help.
Another method you might want to look at is using flexbox for you unordered list
as described here: [1]: Flexbox with Unordered list
Charles
I'm working with Ionic framework, and I need to have a footer with background color red and with a text align in the center. The footer need to have a behaviour like a button; The footer is should be like a Button where in the center there is the text 'REGISTER':
I try this code:
IONIC HTML:
<ion-content>
Some content!
</ion-content>
<ion-footer-bar class="myColor">
<div class="buttons">
<button class="button">REGISTER</button>
</div>
</ion-footer-bar>
CSS:
.myColor{
color:red
}
.button{
color:white;
text-align:center;
}
But, it doesn't work. i don't know;
Some of you have some good advice:
Thanks!
You should just set the whole footer as a clickable element like this:
<ion-footer-bar class="myColor" ng-click="myRegisterFunction()">
REGISTER
</ion-footer-bar>
And then you can just use simple css:
.myColor {
background-color: blue;
text-align: center;
justify-content: center;
align-items: center;
color: white;
}
And in your controller you can call the function:
$scope.myRegisterFunction = function() {
// do the registration stuff
}
ion-footer-bar{ --background : blue; }
I can't figure out why the border isn't showing up. I have a main wrapper that encapsulates all the elements; I'm just making the background of each element a transparent white, and then adding a transparent white border to the wrapper.
http://violetoeuvre.com/
/* Wrapper - Main *********/
.main_wrapper{
display:block;
background: rgba(255,0,0,.5);
width:1000px;
height: 2000px;
margin-left:18%;
margin-top:7%;
border:10px;
border-color: rgba(255,255,255,.5);
}
html
<div class="main_wrapper">
<!-- Logo _____________________________________________________-->
<div class="logo">
<a href="index.html"><img alt="emma carmichael" height="150px"
src="images/Home/emma-logo.png"></a>
</div>
<!---Navigation Menu ______________________________________________-->
<div id="main_menu" class="wrapper_nav_box">
<div class="nav_box">
WRITING
</div>
<div class="nav_box">
BLOG
</div>
<div class="nav_box">
CONTACT
</div>
</div>
Any ideas?
As #Lotus said:
You forgot to include the border-style
As an altenative to use the shorthand as Lotus suggested, you could do like this:
.main_wrapper
{
/*other stuff*/
border-width: 10px;
border-style: solid;
border-color: rgba(255,255,255,.5);
}
Note: I add this to extend on Lotus's answer, and to help to answer #Claire's comment "i know i should use shorthand, but why wouldn't the other way work?"
I am making a set of buttons for my site, and I am in need of some professional insight.
In order to reduce CSS bloat, I want to subclass my buttons for different colors, ex .button.blue .
Will the following incur issues in the future? (assuming I don't make a class of just .blue)
Do I have to use something like .button.button-blue instead?
.button {
display:inline-block;
padding: 9px 18px;
margin: 20px;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-align: center;
background: #FFE150;
}
.button.blue {
background: #49b8e7;
border:1px solid #54abcf;
border-bottom:1px solid #398fb4;
color:#FFF
text-shadow: 0 1px 0 rgba(255,255,255, 0.5);
}
.header{
height: 50px;
}
.header.blue {
background: blue;
color: #fff;
}
What you have there with the multi-classes will work fine assuming you want them to work like so:
<div class="button blue">
Will use .button and .button.blue
</div>
<div class="button">
Will only use .button
</div>
<div class="header blue">
Will use .header and .header.blue
</div>
<div class="header">
Will only use .header
</div>
<div class="blue">
Will use neither of the .blue declarations because it doesn't contain header or button.
</div>
A selector like .button.blue actually selects for an element with that has both "blue" and "button" as classes, not a class called .button.blue. See http://www.w3.org/TR/CSS21/selector.html#class-html.
You can use the .button.blue style rule you have listed, but you'll need to rearrange your HTML so that you have something like <button type="button" class="button blue"/>. However, you don't really need to have a button class since it being a button (or <input type="submit">, etc.) is enough to use in your selector. You could write a CSS rule that is simply button.blue, input[type=submit].blue{}
Seems like button.blue is enough.
The only difference between the two is if you use <button class="button blue">, or <button class="button button-blue">.
You even don't need to duplicate the painting in blue... You can just do something like this:
.button
{
// button style
}
.header
{
// header style
}
.blue
{
background: blue;
color: #fff;
}
Of course if you add the blue class to each of them. (<div class="header blue">and<button class="button blue">)
Combine the classes applying the color you want to theme.
HTML:
<input type="text" class="text-field-required default" .../>
<select class="autocomplete-drop-down blue">...</select>
<a href="#" class="button-link green" .../>
CSS:
.text-field-required {
//component css theme without colors
}
.default {
//default color css theme for any component
}
.blue {
//blue css theme for any component
}
.green {
//green css theme for any component
}