Can't find the selecotr for…

• 

  giadita · Member · Oct 7, 2016 at 1:39 pm

  • Copy link
  • Add topic to favorites

  Dear all, I am no expert on coding but I am enjoying customizing my website a lot and so far I’ve been able to make a few changes. I am try to get good at fiding the right selectors but now I find my self stuck since I ahven’t been able to find the two following selectors:

  1. In HP: the fine lines before and after the Site Description Text (the line above has a thicker blue chunk in the center)
  2. In post pages the line with the yellow circle in the middle. Is the one that tells if the post is an Image post or Default one in post pages.

  I hope this is a good description of what I need. I wish I could upload images instead. Hopefully this help request is not too messy.
  Thanks!

  G

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

• 

  innisfreehomestead · Member · Oct 7, 2016 at 3:01 pm

  • Copy link

  Hello G!

  I’ve used the chrome inspect tool to find the code and this is what I’ve come up with:

  1)

  /* Blue box on top line */
  .banner-custom-header .site-banner-header h1:before {
  	background-color: #678db8;
  	content: "";
  	display: block;
  	height: 8px;
  	left: 50%;
  	margin: -4px 0 0 -60px;
  	position: absolute;
  	top: 0;
  	width: 120px;
  }
  /* Grey Lines (can seperate into two to target each individually) */
  .site-banner-header:before, .site-banner-header:after {
  	border-top: 1px solid rgba(255,255,255,0.5);
  	content: "";
  	display: block;
  	margin: 0 auto;
  	position: absolute;
  }

  2)

  /* Yellow circle icon */
  .is-singular .entry-inner:before, .error404 .entry-inner:before, .page-template-eventbrite-index .page-header:before, .single-event .entry-header:before {
  	color: #fff;
  	content: "f100";
  	font-size: 2.5rem;
  	line-height: 36px;
  	margin: -18px 0 0 -18px;
  	text-align: center;
  	width: 36px;
  	z-index: 4;
  }
  
  /* Yellow circle icon background */
  .is-singular .entry-inner:after, .error404 .entry-inner:after, .page-template-eventbrite-index .page-header:after, .single-event .entry-header:after {
  	background: #e7ae01;
  	border-radius: 30px;
  	height: 36px;
  	margin: -18px 0 0 -18px;
  	width: 36px;
  }
  
  /* Grey line */
  .is-singular .entry-content:before, .error404 .entry-content:before {
  	border-top: 1px solid #e0e0e0;
  	content: "";
  	display: block;
  	left: 25%;
  	position: absolute;
  	right: 25%;
  	top: 0;
  }

  Hope that helps!
  Sage

• 

  giadita · Member · Oct 10, 2016 at 9:01 am

  • Copy link

  Hi Sage,
  thank you so much for your help. Your entries were right. I still have to understand how do I make sure I am inspecting the right element on the page but with a few attempts, i managed to modify those elements and a few more.
  Thanks a lot!!

• 

  innisfreehomestead · Member · Oct 10, 2016 at 3:14 pm

  • Copy link

  That’s great to hear, G, thanks for letting me know!

  It can take a little bit to learn how to target everything (the code in particular was rather hidden, not where one might expect it to be) but once you get the hang of it, the inspector is a fantastic tool :)