Tagged: entry-title, hierarchy of specificity, page, post, targeting
- This topic has 4 replies, 2 voices, and was last updated 8 years, 4 months ago by
AJFrane.
| Author | Posts |
|---|---|
 AJFrane
December 15, 2015 at 10:38 pm
|
I have questions so basic that google searches are incapable of finding me answers, so I’m hoping to contact actual humans to see if they can help me. I’m just using Microthemer for the first time. Literally. I installed the free version, and I’m trying to create my first selector. I LOVE the fact that I can decide how global I want this customization to be, however I don’t know the terminology of the targeting gradient. What is the difference between these: Thanks for you help! |
 Sebastian
December 16, 2015 at 10:05 am
|
Good question! This doesn’t look like the type of CSS selector that Microthemer generates via the selector wizard. Is this a selector used in your theme? Not that it really matters. So the difference between this:
And this:
Is that the first selector stipulates that the h1 (Heading 1) element must have a class (indicated by the dot) of entry-title. The selector will not affect any h1 elements that don’t have a class of entry-title. The second selector will affect h1 elements regardless of any classes they might have. In both cases, the selectors only apply to h1 elements inside header elements that have a class of entry-header – because header.entry-header comes before the h1 bits, separated by a space. I’m tantalisingly close to finishing a beginners tutorial on CSS and responsive design that provides some basic info about reading CSS selectors. Please sign up to our newsletter if you’d like to be notified when it’s ready. In the meantime, you might find this CSS selector tutorial by Mozilla useful. I hope that helps! |
|
AJFrane
December 16, 2015 at 10:14 pm
|
Hmm. Well, so I guess “entry-title” is something specific to my theme (2013). I understood the hierarchy of specificity, but since I don’t know which things are “entry-title” I don’t know what will be affected. I _think_ I figured out how to go back and edit the selector, so I can just mess around until I’m getting it to affect what I want it to. For all I know those two levels are functionally identical for my site. Is there a way to edit the selector to have it open up the wizard again to see all of the options? So far I’ve had to pretend I’m making a new one on the same object to see the available selection levels, then copy the one I want to try changing my old one to. Otherwise, it expects me to… have all of the possible selection levels memorized? Surely there’s a way to get back to the selector wizard for _editing_ purposes, not just for “create new”. Thanks for your prompt help! |
|
Sebastian
December 17, 2015 at 11:22 am
|
Hey, I recommend using a browser inspector to view the HTML on the page. Just right-click something and choose Inspect Element to reveal the underlying HTML of right-clicked element. This will involve reading HTML of course, but I get the sense that this is something can get to grips with. My responsive tutorial (due soonish) explains how to use a browser inspector if you struggle. Regarding your question about editing existing selectors via the selector wizard. I would like to add this feature. One of the reasons I haven’t yet is that it introduces some problems. The selector suggestions in the wizard consider the single HTML element that was double-clicked. But the chosen suggestion might apply to multiple HTML elements. Information about which single triggering HTML element was double-clicked is lost once the selector is created. I don’t think it would be wise to try to store this information. But then there is a point of reference problem. Which HTML element should the CSS selector suggestions revolve around? This will need to be dealt with in a satisfactory way. |
|
AJFrane
December 18, 2015 at 3:51 pm
|
Interesting issue about re-accessing the selector wizard. Makes that initial selection so important. Then again, my workaround worked okay, so I guess I’ll continue using that when I need to. Or maybe I’ll take screen shots of each one and save it just until the selector is working the way I want it to. I’m reasonably familiar with basic html, but a lot of the css stuff is more new to me. I used the inspector feature in Firefox frequently to decipher the html behind our webstore to customize the appearance (look at the html, go look for it in the convoluted editing interface, change stuff, see if it worked, etc). That’s a good idea for this too. Thanks! |
