Adding a graphic in the space beside the title and tag line in the button the

• 

  kellimcknight · Member · Dec 15, 2015 at 10:46 pm

  • Copy link
  • Add topic to favorites

  I’d love to customize the Button theme on my site by adding a small graphic icon in the space on either side of the tagline and title. Is this possible? If so, how hard….I’m not skilled at CSS. Like at all!

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

• 

  thesacredpath · Member · Dec 16, 2015 at 7:53 am

  • Copy link

  Hi @kellimcknight, do you happen to have the images uploaded to your media library? If so, give us the links to them and we can see what we can do with them.

• 

  kellimcknight · Member · Dec 16, 2015 at 2:17 pm

  • Copy link

  Yes I do. I’d like the books on the left and typewriter on the right. Smaller than what they uploaded though….Currently I have the books at the top which was all I could figure out. If we can work the other, I’d take that down of course. Thanks.

  

  

• 

  thesacredpath · Member · Dec 16, 2015 at 10:31 pm

  • Copy link

  Hi there, let’s try this. I’ve used a Media Query to limit this to 900px and wider screens/windows as that is about as wide as we can go with the two images and the title/tagline. Below 900px in width, things revert back to the original with the books above the title. See what you think.

  @media screen and (min-width: 900px) {
    .site-title:before {
      content: url("https://thestoryplaceblog.files.wordpress.com/2015/12/noun_57740-e1450214649993.png");
      display: inline;
      position: relative;
      top: 80px;
      right: 10px;
    }
    .site-title:after {
      content: url("https://thestoryplaceblog.files.wordpress.com/2015/12/noun_160854-e1450214374618.png");
      display: inline;
      position: relative;
      top: 80px;
      left: 20px;
    }
    .site-logo-link {
      display: none;
    }
    .site-branding {
      position: relative;
      top: -50px;
    }
  }