Skip to content

Commit 4767121

Browse files
adictonatoradictonator
committed
updated install page copy and icons
1 parent 59f0286 commit 4767121

File tree

6 files changed

+305
-407
lines changed

6 files changed

+305
-407
lines changed

‎template-parts/sections/install/section-ftp.php

Lines changed: 46 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,46 @@
1-
<section class="relative bg-white md:py-24 py-10 md:px-0 px-5 overflow-hidden">
2-
<div class="absolute right-1/4 bottom-0 lg:block hidden">
3-
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/vector/ftp.svg" />
4-
</div>
5-
<div class="max-w-7xl mx-auto space-y-10">
6-
<h1 class="md:text-5xl text-2xl text-center font-display text-neutral-900">
7-
Manually via <span class="text-brand-blue">FTP</span>
8-
</h1>
9-
<div class="space-y-5 md:max-w-3xl mx-auto">
10-
<div class="flex items-center justify-start md:gap-5 gap-1.5">
11-
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
12-
<circle cx="22.5" cy="22" r="22" fill="#005DA4" />
13-
<path d="M22.5 31V22.75M26.25 31V22.75M18.75 31V22.75M13.5 19L22.5 13L31.5 19M30 31V20.332C27.5189 19.9436 25.0113 19.749 22.5 19.75C19.949 19.75 17.444 19.95 15 20.332V31M13.5 31H31.5M22.5 16.75H22.508V16.758H22.5V16.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
14-
</svg>
15-
<span class="md:text-xl text-sm font-normal text-neutral-600">In your FTP program, locate the WordPress Plugins directory on your server. This will look like: /wp-content/plugins/</span>
16-
</div>
17-
<div class="flex items-center justify-start md:gap-5 gap-1.5">
18-
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
19-
<circle cx="22.5" cy="22" r="22" fill="#005DA4" />
20-
<path d="M22.5 31V22.75M26.25 31V22.75M18.75 31V22.75M13.5 19L22.5 13L31.5 19M30 31V20.332C27.5189 19.9436 25.0113 19.749 22.5 19.75C19.949 19.75 17.444 19.95 15 20.332V31M13.5 31H31.5M22.5 16.75H22.508V16.758H22.5V16.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
21-
</svg>
22-
<span class="md:text-xl text-sm font-normal text-neutral-600">Upload the entire css-javascript-toolbox-plus folder (not zip file) to this /wp-content/plugins/directory</span>
23-
</div>
24-
<div class="flex items-center justify-start md:gap-5 gap-1.5">
25-
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
26-
<circle cx="22.5" cy="22" r="22" fill="#005DA4" />
27-
<path d="M22.5 31V22.75M26.25 31V22.75M18.75 31V22.75M13.5 19L22.5 13L31.5 19M30 31V20.332C27.5189 19.9436 25.0113 19.749 22.5 19.75C19.949 19.75 17.444 19.95 15 20.332V31M13.5 31H31.5M22.5 16.75H22.508V16.758H22.5V16.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
28-
</svg>
29-
<span class="md:text-xl text-sm font-normal text-neutral-600">Make sure you are in the Admin section of WordPress</span>
30-
</div>
31-
<div class="flex items-center justify-start md:gap-5 gap-1.5">
32-
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
33-
<circle cx="22.5" cy="22" r="22" fill="#005DA4" />
34-
<path d="M22.5 31V22.75M26.25 31V22.75M18.75 31V22.75M13.5 19L22.5 13L31.5 19M30 31V20.332C27.5189 19.9436 25.0113 19.749 22.5 19.75C19.949 19.75 17.444 19.95 15 20.332V31M13.5 31H31.5M22.5 16.75H22.508V16.758H22.5V16.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
35-
</svg>
36-
<span class="md:text-xl text-sm font-normal text-neutral-600">Click Plugins in the lefthand side menu or refresh the Plugins page if you are already on it</span>
37-
</div>
38-
<div class="flex items-center justify-start md:gap-5 gap-1.5">
39-
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
40-
<circle cx="22.5" cy="22" r="22" fill="#005DA4" />
41-
<path d="M22.5 31V22.75M26.25 31V22.75M18.75 31V22.75M13.5 19L22.5 13L31.5 19M30 31V20.332C27.5189 19.9436 25.0113 19.749 22.5 19.75C19.949 19.75 17.444 19.95 15 20.332V31M13.5 31H31.5M22.5 16.75H22.508V16.758H22.5V16.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
42-
</svg>
43-
<span class="md:text-xl text-sm font-normal text-neutral-600">Activate the CSS & JavaScript Toolbox PLUS plugin</span>
44-
</div>
45-
<div class="flex items-center justify-start md:gap-5 gap-1.5">
46-
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
47-
<circle cx="22.5" cy="22" r="22" fill="#005DA4" />
48-
<path d="M22.5 31V22.75M26.25 31V22.75M18.75 31V22.75M13.5 19L22.5 13L31.5 19M30 31V20.332C27.5189 19.9436 25.0113 19.749 22.5 19.75C19.949 19.75 17.444 19.95 15 20.332V31M13.5 31H31.5M22.5 16.75H22.508V16.758H22.5V16.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
49-
</svg>
50-
<span class="md:text-xl text-sm font-normal text-neutral-600">Go through any additional setup wizards if prompted</span>
51-
</div>
52-
<div class="flex items-center justify-start md:gap-5 gap-1.5">
53-
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
54-
<circle cx="22.5" cy="22" r="22" fill="#005DA4" />
55-
<path d="M22.5 31V22.75M26.25 31V22.75M18.75 31V22.75M13.5 19L22.5 13L31.5 19M30 31V20.332C27.5189 19.9436 25.0113 19.749 22.5 19.75C19.949 19.75 17.444 19.95 15 20.332V31M13.5 31H31.5M22.5 16.75H22.508V16.758H22.5V16.75Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
56-
</svg>
57-
<span class="md:text-xl text-sm font-normal text-neutral-600">CSS & JavaScript Toolbox PLUS should now be installed</span>
58-
</div>
59-
</div>
60-
</div>
61-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-200/50 rotate-6 left-1/4 top-20 animate-small-blob']); ?>
62-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 -rotate-6 left-[15%] bottom-1/2 animate-small-blob-2']); ?>
63-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 rotate-3 right-[15%] top-1/4 animate-small-blob-3']); ?>
64-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-200/50 right-1/4 top-2/4 animate-small-blob-4']); ?>
65-
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-left-32 -top-28 bg-orange-200/40 blur-3xl size-[300px]']); ?>
66-
<?php get_template_part('template-parts/components/component', 'blob', ['class' => 'bottom-0 -right-56 bg-cyan-400/40 blur-3xl size-[300px]']); ?>
67-
</section>
1+
<section class="relative bg-white md:py-24 py-10 md:px-0 px-5 overflow-hidden">
2+
<div class="absolute right-1/4 bottom-0 lg:block hidden">
3+
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/vector/ftp.svg" />
4+
</div>
5+
<div class="max-w-7xl mx-auto space-y-10">
6+
<h2 class="md:text-4xl text-2xl text-center font-display font-semibold text-neutral-900">
7+
Manually via <span class="text-brand-blue">FTP</span>
8+
</h2>
9+
<div class="space-y-5 md:max-w-3xl mx-auto">
10+
<div class="flex items-center justify-start md:gap-5 gap-1.5">
11+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>
12+
<span class="md:text-xl text-sm font-normal text-neutral-600">In your FTP program, locate the WordPress Plugins directory on your server. This will look like: /wp-content/plugins/</span>
13+
</div>
14+
<div class="flex items-center justify-start md:gap-5 gap-1.5">
15+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>
16+
<span class="md:text-xl text-sm font-normal text-neutral-600">Upload the entire css-javascript-toolbox-plus folder (not zip file) to this /wp-content/plugins/directory</span>
17+
</div>
18+
<div class="flex items-center justify-start md:gap-5 gap-1.5">
19+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>
20+
<span class="md:text-xl text-sm font-normal text-neutral-600">Make sure you are in the Admin section of WordPress</span>
21+
</div>
22+
<div class="flex items-center justify-start md:gap-5 gap-1.5">
23+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>
24+
<span class="md:text-xl text-sm font-normal text-neutral-600">Click Plugins in the lefthand side menu or refresh the Plugins page if you are already on it</span>
25+
</div>
26+
<div class="flex items-center justify-start md:gap-5 gap-1.5">
27+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>
28+
<span class="md:text-xl text-sm font-normal text-neutral-600">Activate the CSS & JavaScript Toolbox PLUS plugin</span>
29+
</div>
30+
<div class="flex items-center justify-start md:gap-5 gap-1.5">
31+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>
32+
<span class="md:text-xl text-sm font-normal text-neutral-600">Go through any additional setup wizards if prompted</span>
33+
</div>
34+
<div class="flex items-center justify-start md:gap-5 gap-1.5">
35+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="M12 6v12"/><path d="M17.196 9 6.804 15"/><path d="m6.804 9 10.392 6"/></svg>
36+
<span class="md:text-xl text-sm font-normal text-neutral-600">CSS & JavaScript Toolbox PLUS should now be installed</span>
37+
</div>
38+
</div>
39+
</div>
40+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-200/50 rotate-6 left-1/4 top-20 animate-small-blob']); ?>
41+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 -rotate-6 left-[15%] bottom-1/2 animate-small-blob-2']); ?>
42+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 rotate-3 right-[15%] top-1/4 animate-small-blob-3']); ?>
43+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-200/50 right-1/4 top-2/4 animate-small-blob-4']); ?>
44+
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-left-32 -top-28 bg-orange-200/40 blur-3xl size-[300px]']); ?>
45+
<?php get_template_part('template-parts/components/component', 'blob', ['class' => 'bottom-0 -right-56 bg-cyan-400/40 blur-3xl size-[300px]']); ?>
46+
</section>

