Jump to content

What is this code doing, exactly?

Recommended Posts

Site URL: http://TaystTheNotes.com

Hello,

I was troubleshooting my site not displaying inline images correctly and saw a previous web admin had placed this code at the site level. I pulled it out and that seemed to help my issue with the images. Not sure it's related but wanted to understand what this code does exactly.

,h1,h2,h3 {-webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important;}


p {text-align: center; hyphens: none}


h1,h2,h3 {text-align: center; hyphens: none}

.form-wrapper .field-list .field .field-element {
    width: 100%;
    padding: 12px;
    margin: 6px 0 4px;
    border: 2px solid #0000dc;
    background: transparent;
    box-sizing: border-box;
}

.eventlist-title {pointer-events: none; cursor: default;}

.eventlist-meta-item {text-align: center}

a:hover {color: rgba(0, 0, 220, 0.5)}

a:hover.BlogList-item-image-link {opacity: 0.7; filter: alpha(opacity=50)}

a:hover img {opacity: .7; filter: alpha(opacity=70);}

form {width: 80%; margin: auto; position: relative;}

input {height: 40px;} 

.tweak-header-primary-nav-hover-style-spotlight .Header-nav .Header-nav-folder
{border:2px; border-style:solid; border-color:#0000dc}

.tweak-header-primary-nav-hover-style-spotlight .Header-nav .Header-nav-folder-item {color: #0000dc; font-family: Roboto; font-weight: 300; font-size: 14pt}

Header.Header--top {position:fixed; z-index: 1000; width: 100%; border-bottom: 2px solid #0000dc; height: 70px; background-color: rgba(255, 240, 192, 0.95)}

footer {font-size: .6em;}

.tweak-mobile-bar-top-fixed .Mobile-bar--top {position:fixed; z-index: 1000; width: 100%; height:70px; border-bottom: 2px solid #0000dc}

I appreciate your feedback.

Link to comment
  • Replies 2
  • Views 258
  • Created
  • Last Reply

Top Posters In This Topic

First line is incorrect, you need to remove first ",". That code will remove hyphen on all devices.

Quote
,h1,h2,h3 {-webkit-hyphens: manual !important; -moz-hyphens: manual !important; -ms-hyphens: manual !important; hyphens: manual !important;}

Second code, center all text on your site

Quote
p {text-align: center; hyphens: none}

Next, center heading 1,2,3 & remove hyphen

Quote
h1,h2,h3 {text-align: center; hyphens: none}

Next, customize form field items: padding (space between text/border), margin (space between form fields), border (add an outline around field), background (make input field use body background)

Quote
.form-wrapper .field-list .field .field-element {
    width: 100%;
    padding: 12px;
    margin: 6px 0 4px;
    border: 2px solid #0000dc;
    background: transparent;
    box-sizing: border-box;
}

Next, make event title not clickable

Quote
.eventlist-title {pointer-events: none; cursor: default;}

Next, center event meta info

Quote
.eventlist-meta-item {text-align: center}

Next, change all links color when hovering

Quote
a:hover {color: rgba(0, 0, 220, 0.5)}

Not sure..

Quote
a:hover.BlogList-item-image-link {opacity: 0.7; filter: alpha(opacity=50)}

Change Image opacity on hover

Quote
a:hover img {opacity: .7; filter: alpha(opacity=70);}

Next, change form block width, input fields height

Quote
form {width: 80%; margin: auto; position: relative;}

input {height: 40px;} 

Next, make Menu Dropdown border (2px and #0000dc color)

Quote
.tweak-header-primary-nav-hover-style-spotlight .Header-nav .Header-nav-folder
{border:2px; border-style:solid; border-color:#0000dc}

and other

  • First: Folder Items style
  • Second: Header style
  • Third: Footer Text size
  • Final: Make Mobile Header Sticky on scroll, add border under mobile header & change mobile height to 70px
Quote
.tweak-header-primary-nav-hover-style-spotlight .Header-nav .Header-nav-folder-item {color: #0000dc; font-family: Roboto; font-weight: 300; font-size: 14pt}

Header.Header--top {position:fixed; z-index: 1000; width: 100%; border-bottom: 2px solid #0000dc; height: 70px; background-color: rgba(255, 240, 192, 0.95)}

footer {font-size: .6em;}

.tweak-mobile-bar-top-fixed .Mobile-bar--top {position:fixed; z-index: 1000; width: 100%; height:70px; border-bottom: 2px solid #0000dc}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.