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.
Related
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.)
I built a custom calculator using HTML5, CSS3, and jQuery.
I have a basic hosting account and loaded all the files through cPanel to my root directory. The files include calc.html with a CSS folder holding my stylesheet and a JS folder holding my custom jQuery.
Now someone would like to put my calculator on their Wordpress site and we can not figure out how to do it. For now I just used iframe to show my site on their Wordpress page but we want the calculator to be hosted from his site.
I tried copying and pasting my HTML code from my calc.html file into a Wordpress page which works but I do not have the styling of my CSS and the JS dose not function. So I used FileZilla and created a folder called CALC with the follwing path (public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/) and added the JS sand CSS contents in there.
I linked my CSS in the header of my calc.html code
<link rel="stylesheet" href="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/css/mainCalc.css">
I linked my JS towards the end of the body in calc.html
<script src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/js/main.js"></script>
I view the page and still have my ugly HTML code with no styling and no JS functionality.
Im new to Wordpress/coding and this is the first thing that popped in my mind so I tried it and failed.
I also thought I could put calc.html, mainCalc.css, and main.js inside of the calc directory i created(public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/)
and then use iframe to display calc.html on the wordpress page. I also failed at this.
I used
<iframe src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/calc.html"></iframe>
You could do with creating a custom page template.
Basically you will follow the docs https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/ and create a page with the HTML + CSS + JS in the content part.
When you done, you just create a new page in the admin part, select the template from the list under the publish button. Save it, and that's it.
Its simpler from writing a plugin.
Can't style my menu css,i tried to change in master-ccda(my site www.blobus.on.kg)It helps for 5 minutes than changed back.Please help me to find place where i can change it.
You use a rocketheme/gantry template. Your website has compression/caching enabled for the css. This is enabled either by the template settings or another compression/caching system plugin. Therefore what you get as a final css file, is a dynamically generated compressed css file. Any edits you are doing on this file are getting lost, as soon as the system will generate a new final master.css file.
You need to disable these functions while you are building your website. Doing so will stop the compression of all the css files into one and you will see what rules and from which files your menu and other elements/sections of your website inherit their styles.
In addition keep in mind that it is best to avoid making changes on the core files of your template/extensions.
Gantry templates allow you to create a custom css file where you can put your own css overrides.
The custom css file need to be place inside the css folder of your template and usually needs to have a name of this convention: rt_templatename-custom.css.
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.
hello i am in a fix on what to do with my current situation.
I am trying to implement an html5 blog template with Umbraco. My template loads the css files with the help of jquery for the sake of responsive design.
Now this is okay for the home page as all the files are placed at the root of the site.
But whenever I click on a particular blogpost, the css files are not correctly retrieved because of the folder structure. A blogpost is placed in a datefolder directory as you already know.
I cant explicitly include the css files as all the files are not loaded at once. They are loaded one at a time depending on the browser window size.
Please give me some directions about which way to go. Ask me if you need more details.
You could use the base tag to define the base URL for all linking attributes, e.g. href, src
<head>
<base href="http://www.site.com" />
</head>
Even if this does not work exactly as intended in loading your CSS dynamically, you could use jQuery to pull the base tag's href value out to prepend the CSS file location.
You can of course make the href value editable via the CMS if required.