Hey guys
I’m making a website using WordPress (Rocked theme) and SiteOrigin Page Builder.
It’s supposed to be a one page website. I’m happy with most of what I’ve done so far, and have used the panel html (#panel ?-?-?-?) method to make sure that each link in the menu scrolls down to the corresponding section of the site.
But the main problem is, as much as I want the Menu to be a sticky one (so that it stays with me wherever I navigate around the site), it was covering some of each section when I scroll down to it.
I have been suggested to use the following code in the page’s CSS section:
.panel-grid-cell .widget-title {
padding-top: 180px;
}
But the 2 problems I’ve been getting is that it doesn’t scroll down correctly the first time, but does so after that. And also the Contact link doesn’t seem to work properly.
Can anyone suggest the best solution for me to overcome this please?
Also if there are any other major problems with the site, be free to let me know.
Many thanks in advance.
Hi Wavyglanbles,
I’ve taken a look at your website and I don’t seem to see the issue you’ve described here. Regardless, I would recommend contacting your theme developers as this is more of a theme question but I’m still able to help – I’m honestly just not very familiar with the Rocked theme. Would you like my help with this issue?
Hi Alex
Thank you for getting back to me.
Last night I used Google Chrome to view the website and when you first click a link the menu covers the title but when going on links after that it’s fine. And I also can’t seem to get the menu off when I go to the Contact page.
Any help from yourself would be highly appreciated.
Hi Wavyglanbles,
Oh okay. Sorry, I must have misunderstood what you were asking. You can correct 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-headline-sow-headline-0f842b6a78a9 h3 { padding-top: 180px; display: block; }You might also need to install the SiteOrigin CSS Editor.
That’s excellent. When I get home from work later on, I’ll put this code in and I’ll let you know how I get on.
Thank you! :)
Hey Alex.
That code got the Contact link working.
But I’m still getting this problem of the menu covering up whichever link I click on first.
I currently have the code you gave me in the SiteOrigin CSS Editor.
And the code
.panel-grid-cell .widget-title {
padding-top: 180px;
}
is in the Front Page’s Additional CSS section.
Hi Wavyglanbles,
To fix that issue I would recommend changing your links to the row ID rather than the editor ID. To do this just omit two of the numbers, and change panel to pg. For instance, about will change from #panel-2-1-0-0 to #pg-2-1. Does this make sense?
That is amazing! Thank you so much, that particular problem is fixed for now.
Just a small thing. Just for aesthetic reasons, how hard would it be for me to change the “pg” links to #home, #about, etc for example?
Hi Wavyglanbles,
Really quite easily actually. Open up your homepage, find your about row (for example), and then click the wrench above said row and hit edit. Head on over to the row styles sidebar and click attributes. Input about (no # as that’s implied). Then update your links.
By the way, I really like the look of this website – you’ve done an excellent job!
I understand where you’re coming from but when I do the wrench on each row, I only get Visibility by screen size and screen layout in the attributes section.
Hi Wavyglanbles,
That’s odd. Does your screen look different to the one pictured below?
Yes it does. In that very attributes section, I only have 2 visibility options.
Hi Wavyglanbles,
That’s really odd – I don’t know how to explain that. Could you take a screenshot? If you want to keep it private you can check the “private reply” checkbox at the bottom right of the post.
This is a private message.
Hey Alex
I sent you a private message of those screenshots.
But I fixed the Contact section again by doing it again and it works well. The only issue I have is, the heading for Contact is black instead of white (the font colour of the widget’s text) how do you change the colour of just that one heading?
Hi Wavyglanbles,
I’m not too sure why only those options would be showing – I’ve honestly never seen them. :S
Regarding your contact header, 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-2-5-0-0 .widget-title { color: #fff; }You might also need to install the SiteOrigin CSS Editor.
Hi Wavyglanbles,
So I’ve heard back from the development team and apparently themes and plugins can remove certain settings from those groups. I guess for a more streamlined experience? If it really worries you could run a plugin conflict issue (this isn’t a conflict, but it’s the same steps to work out what’s changing it). Can you try disabling all non-SiteOrigin plugins and see if this fixes the issue? You’ll need to clear all your caches after disabling your plugins.
If it does fix the issue, then try re-enabling your plugins one by one until the issue comes back. This procedure will help diagnose which plugin is causing the issue.
Once we know that, we’ll be able to look at what might be causing the conflict and either solve the problem or help you find an alternative plugin.
If you aren’t using a SiteOrigin theme, then you can also try temporarily switching to one of the default WordPress themes to see if the issue is theme related.
Hi Alex.
I done some plugin detection, and what was weird was that I found after deactivating the plug-in ‘Widgets for SiteOrigin’ by wpinked, the attributes section with the 2 visibility options was gone, and all I have left now is the Theme options for each row.
That was the only non SiteOrigin widget I had especially for SiteOrigin.
I have 3 official ones in SiteOrigin which were PageBuilder, Widgets Bundle and CSS.
Hi Wavyglanbles,
That’s odd. Was there any functionality in that plugin that really needed? If so, I can help you find alternatives.
Regardless, I would recommend submitting a ticket to the developers and reporting this issue.
Hi Wavyglanbles,
You actually might be able to disable the plugin, add your ids, then re-enable the plugin and you’re good to go. There’s little reason it would remove the data.
If I disable that plugin. I just get the Theme Option and all I have is Row Class. There’s no Row ID, Cell Class, or CSS Styles at all.
How do I go about submitting a ticket to the developers?
Also I changed the Contact title to white via CSS editor but just a little thing is there any way of changing the underline to white as well?
Thank you for your help. :)
Hi Wavyglanbles,
Typically you can contact them via the WordPress.org forums, but shockingly (as in I didn’t know – Just started my third week), the author actually works for SiteOrigin. I’ve forwarded them this thread.
Sorry about the underline – thought it was attached. You can fix this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
#panel-2-5-0-0 .widget-title:after { background-color: #fff !important; }You might also need to install the SiteOrigin CSS Editor.
Thank you very much, the contact page looks ideal now. And am looking forward to seeing what the author thinks about this issue with the rows.
Hi Wavyglanbles,
Awesome. Is there anything else I can help you with today?
Hi Wavyglanbles,
I’ve spoken to the developer, Adi, and he told me that that the row IDs and such have recently been added in a new update. Can you please check if all of your plugins are up to date?
Hi Alex
According to my Dashboard, all the plugins are up to date. I forgot to mention that I also have Ultimate Addons for SiteOrigin by Ingenious Solution activated.
Nearly everything on my website is done now except the gallery, I did use Ultimate Responsive Image Slider which worked before but recently it would just show the images one by one separate on the page instead of bound in a slider with thumbnails.
But that and the Row ID problems are all I have to work on now.
Hi Wavyglanbles,
I’ve sent another message to Adi. I’ll hear back from him in a couple of hours – SiteOrigin is a remote company with employees in different timezones. :)
The gallery issue sounds like another issue I recently logged in our issue tracker, Add the ability to set relationship in image widget. Does your gallery plugin work in a similar way? Maybe it has a setting that will allow it to detect all images on the page, and automatically put them in a gallery?
Hi Alex
Thank you for getting hold of Adi for me, I completely understand with the timezones.
I think that might be a similar issue with my gallery. I’ve used the UR Image Slide settings to make a gallery and added shortcode into an Visual Editor widget. And the only lightbox I have is Huge IT Lightbox – Free version. Would the lightbox be the issue?
The weird thing was that it worked before where I had the slider and thumbnails, but for some reason it doesn’t show up now.
I used Meta Slider as an alternative but the problem I had with that was not all the thumbnails showed up and most of them were close together for some reason.
Shame that SiteOrigin doesn’t have it’s own gallery widget.
Hi Wavyglanbles,
It’s possible. I’ll be honest, I’m honestly not very familiar with any of the plugins you’ve mentioned so I can’t really comment on if they would be an issue or not.
Meta slider I have however used. Could you show me an example of the problems you were having? I might be able to help you resolve them.
It’s not something we’re actively considering, but I’ll definitely mark your post as a feature request.
Hi Alex
I have enclosed a screenshot of what I currently have in the gallery.
I’ve uploaded 2 images into the gallery as an example. It’s supposed to be a fading slider with round bullet points as thumbnails underneath but it’s just 2 images stacked on top of each other.
Hi Wavyglanbles,
Would it be possilbe for me to get access so I can take a look at that? I might be able to spot the issue.
This is a private message.
Hi Wavyglanbles,
Okay so I got the gallery working – sometimes shortcodes don’t work in the editor, this being one of those times. Please note that I fixed it via creating a text widget. I left the previous widget there just in case you had some settings or something you wanted to copy over.
Hi Wavyglanbles,
Found the issue with you not being able to set the row ids. Widgets for SiteOrigin is not at fault, your theme is – I would suggest contacting them about this issue. I changed theme real quick and set up the IDs. All you need to do is change the menu over. :)
Thank you Alex. The gallery looks amazing now! Seen it on the mobile version and looks great but will have a look at desktop and also the Row ID issue when I get home later.
Many thanks for looking into it for me and will give you another update tonight. :)
That gallery is ideal now and is exactly what I want so I deleted the past widget.
I see what you mean now, I just experimented with other themes and Rocked is definitely the problem. I would use a different theme from Rocked but I like the layout of it. Unless there’s a SiteOrigin theme similar to it.
Hi Wavyglanbles,
Happy to help mate. :)
We’ve recently released a theme, SiteOrigin North, that I feel is similar. I would suggest giving this video a watch to see how simple it is to set up. Please be aware that that video is not safe for people who are scared of waves. :P
Hi Alex
Sorry for taking so long, finished work a tiny bit ago and just changed over to Site Origin North. Really happy with this theme!
Especially the padding of each row, and the fact the menu links work really well.
I may have a couple of problem in a bit but will raise them later on when I have everything sorted out. One I want to raise now, each time I click a link to go to a row, the row itself has a blue border around it, how do I get rid of this?
Actually I have 3 other problems when working with the new theme.
1) How do I change the navigation menu font and colour?
2) How do I capitalise, central, enlarge and underline the headings?
3) When going on the site, the header image narrows and then expands to full width within a couple of seconds I’m not sure why this happens.
Also mentioning again about how to get rid of the blue border when going to each row.
Thank you for helping. :)
Actually I sorted out the headings now through H3 CSS, and looks ideal.
But the other problems I’m stick stuck with.
*still stuck with
Hi Wavyglanbles,
You can remove the blue line with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
a:focus { outline: none !important; }You’ll have to use CSS for the menus also (I’ve submitted an issue about this)
.menu-menu-1-container { font-family: fantasy; color: #f00; }You might also need to install the SiteOrigin CSS Editor. Not too sure what you mean by the third issue. Could you provide a video / screenshot of this issue?
Hi Alex
Thank you for getting back to me. I’ve just finished work hence why I’ve been ages to reply.
Many thanks for the CSS. I will apply that onto the site asap.
I have allowed the site to go live now so you can see the small issue I’ve had when it comes to the screen narrowing here.
Website
I also have a small problem when it comes to viewing the site via mobile phone. It doesn’t fill up the entire screen when in portrait mode.
Not sure why this happens.
Many thanks in advance.
I’m not sure why but that blue outline is still coming up after adding the code into the Custom CSS.
boutiquenailsplymouth.co.uk
Hi Wavyglanbles,
You can fix this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.
/* Fix full width issue for contents on mobile devices */ @media (max-width: 720px){ .site-content .container { margin: 0 !important; padding: 0 !important; }That fixes the issue for me, please confirm if it does for you. You might also need to install the SiteOrigin CSS Editor.
That’s brilliant, thank you.
Would you be able to help me with just one more thing please? Would you be able to check my weblink to see if the blue outline issue still exists? And whether you see what I mean about the screen narrowing.
http://boutiquenailsplymouth.co.uk/
Hi Wavyglanbles,
The screen narrowing should have actually been fixed with the last CSS I sent you.
The following CSS should remove the blue outline.
.panel-grid { outline: none !important; }That CSS for the blue outline is excellent! Thank you. I don’t see it anymore which is ideal.
When I said about the screen narrowing in the last post, I meant for the desktop homepage. I wasn’t sure if you noticed about the site, where the top header image shrinks then fills up a second later. I’m not sure if there was anything to prevent that.
Apart from that, the site is done and is live. I’m just in the middle of doing the Yoast SEO for it which should be done soon.
:)
Hi Wavyglanbles,
Ohhhh… Okay, got it. I’m honestly not too sure how to resolve that. I’ll ask around to see if I can find a soloution.
Sorry for the late reply. I would really appreciate it if you can find a solution.
Apart from that, I’m very happy with the site now and is working well. :)
Hi Wavyglanbles,
I’ve thought about it and maybe if you set a height / width for the logo anchor. That way there won’t be a jump when the image is loaded and rendered as the browser will prerender it like that. Please add the following CSS and tell me if it works:
.site-branding a { width: 350px; height: 75px; }I’m afraid it’s still showing the same issue. It’s nothing major as it works well on iPads, etc.