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.)
Related
Disclaimer: This is my first ever website project, in order to learn about html, css etc. I probably need a 'for idiots' guide'
I have a jekyll/github pages site here. I have read the jekyll documentation here, which suggests all you need to do is stick the liquid tag in. Which I have, for example here.
Further research has pointed out I need to set up my config file, like this which I have here. I also have a .css I copied from a site called sciviews which is here and I've made a link into the .css to call it here.
However, my page still displays in black on white in code blocks. What have I missed?
EDIT: I believe I've made another error, the source of my syntac .css was (i think) here. Is .scss maybe not compatible with this process as I've implemented it?
In your html ( inside the head tag ), you are referencing an incorrect path to "syntax.css"
Change:
<link rel="stylesheet" href="/css/syntax.css" type="text/css">
To:
<link rel="stylesheet" href="/Pokemon_FieldStudies/css/syntax.css" type="text/css">
Edit
Following your edit, it seems the code inside syntax.css is a raw scss file. Such files need to be processed before they could be served to the client.
I suggest you read about SCSS and how to compile it ( A simple google search will yield more than enough tutorials ).
In case you're interested in a shortcut, you can use an online compiler such as http://www.sassmeister.com/ but that will require you to define a value for some of the missing variables defined in the scss file.
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.)
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.
I am learning CSS and want to customize an pre-existing out-of-box cookie cutter CSS style web site provided by my vendor.
Is there a way I can remove an css file which was linked in the head tag so I can strip-out/unstyle the entire page easily?
I was reading posts regarding reset.css, Normalize.css & CSS refactoring tool, not sure if they are the right tools. Any suggestions are highly appreciated.
I suggest installing Firebug if you use Firefox so you can easily see the different stylesheets and what purpose they serve. From there just remove the <link rel="stylesheet" href="filename.css"> element that has the styles your trying to strip and start over. Create your own file and re-insert it into the <head> of said site.
By your question this is all I can imagine you want to accomplish -- forgive me if I misinterpreted you ..
Here is the link to download firebug: https://getfirebug.com/downloads
Just remove the tag in the section, and the CSS should no longer be there, providing that all of the CSS was in fact in the CSS files and not inline.
Apart from the global.css i'm including in my header.php, i would also like to load certain page-content specific styles.
But since my <head></head> is already covered by my header file, and i don't wish to resort to inlines, what is the best way to place the styles on the specific page?
Thanks ! :D
I would try one of the following:
Break the header.php in 2 distinct files to allow any pages including it to add their own link tags
At the top of the file, before including header.php, set an array like $included_css containing styles (style1.css, style2.css). Then in header.php you can do a simple foreach and include them after global.css (to allow them to take precedence)
in our CMS we have a header folder inside the template directory. If you name a file form.tpl its gonna insert it self only in when form.tpl is called (we handle that with the smarty template engine). What is good practice i think.
An other solution would be to uses classes or id's on your body. <body id="suscribeForm"> and to use them as reference in your css. (the problem is the CSS is loaded even if you don't use it, but on the other side its already cashed if the user changes to an other page).
You can link different CSS files in your main CSS also, but this is not a good practice, because your browser is gonna wait until mains.css is loaded and then load the linked files.