Jump to content
Please Use CODE Tags

Use same theme throughout whole site HTML

TAHIRMIA
By TAHIRMIA
in Programming
 Share
Go to solution Solved by Enderman,
5 minutes ago, TAHIRMIA said:

 

I did come across it but didn't really understand it properly, so was wondering if there was an easier way. Would any of you mind explaining it properly? Thanks.

That is literally the easiest way...they even gave you ALL of the code you need right there...

 

You put the header and footer code into separate HTML files and then load them wherever you want using jquery.

 

You can't really simplify it more than it already is in that post... that's as basic as it gets.

Maybe you should be using squarespace instead of trying to code your own website?

Posted

How can I keep my whole site theme like header, footer and background on every site without having to copy and paste it manually into every file. Is there a way to do this with javascript or something?

I have 2 files so far. index.html and style.css

Spoiler 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--Bootstrap 4 (beta)-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <!--Bootstrap 3-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!--Fonts-->
    <link href="https://fonts.googleapis.com/css?family=Mukta" rel="stylesheet">
    <!--CSS-->
    <link rel="stylesheet" href="style.css">

    <title>Home</title>

</head>

<body>
    <header id="head">
        <nav id="navbar" class="nav-item">
            <div class="nav-wrapper nav-main">
                <div class="nav-item">
                    <a href="#home">Home</a>
                    <a href="pl1.html" id="placeholder1">Crash</a>
                    <a href="pl2.html" id="placeholder2">Roulette</a>
                </div>
            </div>
        </nav>
    </header>
    <main id="home">
        Home test
    </main>
    <footer id="foot" class="footer">
          |
        <a style="color:#ff7301" href="">
            <u> </u>
        </a>
    </footer>
</body>

</html>

 

Spoiler 

/*HyperLink colors*/
a:link {
    color: white;
    background-color: transparent;
    text-decoration: none;
}
a:visited {
    color: white;
    background-color: transparent;
    text-decoration: none;
}
a:hover {
    color: white;
    background-color: transparent;
    text-decoration: underline;
}
a:active {
    color: white;
    background-color: transparent;
    text-decoration: underline;
}

/*Section Ends*/




/*Nav bar things*/

nav {
	position: absolute;
	z-index: 100;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0 8px 0 15px;
	height: 64px;
	background-color: rgb(17,17,18);
}
nav .nav-item {
	position: relative;
	display: inline-flex;
	align-items: top;
	font-size: 24px;
	font-weight: 500;
	text-transform: uppercase;
	height: 100%;
	padding: 0 8px 0 8px;
	float: none;

}

nav .nav-item a {
	padding: 0 16px 0 16px;
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 100%;
}

nav .nav-item a::after {
	content: '';
	bottom: 0;
	height: 3px;
	transform-origin: left center;
	width: 100%;
	left: 0;
	transform: scale(0, 1);
	will-change: transform;
	transition: transform 150ms ease;
	background: #919191;
	position: absolute;
}
nav .nav-item a.active::after, .nav-item a:hover::after {
	transform: scale(1, 1);
}

nav .nav-item.options {
	margin: 0 16px 0 16px;
	cursor: pointer;
}
nav .nav-item.options>div {
	display: none;
	top: 64px;
	background: #111112;
	position: relative;
	line-height: 41px;
}
nav .nav-item.options:hover>div {
	display: block;
}
nav .nav-item.options>div>p {
	padding: 0 18px 0 18px;
	margin: 0;
	width: 100%;
	display: flex;
    align-items: center;
}
nav .nav-item.options>div>p>a {
	display: inline-block;
	width: 100%;
}
nav .nav-wrapper {
	height: 100%;
	float: left;
	position: relative;
}
nav .nav-main {
	width: calc(80%);
}

/*Section Ends*/

/*colors*/
a {
	text-decoration: none;
	color: rgb(120,120,120);
	transition: color 200ms;
}

a:hover, a.active {
	color: #FFFFFF;
	/*Very important - stops double underline*/
	text-decoration: none;
}

.white-text {
	color: #FFFFFF;
}

html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: inherit;
}

[v-cloak] {
  display: none;
}
/*Section Ends*/

/*Text and Font for Nav*/
body {
	font-family: "Mukta", sans-serif;
	color: #FFFFFF;
	/*Background for whole site*/ background:url("/resources/background.jpg") rgb(21, 21, 21);
	background-size: cover;
	padding: 64px 350px 0 350px;
	margin: 0;
}

.page-content {
    position: relative;
	padding: 4px;
	overflow-y: auto;
	overflow-x: hidden;
	backface-visibility: hidden; /* scroll repaint hack */
	height: calc(100vh - 66px);
	min-width: 665px;
}

.row {
	display: block;
	position: relative;
	margin-bottom: 20px;
}

/*Section Ends*/


/* Text Weights */

.thin {
	font-weight: 200;
}
.light {
	font-weight: 300;
}
.regular {
	font-weight: 400;
}
.medium {
	font-weight: 500;
}
.bold {
	font-weight: 700;
}

/*Section Ends*/

/* Text Alignment */

