Changing filenames for Bootstrap 4.5 examples - css

Looking to use one of the examples for Bootstrap 4.5, but whenever I change the filename of the html file or the css file for the example, it breaks the formatting link for the example page. How can I duplicate the original example files and alter the names (to something like "my_page.html" or "my_page.css" for example) without changing the page itself?

If you change the name of your stylesheet (CSS), you also have to update it in your HTML, otherwise it will point your stylesheet to the old name and will break. This works the same for all other file resources you are linking to a HTML page, such as other HTML pages, images, scripts etc.
UPDATE WITH AN EXAMPLE:
Lets say I have three files: index.html, contact.html and stylesheet.css. In my index.html and contact.html pages, they might have the following code:
<!-- index.html -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Contact me
<!-- contact.html -->
<link rel="stylesheet" type="text/css" href="stylesheet.css">
Home
Both pages have a link to the stylesheet, and each page has a link to the other page.
Now, I want to change the name of my stylesheet to awesome-style.css, and my contact page to awesome-contact.html. I would have to make the following changes to my HTML pages:
<!-- index.html -->
<link rel="stylesheet" type="text/css" href="awesome-style.css">
Contact me
<!-- awesome-contact.html -->
<link rel="stylesheet" type="text/css" href="awesome-style.css">
Home
I have changed three lines of code here. The stylesheet has to be changed in all HTML pages for your styling to still apply to all pages. In my index.html page, I have changed the link from contact.html to awesome.contact.html so it will still link to the correct HTML page.
I have never had to change any code in awesome-style.css, as you never tell it what HTML documents you will be using it in.

Related

Duplicate style.css in wordpress

I have a link to a style.css with version, which is updating each time after changing the file in my theme on server:
<link rel="stylesheet" type="text/css" media="all" href="http://example.com/wp-content/themes/twentythirteen/style.css?v=1477025590" />
Also, I can see another link to the same style.css in the source of code but with an old version which doesn't change automatically (it's a standart link of a theme):
<link rel='stylesheet' id='twentythirteen-style-css' href='example.com/wp-content/themes/twentythirteen/style.css?ver=2013-07-18' type='text/css' media='all' />
Is it normal? User should load a file twice or I can delete the second link somehow via functions.php?
Yes you need to check in your functions.php is there this css load
twice ? you can find wp_enque_style function over there.
Remove the css from there which loads twice it will solve your error

Included css from controller doesn't apply on page

I'm actually trying to set in my twig template css generated from a controller. File is included (if I access the url of the controller in my browser I see generated css) but not applied.
For more details, I've got a twig template (base.html.twig) in which I include controller result using <link rel="stylesheet" type="text/css" href="{{ path('mycsscontroller') }}">.
The 'mycsscontroller' route go to MyCssController:indexActionwhich return $this->render('mytwigfile.css.twig').
The content generated is a valid css.
I already tried to set generated content in a file then include it using <link rel="stylesheet" type="text/css" href="{{ asset('mycssfile') }}"> and css is included and applied on page!
I really don't understand what I'm doing wrong there...
Thanks
Try return response in you controller with css content type
return new Response('my_css_styles_as_string', 200, ['Content-Type'
=> 'text/css'])

Unable to change theme in primeui

I use primeui library in my app and want to change the default theme. I followed this link and made my link tag looking like this:
<link type="text/css" rel="stylesheet" href="primeui/production/primeui-1.1-min.scc?
ln=primefaces-glass-x" />
But it has no effect.

Converting my website into Wordpress

