how to guide?

Hi there! This is the relevant custom CSS that other site is using – you can see it yourself by looking at the browser source for their site:

.main-navigation {
  background-color: #757575;
  border-bottom: 2px solid #757575;
}
.nav-menu > li > a:after {
  color: #555;
  content: " \2022";
  margin-left: 1em;
}
.jetpack-testimonial .entry-title {
  color: #69c;
}
.page .entry-title{
  font-size: 3.3rem;
  color: #000;
}

Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.

An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

Kathryn- If I use Jetpack and do the style sheet editor will that work across the site or do I have to change it for each page/post I create?
Thank you

Custom CSS via the Jetpack custom CSS editor will apply to your entire site, unless you’re intentionally only targetting a specific page or post with your CSS.

all right wish me luck lol

Good luck! ??

well you rock it worked so slick and looks amazing only all the hot links are pink. lol so before you said all I had to do was look at the browser source for their site but I dont know how to do that. Also if I have a color code from say Canva I want to use do I just replace the for the pink color code?
Thanks again

There was no custom link colour on the other site.

To target the link colour, you’ll need to add new styles for each element you want to target.

Here is an example of how to change the colour scheme in Sela from bright pink to turquoise. You can of course change the 494949 colour to your own colour code. Some of these elements may already be covered by your existing custom CSS, but this will make sure no elements are missed:

.nav-menu > li > a:after {
        color: rgba(0, 0, 0, 0.3);
    }
.main-navigation a, .social-links ul a:before { color: #494949;}
.menu-toggle, .menu-toggle:hover, .menu-toggle:focus { color: #494949;}
.main-navigation.toggled ul ul, .main-navigation.toggled ul ul a { color: #494949;}
.site-info a { color: #FFFFFF;}
.main-navigation a:hover, .main-navigation ul > :hover > a, .main-navigation ul > .focus > a { color: #494949;}
.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a { color: #494949;}
.main-navigation li.current_page_item > a .sub-menu li a, .main-navigation li.current-menu-item > a .sub-menu li a, .main-navigation ul ul li.current_page_item > a, .main-navigation ul ul li.current-menu-item > a { color: #4F4F4F;}
body { background-color: #f0f0f0;}
.main-navigation, button { background-color: #74ccd1;}
a, .entry-title a:hover, .comment-meta a, .jetpack-testimonial .entry-title { color: #2B797C;}
.widget_flickr #flickr_badge_uber_wrapper td a:last-child, .widget-area .milestone-countdown .difference { color: #2B797C;}
.main-navigation ul ul a:hover, .main-navigation ul ul > li.focus > a { color: #2B797C;}
input[type="button"], input[type="reset"], input[type="submit"], #infinite-handle span { background-color: #2B797C;}
input[type="text"]:focus,
            input[type="email"]:focus,
            input[type="password"]:focus,
            input[type="search"]:focus,
            input[type="url"]:focus,
            textarea:focus { border-color: #2B797C;}
.social-links ul a:before, .footer-widget-area button { background-color: #74CCD1;}
.site-info a:hover { color: #74CCD1;}
.footer-widget-area a:hover { color: #297679;}

ok this worked except that it turned the header that we turned grey turquoise what should I delete to get the grey back. It almost looks like its siting on top of the grey.

I meant to say menu not header
sory

ignore my last two because I figured it out!!!! boy did that feel good lol
so next question what is the font that is used for the theme ??

Hi, there are a couple fonts. This is the font stack for the title, post and page titles.

"Oswald",sans-serif

this is the font stack used for body text, menu and sidebar widget content and titles.

"Source Sans Pro",Arial,sans-serif