I am new to Joomla and I am trying to learn things as I go forward. In Firefox when I do inspect element on my site, I can find the CSS tag that I need to change in order to get the result I want, but I cant locate the file that I have to make the change in.
For instance right now my menu is shifted to the left and I did inspect element and I found
#topmenu_holder {
float: left;
}
if I change that float to right, then my issue is fixed.
I Just don't know how to find that file to make that change.
The css you're referring to is typically found in the Template that you are using, but which specific file depends on the template you're using - they're all located within the \templates\ folder of your Joomla site.
Additionally, if you look around in the Firefox Inspection area, you'll probably see reference to the file it's contained in as shown in the attached image.
Have you found the place where you can edit your file in joomla - extensions - template manager - then edit template from there. Dont look at the style option but the other one (template) you can edit all files there including css files.
There should be an option the overide the file. You should look to do this as joomla can overwrite existing file when updating. For now though this should get you started.
Related
I has a css file named styles.css and it was loaded in masterPage of sharepoint .I change this css file but not working. I make sure this css file already loaded in html page.I also clear cache but I don't know why it doesn't affect when I edit. Please help me, thank you so much!
It is not recommended to modify the online master page directly.
Firstly, you need to check if the CSS file is really imported.
Secondly,if the file is not imported, classic page you could upload CSS here.
modern page we should upload CSS with SPFX,here is a tutorial: https://github.com/hugoabernier/react-application-injectcss.
If the file is imported, first check whether the content of the file is displayed normally (excluding problems caused by encoding), then you can add ‘! Important’ after the style.
On my site, I have one CSS file that dictates all the styles for the site, "styles.css".
However, I've recently installed a forum module.
This forum module has its own CSS file, "chatter.css", and it's placed on one of the pages of my site.
Problem is, there's a LOT of conflicting styles going on.
The entire forum is contained within a div with the id of "chatter".
Is there any way I could tell the dom "hey, only apply chatter.css in this div"?
You may put entire css file into #chatter between brackets, but that requires usage of precompiler(SASS,Less).
Like that...
#chatter {
<css file content>
}
I am wondering why I am not unable to make changes; I already tried several things yet, I don't seem to be able to update the CSS, the following I did already:
There is no Editor, so I am unable to make changes via there.
I am an Administrator and have access to cPanel.
I made changes via ../wp-content/theme/my-theme/style.css and no changes were made.
I empty my cache via plugin and hard reload my Chrome, Firefox and Safari. And no changes were made.
Is there any other solutions? I already found the file which contains all the styles. I would try to add my own class, and see if I am to see if there is any effect.
First thing first, From cPanel you can navigate to your website from the fileManager, use it to make code changes and then save them. You need to clear the cache everytime you make changes (i usually do it from the browser (in chrome, open the dev console, then long press on the refresh button and select the bottom one)
If the changes are still not showing on your site, I think that maybe you are editing the wrong CSS? Is this your theme and are you 100% sure you are editing the right file and, for example, it's not overwritten by a child theme or something else?
If you are using any framework, maybe your property is overwritten by your framework (for example, by bootstrap). To check this, open the console or try to add !important in your CSS file.
Just as an example, when I develop a theme I leave the root style.css with only the theme definitions, and then I create different stylesheets in a different folder. This leads me to the next question: are you enqueue your file correctly? is it even loaded by WordPress?
to check this I usually inspect the code in and search for the id of the file I enqueued from my functions.php.
Unfortunately, without more details, this is the only things I could think of when developing and WordPress theme and make changes from cPanel. Hope some of this can actually help.
Please check following options
Permission of file at ../wp-content/theme/my-theme/style.css.
Grab the css and open in Dream-viewer or sublime is there any css syntax issue.
Also the path of style.css in header is show same by view source.
Or
Even you can use the plugins which allow to add custom css without toching the server check this plugin https://wordpress.org/plugins/simple-custom-css/
I have actually done this before but I can not remember how to get this right. Does anyone know the proper setup or of a tutorial that explains how to set this up without a plugin?
Getting Adobe Edge Animations to work in WordPress (or any other CMS)
I just did this myself, and posted an article on Codepen about it; http://codepen.io/write/getting-adobe-edge-animations-to-work-in-wordpress
I've also opened up an issue over at Github; https://github.com/wittnl/Edge-Animate-Runtime/issues/3
The problem
When EA (Edge Animate) is looking for assets they use relative paths.
This becomes a problem when we're using WordPress, where we need to reference our theme folder, an absolute URL.
ERROR 1
The main file edge.x.x.x.js fails loading the right javascript file for the composition. Resulting in a 404, file not found.
ERROR 2
The composition specific javascript file that get's loaded by edge.x.x.x.js have relative paths to images etc. Resulting in that no images are loaded.
What we want
Have all our assets stored in our theme folder
Have all files load properly and enjoy our animations
The solution
1) Modify the main javascript file
Make your own version of the main javascript file, e.g; edge.5.0.1-edited.js
Check for comp.load and change it so that it loads from our theme folder correctly.
comp.load('/wp-content/themes/my-awesome-theme/assets/edge/' + projectPrefix + "/" + projectPrefix + "_edge.js");
2) Modify the "composition"-specific javascript file
Change the variables you need to change (e.g images) inside tools_edge.js so that it points to your theme folder.
var im='/wp-content/themes/my-awesome-theme/assets/edge/tools/images/'
I've made all these little CSS modifications to my blog with Google Chrome's built in Developers tools to improve a +WordPress blog.
I'm using the context-sensitive Save As command on the revised style.css document. However, none of my changes are reflected in the replaced styles.css document on the server.
A few added details:
I am using FileZilla to connect and manually delete the old file, then upload the revision (I've found that replacing doesn't always work, for whatever reason.
I'm doing this within the main theme folder for the blog. I am unaware of any other possible location where this could reside.
Thoughts? My original G+ query (with accompanying screenshot) can be found here.
Many thanks, in advance, for your help.
Instead of overwriting the styles you should append them at the end of the style sheet. I usually create a comment the end something like /* New Styles Here */ Better yet you should create a child theme and all the styles to the child themes style.css
http://codex.wordpress.org/Child_Themes