.right-align {
	text-align: right;
}
.left-align {
	text-align: left;
}
.center-align {
	text-align: center;
}

/*Section Ends*/

/* Floats */

.right {
	float: right;
}
.left {
	float: left;
}
.clearfix {
	clear: both;
	content: '';
	width: 0;
	height: 0;
	display: block;
}

/*Section Ends*/

/*Footer*/
.footer {
    transition: opacity 400ms;
    opacity: 0.5;
    position: fixed;
    bottom: 0;
    right: 0
}

.footer:hover {
    opacity: 1
}

/*Section Ends*/

/*SCROLLBAR THINGS*/
*::-webkit-scrollbar-thumb{
	background: #ff7301;
	margin-bottom: 0;
	border-radius: 2px;
}
*::-webkit-scrollbar-corner{
	visibility: hidden;
}
*::-webkit-scrollbar{
	margin-right: 1px;
	width: 2px;
	height: 2px;
	border-radius: 2px;
}
*::-webkit-scrollbar-track{
	background-color: rgb(44,44,44);
	border: 0px none #FFFFFF;
	border-radius: 2px;
}
*::-webkit-scrollbar-button{
	width: 0px;
	height: 0px;
}
*::webkit-scrollbar-thumb:active{
	background: #b15712;
}



/*Section Ends*/

 

 

 

Hello

Link to comment
https://linustechtips.com/topic/843831-use-same-theme-throughout-whole-site-html/
Share on other sites
Link to post
Share on other sites
Posted

https://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages

NEW PC build: Blank Heaven   minimalist white and black PC     Old S340 build log "White Heaven"        The "LIGHTCANON" flashlight build log        Project AntiRoll (prototype)        Custom speaker project

Spoiler

Ryzen 3950X | AMD Vega Frontier Edition | ASUS X570 Pro WS | Corsair Vengeance LPX 64GB | NZXT H500 | Seasonic Prime Fanless TX-700 | Custom loop | Coolermaster SK630 White | Logitech MX Master 2S | Samsung 980 Pro 1TB + 970 Pro 512GB | Samsung 58" 4k TV | Scarlett 2i4 | 2x AT2020

 

Link to post
Share on other sites
Posted

*hasn't read the stackoverflow link and is just saying what experience would suggest*

Yeah I'd imagine you just reference the styling file you want in each file you want the styling in. Copy and paste the reference

 

edit: I see the problem now... don't mind me...

Join the Appleitionist cause! See spoiler below for answers to common questions that shouldn't be common!

Spoiler

Q: Do I have a virus?!
A: If you didn't click a sketchy email, haven't left your computer physically open to attack, haven't downloaded anything sketchy/free, know that your software hasn't been exploited in a new hack, then the answer is: probably not.

 

Q: What email/VPN should I use?
A: Proton mail and VPN are the best for email and VPNs respectively. (They're free in a good way)

 

Q: How can I stay anonymous on the (deep/dark) webzz???....

A: By learning how to de-anonymize everyone else; if you can do that, then you know what to do for yourself.

 

Q: What Linux distro is best for x y z?

A: Lubuntu for things with little processing power, Ubuntu for normal PCs, and if you need to do anything else then it's best if you do the research yourself.

 

Q: Why is my Linux giving me x y z error?

A: Have you not googled it? Are you sure StackOverflow doesn't have an answer? Does the error tell you what's wrong? If the answer is no to all of those, message me.

 

Link to post
Share on other sites
Posted
  • Author
18 hours ago, mpsparrow said:

Was just about to link that....

 

18 hours ago, Enderman said:

https://stackoverflow.com/questions/18712338/make-header-and-footer-files-to-be-included-in-multiple-html-pages

I did come across it but didn't really understand it properly, so was wondering if there was an easier way. Would any of you mind explaining it properly? Thanks.

Hello

Link to post
Share on other sites
Posted
  • Solution
5 minutes ago, TAHIRMIA said:

 

I did come across it but didn't really understand it properly, so was wondering if there was an easier way. Would any of you mind explaining it properly? Thanks.

That is literally the easiest way...they even gave you ALL of the code you need right there...

 

You put the header and footer code into separate HTML files and then load them wherever you want using jquery.

 

You can't really simplify it more than it already is in that post... that's as basic as it gets.

Maybe you should be using squarespace instead of trying to code your own website?

NEW PC build: Blank Heaven   minimalist white and black PC     Old S340 build log "White Heaven"        The "LIGHTCANON" flashlight build log        Project AntiRoll (prototype)        Custom speaker project

Spoiler

Ryzen 3950X | AMD Vega Frontier Edition | ASUS X570 Pro WS | Corsair Vengeance LPX 64GB | NZXT H500 | Seasonic Prime Fanless TX-700 | Custom loop | Coolermaster SK630 White | Logitech MX Master 2S | Samsung 980 Pro 1TB + 970 Pro 512GB | Samsung 58" 4k TV | Scarlett 2i4 | 2x AT2020

 

Link to post
Share on other sites
Posted
  • Author
Just now, Enderman said:

You put the header and footer code into separate HTML files and then load them wherever you want using jquery.

 

Ahh that's where I was getting stuck.Thanks

Hello

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×