How to Designate Sidebar Images as "my-button" CSS Class
-
Hello!
I’m curious if it’s possible to designate sidebar images, as “my-button” CSS class. I’m getting all my stuff going lower opacity (for hover), but can’t address them to follow suite. Can this be done?
Thank you!!
The blog I need help with is: (visible only to logged in users)
-
-
As far as I’m aware there’s no way to assign a custom class with an image widget. And I hear you on multiple text widgets. They can get pretty cumbersome to maintain.
I don’t see the .my-button class in your theme’s stylesheet. Do you happen to have a premium plan? You can get pretty creative with selectors in CSS. If the images you want to target share a keyword in their source URL, for example, you could target img[src*=keyword] and it’ll match all images with ‘keyword’ in the image source.
If you’d like to get really creative, you can add ‘?keyword’ onto the end of the image URL. This one depends entirely on where your images are hosted, but usually that last bit will be ignored by the server while giving you something to target.
For example:
https://s.w.org/about/images/logos/wordpress-logo-stacked-rgb.png
…and…
https://s.w.org/about/images/logos/wordpress-logo-stacked-rgb.png?keyword
…return the same thing. -
Hey, Slfrsn. Those links take me to an empty (aside from the logo) WordPress.org page, so I wasn’t able to see an example.
So if I add any word of my choice, into the URL of the images I wish to designate, I can target them?
I’m on my 4th month of CSS & HTML, and (not whining, but clarifying a confused state) my 3rd round of chemo. I’m very new to design code (didn’t know CSS or HTML at all, before this site), and kind of dumb at the moment. I may require a little extra info is all I’m getting at. I apologize. It is a premium plan, by the way.
Would this be correct, after adding the word that would make those images targetable?
.img[src*=word] {
class: my-button;
} -
^And also….I realized that those links’ pages ARE the example! Sorry. Little Dumb-Dumb, at the moment. Sheesh.
-
You’re close! The idea is to take the properties from the .my-button class and place them in the selector you’ve created. It might look something like this…
img[src*=word] { color: #fff; background: #000; }Note that I’ve removed the period in front of img. The only time you need a period is when you’re targeting a class (for example, all elements that have class=”my-button” would be targeted by .my-button).
I should also mention that targeting images based on their source URLs is somewhat of a hack but we’re pretty limited in how much we can customize our themes so in this context I’d say it’s fine.
If you’d like to learn more about CSS attribute selectors, check out this article on CSS Tricks. And be sure to check out the rest of the site! It’s a great resource for learning CSS.
-
I have the word “first” at the end of the image URLs for a couple of the widget images (example of one actual URL is: https://hudsonchemicalsdotcom.files.wordpress.com/2016/02/safetyminusfirst2.png), and attempted to target them as follows:
img[src*=first] hover {
opacity: .6;
}Am I missing an element, or did I just get it wrong? I apologize if I’m a bit foggy/possibly annoying. Does the keyword need some other determining verbiage?
-
^Also wondering (when I do finally get this right) if I can repeat this code, but with different keywords to target. Or, do I need to re-add all the images I want to target with a matching/consistent keyword at the very end or something? I’m definitely too foggy to study up for a solution, at this point…Hope you’re cool with the depth of questioning, here!
-
You’re missing the colon in your hover pseudo class. And yes! You can stack selectors.
img[src*=first]:hover, img[src*=second]:hover { opacity: .6; }I should also mention that if you’re simply targeting all of the image widgets in the sidebar you could simplify if it down to the following…
.widget_image img:hover { opacity: .6; } -
That last bit is exactly what I was trying to do! Awesome…The stackability is good info to have, as well. I did check out that CSS site. Is it one of yours? The style looks similar to your profile link site. Just wondering. You’re Extremely Knowledgeable, regardless. Thanks for your assistance, slfrsn!!! I’m a little slow, for the time being, but still soaking up some know-how; here and there. :)
-
Hey, I remember what it was like starting out. Trying things and asking questions is the best way to learn :)
And CSS Tricks is run (for the most part) by Chris Coyier, a well-known guru in the web community.
-
Cool…Good stuff! I am but a lowly padawan, in that community. Lol…Thanks for your patience, and have a Great rest-of-day!
-
^Along with that, I’m plagued by some missing margin lines on my page structure; I’m wondering if you could possibly help.
The rounded corners of the pages are the only spot I can’t seem to address, with margin lines. I’ve added them to the top, bottom and sides, but don’t know how to define the corners.
Can you possibly assist, with this one? I had asked someone else, and they explained that rounded anything is hard to address because pixels are square. The lines are present, though, so I’m hoping that they can actually have margins added. Is this not so?
-
Are you referring to the white area within the grey area? Are you wanting the spacing all around that area to be even?
-
No, I actually intended the varied spacing on all sides; if that’s what you’re referring to (?). I mean the rounded turn to every page’s corners, content and main.
The margin lines I’ve added to the top, bottom and sides (of both the content and main areas) are a thin gray; increasing the presence of the base theme’s margin lines. They stop dead, right as the rounding of the corners begins, making the corners appear duller than the rest of the page’s margins; even blurred.
It’s mild, but an obvious newbie miss. I want to address them, just don’t know how. Lol…Top, bottom, left, right and ?
-
-
Just out of curiousity, what browser are you using? Some browsers render rounded borders differently. Sometimes it looks like the border stops dead at the corners because it’s being blurred to create a smooth border radius. This is especially true of grey borders (due to half-tones assisting in the antialiasing).
If I do this…
#content { border: 5px solid #ff0000; }…I see a consistent red border around the entire content area. So it could just be the thickness and colour of your border that cause it to disappear when contrasted against the background.
-
I’m using Chrome 48.0.2564.116, and also IE. The smoothing radius blur is what I’ve been noting, then! Ah…Now it all makes sense. I wondered how those rounds were so nice looking to start with, and why the borders (was referring to them as margins, previously) weren’t seeming to affect them. They’re blurred! I noticed the blur, but somehow didn’t realize it’s purpose. Thanks, again!!!
-
-
- The topic ‘How to Designate Sidebar Images as "my-button" CSS Class’ is closed to new replies.
WordPress.com Forums 
