Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi!
I’ve built a test site: Private Snippet
It currently has the SiteOrigin Slider activated, right beneath the menu.. however, the image position is too low.. I tried doing background-position in CustomCSS but have been unable to get the right class. Hope you can help!
Best,
Alex
Hi Lucidmist,
Based on your page, you might be better off with the Hero Widget (found in the SiteOrigin Widgets Bundle). The hero widget is basically an advanced slider that allows you to put text on top the image with ease. Take the Refined Design layout, and the Cafe Style Layout as examples of this. Both of the topmost sections are hero widgets.
To fix the image position we’ll have to use some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
#panel-20-0-0-0 { margin-bottom: 0 !important; }You might also need to install the SiteOrigin CSS Editor.
Hi Alex,
Thank you! You guys are awesome. Let me try that!
Best,
Alex
Hi Lucidmist,
How did it go?
Hi Alex,
It worked, thanks.
Just one quick question, can the image be moved the way you move a CSS image with “”background-position: center left;””?
Best,
Alex
Hi Lucidmist,
If it’s a straight up image, as in img rather than a CSS image, you can use:
If it’s a CSS, then yes, background-position would allow you to move the image itself however it won’t move the container of the image. For that, you’ll have to use something a float ot move it most likely.
Does this make sense?
Hi Alex,
Ok, that makes sense, thanks for your help and prompt response, really appreciate it.
Cheers,
Alex
Hi Lucidmist,
Great to hear! Is there anything else I can help you with today?
Hi Alex,
Actually, there is one more issue at the same url:
Private Snippet
I used the Hero widget to add a Youtube video, but the play button is not clickable.. hope you can advise!
Thanks,
Alex
Hi Alex
All good for now! :)
Thank you,
Alex
Hi Alex,
Sorry, I’ve resolved it by using the Video widget. All good!
Best,
Alex
Hi Alex,
Real sorry – just two questions:
1. I used the headline widget to create a headline for the video, as the default title that came with the video widget wouldn’t center itself. How do I control the padding for the headline widget so that the space below it wouldn’t be that far from the video?
2. How do I control the padding at the bottom of the video? (within the video row, which I have in grey background.. not after)
Thanks,
Alex
Hi Lucidmist,
You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
#panel-20-3-1-0 h2 { /* Check Us Out! Headline widget */ margin-top: 0px !important; margin-bottom: 0px !important;}#panel-20-3-1-0 .so-panel { /* Above video */ margin-bottom: 0px !important;}#panel-20-3-1-0 .widget_sow-video { /* Below Video */ margin-bottom: 0px !important;}Please note this CSS will only work for lucidmist. You might also need to install the SiteOrigin CSS Editor.
Hi Alex,
Thanks for your help. The headline CSS worked, but these two didn’t:
#panel-20-3-1-0 .so-panel { /* Above video */
margin-bottom: 0px !important;
}
#panel-20-3-1-0 .widget_sow-video { /* Below Video */
margin-bottom: 0px !important;
}
They didn’t do anything at all.. but I managed to increased to margin below the video by adding this directly into the widget Attributes CSS itself:
.widget_sow-video {
margin-bottom: 50px;
}
Will this cause any problems if I have the widget anywhere else?
Thanks,
Alex
Hi Lucidmist,
That CSS will be applied to every video widget on your website. If you’re okay with that, keep using it as it won’t cause any other problems.
Oh sorry, I had made a mistake in the above CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
#panel-20-3-1-0 { /* Above video */ margin-bottom: 0px !important;}#panel-20-3-1-1 .panel-widget-style { /* Below Video */ margin-bottom: 0px !important;}Please note this CSS will only work for lucidmist. You might also need to install the SiteOrigin CSS Editor.
Hi Alex,
Thanks again.. everything works now except this:
#panel-20-3-1-1 .panel-widget-style { /* Below Video */
margin-bottom: 0px !important;
}
Somehow, it isn’t doing anything..
Best,
Alex
Hi Lucidmist,
Sorry! Please try the following CSS:
#pgc-20-3-1 .widget_sow-video { margin-bottom: 10px !important; }Hey Alex,
Awesome, it’s working now.
Thank you so so much!
Cheers,
Alex
Hi Lucidmist,
Awesome! Is there anything else I can help you with today?
Hi Alex,
Really sorry, as a matter of fact, I have two more questions I need help with:
1. For the Hero widget – is it possible to shrink the slider image down on any tablet or mobile device? Currently, when the website is viewed on a phone, the front of the car image is cropped off.
2. For the headline and text on the Hero widget, how do I add a highlight or text background colour? I’ve tried using and defined display:inline, but it didn’t work.
Thanks,
Alex
Oops, and one more question:
1. For the Video widget, is it possible to use a thumbnail image over the video?
Thanks,
Alex
Hi Lucidmist,
Don’t worry mate. I love doing this. :)
1. This is really tricky. The image is resized via CSS functionality that “crops” the image at lower resolutions to try and make it responsive. You can however manually adjust it to try and get it closer to what you want. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
@media (max-width: 600px){ .so-widget-sow-hero-default-d90f68c77ae6 .sow-slider-image-cover { background-position: 67% !important; } }You might also need to install the SiteOrigin CSS Editor.
Hi Lucidmist,
Whoops! posted too soon.
2. You can/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
.so-widget-sow-hero-default-d90f68c77ae6 h2 { background: rgba(0,0,0,.5); display: inline; padding: 10px; }You might also need to install the SiteOrigin CSS Editor.
Hi Lucidmist,
For the video widget, typically no unless it’s a self-hosted video. As your video is a YouTube video you’ll have to make set up the thumbnail on YouTube’s side. How you would do that, I would have no idea.
Hey Alex,
You’re a genius, and super awesome! Thanks, everything worked!
And yes, silly me, I forgot about changing thumbnails on Youtube itself. Thanks for reminding me!
Cheers bro,
Alex
Hi Lucidmist,
Happy to be of help! :) Is there anything else I can help you with today?
Hi Alex,
All good for today.. thank you, so so much man! :)
Best,
Alex
Hi Alex,
Thanks for your help so far!
One more question, currently on my test site, I have 4 Features boxes set up. However, they are all different in size due to the amount of text. Is there any CSS that can fix the box sizes without being dependent on text quantity?
Thanks!
Alex
Hi Lucidmist,
You can manually specify the height / width. You could use overflow the y axis if you know there’ll be a lot of text. Example CSS would be:
.example { overflow-y: scroll; width: 500px; height: 500px; }Hi Alex,
One more thing – something strange. When I selected a different font in the Hero widget, the background text color CSS seemed to become ignored. Just in case, this is the code:
.so-widget-sow-hero-default-d90f68c77ae6 h1 {
background: rgba(15, 2, 0,.5);
display: inline;
padding: 0 28px 8px 0;
}
Originally the selected font was Helvetica Neue. I changed it to Lato and the text background color disappeared.
Thanks,
Alex
One more – even the background position code (below) got ignored after the font change.
@media (max-width: 1024px){
.so-widget-sow-hero-default-d90f68c77ae6 .sow-slider-image-cover {
background-position: 78% !important;
}
}
Hi Alex,
Really strange.. I got rid of the .sow-widget-sow-hero CSS, and replaced with #panel-20-0-0-0 instead, and it all kicked in again.
1. For Hero headline:
#panel-20-0-0-0 h1 {
line-height: 54px;
letter-spacing: 0.18em;
background: rgba(0, 0, 0,.5);
display: inline;
padding: 0 28px 8px 0;
}
2. For Hero background image:
@media (max-width: 1024px){
#panel-20-0-0-0 .sow-slider-image-cover {
background-position: 78% !important;
}
}
However, do you foresee the above causing any problems in the long run? Will the effect disappear just like the previous .sow-widget CSS?
Also, all that remains for now is my query on the Features box sizes.. hope you can help on that.
Thank you,
Alex
Hi Alex, (I feel like I’m talking to myself :S)
I suspect the issue was that sometimes other CSS was being applied to that element that was more specific. I would recommend giving this article a read, How CSS Selectors Work.
The CSS in your final post looks fine. It has no chance of affecting other widgets.
Hi Alex,
Lol. I had the same feeling too the last few days. We have a really common name. :P
Anyway, thanks for the article! Super helpful. As for the box size, I actually tried that prior to messaging you, as the scrollbars just didn’t look right. :/
Best,
Alex
Hi Lucidmist,
Could you clarify what you mean by didn’t look right? I don’t think you mean this but, if you want to change the look of the scrollbars you could make use of CSS3.
Hi Alex,
Sorry, I should have been clearer – what I meant was I didn’t want scrollbars in the boxes at all. If there was a way to make the 4 boxes resize on any screen while being the same size, that would be perfect.
Thanks,
Alex
Hi Lucidmist,
Ah okay. Could you point out which boxes your referring to directly? That way I’ll be able to provide you with custom CSS.
Hi Alex,
Sorry for the late reply!
Anyway, it’s the first 4 Feature boxes directly under the header image, and the icon boxes towards the bottom of the page..
Thanks,
Alex
Hi Alex,
I have some more problems now… I’m trying to integrate WooCommerce into the website, but things aren’t going as smoothly..
Product Page:
1. For the product page, once I disable the breadcrumb, the product image sticks right underneath the navbar.. a little space in between would be better. Here’s the page: Private Snippet
2. Also, the product page looks terrible on mobile – there is no side padding so on mobile everything goes right to the edge of the screen.
Shop Page:
1. I’m trying to create a Shop page, to display a list of products using shortcodes. However, it doesn’t display a short description of the product.. only the name and price, which isn’t helpful for the user or SEO. Also, how do I make the product listing bigger? It’s just a tiny thumbnail now. I hope to have the image take up at least 40% to 50% of the page, with the short description and Add to Cart button on its right side. Here’s the page:
Private Snippet
Best,
Alex
Hi Alex,
I found a workaround for the Shop Page problem I was facing. By setting column to ‘1’ in the shortcode, I was able to increase the size of the product thumbnail. So all that remains for this is the short product description I was hoping to pull from the main product page into this product list page.
Thanks,
Alex
Hi Alex,
My apologies, a few more questions..
1. I’ve made changes to the menu, using “logo in menu” option. I need the logo to be this size, so it can’t be any smaller. However, the menu text is now too high.. I tried adding margin-top but the hover menu looks bad. How do I move the text closer to the bottom edge of the menu, while retaining proper hover menu size?
2. Is it possible to move the header image so that it is underneath the menu bar and logo? I would like to make the menu bar transparent and overlapping the header image, so that part of the header image shows under it.
3. When the menu is in this layout, when the browser is resized, part of the menu text goes awry instead of going into a mobile menu. How do I prevent that? I know most people think that users do not resize browsers, but in actual fact, some do when doing multi-page browsing or sizing the browser window narrower while reading instructions and working concurrently.
My sincere apologies for so many questions… really hope you can help..
Thank you,
Alex
Hi Lucidmist,
I’m unable to get the scrollbars to appear for any of the mentioned boxes. What browser are you using?
Regarding the spacing of the product image and the navigation. This issue was introduced due to the following CSS:
#main.site-main { padding: 0; margin: 0; }To fix this issue on product pages please use the following CSS:
.single-product #content { padding-top: 25px; }By the way; as you’re a Vantage Premium user, you’re entitled to priority email support. If you would like to make use of that, please follow the instructions found on this page. Please reference this thread. I would recommend switching to email as our replies will be much faster than the support you get via the forum.
Hi Lucidmist,
Whoops. Pressed enter too soon. :S
If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
The following CSS will move your menu down. You might need to adjust it.
.menu-menu-1-container { padding-top: 30px; }You might also need to install the SiteOrigin CSS Editor.
2. I’m not too sure if I follow. Could you elaborate on what you mean by header image?
3. You can accomplish this using a theme setting. In your WordPress admin, navigate to AppearanceTheme Settings. Under the navigation heading is a setting called Mobile Menu Collapse. Please increase the amount to, say, 650px. That should resolve the issue but adjust it if need be.