A few CSS requests on Candela theme

• 

  lilmisssynn · Member · Feb 6, 2016 at 1:59 am

  • Copy link
  • Add topic to favorites

  Hi, I’m working with Candela lilmisssynnblog.com and I have a couple of CSS questions.

  1. In my main menu, how do I change the font type to something separate from my site/title font, as well as making it capitalize only?

  2. How do I make all the titles on my posts or pages to be centered?

  3 Backgrounds: I realize the color pallet I chose allows for certain backgrounds to become available, is there something I can do to see all the backgrounds available instead of the flipping through pallet?

  4. Is there a CSS code that will make my tag line slide into the blog upon landing?

  Thanks
  Synn

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

• 

  thesacredpath · Member · Feb 6, 2016 at 4:16 am

  • Copy link

  Hi Synn,

  1. In my main menu, how do I change the font type to something separate from my site/title font, as well as making it capitalize only?

  .site-primary-menu a, .site-primary-menu a:visited {
      font-family: "open sans", sans-serif;
      text-transform: none;
  }

  2. How do I make all the titles on my posts or pages to be centered?

  This will center all post and page titles.

  .entry-title, .entry-title a {
      text-align: center;
  }

  3 Backgrounds: I realize the color pallet I chose allows for certain backgrounds to become available, is there something I can do to see all the backgrounds available instead of the flipping through pallet?

  I’m afraid you will have to flip through them. There is not a way to view all of them on one page.

  4. Is there a CSS code that will make my tag line slide into the blog upon landing?

  First, the caveat: Internet Explorer below version 10 does not support animations and since we have to use a negative text-indent to move the site description off the page so that we can slide it in, those on version 9 or earlier will not see your site description at all since it is 5000px to the left of its original position. There isn’t a way in CSS to say, don’t do this on IE 9 or earlier. I will note that IE8 and IE9 use is under 2% worldwide, and just at 2% in the US, and falling.

  #page {
  	overflow: hidden;
  }
  .site-description {
  	text-indent: -5000px;
  	-webkit-animation: slide 2s forwards;
  	-webkit-animation-delay: 1s;
  	animation: slide 2s forwards;
  	animation-delay: 2s;
  }
  
  @webkit-keyframes slide {
  	100% { text-indent: 0; }
  
  @keyframes slide {
  	100% { text-indent: 0; }
  }

• 

  lilmisssynn · Member · Feb 14, 2016 at 1:23 pm

  • Copy link

  Thank you soo much! One more if you don’t mind.

  How do I create my main menu like the Candala demo menu?

  And add extra social media icons as on the demo. I have tried to follow the wordpress directions on this and I can’t seem to make it happen.

• 

  thesacredpath · Member · Feb 15, 2016 at 6:54 am

  • Copy link

  For your main menu, I see that you have created 3 menus. One for social links and then two more, one of which you have set as your “primary” menu. Is this solved?

  For the social menu, if you go to the Candela Demo Site and click on the button to view the social menu, you will see the social services that Candela supports.

  I notice you have Quora as one of your social menu items. Although that is not supported, if you get a 64px square icon image for Quora from somewhere on the internet and upload it to your media library, I can work out the CSS to add it to your Quora social Media menu item.