Common Advanced CSS Tweaks

Updated 4 months ago ​by Jeroma Molde

Below are various commonly used CSS tweaks. To use:

  1. Please log into your Nearlyweds account, 
  2. Go to the page where you edit your WedSite. 
  3. On the top toolbar, you’ll see a link for "Custom CSS"; 
  4. Click that link, and in the box it opens paste the code you see below Please use with caution. 

Change body text, left nav, and headlines to Calibri   

posts .entry .boxcontent, #siteNav li a { font: 11px calibri, arial, sans-serif !important; }

 Fix name cut off 

#sifr_customize { margin-right: 20; }

 Change font color in name title 

#sifr_customize { color: #xxxxxx; }

 Adjust kerning (number) - space between letters 

#sifr_customize { kerning: 10; }

 Change letter spacing (number) 

#sifr_customize { letter-spacing: 10; }

 Change leading (number) - space between lines 

#sifr_customize { leading: 10; }

 Change header color (hex value) 

#sifr_customize { color: #ABABAB; }

 Adjust Header Margin Right 

#sifr_customize { margin-right: 10; }

 Header font weight (normal or bold) 

#sifr_customize { font-weight: normal; }

 Header text alignment (left, center or right) 

#sifr_customize { text-align: left; }

 Adjust text size on header names 

#header h1 { font-size: 14px !important;}

 Change text size and font 

posts .entry .boxcontent, #siteNav li a { font: 18px tahoma !important; }

 Remove wedding countdown 

#wedding_date { display: none; }

 Remove header names 

#header h1 { display: none !important; }

 Remove blank space around a photo 

#photo_element_01, #photo_element_02 { display: none; }

 Center Countdown 

#feature_description .page_title{ text-align: center; }

 Make nav links font bigger 

#body_sidebar ul.siteNav li a{font-size: 20px !important;}

 Remove timestamp of entries (site wide). 

.entryposted_by { display:none !important}

 Increase Font-Size of RSVP Section to 16px 

#rsvp {font-size: 16px;}

 Increase Font-Size of the wedding date to 16px 

#wedding_date{font-size: 16px;} 

  Change Font of the wedding date to "Arial" 

#wedding_date{font-family: Arial;} 

 Uppercase Names 

header h1.both_names {text-transform: uppercase;}

 Uppercase Date 

wedding_date { text-transform: uppercase;}

 Hide 'AND' between the names  

header h1.both_names span{display:none}

 Make the header background image shrink to fit inside header 

header {background-size: contain;}

 Change background color of any template. You can use any color's hex code. (See colorpicker.com for generating the hex code for any color) 

body {background-color: #ff0000;}

Change the color of the menu bar.

*the Current page*
#body_sidebar ul.siteNav li a.currentPage {
   background: #RRGGBB; /*Use color hex code*/
   color: #RRGGBB; /*Use color hex code*/
}
*the HOVER page*
#body_sidebar ul.siteNav li a:hover {
   background: #RRGGBB; /*Use color hex code*/
   color: #RRGGBB; /*Use color hex code*/
}

 


How did we do?