To Make Changes: Version 1.1.1 (ALL LINES UPDATED FROM 1.1)

  • Child Theme Installation Recommend: style.css (see below for more details)
  • Go to the style.css file via. FTP or from navigating to "Appearance" > "Editor" on your Wordpress install
  • Change any styling, note that I have made comments to make it easier to navigate! For easier management, I recommend placing your custom code on line 1743 and above or in a child theme!


Line 78: Change overall font

  • body {font-size: SIZE; font-family: “FONTNAME”, TYPE; color: COLOR;}

Line 80: Change background image on the body (on all pages)

  • body {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”);}

Line 86: Change link colour

  • a:link, a:visited {color: COLOR}

Line 91: Change link colour on hover

  • a:hover {color: COLOR}

Line 179: Change the line for blockquotes

  • blockquote {border-left: THICKNESS TYPE COLOR;}

Table Edits

  • Line 242: td, th {border: TYPE COLOR THICKNESS;}
  • Line 248: tr:nth-child(2n) {background-color: COLOR; color: COLOR;} /* Every other row */

Line 387: Change buttons

  • .nav-links a, .nav-previous a, .nav-next a, .navLinks a, .welcomeButton a, a.button, .downloadResButton a, .alignleft a, .alignright a, .woocommerce div.product form.cart .button, a.checkout-button.button.alt.wc-forward, .woocommerce #payment #place_order, .woocommerce-page #payment #place_order, .woocommerce-MyAccount-navigation a {
    font-size: SIZE; border-radius: RADIUS; background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;}

Line 391: Change buttons on hover

  • .page-numbers:hover, .nav-previous a:hover, .nav-next a:hover, .navLinks a:hover, .welcomeButton a:hover, a.button:hover, .downloadResButton a:hover, .alignleft a:hover, .alignright a:hover, .woocommerce div.product form.cart .button:hover, a.checkout-button.button.alt.wc-forward:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-MyAccount-navigation a:hover {animation-duration: DURATION; background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR; /* End Background Colour */}
    @keyframes hover {0% {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;
    } 25% {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;} 50% {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;} 75% {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;} 100% {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;}

Line 442: Change flat button

  • a.flatButton {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;}

Line 449: Change flat button on hover

  • a.flatButton:hover {color: COLOR;}

Line 464: Change header style

  • header {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); animation-duration: DURATION;}
    @keyframes header {0% {top:POSITION; left: POSITION; opacity: 0.1;}100% {top:POSITION; left: POSITION; opacity: 1;}}

Line 510: Change menu button line

  • #menu-main a {border-bottom: THICKNESS TYPE COLOR;}

Line 518: Change the background color of the sub menu

  • .sub-menu {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”);}

Line 595: Change the background image on the home page and the 404 page

  • #welcome, .error404Content {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”);}

Line 659: Change the background on the articles (posts and pages)

  • article {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”););}

Line 667: Change the background on the articles (feed page)

  • #posts article {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”););}

Line 711: Change the read more button on the feed page

  • .readMore {border: TYPE THICKNESS COLOR;}

Line 744: Change the text color of the sidebar

  • #sidebar {color: COLOR;}

Line 766: Change the link colors of the sidebar

  • #sidebar a {color: COLOR;}

Line 769: Change the underline of the search field (sidebar)

  • input.search-field {border-top: hidden; border-left: hidden; border-bottom: TYPE COLOR THICKNESS; border-right: hidden; color: COLOR;}

Line 785: Change the underline of the dropdown box(s) (sidebar)

  • select#cat, #archives-dropdown-2 {border-top: hidden; border-left: hidden; border-bottom: TYPE COLOR THICKNESS; border-right: hidden; color: COLOR;}

Line 825: Change the background of the meta box

  • .meta, .metaNI {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”);}

Line 945: Change the text color of the attachment page

  • .wrapCenterAP {color: COLOR;}

