Basic CSS changes

• 

  gemsadministrator · Member · Sep 1, 2022 at 8:13 am

  • Copy link
  • Add topic to favorites

  Hello,

  I wondered if anyone could help me with some CSS to change:

  1. The Menu navigation text to be purple (#7e3b90) and hover orange(#f8af5b)
  2. The ‘category’ to be orange (#f8af5b)
  3. I’d like to increase the size of the article title fonts myself for both the feature articles and the posts list underneath.
  4. I’d like to make the button ‘older posts’ look nicer – perhaps jut a block purple colour (#7e3b90)

  The blog I need help with is: (visible only to logged in users)

• 

  thomasjvu · Member · Sep 2, 2022 at 11:16 pm

  • Copy link

  Hi there,

  I’ve created some CSS customizations for your website below that you can add to your website if you have one of the WordPress.com Premium, Business, or eCommerce plans.

  /* for the Navigation Menu */
  ul#primary-menu a {
  	color: #7e3b90;
  }
  
  /* for the Navigation Menu (Hover) */
  ul#primary-menu a:hover {
  	color: #f8af5b;
  }
  
  /* for the Featured Posts title*/
  div#featured-content.featured-content h1 {
  	font-size: 30px; /* change to your preferred pixel size */
  }
  
  /* for the Post Lists titles */
  main#main.site-main h1 {
  	font-size: 30px; /* change to your preferred pixel size */
  }
  
  /* for the Older Posts button */
  #infinite-handle span {
  	background: #7e3b90;
  	border-radius: 5px;
  }
  
  #infinite-handle span button {
      color: #fff;
      background: #7e3b90;
  }

  You should be able to add additional CSS by going to go to Appearance → Customize → Additional CSS, more instructions here: https://wordpress.com/support/editing-css/

  I hope that this helps!

• 

  gemsadministrator · Member · Sep 5, 2022 at 3:48 am

  • Copy link

  This is great, thanks so much.

  Just one more: How can I change the colour of the text on the ‘categories’ of each post? It would be great to have each category set as a block colour background?

• 

  gemsadministrator · Member · Sep 5, 2022 at 3:48 am

  • Copy link

  This is great, thanks so much.

  Just one more: How can I change the colour of the text on the ‘categories’ of each post? It would be great to have each category set as a block colour background?

• 

  thomasjvu · Member · Sep 5, 2022 at 3:16 pm

  • Copy link

  Hi there,

  I’m glad I could help. If you’re referring to the category meta that is shown on top of each post’s title, this code block should provide a modern style.

  /* for post categories */
  #content .entry-header .entry-meta a {
    background: #000; /* change to your preferred bg color */
    color: #fff; /* change to your preferred text color */
    padding: 5px; 
    border-radius: 5px;
  }

  I hope this is helps!