Using the Flatsome theme I have a few questions and would like to try and get them solved myself, is this the manner in which I should direct those questions?
I'm running WooCommerce I'd simply like to know how to make the breadcrumbs bar a little smaller where it displays the name.. on the single product page it looks great but I see no settings to edit it on the display list, i can show you a screenshot of the problem here (ALSO I WANT TO CHANGE THE WHITE BACKGROUD WHERE IT SAYS "HEADSHOP" TO SOMETHING MORE MATCHING) -- THERE ARE NO OPTIONS FOR CHANGING ANY OF THIS?
I'd really like to be able to edit this area and I'd like to gain more access to it, this theme appearance editor area wont let me do it, I've tried and tried to no avail!
With that being said, this is just the display of all the main products.. What throws me off is that in the Single Product page it formats exactly the way I want it to on all pages, see example here..
Im not an expert but I suggest you to put the URL of your website as minimum, because is going to be difficult to help you without what you have tried or the code of your website.
Following with the question, you can reduce the height of the container using some CSS. By default both margins (in this case the padding) are in 20px, so i just reduce them to 0.
.featured-title .page-title-inner {
padding-bottom: 0px;
}
.page-title-inner {
position: relative;
padding-top: 0px;
min-height: 60px;
}
This is how it looks with the modifications in the margins.
https://i.stack.imgur.com/r7KX7.jpg
https://i.stack.imgur.com/bMmNd.jpg
But still, I don't understand what it's keeping the text so high in the container.
To change the background color of that button, you can modifiy the CSS Property.
.nav-tabs > li.active > a {
background-color: red;
}
This is how it looks.
So you just need to put that CSS in your theme.
If my answer helped you, please consider marking it as an Answer.
Related
I have a WooCommerce site built with the Avada Theme. I've attempted to make the image gallery 'sticky' on product pages. The idea is to make the Image Gallery scroll down alongside the short product description / add-to-cart section on the right column, which tends to be longer.
I saw a line of code on this article here, which helped work out the code for the Avada theme (I'm using Avada's image gallery instead of WooCommerce's):
.avada-product-gallery {
position: sticky!important;
top: 0!important;
}
Correct me if I'm wrong, but from what I get from the linked article, this line of code hereabove would work, but needs overflow:visible on the body or bigger container where the gallery is.
I am learning coding at the moment so I'm kind of fishy on the subject - with all respect to fish. I have tried to trace back the container where I have to add the overflow: visible!important, but it's resisting me, so I am kind of lost with the code at something like:
XXXXXXXXXX .XXXXX {
overflow: visible!important;
}
I leave you an example of a product page I'd like to change to see if someone can help me identify the container which I have to refer on code to change the overflow display:
https://architectoutlet.com/shop/gifts/gifts-for-science-lovers/ti-asia-blue/
I come up with .flex-viewpoint .product { ?? .Fusion-row .product {?? avada-single-product-gallery-wrapper avada-product-images-global avada-product-images-thumbnails-left ??
I am all ears and open to learning, so any tip on the matter is welcome!
Thank you
best regards to all :)
You can add your own custom javascript
.avada-product-gallery is your product page gallery class
jQuery(window).bind("load", function() {
var width = jQuery(window).width();
if (width > 767) {
jQuery(".avada-product-gallery").stick_in_parent({offset_top:60});
}
});
Tested & It's working from my end.
Thanks in advance
I am completely new to this and am trying to learn on my own. One thing I am having an issue on finding a solution to is how to hide the page title on a WP site. I have read that leaving the page title blank, although solving the issue, may not be good in terms of SEO, so I would like to hide page titles instead.
I have tried using multiple plugins, all with no luck. Additionally, I have tried adding additional CSS code both to hide specific page titles and titles across the entire site.
The code I have been using is
.entry-title {
display: none;
}
and
.page-id-XXX .entry-title {
display: none;
}
None seem to work. Additionally, I tried to see if my theme has an option, and it doesn't.
Is anyone able to let me know what I may be doing wrong and point me in the right direction?
Use the code below to hide header.
.header-page {
display : none;
}
This will work when the header has class .header-page.
This CSS should go inside every page where you want to hide, if its site-wide add it on head.
<style>
.header-page {
display : none;
}
</style>
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
Ive got a link showing up in my wordpress menu that is not present in back end (the costumizer). The link/element only shows up in front end/the live page. I've been in touch with the theme support but they only said it was not from the theme. The code does not either give me an explenation to where it comes from. The code for the element is the following:
Register
LOL I CAN't even write the code without it showing up as only "Register" above.
I want to remove it. I have searched and tried different solutions on this forum but cannot find a way to remove the element.
So far I've tried to add the following code to the "costum css" in the costumizer with no result:
a[href='register']{ display: none }
I am not an expereinced code man. So please excuse my lack of explenation.
See code from inspect in picture below:
Picture from inspect. The element I want to remove is the >Register just where the pink ends
This is a picture of the menu. As you can see the "Register" link I want removed does not even get the same styling as the other elements in the menu..
Any one know how to remove this element? I've been struggeling for so long trying to find a solution.
Thanks!
It is likely added to the menu object by one of the plugins you have installed on the site.
Try turning off your plugins one-by-one and checking to see if it goes away.
you can try
.left-menu li:last-child { display: none; }
or
.left-menu li:not(.menu-item) { display: none; }
I have this blog post that I have been authoring. At the very bottom is an Additional Information expandable link:
Within there are two links to pastebin code:
[pastebin id="uSP54JHz"]
[pastebin id="5hv0vYxy"]
The article is on a Wordpress site and I have a plugin called Pastebin installed. I have tried following the advice to get the view of the pastebin code to use a smaller height instead of the full height for the code but I can’t get it to work.
Since WordPress 4.2, you can double click the embedded item to set max width and max height. It will add the WordPress [embed] shortcode:
[embed width=”600″ height=”400″]http://pastebin.com/hcv2WRnX[/embed]
Note: Doing it the WordPress way, using the [embed] shortcode, is backwards and forward compatible, and it works with all the themes.
To be honest, I don’t see the point in specifying in pixels anyway. I just wondered if it could be reduced somehow. Kind of like StackOverflow view behaves.
You can just set a max-height on the .embedPastebin in your CSS. I'm not sure about the embed shortcode (Note: the quotation marks in your example may not parse properly because they are ” and ″ instead of ")
Using the following CSS works pretty well:
.embedPastebin {
max-height: 300px;
}
If you want the embedFooter to always remain at the top, you can instead limit the size of the ol and change the overflow on it:
.embedPastebin ol {
max-height: 300px;
overflow-y: scroll;
}