Line 977: Change the toggle button

  • .toggleButton {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”);}
  • Line 991: .toggleButton:active, .toggleButton:hover {color: COLOR;}

Line 1022: Change the tabs style

  • #tabs nav {color: COLOR !important; border-bottom: TYPE COLOR THICKNESS;}
  • Line 1053: #tabs nav a:hover {color: COLOR;}

Line 1110: Change the submit button on the contact form

  • .contactButton {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”);}

Line 1121: Change the submit button on the contact form

  • .contactButton:hover {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”);}

Line 1135: Change the underline color on the contact form

  • select, .contactInput, textarea {border-top: hidden; border-left: hidden; border-bottom: TYPE COLOR THICKNESS; border-right: hidden;}

Line 1153: Change the border color on the contact form when active on field

  • .contactInput:focus, .textarea:focus {border-color: TYPE COLOR THICKNESS;}

Line 1171: Change the background of the comment meta information (MUST BE a gradient)

  • .comment-meta {background: linear-gradient(CODE);}

Line 1176: Change the background of the comment meta information from the author (MUST BE a gradient)

  • .bypostauthor footer {background: linear-gradient(CODE);}

Change the text color of the comment meta

  • Line 1186: .fn a {color: COLOR;}
  • Line 1190: .comment-metadata time {color: COLOR;}

Line 1220: Change the text color of the reply button in comments

  • .commentlist .reply a {border: COLOR TYPE THICKNESS; color: COLOR;}
  • Line 1233: .commentlist .reply a:hover {background-color: COLOR; color: COLOR;}

Line 1308: Change the comment form underline color

  • .comment-form Input, .comment-form textarea, .comment-form option {border-top: hidden; border-left: hidden; border-bottom: TYPE COLOR THICKNESS; border-right: hidden;}

Line 1327: Change the underline color of the comment form when active on field

  • .comment-form input:focus, .comment-form textarea:focus {border-color: COLOR;}

Line 1330: Change the color of the submit button 0n the comment form

  • #submit {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;}
  • Line 1341: #submit:hover {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;}

Line 1371: Change the author bio strip

  • #authourBio {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;}
  • Line 1379: .authorH2 {color:COLOR} /*Changes the text color of the author */

Line 1460: Change the Woocommerce’s checkout form

  • .checkout.woocommerce-checkout input, .checkout.woocommerce-checkout textarea, .post-password-form input, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {border-top: hidden; border-left: hidden; border-bottom: TYPE COLOR THICKNESS; border-right: hidden;}
  • Line 1475: .checkout.woocommerce-checkout input:focus, .checkout.woocommerce-checkout textarea:focus, .post-password-form input:hover {border-color: COLOR;}
  • Line 1482: .quantity, .checkout.woocommerce-checkout select {border-top: hidden; border-left: hidden; border-bottom: TYPE COLOR THICKNESS; border-right: hidden;}
  • Line 1494: #coupon_code {border-top: hidden; border-left: hidden; border-bottom: TYPE COLOR THICKNESS; border-right: hidden;}

Line 1575: Change the footer

  • footer {background: linear-gradient(CODE) | background-color: COLOR | background-image: url(“PATH_TO_IMAGE.jpg”); color: COLOR;}
  • Line 1587: .footerButton a {color: COLOR}
  • Line 1591: .footerButton a:hover {color: COLOR}

Line 1770: Place custom code here and beyond*!


*Note that the styling information will be changed upon reinstalling the theme. I recommend making a copy of the file(s) before updating/reinstalling. Unless you install the child theme via the same steps as the “Install The Theme” section but instead of extracting/using “modernsherbet.zip” extract/use “modernsherbet-child.zip” then inject your custom styles into the child theme > style.css file as listed!


**The above are some tips on code that you can change! You may change other styles and code!


***If you are wanting custom theming I do offer service request for this! Just create a ticket on my Freshdesk Support Portal for more info and quotes!