ResultFlow Knowledge Base
Space shortcuts
Page tree
Skip to end of metadata
Go to start of metadata


Customize CSS


While the clone does set up all other elements of the blog, it does not currently add the CSS. In this step you'll add the standard CSS, which you or a designer can update at a later time to make the site more like your own brand. 

Click "Appearance"

Click "Customize"



Scroll down the left frame

Click on "Additional CSS"


Copy & Paste CSS


Copy & Paste the CSS and click Publish.

SuperBlog CSS Code

CSS 
/*
You can add your own CSS here.
Click the help icon above to learn more.
*/
/* Site container */
.site-container {
    /* this is for outside frame */
    border: 1px solid #000;
    margin: 60px auto;
    margin-top: 20px;
}
/* Header */
.site-header {
    background: #fff;
    /*border-top: 0px solid black;*/
    border-bottom: 0px solid black;
}
/* Anchors */
/* anchor link*/
.news-pro-blue a {
    color: #AAAAAA;
}
/* hovers*/
.news-pro-blue .entry-title a:hover, 
.news-pro-blue .footer-widgets a:hover, 
.news-pro-blue .site-footer a:hover  {
    color: #AAAAAA;
}
/* Nav - Footer */
/* social icons in menu*/
li.social-icon i {
    font-size: 16px;
}
li.social-icon.menu-item,
.genesis-nav-menu .menu-item.social-icon {
    float: right;
    margin-right: 0 !important;
}
li.social-icon.menu-item a {
    border-right: none !important;
    border-left: 0px solid #fff;
    margin-right: 0 !important;
}
.menu-primary  {
   background-color: #555555;
}
/* nav bar - footer - background and text color */
.genesis-nav-menu {
   /*border-top: 0px solid #ff0000;
   border-bottom: 2px solid #000;*/
   background-color: #555555;
}
.site-footer  {
    background-color: #555555;
    color: #FFF;
    /*border-top: 50px solid yellow;
    border-bottom: 50px solid red;*/
}
/* nav - footer controls border spacing, color, padding */
.genesis-nav-menu a {
    border-right: 0px solid #555555;
    display: block;
    padding: 15px 25px;
    position: relative;
    margin-right: -4px !important;
     
}
/* nav - controls float right adjustment */
.genesis-nav-menu .menu-item {
    display: inline-block;
    text-align: left;
    margin-right: 0px;
    border: none;
}
/* nav menu items */
.genesis-nav-menu .menu-item a {
    text-transform: capitalize;
    font-weight: normal;
    font-size: 16px;
    color: #fff; 
/* text-transform can also be lowercase, uppercase */
}
.news-pro-blue .site-footer a {
    font-weight: normal;
    font-size: 16px;
    color: #fff;
}
.news-pro-blue .genesis-nav-menu .current-menu-item a, 
.news-pro-blue input:hover[type="submit"] {
    /*  this is the color of the selected item in the menu bar */
    color: #fff;
    background-color: #555555;
    font-weight: bold;
}
/* this is the color of drop-down menu */
.genesis-nav-menu .sub-menu a {
    background-color: #555555;
}
/*nav - footer  hovers */
.genesis-nav-menu .menu-item a:hover,
.news-pro-blue .genesis-nav-menu .current-menu-item a:hover, 
.news-pro-blue .site-footer a:hover {
    /* this is the color when pointed by the mouse in the menu item*/
    color: #AAAAAA;
    background-color: #555555;
    font-weight: bolder;
}
body {
    background-color: #f6f5f2;
    color: #111;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.625;
}
a img {
    margin-bottom: 0px;
}
/*Customize Key Points, Quote, and Font Awesome CSS Bullets */
p#takeawayheader {
    color: #0074D9;
    font-size: 28px;
    font-weight: 800;
    left: -11px;
    line-height: 30px;
    margin: 0;
    padding: 5px 10px 15px 15px;
    position: relative;
    text-shadow: 1px 2px 1px #d9d9d9;
    text-transform: capitalize;
    top: -5px;
    font-style:italic;
}
 
#takeaways > ul {
    float: left;
    padding-left: 3.5%;
    width: 100%;
    margin-top: 20px;
    margin-left: 0;
 
}
 
div#keypoints {
  margin-left: 2em; margin-top: 0.5em;
}
 
ul#takeaways li {
    list-style-type: none;
}
 
li#takeaway1, li#takeaway2, li#takeaway3{
     padding-left: 1.3em;
}
 
li#takeaway1:before, li#takeaway2:before, li#takeaway3:before {
  content: "\f14a"; /* Put Your FontAwesome Unicode Here*/
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
  color: #0074D9;
}
 
p#quote {
  background-color: #86b6e0;
  padding: 1em;
  margin-top: 0.5em;
  font-style:italic;
  color: #000000
}



Close Customizer


Click on "X"


After CSS


Once you update the CSS your site menu should look more like this.

If you are familiar with CSS you can update the site to be more with your branding colors as well.


CSS Rich Summary Formatting


Aside from the menu formatting, the CSS includes the ability to customize the way parts of your Rich Summaries appear.

You can change the Key Takeaways header, bullets with Font Awesome, and format the quote with background color or font faces.


Quick Overview


In a separate post you'll have a more indepth tour, but here are a few highlights.

1 & 2) Call to Action (CTA) Opportunities. You control these banners in the AdRotate plugin.

3) A link to your main site - you can update in the menus section.


Quick Overview


These items can be updated in the Menu settings.

4) Links to the Features Category where you can write your own content.

5) Links to Rich Summary Category, the posts that are produced by Pro

6) Links to your Social Media.



7) Home Middle Left widget is set to show more posts from the Features Category

8) Home Middle Right widget is set to show more posts from the Summary Category

9) Primary Side widget shows other posts not previously shown.


Your Footer


10) You can update the Footers 1-6 in Widgets.

11) The Footer Text is in Genesis > Simple Edits


Delete Sample Posts


Once you've finished looking through the site - you can delete the sample posts.

Click on "Posts"

Click on "All Posts"



Select "All"

Choose "Move to Trash"

Click on "Apply"


Your SuperBlog is now Cloned


Now you'll want to step through each of the settings, to make the site your own. 


Now work your way through the left menu bar and update your settings.

Just a few of the first things to change …
Settings > General > Email Address – update this to your email address so you receive all notices from your site.


Add your email to WordFence > Options -- to receive updates and warnings.


Insights Google Analytics – UA Code


Delete any cloned sample posts & pages (if not completed before)


Under Appearance update:

  • Name
  • Header Image
  • Background Color or Image
  • Menu Names, Store Link & Social Links
  • Widgets for your Home Page.
  • Widgets for Primary Sidebar will appear sitewide.

If you get an AdRotate Error: AdRotate has detected one issue that requires your attention – simply log in via FTP or Cpanel a folder called /banners/ inside of your /wp-content/ folder. I recommend also putting a placeholder default file in there to keep your directory private.


Quick Featured Images for Genesis puts that “featured” image as the first image on your post.


In YOAST you can set up default images for Social for the Open Graph Settings - be sure to remove and replace the default image with one of your own.


Powered by StepShot

  • No labels