Skip to content
POWR Help Center home
InboxAsk a human

CSS hacks and custom code tips

⚠️ As of October 2021 for security reasons, POWR editor doesn't support the Custom JS field. If you would like to add any JS customization, kindly contact the Support Team at support@powr.io. As security is a top concern at POWR, JS scripts will be added to your app only after verification.

All Apps:

Issue

CSS Code

Add scrollbar

#appView {height: 500px; overflow-y: scroll;}

Align App on page

#appView {float: left !important;}

Disable all links in an App

#appView {pointer-events: none; cursor: default;}

Override fit text

.fitText {font-size: 20px !important;}

Comments:

Issue

CSS Code

Paragraphs/line breaks in Comments

.commentsWrapper .commentText {white-space: pre-line;}

Removing date from comment

.comments .commentWrapper .comment .infoHeader .byTime, .comments .commentWrapper .commentClass .infoHeader .byTime {display: none;}

Remove Social Logins

.comments .commentWrapper .comment .submitWrapper .overhid, .comments .commentWrapper .commentClass .submitWrapper .overhid {visibility: hidden;}

Remove 'Or post as guest' text

.postAsGuestText {display: none;}

eCommerce:

Issue

CSS Code

Title font size

.title {font-size: 14px !important;}

FAQ:

Issue

CSS Code

Align question icon on smaller screens

.faq .questionIcon {margin-right: 0px; display: none;}

Form Builder:

Issue

CSS Code

Un-stack Multiple Images

.col-sm-4 {width: 30.333333333%; display: inline-block;}

Remove padding from Form

.formBuilder {padding: 0px;}

Remove shadow from input fields, make border darker

.formElementsModule textarea, .formElementsModule textarea:focus, .formElementsModule input[type="text"]:focus, .formElementsModule input[type="number"]:focus, .formElementsModule input[type="email"]:focus, .formElementsModule input[type="tel"]:focus, .formElementsModule input[type="url"]:focus, .formElementsModule input[type="text"], .formElementsModule input[type="number"], .formElementsModule input[type="email"], .formElementsModule input[type="tel"], .formElementsModule input[type="url"], .formBuilder select {border: 1px solid black !important; box-shadow: none;}

Right-align text (dropdowns)

select {direction: rtl;}

Right-align text (block labels)

#appView {text-align: right}

Right-align text (inline labels)

input {text-align: right}

Increase or decrease space between elements

.form-group {margin-bottom: 5px;}

Put File Upload buttons side-by-side

.fileUploadParent {width: 49% !important;}

Center reCaptcha

div.recaptchaContent > div > div {margin: auto;}

Hide Progress Bar and Percentage

.progressBarBox {display: none !important}

.progress-bar-percentage {display:none !important}

Issue

JS Code

Replace SELECT text in form dropdown

setTimeout( function(){$("select option[value='']").html("- CUSTOM TEXT -")}, 1000);

Set focus on first form field

setTimeout( function(){ $('.formElement input[type="text"]').first().focus()}, 1000);

Map:

Issue

CSS Code

Remove the "Get Directions" link

.locationLink {display: none !important;}

Issue

CSS Code

Remove individual Share Buttons

.fa-twitter, .fa-facebook, .fa-google-plus, .fa-linkedin, .fa-pinterest, .fa-reddit, .fa-delicious, .fa-tumblr {display: none;}

Make lightbox bigger

@media screen and (min-width: 768px) { .modal-dialog {width: 90% !important; left: 0% !important;} }

#appView {min-height: 600px !important;}

Center Link Text

.microblog .blog .linkContainer a { text-align: center; }

Note: For 2), set the min-height to something bigger than the highest image in the Gallery. Choose a width that is less wide than the full App width.

Price Table

Issue

CSS

Change separator style

.planComparison .featureContainer {border-bottom: 1px solid green;}

Center Price Table (more than 6 blocks)

.col-xs-1.planItem {width:14.2%} @media(max-width:600px) {.col-xs-1.planItem {width:100%;text-align:center;padding: 5%;}}

Center Price Table (less than 6 blocks)

.col-xs-2.planItem {width:20%} @media(max-width:600px) {.col-xs-2.planItem {width:100%;text-align:center;padding: 5%;}}

Note: For 2) and 3), the width in percentage is 100% divided by the number of blocks in the chart

Issue

CSS Code

Remove scrollbar:

.content {overflow-y: hidden !important;}

Slider:

Issue

CSS Code

Make images width: 100%

#appView {margin: 0px;} .nodeImageParent img {width: 100%;}

Remove Previous/Next buttons

.next, .prev {display: none;}

Slow down transition between slides

.animated {animation-duration: 3s !important;}

Social Feed:

Issue

CSS Code

Make entries perfectly square (cropped to fit):

.postPicture img {object-fit: cover; height: 210px; width: 210px;} (Note: not supported in IE/Edge)

Countdown Timer:

Issue

CSS Code

Hide day and hours:

.showDays, .showHours {display: none} tr.timeLabels > td:nth-child(2) {display: none}

  1. Go to Design > Advanced > Custom JS.
  2. Paste the tracking code. Make sure to remove the script tag from the code.
  3. Save the App.

In Form Builder, the user can add an additional bit of Javascript to the code to track user behavior. The user will want to wrap the following bit of code around their tracking code:

$(document).on('click','#submitButton',function(){ CUSTOM GOOGLE ANALYTICS CODE GOES HERE });

This lets the user get insights into where the traffic came from and what the user did after submission. More importantly, the form submission can be set up as a 'Goal' inside GA so that the user can analyze the success of the page on which the form lives.

Read more about tracking form submissions here. 

Pass URL parameters into form via custom JS:

setTimeout(function(){ var params= getUrlParams(); console.log(params); $('input[name="489e2e0d_1572287648022"]').val(params).change(); //use unique label of input field }, 500)