How to use 2nd CSS file on my WordPress website ?
Here is my code:
<link rel="stylesheet" type="text/css" media="all"
href="http://www.mydomain.com/wp-content/themes/twentytwelve/style.css" >
But I need to extra CSS file with seam themes. Now I am how to connect my new CSS file? Please anybody help me.
Just use that exact code and duplicate it as much as you want.
Just change the href to each new file name.
You need to be aware that any changes made to the theme will be erased if the theme is updated.
I suggest you read up on FTP and upload the CSS files in the CSS folder for your theme. You need to know where the CSS's location is for it to be called effectively.
Once you have uploaded the CSS file to the theme's folder, do the following:
In WordPress administration, click on the left side menu item Appearance, then click on the sub-menu item Editor. You will see on the right hand side a whole lot of links show up. Click on the header.php link.
In the header.php file, you'll notice a section that starts with <head>. Enter the path to where your CSS file is located on the server like so:
<LINK href="link/to/your/stylesheet.css" rel="stylesheet" type="text/css">
Click on the Update File button on the bottom of the page. Verify your work.
You can have as many css files as you like. The attributes that are loaded from the last css file will override attributes of any previously declared and conflicting attributes but you can specify them in as many files as you like. You can "connect" or link you new css file in your html using this :
Looks like you needed it for wordpress themes.
You need to have one main style.css file. You have to include it by using type="text/css"/>. Once this is done you can add additional css files by doing something like this: /address-to-css-file.css" type="text/css" media="screen" />. bloginfo('template_directory') is a function which prints out the directory of your template.
You can also use #import in your main stylesheet (style.css) . Add these lines:
#imports url('link to css');
Or you can use
http://codex.wordpress.org/Function_Reference/wp_enqueue_style this link has a description of how to use this.
Related
I have trouble to make my Css and Javascript working. Here is a capture of my current work. I have created a folder with my different html pages and same for Css and js (i only have one css for everything and several js).
It worked when all my htmls, Css and Js are into the main folder but when it comes to organize into severel foldes, nothing is working except my Htmls.
enter image description here
Thank you very much.
Try this out
<link rel="stylesheet" href="/css/style.css">
Try this for the CSS
<link rel="stylesheet" href="../css/style.css">
All your files are in different directories and if you have to link your HTMLs with the CSS and JS files, you have to get out of the HTMLs directory to the parent directory. And, then specify the path to the CSS, JS, and Images.
Use this to reach the parent directory of the current directory.
../
I see you are using Visual Studio Code, there is a trick for call CSS and Javascript
#Styles.Render("~/css/style.css")
#Styles.Render("~/css/yourstyle.css")
and is a good practice to separate css from javascript folder
#Scripts.Render("~/Scripts/yourscript.js")
Where should I put my css file if I have only one file (style.css) ?
I use sass for my project and I convert all my sass files to only one css file.
But I don't know where I have to put this file.. because normally I would create a static folder for each app but I think that makes no sense if I have only one file...
You just need to put the CSS file somewhere and tell HTML were to find using the link tag.
For example, if the file is in the folder "style" the tag will be.
<link rel="stylesheet" href="/style/file.css" />
Usually the main css style fail was in the root folder or in a style folder.
I know my question is similar to: Bootstrap popup does not appear when include bootstrap.min.css
However it was not resolved and I am practically having the same issue (minus the JS).
I am currently designing my Bootstrap website using Pinegrow, everything looks fine in the software however I realized when I actually preview or upload the code to a browser parts of the website is being overridden, I just found out it's because of the bootstrap.min.css file.
The strange thing is my 'home', 'about me' pages are fine, however when it gets to 'skills', 'portfolio' etc pages the css from my custom file is overridden.
For example:
This is what my software shows
Preview from Pinegrow
And this is what happens when it is in a browser:
Preview from Browser
Things I have done
Some people suggested just deleting the .min file, however doing that mucks up the website.
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/creative.css" type="text/css"> The custom css file is placed at the bottom in the html (someone said it provides priority to the custom file)
Using the !important rule doesn't work and I don't think it's the right to use it
I am using ID selections in CSS
Is the only solution to go into the .min file and edit the code from there? Is there a way to get my custom CSS code to override the .min instead? Would it help if i posted some of my code? Many thanks for your time.
I would have done so:
If a few page works, my opinion, problem in markup. If you don't use one header section for all pages, try to copy content from skills to about, then I would check the wrapper, and deeper structure first. Do you see any strange rules in development tools on skills page? (I'm learning, and I can only give you simple tips.)
Contao CMS gives the possibility to import .css files (which is the only way to get your css into this weird CMS), but interprets them and re-writes them somewhere into the file structure (or DB ?).
Problem is: It cannot handle modern CSS, and throws everything away that's not basic 2002 style css. Like gradients, media queries etc...
Is there a way to get around this ? Like linking to real .css files ?
Contao 3.2.2 does not need the manual insertion of a <link rel=stylesheet …/>.
Upload the CSS to the contao file tree.
Then proceed via Themes → choose for your theme its icon “Edit the page layouts for theme” → Edit layout → in section “Style sheets” below “Additional style sheets” click on “Change selection” to select the CSS you want from the server file tree.
Contao will then serve your CSS content as part of the CSS it generates (under a somewhat synthetic name) and itself place a <link rel=stylesheet …/> to it in your page.
If you have access to FTP or some other way to get files onto the server, just serve your .css file without passing it through the CMS, and put a <link> to that file in the headers. I used to do this with TextPattern because I didn't want to edit my css in the browser.
Write your custom css and place it in the files folder.
You have two choices to link the css to your template
1.Via the theme :
Mouse click and select style sheet or paste in code to path <link rel="stylesheet".... in relevant field.
2.Make a custom template :
In menu item 'template', create a fe_page.html5 or .xhtml. re-name it something.html5 put your code <link rel="stylesheet".... in the header. Don't forget to add the new template to your theme setup (default template is fe_page..)
How to edit css without ftp :
In the menu item 'File manager' browse to the css sheet, press on the blue square icon. you can now edit your style sheet online.
All the above can be made in css3, html5 or whatever your coding pleasure.
I need an easy way to load the same style sheet for two different installations of wordpress. One is at main.com and the other is at main.com/secondary. Thanks.
Hardcode your stylesheet link to wherever it's actually stored.
<link rel="stylesheet" type="text/css" href="http://example.com/css/yourstylesheet.css">
Don't use a relative link that looks like css/yourstylesheet/.
I got it! Inside main.com/secondary/wp-content/themes/mytheme/style.css, I removed all the code and inserted
#import url(main.com/wp-content/themes/mytheme/style.css);
and then added some code for the specific secondary banner. This of course overrides the banner definition in the imported file because of the cascade.
I would like to credit themeshaper.com/wordpress-child-theme-basics/
which gave me the basic idea. (I'm sort of doing the opposite of a child theme.)