Accelerated Websites Accelerated Websites
Accelerated Websites Accelerated Websites

HTML & CSS

Common HTML Codes

Add to HTML section

				
					<div style="padding: 0px 0px 0px 25px;"></div>

<p style="font-size: 24px; line-height: 24px; letter-spacing: 10px; margin: 9px 0 0;"></p>

<font size="3" color="red"></font>

<h1 style="color:blue;"></h1>

<p style="color:red;"></p>

<p style="text-align:center;"></p>

<span class="title-white">About Us</span>

<sup>Superscript</sup>

<sub>Subscript</sub>

<blockquote>Text Block Quote</blockquote>

&copy; - Copyright

&trade; - Trademark
				
			
Buttons

Add to CSS section

				
					.cta-button {
  background-color: #590172;
  border-radius: 4px;
  border: 2px solid;
  border-color: #590172;
  color: #ffffff !important;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  vertical-align: -8px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  display: inline-block;
}

.cta-button:hover {
  background-color: #9a51cd;
  border-radius: 4px;
  border: 2px solid;
  border-color: #9a51cd;
  color: white !important;
  padding: 6px 12px;
  text-align: center;
  text-decoration: none;
  vertical-align: -8px;
  margin-top: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
  display: inline-block;
}
				
			

Add to HTML section

				
					<a class="cta-button" href="/2022-Registration.pdf" target="_blank">View Flyer</a>
				
			
Gradient Text

Add to CSS section

				
					.gradient-text {
    background: linear-gradient(90deg, #0076FF, #18ee7d);
	filter: drop-shadow (1px 1px rgba(0,0,0,.15));
	-webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
				
			

Add to HTML section

				
					<span class="gradient-text">Text goes here</span>
				
			
Videos & iFrame

Add to HTML section

				
					<video width="660" height="340" loop preload="none" poster="/wp-content/uploads/2023/08/uqual-brand-video-thumb.png" onclick="this.play();this.setAttribute('controls','controls')" onclick="this.load();this.removeAttribute('controls')"><source src="/wp-content/uploads/2023/08/uqual-brand-video.mp4" type="video/mp4" /></video>

<iframe src="https://player.vimeo.com/video/76979871?autoplay=1&loop=1&autopause=0" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
				
			
Tables

Add to CSS section

				
					table, tr, td {
    border: none !important;
}
				
			

Add to HTML section

				
					<table width="100%">
   <tr>
      <th></th>
      <th></th>
      <th></th>
   </tr>
   <tr>
      <td style="vertical-align: top;"></td>
      <td></td>
      <td></td>
   </tr>
</table>
				
			
Custom Fonts

Add to CSS section

				
					@font-face {
    font-family: 'YourFontName';
    src: url('/fonts/Poppins-Regular.ttf');
    font-weight: normal;
    font-style: normal;
}

.custom-font-name {
    font-family: 'YourFontName';
    font-size: 34px;
    font-weight: 800;
    line-height: 38px;
    color: #ffffff;
}
				
			

Add to HTML section

				
					<span class="custom-font-name">Text goes here</span>
				
			
Font Awesome
Icons   ·   Examples

Insert before closing </head> section

				
					<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
				
			

Add to HTML section

				
					<i class="fa fa-desktop" style="font-size:50px;color:blue"></i>

<i class="fa-solid fa-coffee fa-2xs"></i>

<i class="fa-solid fa-coffee fa-xs"></i>

<i class="fa-solid fa-coffee fa-sm"></i>

<i class="fa-solid fa-coffee fa-lg"></i>

<i class="fa-solid fa-coffee fa-xl"></i>

<i class="fa-solid fa-coffee fa-2xl"></i>
				
			
Bullet Lists

Add to CSS section

				
					ul.special-bullet {
  list-style: none;
}

ul.special-bullet li:before {
  content: "\21C1";
  margin-left: 0px;
  padding-right: 12px;
}
				
			

Add to HTML section

				
					<ul class="special-bullet">
    <li></li>
</ul>
				
			
Contact Form 7

Add to CSS section

				
					/*--- Contact Form 7 ---*/

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar {
    border: 0px !important;
    background-color: #ffffff !important;
    width: 100% !important;
    color: #333333 !important;
    margin-top: 8px !important;
    padding: 10px !important;
}

.wpcf7-submit {
    color: #ffffff !important;
    margin: 8px auto 0;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    padding: 6px 20px;
    line-height: 1.7em;
    background: #590172 !important;
    border: 2px solid #590172;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}

.wpcf7-submit:hover { 
    background-color: #333333 !important; 
    border-color: #333333 !important; 
	color: #ffffff !important;
    padding: 6px 20px !important; 
}

::-webkit-input-placeholder { /* WebKit browsers */
    color: #333333 !important;
    opacity: 50;
}

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #333333 !important;
    opacity: 50;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #333333 !important;
    opacity: 50;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: #333333 !important;
    opacity: 50;
}
				
			

Add to CSS section

				
					/*--- 2 Column Form ---*/

#left {
    width: 47%;
    float: left;
    margin-right:6%;
}

#right {
    width: 47%;
    float: left;
}