‎template-parts/sections/install/section-hero.php

Lines changed: 39 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,39 @@
1-
<?php
2-
3-
/**
4-
* Template part for displaying page content in page.php
5-
*
6-
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
7-
*
8-
* @package cjt
9-
*/
10-
?>
11-
12-
<section class="relative md:py-24 py-10 overflow-hidden">
13-
<div class="max-w-7xl mx-auto md:px-0 px-5">
14-
<div class="space-y-5 md:max-w-4xl mx-auto text-center md:mb-24 mb-10">
15-
<h1 class="md:text-6xl text-2xl font-display leading-tight">
16-
Install CJT / CJT PLUS
17-
</h1>
18-
<p class="font-medium md:text-xl text-base text-neutral-600">
19-
CJT PLUS is an extension plugin that requires the core CJT plugin from WordPress.org to work.
20-
</p>
21-
</div>
22-
<div class="flex justify-center md:mb-24 mb-10">
23-
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/vector/install.svg" />
24-
</div>
25-
<div class="border border-neutral-900 rounded-lg md:p-10 p-5 relative overflow-hidden">
26-
<p class="md:text-xl text-base font-medium md:max-w-5xl text-center mx-auto text-neutral-600">
27-
<span class="text-neutral-900 font-medium">Before installing and activating CSS & JavaScript Toolbox PLUS,</span> you must first install and activate the core CSS & JavaScript Toolbox plugin, which is free from WordPress.org here: <a class="text-brand-blue font-normal underline block" href="https://wordpress.org/plugins/css-javascript-toolbox">https://wordpress.org/plugins/css-javascript-toolbox</a>
28-
</p>
29-
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-right-96 top-0 bg-cyan-400/30 blur-3xl -z-[1] size-[500px]']); ?>
30-
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-left-80 bottom-0 bg-orange-200/40 blur-3xl -z-[1] size-[400px]']); ?>
31-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 -rotate-6 left-[20%] top-3/4 animate-small-blob']); ?>
32-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 rotate-3 right-[12%] top-1/4 -z-[1] animate-small-blob-3']); ?>
33-
</div>
34-
<p class="md:text-xl text-base font-medium text-center mx-auto text-neutral-600 mt-5">
35-
<span class="text-neutral-900 font-medium">Once the core CSS & JavaScript Toolbox is installed and activated,</span> you can then install and activate the <span class="text-brand-blue">premium CSS & JavaScript Toolbox PLUS</span> as you normally would via either the WordPress Plugins Page or Manually via FTP directly to the Plugins folder on your server.
36-
</p>
37-
</div>
38-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-200/50 rotate-6 left-1/4 top-20 animate-small-blob-5']); ?>
39-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 -rotate-6 left-[15%] bottom-1/2 animate-small-blob-4']); ?>
40-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 rotate-3 right-[15%] top-1/4 animate-small-blob-2']); ?>
41-
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-200/50 right-1/4 top-2/4 animate-small-blob']); ?>
42-
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-left-80 top-0 bg-cyan-400/30 blur-3xl -z-[1] size-[400px]']); ?>
43-
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-right-72 top-40 bg-orange-200/40 blur-3xl size-[400px]']); ?>
44-
</section>
1+
<?php
2+
3+
/**
4+
* Template part for displaying page content in page.php
5+
*
6+
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
7+
*
8+
* @package cjt
9+
*/
10+
?>
11+
12+
<section class="relative md:py-24 py-10 overflow-hidden">
13+
<div class="max-w-7xl mx-auto md:px-0 px-5">
14+
<h1 class="md:text-5xl text-center text-2xl font-display font-medium">
15+
Install CJT / CJT PLUS
16+
</h1>
17+
<div class="flex justify-center md:mb-24 mb-10">
18+
<img src="<?= esc_url(get_template_directory_uri()); ?>/assets/images/vector/install.svg" />
19+
</div>
20+
<div class="border border-neutral-900 rounded-lg md:p-10 p-5 relative overflow-hidden">
21+
<p class="md:text-xl text-base font-medium md:max-w-5xl text-center mx-auto text-neutral-600">
22+
<span class="text-neutral-900 font-medium">Before installing and activating CSS & JavaScript Toolbox PLUS,</span> you must first install and activate the core CSS & JavaScript Toolbox plugin, which is free from WordPress.org here: <a class="text-brand-blue font-normal underline block" href="https://wordpress.org/plugins/css-javascript-toolbox">https://wordpress.org/plugins/css-javascript-toolbox</a>
23+
</p>
24+
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-right-96 top-0 bg-cyan-400/30 blur-3xl -z-[1] size-[500px]']); ?>
25+
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-left-80 bottom-0 bg-orange-200/40 blur-3xl -z-[1] size-[400px]']); ?>
26+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 -rotate-6 left-[20%] top-3/4 animate-small-blob']); ?>
27+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 rotate-3 right-[12%] top-1/4 -z-[1] animate-small-blob-3']); ?>
28+
</div>
29+
<p class="md:text-xl text-base font-medium text-center mx-auto text-neutral-600 mt-5">
30+
<span class="text-neutral-900 font-medium">Once the core CSS & JavaScript Toolbox is installed and activated,</span> you can then install and activate the <span class="text-brand-blue">premium CSS & JavaScript Toolbox PLUS</span> as you normally would via either the WordPress Plugins Page or Manually via FTP directly to the Plugins folder on your server.
31+
</p>
32+
</div>
33+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-200/50 rotate-6 left-1/4 top-20 animate-small-blob-5']); ?>
34+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-amber-200/50 -rotate-6 left-[15%] bottom-1/2 animate-small-blob-4']); ?>
35+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-lime-200/50 rotate-3 right-[15%] top-1/4 animate-small-blob-2']); ?>
36+
<?php get_template_part('template-parts/components/component', 'small-blob', ['class' => 'bg-blue-200/50 right-1/4 top-2/4 animate-small-blob']); ?>
37+
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-left-80 top-0 bg-cyan-400/30 blur-3xl -z-[1] size-[400px]']); ?>
38+
<?php get_template_part('template-parts/components/component', 'blob', ['class' => '-right-72 top-40 bg-orange-200/40 blur-3xl size-[400px]']); ?>
39+
</section>

0 commit comments

Comments
 (0)