WordPress issue, with a link div and a theme background - html

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.

Related

One-off Wordpress style changes: What method to use?

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/

Add my own HTML to WordPress website

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>

How to edit Materialize CSS style sheets?

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.

Wordpress - Removing default styles

I'm trying to create my own Wordpress theme just for a one page, secured form. This form looks as it should normally, as you can see in this screenshot -->
Unfortunately, even though I've included my own reset.css file, WordPress is inheriting styles from the theme's style.css file. See here -->
As you can see, the font size is much smaller, input fields aren't getting proper padding, the body background is supposed to be blue but is a grayish color in the second screenshot, fields aren't getting proper margins etc.
I know everyone is going to be asking for code, but before I do that, I'm just wondering if there is a default css file you can delete or modify that most of these styles would be included on. I'm guessing this might be included in the admin bar that gives default margin to the top?
If I need to add code, please just let me know and I will. I'm just assuming there are some wordpress gurus out there who already know the answer to this question.
Thank you
Here are some options:
Go to /wp-content/themes/YOUR-THEME/header.php and remove any stylesheet includes.
Go to /wp-content/themes/YOUR-THEME/functions.php and remove any wp_enqueue_style()
Make sure the style isn't generated by a plugin. If it is, you can deregister the style. Here is a link explaining how: http://speakinginbytes.com/2012/09/disable-plugins-css-file/
Overwrite the styles using your own stylesheet. Make sure your stylesheet comes LAST. You can do this a few ways - I'd recommend using wp_enqueue_style() with a dependency on the offending stylesheet.
You should be able to just delete the content below the theme info in the style.css file in wordpress and it will completely axe all of wordpress default styles.
https://codex.wordpress.org/Finding_Your_CSS_Styles

How to use BootStrap inside a WordPress theme?

I am pretty new in WordPress and BootStrap CSS framework and I have the following doubt:
I have installed this theme that integrate BootStrap framework and I want to use it as a start point: http://bootstrapwp.rachelbaker.me/
I have change the background color of the homepage changing the background-color property into the body field in a file named bootstrapwp.css inside my theme using FireBug plugin
Ok...my doubts are:
1) Why this CSS file is named bootstrapwp.css and not bootstrap.css as in the downloaded BootStrap 3 framework? And why this file is slightly different form the dowloaded bootstrap.css file?
2) What is the better way to change a style in BootStra? I can change it directly inside my bootstrapwp.css or is better do it in another file overriding this behavior?
Tnx
Andrea
Andrea:
There are a lot of answers for your questions but I will work to simplify it for you.
First, what the developers are trying to do is get Bootstrap functionality within the Wordpress CMS. They are two entirely different animals. Bootstrap consists of individual pages that must be hand coded. Wordpress is a Content Management System (CMS) where you can apply a style, theme, sidebar, template or widget and have it appear on every page site-wide.
So, what the developer is doing is using the bootstrapwp.css file to handle the CSS for the entire Bootstrap themed Wordpress site. Remember, this is NOT a Bootstrap site. It is a Bootstrap themed Wordpress site that seeks to incorporate the functionality and design of Bootstrap within the confines of the Wordpress Codex.
If you're running a Wordpress site, the best way to change a style is always going to be in the CSS file provided by the child theme.
You can try Impulse Press. It's the most complete Wordpress Bootstrap 3 starter Theme
Take a look at the demo impulsepress.twoimpulse.com
with this you can change your css style in bootstrap-theme.css and don't touch bootstrap.css , so when we have an update it doesn't ruin your site styles
And Vincent Polisi is right, you can also make a child theme and get Impulse Press always updated