Please forgive me, but i am kinda new to coding. I only need one word translated and was hoping to not need a translating plugin installed on my site. I have translated the word "Shopping Cart" on the cart-page using the following css-code:
.woocommerce-cart .woocommerce > form > h1 {
visibility: hidden;
position: relative;
}
.woocommerce-cart .woocommerce > form > h1:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: 'Handlekurv' !important;
}
But when i try to translate the WPBakery Page Builder in the admin-menu, nothing happens. I have tried the following code, but i think there is something wrong with the class:
.wp-has-submenu .wp-has-current-submenu .wp-menu-open .menu-top #toplevel_page_vc-general {
visibility: hidden;
position: relative;
}
.wp-has-submenu .wp-has-current-submenu .wp-menu-open .menu-top #toplevel_page_vc-general:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: 'Page Builder' !important;
}
<li class="wp-has-submenu wp-not-current-submenu menu-top toplevel_page_vc-general" id="toplevel_page_vc-general"><div class="wp-menu-arrow"><div></div></div><div class="wp-menu-image dashicons-before" aria-hidden="true"><img src="https://hygg.no/wp-content/plugins/js_composer/assets/vc/logo/wpb-logo-white_32.svg" alt=""></div><div class="wp-menu-name">WPBakery Page Builder</div>
<ul class="wp-submenu wp-submenu-wrap"><li class="wp-submenu-head" aria-hidden="true">WPBakery Page Builder</li><li class="wp-first-item">General Settings</li><li>Role Manager</li><li>Product License</li><li>About</li></ul></li>
<div class="wp-menu-arrow"><div></div></div><div class="wp-menu-image dashicons-before" aria-hidden="true"><img src="https://hygg.no/wp-content/plugins/js_composer/assets/vc/logo/wpb-logo-white_32.svg" alt=""></div><div class="wp-menu-name">WPBakery Page Builder</div>
<div class="wp-menu-arrow"><div></div></div>
<div class="wp-menu-image dashicons-before" aria-hidden="true"><img src="https://hygg.no/wp-content/plugins/js_composer/assets/vc/logo/wpb-logo-white_32.svg" alt=""></div>
<div class="wp-menu-name">WPBakery Page Builder</div>
<div class="wp-menu-arrow"><div></div></div><div class="wp-menu-image dashicons-before" aria-hidden="true"><img src="https://hygg.no/wp-content/plugins/js_composer/assets/vc/logo/wpb-logo-white_32.svg" alt=""></div><div class="wp-menu-name">WPBakery Page Builder</div>
<ul class="wp-submenu wp-submenu-wrap"><li class="wp-submenu-head" aria-hidden="true">WPBakery Page Builder</li><li class="wp-first-item">General Settings</li><li>Role Manager</li><li>Product License</li><li>About</li></ul>
Given your html code, adding this to your CSS will replace all instances of WPBakery Page Builder with Page Builder.
.wp-menu-name, .wp-submenu-head{
visibility: hidden;
position: relative;
}
.wp-menu-name:after, .wp-submenu-head:after {
visibility: visible;
position: absolute;
top: 0;
left: 0;
content: 'Page Builder' !important;
}
Though definitely test this as looking at this without further context of html on the whole page/site it might effect other items as well.
Related
Put png in content in pseudoclass ::before.
Tryed every path, GitHub pages wont show it.
https://github.com/tacticSugar/Resume - Repo
https://tacticsugar.github.io/Resume/ - Page
.work h3 {
padding-left: 5rem;
position: relative;
}
.work h3::before {
content: url(https://tacticsugar.github.io/Resume/arrow.png);
display: inline-block;
width: 0;
height: 0;
transform: scale(.3);
position: absolute;
top: 0;
left: -1.5rem;
}
It should work in the context of GitHub Pages, since rosmeltd/css_pseudoclases does use pseudo-elements in his GitHub pages site rosmeltd.github.io/css_pseudoclases, with the CSS:
/* ============ CHALLENGE 7 ============ */
.challenge--7 .challenge__code p::before,
.challenge--7 .challenge__code p::after {
content: url(img/smiley.gif);
vertical-align: middle;
}
For:
<section class="challenge challenge--7">
<h4 class="challenge__title">
<b>VII.</b> Inserte la imagen "smiley.gif" antes y después de cualquier elemento <p>, utilizando los pseudoelementos ::before y ::after.
</h4>
<div class="challenge__code">
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</div>
</section>
In your case CSSLint mentions:
Disallow qualified headings
Heading (h3) should not be qualified.
.work h3::before {
For testing, try h3::before instead of .work h3::before.
I have written a simple navbar that has a scroll animation.
Example:
<div className={"nav active"}>
Here CSS on active is not working. Even if I write .active or nav.active in my CSS file, I have no result. In my code I have used a on scroll event listener so when I scroll down, the navbar appears black and when I go on the navbar, it disappears. But the problem is that CSS is working in nav, but not working in
active and as a result black color in active is not appearing.
const [show , handleshow]= useState(false);
const transitionNavBar = () => {
if (window.scroll > 100){
handleshow(true);
}else{
handleshow(false);
}
};
useEffect(() => {
window.addEventListener("scroll",transitionNavBar);
return () => window.removeEventListener("scroll", transitionNavBar);
}, []);
return (
<div className={`nav ${show && "active"}`}>
<div className="nav_contents">
<img className='nav_logo'
src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png"
alt=""
/>
<img className='nav_avatar' src="https://i.pinimg.com/originals/0d/dc/ca/0ddccae723d85a703b798a5e682c23c1.png"
alt=""
/>
</div>
</div>
)
}
.nav{
position: fixed;
top: 0;
padding: 20px;
width: 100%;
height: 30px;
z-index: 1;
}
.nav.active{
background-color: #111;
}
.nav_contents{
display: flex;
justify-content: space-between;
}
.nav_logo{
position: fixed;
top: 10px;
left: 0%;
width: 80px;
object-fit: contain;
padding-left: 20px;
cursor: pointer;
}
.nav_avatar{
position: fixed;
cursor: pointer;
right: 20px;
width: 30px;
height: 30px;
}
Instead of this
<div className={`nav ${show && "active"}`}>
Try this:
<div className={`nav ${show ? "active":""}`}>
I think you need to write your CSS in a seperate file, if you are not using styled components for example.
Write your CSS classes inside a seperate file and then import the css file inside your JSX/JS.
For example:
import "./navbar.css"
Edit: Sorry, just reread and noticed your nav is working.
As the other posts suggest, you would probably need to use a conditional operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
I don't know what was a problem but i uninstall ns install vs code again my issue was solved I really don't know how it worked but it worked.
I'm working on a project, and would like to have a side panel in a fixed position on the screen (just below the navbar) until it reaches the top of the footer so the two don't overlap. I've found some suggestions using Jquery, but this project is in react and I am using the materialize css framework. Here is the code I am working with in App.js...
<div className="App">
<Navbar />
<div className="row" id="landingcontainer">
<div className="col s3" id="sidebar">
<Sidebar />
</div>
</div>
<Footer />
</div>
And here is what my css looks like:
#landingcontainer {
height: 120vh;
position: relative;
}
#sidebar {
position: fixed;
height: 85vh;
background-color: plum;
color: white;
top: 12vh;
right: 5px;
}
I've also made a sandbox for this: https://codesandbox.io/s/dawn-snow-3cmdv
Right now the when the user scrolls all the way to the bottom, the sidebar overlaps the footer.
Thanks!!
Why are you using materialize?
Just use this: https://material-ui.com/components/drawers/,
at least you'll avoid that kind of problems.
If you want to keep using materialize,
just, tell me why are you using position:fixed ?
Are you aware of that position:fixed make an element
to stay always in the same place even if the page is scrolled?
Are you sure you didn't want to do this :
#landingcontainer {
height: 120vh;
position: relative;
margin-bottom:0;
}
#sidebar {
position: absolute;
height: 100%;
background-color: plum;
color: white;
top: 0;
right: 0;
}
I have some pseudo code like this:
<div class="container">
<div class="hiddenatfirst">
<img>
<img>
<img>
</div>
</div>
and css like so:
.hiddenatfirst{
display:none;
}
.container:hover .hiddenatfirst{
display:block;
}
.hiddenatfirst:hover{
display:block;
}
The problem is - I have a design website and a lot of visitors have the pinterst extension installed. When someone hovers over the pin-it button that gets added to the images inside the .hiddenatfirst div the div gets hidden again.
I don't want to remove the pin-it buttons from the images but I don't want them to get in the way of the :hover events.
Any ideas?
Apologies for the pseudo-code, the real code is pretty messy and in staging! Hopefully this explains what I need.
Thanks
PS - if you look at the .third-level-menu in the navigation here you'll see it in action (note you'll need the pinterest chrome extension installed)
http://smith-hoyt.myshopify.com/?preview_theme_id=12397927
PPS - this is a crappy GIF but I think shows what's happening too:
http://recordit.co/anNtu8W1Vo
PPPS - you can see the pin-it button that pinterest adds to each image in this image: https://twitter.com/tomcritchlow/status/573920066124836864/photo/1
Most probably the problem is that 'Pin it' button is absolutely positioned on top of the image, but it's not the container's child, so hover on it hides the image like on the following sample:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
</div>
</div>
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
What you can do is using JavaScript or jQuery find all the 'Pin it' buttons and move them to the appropriate containers with the positions recalculation, so the result HTML will be like the following:
.container {
display: block;
width: 500px;
height: 315px;
background-color: gray;
}
.hiddenatfirst {
display: none;
}
#pinit {
position: absolute;
top: 32px;
left: 32px;
}
.container:hover .hiddenatfirst {
display: block;
}
.hiddenatfirst:hover {
display: block;
}
<div class="container">
<div class="hiddenatfirst">
<img src='https://dq1eylutsoz4u.cloudfront.net/2014/10/sf-cat.jpg' />
<img id='pinit' src='http://www.brandaiddesignco.com/insights/PinIt.png' />
</div>
</div>
Rather than use the javascript solution above, since these images are small and in the navigation I found a way to remove the pin-it button, simply add to each image:
nopin="nopin"
As per the documentation here:
https://developers.pinterest.com/on_hover_pin_it_buttons/
<div class="oringal">
<ul class="rank">
<li class="rank-1">
<img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/Tetra_pak_New_packaging_Juice7_by_KATOK.jpg" />
<p>1</p>
</li>
<li class="rank-2">
<img src="http://netdna.webdesignerdepot.com/uploads/packaging_design/21.jpg" />
<p>2</p>
</li>
I want to get the ranking sequence as follows, but i do not want change the html, how can i just change the css in the div.oringal to get the ranking sequence as follows.first in center, second rights, third lefts
please see the full code on jsfiddle page http://jsfiddle.net/6grsm/1/, thanks a lot
You could try using absolute positioning. It looks like you are creating a shopping cart layout so I assume that you have a fairly structured page to start with.
See demo at fiddle: http://jsfiddle.net/audetwebdesign/rC59T/
Your HTML is basically this:
<div calss="panel-wrap">
<ul class="rank">
<li class="rank-1">
<img ... />
<p>1</p>
</li>
<li class="rank-2">
<img ... />
<p>2</p>
</li>
<li class="rank-3">
<img ... />
<p>3</p>
</li>
</ul>
</div>
For the CSS:
.panel-wrap {
width: 460px;
}
The .panel-wrap is useful if you want to add background images and so on.
ul.rank {
list-style: none outside none;
padding: 0;
margin: 0;
position: relative; /* this will force the li to be positioned with respect
to this block level container */
border: 1px solid gray;
height: 200px;
}
ul.rank li {
width: 150px;
top: 0; /* pin top and bottom so that the li fills in the height
of the parent container */
bottom: 0;
border: 1px solid red;
position: absolute;
}
ul.rank img {
width: 150px;
xheight: 90px; /* Careful not to adjust both width and height which could
distort your images */
}
ul.rank p {
border: 1px dotted blue;
text-align:center;
position: absolute;
bottom: 10px;
left: 0; /* pin left and right so the p fills in the
width of the li... */
right: 0;
margin: 0;
}
The trick is to adjust the left offset for each list item in uniformly spaced increments:
.rank-3 {
top: 0;
left: 0;
}
.rank-1 {
top: 0;
left: 160px;
}
.rank-2 {
top: 0;
left: 320px;
}
The Big Advantage
What you could do is set the left offset dynamically using JavaScript/jQuery, and create an interactive page where the user can click buttons and scroll through a series of catalog items.
"i want get the sequence 3 1 2, but i do not want to change the sequence in html in div.original, my question is, how should i change the css"
From that comment, it seems that what you actually is not to change the positioning of elements, but change the order of numbering, which is a completely different question. The easiest way to do this is to use the (deprecated, but still seemingly supported) start attribute of the ol tag. In CSS, you can also set counter-increment for li tags, which will enable customisation of what the li tags display. Examples of the various methods are in this Stackoverflow answer