I have a simple html pages that i want to convert into a WordPress website. I've installed WordPress and created the necessary files. So far i've been looking for a tutorial on how to convert a static website to WordPress but with no luck. Most of the tutorials the user doesn't have knowledge of html or php and as i understand WordPress has functions you have to add to your html page. Here is my index.php
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<title></title>
</head>
<body>
<div id="wrapper">
<?php
include "header.php";
?>
<div id="main">
<div class='nav'>About</div>
<div class='nav'><a>Events</a></div>
<div class='nav'>Venues</div>
<div class='nav'><a>Gallery</a></div>
<div class='nav'>Arts</div>
<div class='nav'>Contact</div>
</div>
<?php
include "footer.php";
?>
</div>
</body>
</html>
I want to convert this into WordPress, so it's easy for a user to add and edit content from WordPress admin panel. Is there any tutorial any of you can recommend that walks me through how to do this? If not, how would you add WordPress functions into my index.php to make it compatible with WordPress.
Wordpress is a completely different beast from a basic static site. All the content is database-driven, which means all your 'html pages' need to be converted to Wordpress pages through the dashboard. Converting won't be a quick process unless your site is very small.
Give each page a sensible title and 'slug' and cut and paste your existing code into the text editor (you'll find plenty of help for this online). Converting images will be more of a hassle - they need to be loaded in via WP media. Links will also need to be changed.
To make sure your site has a static front page (i.e. not a blog) go to Settings...Reading... and click the link.
Styling the content is done through page templates, which come in packages called themes. Use one of the default themes until your content is transferred. They'll even have menus and allow you to modify some styles and header images etc. Have a look at the files in an existing theme to see how it all works.
When you're ready to style, either use one of these themes as a starting point or if you want to start from scratch do a bit of research into blank or starter themes - there's a ton out there. Then I suggest you follow a tutorial on designing a WP theme...
If your site is simple, try taking a barebones/starter WordPress theme and customizing it to use your stylesheets/javascript etc.
This will be much easier and robust than creating something from scratch.
There are also tools like Theme Matcher which will do this for you.
Here's about the simplest barebones super basic explanation I could come up with..
When writing a Wordpress website I think the first thing you should get is that where-as coding a plain HTML site you have to write the structure of the page and the content.. when you write a Wordpress page you are only writing the structure, all of the content is going to be created in the Wordpress backend user portal.
So to start, remove all the content from your code and your left with this (I'm going to remove the PHP includes and start fresh)
<!DOCTYPE>
<html>
<head>
<!-- Include stylesheet -->
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<!-- Page title / meta -->
<title></title>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<div class="nav"></div>
</div>
</div>
</body>
</html>
A wordpress theme is made up of several PHP files and whenever a theme is displayed, typically the index.php file is loaded first so that's where we'll start.
Wordpress themes, most of them, amongst all the PHP files that make up the theme, there will be a header.php file, footer.php file..
So in index.php the first line we write is get_header(); (within php tags of course) This is a Wordpress function that is essentially
I assume your going to want your nav on all pages so you can cut all of this code out of your index file and paste it into header.php
<!DOCTYPE>
<html>
<head>
<!-- Include stylesheet -->
<link rel="stylesheet" type="text/css" href="/style.css" />
<!-- Include scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/code.js"></script>
<!-- Page title / meta -->
<title></title>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<div class="nav"></div>
</div>
</div>
Back to index.php the second line we'll add is get_footer(); another Wordpress function to get footer.php.
Currently index.php would look like this now..
<?php get_header(); ?>
</body>
</html>
because everything else is in header.php.. well that closing body and html tag.. those go in footer.php. so your index.php file is going to end up looking like this
<?php get_header();
get_footer(); ?>
Header.php is going to look like this:
<!DOCTYPE>
<html <?php language_attributes(); ?>>
<head>
<!-- Page title / meta -->
<title><?php wp_title( '|', true, 'right' ); ?></title>
<?php wp_head(); ?>
</head>
<body>
<!-- Page container -->
<div id="wrapper">
<div id="main">
<!-- Nav -->
<?php wp_nav_menu(); ?>
</div>
</div>
and you know what's in footer.php. As far as those CSS and javascript files, those are going to be in your functions.php file.
Wordpress has LOTS and LOTS of prefab functions that they like for you to use and it would take forever to explain them all. Luckily a lot of that's already been done in the Wordpress Codex. Though it's got a lot to be desired as far as the quality of the documentation in some places in my opinion it is something you should spend a good amount of time reading thru before you start, in order to familiarize yourself with all their functions.

Wordpress alternate css file to working

Hi everyone for the help in advance: Im trying to get a 2nd header added to a custom temp page and in that alternate header all an alternate css file different from style.css.
I called the custom header from the cat template page like this
<?php get_header('header_state'); ?>
It works fine and places the header on the page and I called the css file in this custom header like this:
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>//localhost:8888/cnb_press/wp-content/themes/cnb-zip1/state_style.css" media="screen" />
but my page is still accessing the index.php style.css for some reason. I am on a MAMP and not live.
Any ideas why I am not getting this right?
If your page is still showing the incorrect CSS link tag, you aren't loading the new header template you created. WordPress wouldn't redirect an absolutely URLed CSS file referenced in the header.
Look at the WordPress template hierarchy to make sure your page is loading the template you think it is:
http://codex.wordpress.org/Template_Hierarchy

Resources