I'm new to Wordpress but have an understanding of HTML/CSS. I recently fixed an issue on a site where a button wasn't being rendered properly.
I added the CSS changes to the custom CSS box for that particular page (the homepage). The changes worked on the editor preview but after saving and publishing the fix isn't live. I had thought that it might be a cache issue (WPEngine) but I did this two days ago. Shouldn't that be enough time for it to resolve?
I've cleared the cache on all my devices.
Is adding custom css in the WP Admin the way to fix this or does this need to be addressed in a different manor by uploading files or changes files via FTP?
If you clear your cache and cookies in your browser you should be able to see your changes almost immediately if you add your CSS through the wp-admin custom css area.
A good way to check if that code is there is by viewing the source of your page and searching for the CSS in your dom. If it is not there, but added into your custom css in the theme it might be a problem with your chosen theme.
If you change the theme's css directly through FTP you will want to keep in mind that if you ever update your particular theme, all your custom css will be overwritten and you will lose it. You can see more on how to add custom css here:
http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/
Related
I'm a web development student, and I am helping a friend in adding some custom links and slider to her wordpress website. The thing is the developer who made her website 6 years ago didn't create a child theme and she agrees to not making any update
I need to add some links in the footer widgets, which i did, but i see that there is an image background to the container containing these widgets, is it safe if i just remove the background from the theme css file ? I mean as she isn't updating her theme nor website, can I achieve it by removing it by editing the theme CSS,
ps sorry for my newbie question but can't find any ressource on this special question.
it looks like this, there is a background on the div (i've put the same color on the smaller div)
Thank you for your help and your time.
It's not a best practice to edit the Parent theme CSS. Even if you do so when a new update comes it will all be overwritten(If you don't update your theme periodically you will be missing out on many security fixes). So it's best if you can create a child theme and update the changes there. Just change the current theme to your child theme it's just a one click action and will save you all your changes in the future. Hope this helps.
if I understand your question correctly, I'd say it's not safe to remove the background CSS from the theme's style.css (or whatever file it is using). The problem might be theme updates that'll overwrite your changes.
So the best would be to create a child theme with a fews clicks, it's really easy:
https://codex.wordpress.org/Child_Themes
So you won't have to bother with updates.
Depending on the WordPress version you might have the Custom CSS Section within -> Appearance -> Customize - https://en.support.wordpress.com/custom-design/editing-css/ - Here you can just write your own CSS to overwrite the background of the container.
This might be a weird question but i do this often enough that I'm going to ask, When i am making some adjustments to the look of my web page via CSS I often just inspect element and put in the changes and then when it looks right i copy and paste those changes back to my css sheet and save (the css files are located on my remote server uploaded with FTP), occasionally i accidently refresh the page without the css properly copied and loose my css, is there a way to "get back those changes after refreshing my page or is there a tool i could use to automatically save/back them up so they don't get lost?
You can do this with DevTools Workspaces: https://developer.chrome.com/docs/devtools/workspaces/
You can only make changes to CSS in a file, not inline CSS or HTML markup.
I hack styles into pages and copy them over in the same way that you do.
To answer your question, I don't know of any way to get the changes back (clearing changes is the whole point of 'refreshing'), but here are 2 alternative options:
Make smaller changes (I try to focus on a single element/node at a time)
There are a lot of chrome extensions that tackle this type of problem
https://chrome.google.com/webstore/detail/devtools-autosave/mlejngncgiocofkcbnnpaieapabmanfl?hl=en
A client of mine would like me to go into their WordPress website and add a fixed button to the bottom-right. This button should be on every page.
I know HTML, JavaScript, CSS and PHP quite well, but have never used WordPress before and it seems a little frustrating.
I only need to add this button and link it to a URL, but I don't want to download additional plugins. Can I add my own HTML to a theme? I've heard of the ability to make Child Themes to prevent my additional HTML from getting wiped when the parent gets updated. How does this work and how can I use it to achieve the above?
Child themes are the typical way to modify an existing theme, so that you can still update the original theme as its developer releases new versions. It is correct that updating the theme would wipe out your changes, if you don't use a child theme.
I've only made a couple child themes myself, but I found this documentation helpful:
https://codex.wordpress.org/Child_Themes
For modifying template files like the footer, the first section "Creating a Child Theme from an Unmodified Parent Theme" is the minimum to get started. The style.css file contains metadata that tells WordPress about the child theme and its parent, even if you don't add any styles. The functions.php file makes sure both themes' stylesheets are loaded, and can be used for other functions later. The page above has some code you can mostly copy and paste, with some changes for your site's specifics.
Once the child theme exists, you can copy footer.php from the original theme into the child's directory, and modify it as needed. Keep in mind that since you are overriding the original theme's footer.php, if there are later changes in the parent theme's footer.php, you may need to manually update your copy, to combine their changes with your site-specific code.
If you have a separate site or development environment where you can test your child theme first, I'd recommend using that, then copying it to the live site when it's ready.
You would have to do this within your Wordpress Theme / Template files.
You'd have to learn the architecture of Wordpress CMS (mostly) but also your applied theme you'd be customizing and adding this feature. You'll have to know what .php files drive what pages and where you can add this feature.
If you don't want to mess with both any core Wordpress CMS files nor your original applied 'Theme' files; you can consider creating a 'child theme' or 'plugin' to extend the features and functionality; this way.
Please start by understanding Wordpress CMS further. Here's a good article: 'http://www.wpbeginner.com/beginners-guide/beginners-guide-to-wordpress-file-and-directory-structure/' also check http://wordpress.org
Hope this helps, g'luck!
Building a child theme is ultimately the best thing to do, as any future theme edits for the client can be done there. Here's an article on WP child theme creation.
A quicker way should be mentioned, although it can be limiting: Go to Dashboard/Appearance/Widgets, make a new Text widget and place into your footer region. This is assuming, of course, that the theme you're using has a footer region defined (most do). In the widget, use some HTML like this:
<div style="float: right; width: 60px; background-color: red">BUTTON</div>
Hi Stackoverflow friends! I've been playing around with Materialize CSS framework and as instructed, downloaded, extracted files and set-up directory structure as per the set-up page. Being all set up, I've now begun to copy certain snippets of HTML from the 'components' section of the Materialize site, which work fine until the point I want to change anything. For example, I thought lets change the colour of the nav bar from the classic Materialize maroon to blue, although I noticed the relative link points to the minified CSS file (which I obviously can't read) - I changed that link to 'materialize.css' (long form CSS), but noticed when I refreshed the page, no styling at all was there? Any tips as to how I can manipulate styling without writing new CSS? If I have completely gone about the wrong way, please let me know also? Many thanks, Nick.
I'd like to make a disclaimer that I'm brand new to both CSS and Wordpress.
I've been using "Google Inspect" to edit the CSS of my Wordpress site. Everything looks like it is working well as I'm making the changes but the second I refresh the page it reverts it back to it's original formatting.
I am using this resource but the solution he came up with still doesn't seem to work for me.
Right now I am:
Saving my CSS
Making changes to the CSS
Saving my CSS again
Refreshing the page with no luck...
I'm not sure if there is any other information that I can provide. Let me know if there is and I'll update this post.
Any help would be greatly appreciated.
after reloading your change CSS code not working because it's either not saving to your CSS file or you may have to clear your browser data
Try viewing your page in another browser or incognito mode. This will force your browser to refrain from using any pre-cached versions.
Additionally, I would highly recommend using child themes when modifying your wordpress CSS. This will prevent your stylesheets from being overwritten when wordpress updates.
ok, maybe I'm wrong here, but it sounds to me like you are just not saving the stylesheet (which holds all the CSS of your site) correctly.
Perhaps I can summarize the technique from the other post quickly:
Open the browser element inspector and make your css edits.
Navigate to the css style sheet in the inspector and save the file
to your computer as style.css in your theme folder
Refresh the page and hope to see the changes.
This is making some assumptions I'm not sure are happening in your case:
This will only work if you are doing this in a local development
environment OR you are FTP'ing this style.css file to your server.
You aren't making any changes to currently unstyled elements. The
web inspector will add these as inline styles and they won't be in
said stylesheet.
I don't mean any disrespect by this whatsoever, but you will save yourself a ton of pain and suffering by learning how to do this right the first time.
Download:
Atom - Code editor
Desktop Server - The free version
Learn how to use those to create a local development environment and then use Atom to change your CSS.