Hello,
I have been using SO Custom CSS with great success but something has gone wrong over the past few days.
All of my CSS code appears correctly on the Custom CSS screen [Appearance/Custom CSS] for all pages. However, on website page the changes only appear on my HOME page when the Custom CSS plugin is activated. When I deactivate the Custom CSS plug in the home page syling reverts back to the before css view and the other pages css styling become visible on the pages (Join, join2, join3, testimonials, about us).
Custom CSS – Activated
HOme page displays correctly with all css changes applied
All other pages – display incorrectly
Custom CSS – Deactivated
HOme page display incorrectly
All other pages – displays correctly with all css changes applied
Website is www.warriorpacks.ca page passwords are 1234
Please help,
Thank you,
Arlene
Hi Wpacks,
This sounds like it could be a plugin conflict issue. 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.
This problem also sounds like it might be a caching issue. The first thing to check is server-side caching through plugins like W3 Total Cache, WP Super Cache, etc. If you have any of these caching/performance plugins installed, try clearing their cache and see if that helps.
It might also be browser cache. Try clearing your browser cache, and then refreshing the page to see if that helps.
You can read more about this sort of issue on the WordPress codex.
Hi Alex,
Thanks for the suggestions. I tried everything that you recommended but the issue still persists and it created the same issue on one additional page. I have deactivated all non site origin plug ins again so that you can see how the pages look with the custom css activated.
Currently activated
Page builder
custom css
SO widgets
Home page – Custom CSS makes the ‘Warrior Packs’ yellow. Works fine when Custom CSS is activated
Join Pages – Custom CSS makes the Select your location wording bigger and nicer – only works when custom css is deactivated.
Thank you,
Arlene
Hi Wpacks,
Actually now that I think about it sounds like you want to restrict certain CSS to only be effective on certain pages. If so, you can do this by directly targeting that page.
On every WordPress page, you’ll find a unique ID class that will allow you to directly target that page and only that page. It’s always attached to the body of the page. There’s also a couple of other useful classes attached to it and here’s a quick run down of what is attached to my local home page.
home
This class is only ever present when the current page is the homepage.
page
This tells you that the current page is a page. This is only present on actual pages (read: WordPress defined pages) and will be replaced with something else on non-pages. (example being single-post)
page-id-49
This is that unqiue ID I was talking about before. If you target this class it will ONLY affect this page.
logged-in
Only present if the user is logged in.
admin-bar
Only present if the admin bar is visible (remember, this can be disabled by the user)
siteorigin-panels
This is present when the page was built using SiteOrigin Page Builder.
—
Hopefully, this helps you. I would also recommend giving this article a read, How CSS Selectors Work.
Hi Alex,
I don't want to restrict it. I just want it to work the way of has for the past 4 months. Custom CSS activated and all pages display perfectly. How do I get it back to that?
Thank you,
Arlene
Hi Wpacks,
Maybe I wasn’t understanding what you’re trying to do. Based on your most recent post, I think you’re trying to disable Custom CSS while retaining the CSS applied via that plugin. Is that what you’re trying to do? If not, could you please elaborate.
Hi Alex, no that's not it.
My pages looked perfect because of the changes that I made to them on Custom CSS. All of a sudden, after months of being perfect 3 of the 20+ pages look terrible because the custom CSS fixes are not appearing.
So I followed your instructions and noticed that if the custom CSS is on then three pages are wrong but when I deactivate custom CSS then the 3 pages in complaining about appear perfect and all the others are a mess.
I just want the Custom CSS to be activated and all my pages look nice again. All at the same time.
Thank you,
Arlene
Hi Wpacks,
Sorry for the misunderstanding. Are you using Hostgator Optimized WordPress hosting? If not, could you please tell me what plan you’re on? It’s possible, based on your new description, that this is a server-side cache issue.
Yes, I am with Hostgator.
Hi Wpacks,
Are you on the Cloud plan, or the managed WordPress plan, or a different plan?
I'm on the Shared/Baby plan.
Hi Wpacks,
So it’s definitely not a server side cache issue. This is a tricky one as CSS shouldn’t break overnight for without a reason. Could you send me a screenshot of something not looking like it should? (with a comparison shot of it working like it should) I know I’m asking a lot but, as mentioned this is a weird and tricky situation.
Hi Alex,
Here are a few screen shots…. It just happened again with my home page now.
Hi Wpacks,
I can’t seem to see the screenshots. Could you please try sending them through again?
Hi Alex,
I opened the sent file and the word doc looks fine it is a .docx document. I have saved it as a PDF – hope this works.
Thank you,
Arlene
Hi Wpacks,
I can’t seem to see that either. Could you please try uploading it via this website?
custom css issues
custom css issues
Okay, here they are…
It keeps changing css issues
It changed again..
Hi Wpacks,
I can’t seem to click those links. Please post just the links – don’t give them link text.
Hi Alex,
The last two time i clicked on the add media link and then found my docx and pdf files. i didnt name the links. is there another way?
Hi Wpacks,
Could you please try uploading it via this website?
I added a page to my site. it is called custom css issue.
https://file.io/PJ6eBK
Hi Wpacks,
Thank you for doing that. I’ve got the pdf. Can you please activate SiteOrigin Custom CSS so I can take another look based on pdf?
it is activated right now.
Another page is wrong now. The testimonials page was completed and had a minor custom css change that wouldnt show on the page. now random parts of the page have zoomed. I just dont understand what has happened. This site was almost finished.
Hi Wpacks,
I see the issue. Would it be possible for you to create a temporary admin account for us so we can make the changes to your CSS (there are quite a few)? You can create the account with the following email address:
[email protected]
Just navigate to UsersAdd New in your WordPress admin. Enter siteorigin for the username and [email protected] for the email address. Make sure you’ve selected Administrator for the role and enabled the Send Password field so we receive the details.
Once we’re finished taking a look, you can delete this account. We’ll let you know when to do that.
Hi Alex,
I just set you up. Sorry about last night – it was 1:00AM here when I received your second to last email and went to sleep.
Thank you,
Arlene
This is a private message.
Hi Wpacks,
Ironically I was in the same boat last night. When you sent your message it was roughly 3am and I had only just gone to bed. :/
Private Snippet
I’ve had a look at your CSS, and set up (widget wise) and return to my initial solution. The reason why certain things may appear differently depending on if the plugin is active or not is due to how you’ve set up your CSS. For instance, on the home page, you mentioned the line being smaller and it is. This is due to the following CSS that you put in your editor.
hr { width: 200px; height: 0px; }The line, without that CSS added / active, will default to full width – ie. what you would like. The CSS however tells the browser to render the hr element with a width of 200px, what you don’t want. If you would like this CSS to apply only to certain elements, or pages you’re going to have to make use of more specific selectors.
If you could tell me a little more about the CSS in certain places I’ll be able to help you retain it while returning certain elements of the page to how they were originally set up.
Hi Alex,
i deleted that hr part of the css and refreshed. every page seems to look worse each time i look. Now the home page social media icons are the full width of the page (noticed this last night). This site took me months to build and was nearly finished. I dont understand why after all that just one day it would blow up like this.
Whenever i used the custom css on my page I would always change the color first to make sure that the correct text was selected and then make all of my changes to it. really dont understand what has happened here.
Are you able to fix this or should i delete this page and start over?
Thank you,
Arlene
Hi Alex,
Ive decided to start over.
Thanks!
Hi Wpacks,
A single line of CSS can ruin everything if it’s too vague. Take for instance the hr CSS you added. That change affected everything and you hadn’t noticed it until recently. How long has that been there? There could be many things like that. You need to be more specific in targeting when using CSS.
This also explains the social icons. You set a large font size (something like 48px) for span. The social icons make use of spans to display the actual icon so those became massive. I’ve taken a look at your website again and it looks like you’ve blanked your custom CSS. Hopefully, you have a backup because that’s the wrong move. You just need to correct small minor mistakes and your website will return to exactly how you want it.
I would strongly recommend rereading my second comment on this thread as that’s exactly the type of information you need to avoid prevent these issues in the future.
Hi Alex, I don't know how that HR code got there. I deleted it and it made no difference. Each time I looked at my site it was worse. Eventually, all of the screens were just grey.
The CSS some how has shifted. The social icons were never 48 px. That would have been a header like 'warrior packs' on the home page.
I don't understand how to do the css the way you suggested. The way I did it worked for months and then something caused it all to shift.
For example: on the Custom css screen I would open up the home page. Then select some wording on that page. E.g. Fitness as a Team. Then I would change the text Color to a wild Color like Red. If the font Color for Fitness as a team changes to red then I knew I selected the text properly. So then I would adjust the Color and text size and the. Save that CSS. It's worked for every page and I have 25 pages.
I only switched themes to start again and I saved all of the CDs to a word file. I will switch the themes back right now and reload the CSS and setup your admin access again.
Thank you,
Arlene
This is a private message.
Hi Alex,
The pages are:
Home
About us
Join 1,2&3
Contact
Testimonial
They are all grey now deactivation custom CSS no longer makes a difference.
Thank you,
Arlene
Hi Wpacks,
The grey you’re seeing is because WordPress falls over at a certain point. When logged out you’ll get a better idea of when but regardless the issue still happens.
I’ve disabled all SiteOrigin plugins and the issue still remains so I ran a few more tests and decided on your theme being the issue as when that is changed the issue goes away. There’s an update out right now maybe that fixes it. If it doesn’t I would recommend contacting your theme developer to ask for support on this issue. I wish I could be of more help but without full access – which I’m not going to ask for, I can’t debug this further.
Hi Alex,
I really don't understand what you mean about WordPress falling over.
The issue is the Custom CSS and that is why I contacted your company. I'm aware that switching theme brings back my site however it still a lot of work to relearn the new theme to fix all of the format and style changes that appear after switching.
Updating the theme won't fix it as the update has been available for a while yet my site was fine. I updated it anyway and the grey page persists.
I also deleted the theme and reinstalled it and the grey page persists.
So yes on other themes the pages reappear but I'm pretty sure that if I copy my old custom CSS it will mess it up just the same.
That HR CSS code is halfway down the page which means it was done a long time ago. It would have been there because I selected something specific and made the change to is. Everything's I use Custom CSS I look at all of my pages after saving it.
Is there a way to do this support over the phone? I am willing to pay if that's what it takes to fix this issue.
Thank you,
Arlene
Hi Wpacks,
I understand this is a very frustrating experience however what we’ve discovered so far suggests it’s a theme issue. So to cement this once and for all I want you to please break a different theme by adding your old CSS to ir. Now, obviously, I know that sounds odd but by doing this it will tell us one of two things;
If it breaks, we’re at fault and I will go to the ends of the earth to ensure this issue is fixed as soon as possible.
If it doesn’t, your theme is broken and I strongly recommend you contact your theme developer because I can’t fix it.
I understand that it might sound like I’m trying to avoid the issue – I’m not. That’s far from it. I honestly believe based on what we’ve worked out that is a theme issue. I need something to prove me wrong. Please prove me wrong. I want this to be fixed if we’re causing it.
Although I started all over with this website it turned out that the issue persisted on my new version.
SoLVED. the site had a login link to Heal Code at the top of the screen. they had made an error in that code by adding one extra character. That was the issue the whole time and was only discovered after I rebuilt my site from scratch :)