Changing font colour + size

  • trentyseb

    (@trentyseb)


    8 years, 1 month ago

    Hello everyone,

    I’m new to WordPress and having some problems changing the font colour + size of specific sections.

    1. I want to change the color of the h5 heading `.media .heading {‘ to #f39c12. I tried this several times but it didn’t work.

    2. I want to change the size of the sections with ‘Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. I tried `.media .heading + .excerpt {
    font-size: 2.5rem;` but that didn’t work either.

    I use LayersWP and Insurers Theme.

    Can someone help me please?

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 1 month ago

    Huh where is the H5 on that page? I don’t think it’s visible, at least on Chrome.

    Thread Starter trentyseb

    (@trentyseb)

    8 years, 1 month ago

    Sorry it’s on this page: http://www.kantoorhoevers.nl/nieuw/?page_id=1574

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 1 month ago

    The selector you need to use instead is:

    
#layers-widget-insurers_benefit_id-13-907 .heading

    I recommend using Chrome to figure this out. Just right click on the heading and press “Inspect”. A toolbar will appear with the CSS of that heading to the right-hand side and the HTML to the left. The CSS is what you’re looking for.

    Thread Starter trentyseb

    (@trentyseb)

    8 years, 1 month ago

    I am using Chrome & firebug.

    I tried using this code: #layers-widget-insurers_benefit_id-13-907 .heading {color: #f39c12;}

    But it didn’t affect the color

    For the font size it worked: #layers-widget-insurers_benefit_id-13-907 .heading {font-size: 30px;}

    Am I doing something wrong?

    • This reply was modified 8 years, 1 month ago by trentyseb.
    • This reply was modified 8 years, 1 month ago by trentyseb.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    8 years, 1 month ago

    The colour is applied to the anchor tag, not to the heading. Try:

    
#layers-widget-insurers_benefit_id-13-907 .heading a
    Thread Starter trentyseb

    (@trentyseb)

    8 years, 1 month ago

    Still not working..

    /* Enter Your Custom CSS Here */

#footer p {font-size: 18px;}

body {font-size: 21px;}

.menu-item a {
font-size: 16px!important;
}

#layers-widget-insurers_benefit_id-13-907 .heading a  {color: #f39c12;} 

#layers-widget-insurers_benefit_id-13-907 .heading {font-size: 30px;} 

.media .heading + .excerpt {
    font-size: 1.4rem;

    This is how my custom CSS looks like right now.

    Is it possible that LayersWP is overwriting custom CSS?

    Thread Starter trentyseb

    (@trentyseb)

    8 years, 1 month ago

    I found this in the page source.

     body { font-family: "ABeeZee", Helvetica, sans-serif;} 

 h1,h2,h3,h4,h5,h6, .heading { font-family: "ABeeZee", Helvetica, sans-serif;} 

 .header-site nav.nav-horizontal .menu li { font-family: "ABeeZee", Helvetica, sans-serif;} 

 button, .button, input[type=submit] { font-family: "ABeeZee", Helvetica, sans-serif;} 

 .header-site.invert .nav-horizontal > ul > li:hover > a, .header-site .nav-horizontal > ul > li:hover > a { color: #f39c12;background-color: #ffffff;border-color: #f39c12;} 

 .header-site.invert .nav-horizontal > ul > li > a, .header-site .nav-horizontal > ul > li > a, .header-search a { color: #757575;border-radius: 4px;} 

 .header-site.invert .sub-menu li a, .header-site .sub-menu li a { color: #808080;background-color: #ffffff;} 

 .header-site.invert .sub-menu li:hover a, .header-site .sub-menu li:hover a { color: #a6a6a6;background-color: #e5e5e5;} 

 .header-site.invert .sub-menu li, .header-site .sub-menu li { border-color: #ffffff;} 

 input[type="button"], input[type="submit"], button, .button, .form-submit input[type="submit"] { background: #f39c12;border-width: 0px;border-radius: 0px;} 

 input[type="button"]:hover, input[type="submit"]:hover, button:hover, .button:hover, .form-submit input[type="submit"]:hover { background: #ffbf35;} 

 .invert input[type="button"], .invert input[type="submit"], .invert button, .invert .button, .invert .form-submit input[type="submit"] { border-width: 0px;border-radius: 0px;} 

 .header-site, .header-site.header-sticky { background-color: #ffffff;} 

.footer-site {background-color: #808080;}

.title-container {background-color: #a2c661;}

.title-container .title .heading,nav.bread-crumbs a {color: #a2c661;}

nav.bread-crumbs a:hover,nav.bread-crumbs li {color: #bed790;}

.title-container .title div.excerpt {color: #a2c661;}

    Is it possible that this code is stronger than the custom css I tried to use?

    • This reply was modified 8 years, 1 month ago by trentyseb.
Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Changing font colour + size’ is closed to new replies.