I am attempting to use SCSS/Sass which I am new to, to remove a new tab icon on all images that are added to the page, which are nested in an 'a' tag to be hyperlinked when clicked on to open in a new tab. I want to keep the new tab icon next to all other 'a' hyperlinks that do not have 'img' within them. Currently I have the selector as follows to do so:
#mixin styles {
a :not(img)[target="_blank"]::after {
content: '';
width: 1em;
height: 1em;
margin: 0 0.05em 0.15em 0.1em;
display: inline-block;
vertical-align: text-bottom;
-webkit-mask: url('../images/icon_new_tab.svg') no-repeat;
mask: url('../images/icon_new_tab.svg') no-repeat;
-webkit-mask-size: cover;
mask-size: cover;
background-color: $secondary;
}
}
The output is now that the icon is not present next to either entity as shown below.
The link above the photo should have an icon following it, but the photo should not
Related
I am using Wordpress, flatsome theme with UX Blocks.
Within a icon box I have a picture and I also have a text box underneath.
The text box contains a hyperlink which animates during mouse over.
I would like the animation to happen with the image icon is hovered over also.
Is there a way of making this happen whilst having them as separate elements?
The animation CSS is similar to:
a.crunchify-link-toright {
position: relative;
}
a.crunchify-link-toright:before {
content: "";
position: absolute;
width: 0;
height: 3px;
bottom: -5px;
left: 0;
background-color: #fff;
visibility: hidden;
transition: all 0.4s ease-in-out;
}
a.crunchify-link-toright:hover:before {
visibility: visible;
width: 100%;
}
and html for the hyperlink of
<h3>LINK<br />
</h3>
Have tried searching for code without success.
I am using bot framework to create chatbot application. In work flow I am using suggested actions the button with thumbs up and thumbs down i have replaced with background svg image but the image is sometimes displaying and sometimes not displaying in web browser.
<div class="wc-suggested-actions"><div>
.wc-suggested-actions .wc-hscroll > ul > li:nth-child(2) button {
background-image: url(/Content/Images/L-ThumbsDown.svg) !important;
text-indent: -9999px;
text-transform: capitalize;
background-repeat: no-repeat;
}
.wc-suggested-actions .wc-hscroll > ul > li:first-child button {
background-image: url(/Content/Images/L-ThumbsUp.svg) !important;
text-indent: -9999px;
text-transform: capitalize;
background-repeat: no-repeat;
}
I often float images either left or right around text on desktop but I want them centered for small mobile devices and the paragraph to drop below the image using Responsive design. I've got the paragraph dropping below the image using an online mobile viewing device but not when I try to view it via my computer. The image won't center online or on my computer.
Here is what I have found after many hours of research:
I have this set up for all images:
img{
border:0;
max-width:100%;
height:auto;
}
I have this set up for all paragraphs: it pushes the paragraph down below a floated image when the width of the paragraph is less than 10em (about 200 px).
p:before{
content: "";
width: 10em;
display: block;
overflow: hidden;
}
I have applied the following for images to media queries less than 320 and max of 480:
img{
max-width:100%;
display:block!important;
margin:0 auto !important;
float:none !important;
}
(i had to add !important to some of them or they wouldn't take but it's still not accepting margin: 0 auto; )
Can anyone see what I'm doing wrong?
Here you have a working update of what you need: http://jsfiddle.net/ancpjmet/3/
I changed min-devide-width to min-width and max-devide-width to max-width to be able to see the changes on my desktop browser in Google Chrome.
You have to set the div wrapping the img to float: none;, not the img:
#media only screen and (min-width:320px) and (max-width:480px) {
#image-wrapper{
float: none !important;
}
#image-wrapper img{
max-width: 80%;
display: block;
margin: 0 auto;
}
}
I also rebuild your .clearfix class to be more consistant and work in all browsers:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
Take a look at the changes in the jsfiddle given.
I am using Joomla Membership Pro component and am having some trouble with CSS styling.
If you click here
http://se24media.net/dc3/index.php/join-us/membership-options/supporter/sign-up
You will see the background is styled nicely but if you fill in the form, click submit and go through to the page which dispalys your membership details it loses all styling (see link below)
http://i60.tinypic.com/33pa4c2.png
Does anyone know why it suddenly loses it's formatting?
Many thanks
It loses the styling because on the first page, the table containing all the fields is wrapped with <form> tags like so:
<form id="os_form">
<!-- Table with fields are in here -->
</form>
and the following CSS has been given for #os_form
#os_form {
background-color: #FFFFFF;
background-image: url("/dc3/images/news_header.gif");
background-repeat: repeat-x;
border-color: #868687;
border-radius: 12px;
border-style: solid;
border-width: 0 2px 3px 0;
color: #000000;
float: left;
font-family: 'Source Code Pro',sans-serif;
height: auto;
margin: 0 40px 40px 50px;
max-width: 100%;
opacity: 0.9;
padding: 40px 20px 20px;
width: 85%;
}
The second page simply displays a table with the class os_table so style this table, you will need to add the following to your CSS file:
.os_table {
/* code here */
}
Hope this helps
I have a tree panel in an ExtJS4 application and I want to change the icon's used for nodes so that they use the "leaf" icon when they contain no children nodes. But as soon as a child node is added to it, it reverts back to the normal folder icon. What would be the best way to achieve this?
Figured it out:
On initialization of the treepanel, all nodes have allowChildren:true and leaf:false, and nodes the contain no children have iconCls:'tree-leaf'. The accompanying css rule for that class is:
.x-reset .tree-leaf,
.x-reset .x-grid-tree-node-expanded .tree-leaf
{
width: 16px;
background-image: url('../ext4/resources/themes/images/gray/tree/leaf.gif');
}
Then if an empty node has any children nodes added to it, I programmatically remove the custom iconCls css class by:
node.set('iconCls', '');
And when the inverse occurs, when a node with children loses its children and is now empty, the custom class is programmatically added to it:
node.set('iconCls', 'tree-leaf');
Create your own css sheet and copy the following style, this will overwrite the default style and put your images instead of the theme
.x-tree-icon-leaf {
background-color: transparent;
width: 16px;
height: 16px;
background-image:url(../img/neogeo.png) !important;
}
.x-tree-icon-parent {
background-color: transparent;
width: 16px;
height: 16px;
background-image:url(../img/folder-pass.png) !important;
}
.x-tree-icon-parent-expanded {
background-color: transparent;
width: 16px;
height: 16px;
background-image:url(../img/folder-open-pass.png) !important;
}