CSS – Adelle theme

• 

  rashafawakhiri · Member · Apr 17, 2016 at 1:59 pm

  • Copy link
  • Add topic to favorites

  I have 3 questions regarding CSS for Adelle theme:

  1. What is the first part of the CSS for the Adelle theme? e.g. (footer.entry-meta)

  2. I am using Chrome dev tool but I can’t find the magnifying glass icon. I’d like to share a screenshot with you but can’t seem to do it in this forum.

  3. If I want to replace actual images of my theme (e.g. the black menu ribbon for Adelle) with another image, would I be able to do that with CSS? (or is it limited to text, borders and dimensions changes)

  Thanks.

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

• 

  thesacredpath · Member · Apr 18, 2016 at 5:12 pm

  • Copy link

  Hi there,

  1. What is the first part of the CSS for the Adelle theme? e.g. (footer.entry-meta)

  Can you give me a little more information on what you want to do with the entry meta in the post footer? It may be that a more specific CSS selector will be required for what you want to do, or some additional CSS.

  2. I am using Chrome dev tool but I can’t find the magnifying glass icon. I’d like to share a screenshot with you but can’t seem to do it in this forum.

  The easiest way to share a screenshot is to upload it to your media library on your site and then get the URL of that image and paste it here into the forum.

  . If I want to replace actual images of my theme (e.g. the black menu ribbon for Adelle) with another image, would I be able to do that with CSS? (or is it limited to text, borders and dimensions changes)

  Are you talking about the “inspect” button in the Chrome dev tool? If so, it is the square icon with the arrow pointer on the left end of its toolbar.

  Yes, on the menu the background colors are all set with CSS, with no images. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  .navigation-main {
      background: #2255ee;
  }
  .navigation-main::before, .navigation-main::after {
      border-color: #2255ee;
  }
  .navigation-main::before {
      border-left-color: #fff;
  }
  .navigation-main:after {
      border-right-color: #fff;
  }

  The first rule changes the color of the main part of the navigation bar. The second set the color of the two flag style ends and the last two rules are there to override things and add back in the white angled section to keep the flag shape, so those two you will not have to worry about, but make sure they are after the first two rules in your CSS.