.clearfix:after {
    content:"\0020";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    overflow:hidden;
    margin-bottom:1px;
}

.clearfix {
    display:block;
}

#bottombox {
    margin-top:11%;
    margin-bottom:2%;
}
				
			
CF7 Custom Masks

Install Masks Form Fields (by Ivan Petermann)

Add to Functions.php or Snippets

				
					function card_number_form_fields() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            jQuery('input.card_number').mff_mask('0000-0000-0000-0000');
        });
    </script>
    <?php
}

add_action('wp_footer', 'card_number_form_fields', 111);

function card_exp_form_fields() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            jQuery('input.card_exp').mff_mask('00/00');
        });
    </script>
    <?php
}

add_action('wp_footer', 'card_exp_form_fields', 111);
				
			

Add to CF7 form

				
					<div class="clearfix">
    <div id="left">
        <span class="cf7-title">First Name</span>
        [text* first-name]
    </div>
    <div id="right">
        <span class="cf7-title">Last Name</span>
        [text* last-name]
    </div>
    <br>
    <div id="left">
        <span class="cf7-title">Phone Number</span>
        [tel* your-phone class:phone_us placeholder "(___) ___-____"]
    </div>
    <div id="right">
        <span class="cf7-title">Email Address</span>
        [email* your-email]
    </div>
    <div id="bottombox">
        <span class="cf7-title">Your Message</span>
        [textarea* your-message]
    </div>
</div>
<div style="padding: 14px 0px 20px 0px;">[recaptcha]</div>
<p>[submit "Send Message"]</p>
				
			

Add to CF7 form

				
					<div class="clearfix">
    <div id="topbox">
        <span class="cf7-title">Name on Card</span>
        [text* name-on-card]
    </div>
    <div id="topbox">
        <span class="cf7-title">Card Number</span>
        [text* card-number class:card_number placeholder "____-____-____-____"]
    </div>
    <div id="left">
        <span class="cf7-title">Expiration</span>
        [text* card-expiration class:card_exp placeholder "__/__"]
    </div>
    <div id="right">
        <span class="cf7-title">CVV</span>
        [text* card-cvv]
    </div>
    <div id="left">
        <span class="cf7-title">Address</span>
        [text* address-1]
    </div>
    <div id="right">
        <span class="cf7-title">Apt / Unit #</span>
        [text address-2]
    </div>
    <div id="left">
        <span class="cf7-title">City</span>
        [text* city]
    </div>
    <div id="right">
        <span class="cf7-title">State</span>
        [text* state]
    </div>
    <div id="right">
        <span class="cf7-title">ZIP Code</span>
        [text* zip-code]
    </div>
</div>
<div style="padding: 14px 0px 20px 0px;">[recaptcha]</div>
<p>[submit "Submit"]</p>
				
			
Hidden Content

Add to CSS section

				
					@media screen and (min-width: 1076px) {
  .hide-on-desktop {
    visibility: hidden;
    display: none;
  }
}

@media screen and (max-width: 1075px) {
  .hide-on-mobile {
    visibility: hidden;
    display: none;
  }
}
				
			
Logged In / Out

Add to Functions.php or Snippets

				
					// Add CSS class for logged in and logged out users
add_filter('body_class','er_logged_in_filter');
function er_logged_in_filter($classes) {
if( is_user_logged_in() ) {
$classes[] = 'logged-in-condition';
} else {
$classes[] = 'logged-out-condition';
}

// return the $classes array
return $classes;
}
				
			

Add to CSS section

				
					.logged-in-condition .hide-logged-in {
  display: none !important;
}

