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.
Related
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/
Recently I have considered using Photoshop to create website templates, and then convert them into HTML and CSS.
My query is, when working with a PSD you want to convert, what is the best course of action?
Should I craft the main structure first and then work on fine tuning or start at the top and vigorously make my way to the bottom?
use dreamweaver software than make html webpage with css style in one folder than start to top header section than left section middle section than right section lastly footer create with css and attach with html page ona see offline output
It depends on what comes handy for you. For me: first if I have a dashboard which has all the colors and buttons, containers, etc (components) for the websites, than I made the css classes for them. My best friend in this is the Bootstrap , so I don't have to worrie about the responsivity. After that I look up, the main structure of the site design. From the biggest to the smallest. Sometimes I draw them on a paper and made some scetches. So when I'm about to code, I will know exactly what I have to do. It is my workflow, but what and how you wanna do it, is up to you.
There is no best approach to this.
I generally make all the classes in a CSS file for all elements on the page as shown in the PSD template.
Then use that file in HTML, which can be fine tuned using more CSS, JS
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.
(like how override cms' css file like using classes under bootstrap instead of main.css)
..
I having a problem with my website which i made by developing only front end using HTML& CSS. (website is in .HTML).
I decided to use the website under a CMS so that it can be more secured and efficient and i chose fuelCMS1.3.1 under CI.
But i faced a problem when pasting my code into the CMS, my website itself has a css file called 'main.css'..while the fuelCMS itself uses its own 'main.css'!
when it came to pasting code of a dropdown menu from bootstrap, my website under CMS, dropdown menu is not working!
I went to inspect element to see my .HTML website, and it shows that its making FULL use of bootstrap.min.css & few main.css.
but in CMS, when checking inspect elemtn, i found that HALF of the dropdown menu css is using 'main.css' instead of boot strap!
how is possible that 'main.css' in fuel cms is being used instead of my bootstrap link?
i mean, i understand that 'main.css' in fuelCMS is having same classes as in bootstrap, so it is overriding them..how do i solve this and force fuel cms to use classes from my bootstrap link ONLY?
im also facing the same problem with 'body', becuase when i check the inspect element for the 'body' in css, in my HTML website its only used once, But when i check inspect element is FuelCMS, its being surprisingly being used more frequently.
body tag is used in several css files
(as if fuel cms has its own css identification and classes for 'body' instead of making use of my own 'body' tag for local HTML files..same goes for the main.css, fuelcms is identifying my site css tags using its own css files rather than my ones (its overriding them)..not to mention missing classes from my own css files being ignored)
its like my css are clashing with css of the cms, where the cms is overriding my ones.
hope i was able to explain well.
im quite new with front end developing, so I'm still managing and learning trying to track the problem and solve it.
Any suggestions? Thanks in advance.
The main.css is placed under assets folder.
Just remove the main.css and use yours instead.
Or you can use custom.css to override the main.css.
Just include the custom.css in your layout.
recently some css was updated via a template that required me to restore a website. Now, the restore doesn't have the same functionality as it used to. specifically, the css / bootstrap dropdown menu now appears to remain static. You can see the issue on this page here: http://bit.ly/1tDKZEq
I have gone through the different css menus to try and edit the code in firebug but can't seem to fix it, and the template developer isn't any help. The site in question is linked here: http://bit.ly/1tDKZEq
I've compared the css files to the webarchive version of the site, and the css is exactly the same, so I don't know what I am missing...thanks for any help!