could you help with a css for currency i want currency to like same like price please help https://snipboard.io/q9uTQe.jpg and would you please help for the css https://snipboard.io/8Uo4Mg.jpg for this as i am not able to get a css for size above and colors below , im really strugling with it
For making the currency font as same as the price you need to override the default CSS Try the CSS given below and let me know if it works or not.
.main-archive-product h4>sup {
font-size: 13px !important;
font-weight: 600 !important;
}
For swapping the position of size and colors try to add the below custom CSS.
Note: In case it's not working please try to make these CSS properties important.
.bwp-filter-ajax #bwp_form_filter_product {
display: flex;
flex-direction: column;
}
.bwp-filter-ajax #bwp_form_filter_product .bwp-filter-price {
order: 1;
}
.bwp-filter-ajax #bwp_form_filter_product .bwp-filter-size {
order: 2;
}
.bwp-filter-ajax #bwp_form_filter_product .bwp-filter-color {
order: 3;
}
Let me know if it helps or not!
`.bwp-filter-ajax #bwp_form_filter_product .bwp-filter-price {
order: 1 !important;
order: 2 !important;
order: 3 !important;
}`
hey this one worked tysmm sir siraj
Related
im using wordpress oceanwp theme to create my ecommerce website. Im using medium header sytle for m website. however, i wan my mobile screen to show a different header style of "minimal".
So is used the custom css code to fix this. However, the arrangement in header are (logo/cart icon/menu). But what i expected is rearrange it's position to (menu/Logo/cart icon).
#media only screen and (max-width: 959px) {
.top-header-wrap.clr {
width: 50%;
}
.bottom-header-wrap.clr {
width: 50%;
}
div#site-header-inner {
display: flex;
}
.oceanwp-mobile-menu-icon.clr.mobile-right {
height: 100%;
line-height: 100px;
}
}
Is there any css code the can help me to solve problem. I expected to get my mobile size screen's header with the arrangement of (Menu/Logo/Cart Icon)
Thank you!
can you Please send the html code how they are now
or
You have to put the code like this
.header{
display: flex;
align-items: center;
justify-content: center;
}
.header div{margin:0 10%; text-align:center;}
<div class="header">
<div>menu</div>
<div>logo</div>
<div>Cart</div>
</div>
refer this for flexbox ordering.
Use display flex for parent class of header elements and custom order can be specified like this :
.box :nth-child(1) { order: 2; }
I've tried doing things like .page-id-1122 #different-elements-i-saw-in-chrome-inspector-here { display: none; } without any luck.
Can anyone tell me how I'd accomplish this? Thank you in advance.
Just get your header id and go to your style css, add this code
body.product-template-default.single.single-product.woocommerce.woocommerce-page.customize-support .header-area {
display: none;
}
Here .header-area will be your header class/id.
Try this:
.page-id-1122 #different-elements-i-saw-in-chrome-inspector-here { display: none !important; visibility: hidden !important; }
can someone tell me the CSS to change the buttons from:
one by one >>>>> one under the other
like in the screenshot
Webpage:
LogIn webpage link
One under the other
Add this CSS
ul.the_champ_login_ul li { width: 100% !important; }
.theChampLogin { width: 100%; }
try using flex
.the_champ_login_ul {
display: flex ;
flex-direction : column;
}
A while ago I had managed with very limited CSS knowledge to remove the user name; widget boarder; picture boarder; and 'follow on Pinterest' button. This was achieved by tagging the widget (in HTML) with:
div id="pinterest-container"
and then using the following CSS commands to hide everything but the pictures:
#pinterest-container > span { box-shadow: none !important; }
#pinterest-container > span > span > a { display: none; }
#pinterest-container span a:nth-child(3){
display: none !important;
}
.post-body center div#pinterest-container span span a{
display: block !important;
}
.post-body center div#pinterest-container span span span a{
display: block !important;
}
However a short time ago this stopped working and the picture boarders, user name and ffollow button all returned: http://www.andrewmacpherson.me/p/precedence.html
I would be very greateful if someone could help me hide these again, I've been searching and testing but with no luck!
Many thanks
Andrew
I remember hiding things like this back in the Myspace days. Overriding certain elements was often a complicated and brittle process. Fortunately, we've now got CSS attribute selectors, providing a more elegant way to handle situations such as yours. The $= part of the following selectors are targeting class attribute values ending with those certain suffixes (_img, _col, etc.). Hopefully, these overrides will last a little longer than the last batch.
Remove picture and widget borders:
#pinterest-container [class$=_img] {
display: block !important;
box-shadow: none !important;
border-radius: 0 !important;
}
#pinterest-container [class$=_col] {
padding: 0;
}
Kill the follow buttons:
#pinterest-container [class$=_button] {
display: none !important;
}
To remove the scrollbars, you'll have to do something a bit more general. Note: this will show all of the content in each group of images, so no truncation occurs.
#pinterest-container span span {
overflow: hidden !important;
height: 100% !important;
}
I have 2 sets of menu items in my navigation bar.
Set 1 is labelled ".homemenuitem"
Set 2 is labelled ".othermenuitem"
I want to display homemenuitems on the home page and othermenuitems on every other page.
I was hoping to do this with CSS.
I started with the following
.home .othermenuitem {
display: none;
}
Which shows the correct menu on the home page, but I can't figure out how to hide the homemenuitems on every other page without using the unique page id (which will be a pain as the site grows).
Any help would be greatly appreciated.
Thanks
This is where the 'Cascading' part of 'Cascading Style Sheets' is your friend. More specific rules always override less specific ones, so if you do this:
.homemenuitems {
display: none;
}
.home .homemenuitems {
display: block; /* or 'inline' or 'inline-block', as necessary */
}
then the latter rule will override the former where it matches (on the home page), and otherwise, the first rule will always take effect.
Can you take the other way, making:
.homemenuitem {
display: none;
}
In every single page of your web, and only showing it on the home page id?
Thanks Michael, tweaked it a bit further and this is what worked for me, if anybody is looking for a similar situation.
.homemenuitem {
display: none;
}
.home .othermenuitem {
display: none;
}
.home .homemenuitem {
display: inline-block;
}
i have tried it on so many occasion , you can use this code .homemenuitem { display: none; } .home .othermenuitem { display: none; } .home .homemenuitem { display: inline-block; }