.logged-out-condition .hide-logged-out {
  display: none !important;
} 
				
			
Additional CSS

Add to CSS section

				
					.scroll-on-mobile {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

.vl {
    border-left: 6px solid white;
    height: 100%;
}

.hz {
    border-bottom: 6px solid #ba3f64;
    width: 250px;
    text-align: center;
}

.center-content {
    align-content: center;
}

.verticle-align-content {
    vertical-align: top;
}
				
			
Dynamic Content

Add to Functions.php or Snippets

				
					function show_loggedin_function( $atts ) {
	global $current_user, $user_login;
      	get_currentuserinfo();
	
	add_filter('widget_text', 'do_shortcode');
	if ($user_login) 
		return 'Welcome, ' . $current_user->display_name . '';
	else
		return '<a href="' . wp_login_url() . ' ">Login</a>';
}

add_shortcode( 'show_loggedin_as', 'show_loggedin_function' );
function show_useremail_function( $atts ) {
	global $current_user, $user_email;
      	get_currentuserinfo();

	add_filter('widget_text', 'do_shortcode');
	if ($user_email) 

		return 'Email: ' . $current_user->user_email . '';
	else
		return '<a href="/wp-login.php?action=lostpassword">Reset Password</a>';
}

add_shortcode( 'show_useremail_as', 'show_useremail_function' );
				
			

Add to HTML section

				
					[show_loggedin_as]

[show_useremail_as]
				
			
Event Listener

Add to JavaScript section

				
					<iframe style="width: 1px; min-width: 100%; height: 1580px;" src="https://belrea.populiweb.com/router/admissions/onlineinquiries/respond/g3ccd2f5443e713a9f37d0d365271a39ffe06f3393edde66e0a184babfe1741575956d657756bffcc486d0c45f0a21aaa306a4d1c2a32dce7b5f200280e40d45411404753591c26c827bd553bf87c025f84d6?embedded=1&amp;program=35408" frameborder="0"></iframe>

<script>
window.addEventListener('message',function(message){
    if(message.data.type == 'populi.inquiry.submitted'){
    	window.location.href = "https://apply.belrea.edu/whats-next-apply-now/";
    }
});
</script>
				
			
Hide Admin Bar

Add to Functions.php or Snippets

				
					add_action('after_setup_theme', 'remove_admin_bar');
function remove_admin_bar() {
if (!current_user_can('administrator') && !is_admin()) {
  show_admin_bar(false);
  }
}
				
			
Cart

No products in the cart.

Quote Request

Tell us about your project and we’ll send a quote.

    Full Name

    Phone Number

    Email Address

    Company Name

    Website URL

    Message

    [wp_login_form redirect="/my-account-dashboard/"]

    Premium

    Ideal for simple websites.
    $10/mo
    Renews at $20
    Top Features
    • 1 Website
    • 15 GB SSD Storage
    • 50,000 Visits Monthly
    • WordPress Acceleration
    • Malware Protection
    • 24/7 Customer Support
    Also Includes
    • Unlimited Free SSL
    • Global CDN Included
    • Automatic Backups
    • Free Website Migration

    Business

    More power and enhanced features.
    $20/mo
    Renews at $40
    Top Features
    • 1 Website
    • 30 GB SSD Storage
    • 100,000 Visits Monthly
    • WordPress Acceleration
    • Unlimited Bandwidth
    • Uptime Monitoring
    • Malware Protection
    • 24/7 Customer Support
    Also Includes
    • Unlimited Free SSL
    • Global CDN Included
    • Automatic Backups
    • Free Website Migration

    Managed WP

    Completely hassle-free experience.
    $50/mo
    Starting at $50
    Top Features
    • Everything from Business Plan
    • Automatic Theme Updates
    • Automatic Plugin Updates
    • PageSpeed Optimization
    • Server Configuration
    • 24/7 Customer Support
    Also Includes
    • Google Analytics Tracking
    • Custom Reporting
    • Text & Email Alerts

    Unlimited

    We provide unlimited content changes.
    $250/mo
    Starting at $250
    Top Features
    • Everything from Managed WP
    • Unlimited Content Changes
    • On Page SEO
    • Website Consulting
    • 24/7 Customer Support
    Pricing Info
    • 1 to 10 Pages – $250 /mo
    • 11 to 50 Pages – $500 /mo
    • 50+ Pages – Call for pricing